GoogleChromeLabs / ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
https://visbug.web.app
Apache License 2.0
5.46k stars 286 forks source link

Color picking needs improvements #424

Closed Costas-Zeimpekis closed 4 years ago

Costas-Zeimpekis commented 4 years ago

OS windows 10 When I choose an element the color that is already set does not appear on the color panel When I change color that should change the element in real time, so I do not need to set the color see if it is the one I like and if not go trough the process again

argyleink commented 4 years ago

I agree, the behavior you describe is the intended behavior of the tool. Can you share more details about when and where this is happening to you? I did some testing on my windows machine, and here's my report:


  1. when selecting something on the page, the color picker should update and show the text color, background color and border color (unless it's an svg, which it then shows fill, stroke, etc)

I wasn't able to reproduce this issue on windows. the elements I clicked on properly updated the color panel swatches with the respective color. Are there specific types of things you're selecting? VisBug does show a transparent color if nothing is set for that element.


  1. when an item is selected and I'm selecting a new color via the picker, the element should update without needing to confirm the color

unfortunately this is a problem with the color picker input element on windows chromium. this problem does not exists on mac builds of chromium. there is active work happening on the color input, so there's a decent potential this issue get's resolved with that element update. essentially the bug is that the input element isn't emitting a change event, so visbug isn't being told there's a new color until the user presses the confirmation button in the popup. 😢 visbug prefers to lean on the system elements so the experience feels native. i'm not sure how other apps get around this ux issue 🤷‍♂

color picker on edge (proof of active work happening): color-picker-edge

color picker on chrome: color-picker-chrome

argyleink commented 4 years ago

curious if this is still happening?