1177108 - Add a keyboard shortcut to launch the eyedropper

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P2)

Description

[Jeff Griffiths (:canuckistani) (:⚡︎)]

See uservoice: 

https://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas/suggestions/8529127-a-shortcut-for-the-eydropper

Comment 1

[Acheron]

I would like to suggest Control E, as it's easy to reach and remember (E as in Eyedropper).

Currently this shortcut is mapped to the findbar, which has also Control K assigned.

A workaround for this missing feature is installing the keyconfig addon from: http://forums.mozillazine.org/viewtopic.php?t=72994

and applying the following lines to prefs.js in your Firefox profile folder:

//activate Developer Tools Eyedropper by pressing CTRL - E
user_pref("keyconfig.main.key_search2", "!][][");
user_pref("keyconfig.main.xxx_key2_Eyedropper", "control][E][][openEyedropper();][chrome://browser/content/browser.xul");

Comment 2

[Aniket Kudale [:aniketk]]

I'd like to work on this!

Comment 3

[Acheron]

I would also recommend to add an option to the Developer Tools config screen to enable the keyboard shortcut and have it disabled by default.

Not all users understand what this EyeDropper tool is and a regular user accidentally pressing this keyboard shortcut might consider the new behavior to be a bug.

Comment 4

[Aniket Kudale [:aniketk]]

Please assign this to me! I'd like to solve this as my first bug!

Comment 5

[Brian Grinstead [:bgrins]]

Do we still think a keyboard shortcut for the eyedropper is going to be useful?  I ask because I wonder which 'mode' would it open in..  For example:

1) if the colorpicker is opened then the eyedropper changes the selected value of the picker
2) if it isn't then it copies a color to the clipboard.

If we only supported the first use case then it may not solve the initial request (and maybe at that point we should do something like Chrome does which is have the eyedropper 'always on' when the colorpicker is opened).  If we only supported the second that could be frustrating when the colorpicker *was* opened if you were wanting to actually change the selected color but it ended up just copying to the clipboard.

Comment 6

[Helen V. Holmes (:helenvholmes) (:✨)]

Being able to access the tool via the keyboard is a good idea in my opinion. While this is a separate issue, I think it might be a good idea for accessibility reasons (and a finite number of key commands available) to consider bundling some of our command button actions together into a key command. Just a tangential thought.

I'm imagining the UX of this case would go like so:

- If the colorpicker is not open, the shortcut opens the eyedropper and does not open the colorpicker.
- If the colorpicker is open, the shortcut opens the eyedropper and does not close the colorpicker.

I'm going to attach a small video of the way Sketch does this, I think they handle it well really well.

I don't think that we should do it the way Chrome does; having the eyedropper 'always on' is a little annoying in my opinion.

Comment 7

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: eyedropper-ux.mov

Comment 8

[Aniket Kudale [:aniketk]]

Hey Helen, thanks for the video. Your user case sounds perfect! All tools have some shortcut keys but this one. I think the shortcut key would be highly useful.

Comment 9

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to knekeman from comment #1)
> I would like to suggest Control E, as it's easy to reach and remember (E as
> in Eyedropper).
Seems like this is a candidate; Brian, is there any reason why this key command wouldn't work?

(In reply to Aniket Kudale from comment #8)
> Hey Helen, thanks for the video. Your user case sounds perfect! All tools
> have some shortcut keys but this one. I think the shortcut key would be
> highly useful.
You mentioned wanting to take this bug; assuming that key command works, do you have everything you need to get started?

Comment 10

[Brian Grinstead [:bgrins]]

(In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #9)
> (In reply to knekeman from comment #1)
> > I would like to suggest Control E, as it's easy to reach and remember (E as
> > in Eyedropper).
> Seems like this is a candidate; Brian, is there any reason why this key
> command wouldn't work?

ctrl+key keyboard shortcuts are hard to get (most of them are already in use on certain platforms or by other browser features).  So if nothing else ctrl+shift+e (cmd+shift+e on mac) would be safer.  What key does Sketch use?

> 
> (In reply to Aniket Kudale from comment #8)
> > Hey Helen, thanks for the video. Your user case sounds perfect! All tools
> > have some shortcut keys but this one. I think the shortcut key would be
> > highly useful.
> You mentioned wanting to take this bug; assuming that key command works, do
> you have everything you need to get started?

The desired behavior in Comment 6 is going to be a little complex, but certainly doable.  It's worth starting - probably first by focusing on the first use case (colorpicker not open), although we should wait to land anything until both are accounted for.

Comment 11

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to Brian Grinstead [:bgrins] from comment #10)
> (In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #9)
> > (In reply to knekeman from comment #1)
> > > I would like to suggest Control E, as it's easy to reach and remember (E as
> > > in Eyedropper).
> > Seems like this is a candidate; Brian, is there any reason why this key
> > command wouldn't work?
> 
> ctrl+key keyboard shortcuts are hard to get (most of them are already in use
> on certain platforms or by other browser features).  So if nothing else
> ctrl+shift+e (cmd+shift+e on mac) would be safer.  What key does Sketch use?
Sketch rather inconveniently uses Ctrl+C... seems like that might be a confusing key command for devtools, if it's not already taken :( Let's go with your ctrl+shift+e (cmd+shift+e on mac) suggestion.

> The desired behavior in Comment 6 is going to be a little complex, but
> certainly doable.  It's worth starting - probably first by focusing on the
> first use case (colorpicker not open), although we should wait to land
> anything until both are accounted for.
Oh no! Sorry for always complicating things...

Comment 12

[Aniket Kudale [:aniketk]]

(In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #9)
> (In reply to knekeman from comment #1)
> > I would like to suggest Control E, as it's easy to reach and remember (E as
> > in Eyedropper).
> Seems like this is a candidate; Brian, is there any reason why this key
> command wouldn't work?
> 
> (In reply to Aniket Kudale from comment #8)
> > Hey Helen, thanks for the video. Your user case sounds perfect! All tools
> > have some shortcut keys but this one. I think the shortcut key would be
> > highly useful.
> You mentioned wanting to take this bug; assuming that key command works, do
> you have everything you need to get started?

Hi, Yes I have dev environment ready! waiting for the assignment of this bug to me. Thanks

Comment 13

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to Aniket Kudale [:aniketk] from comment #12)
> Hi, Yes I have dev environment ready! waiting for the assignment of this bug
> to me. Thanks

All right, you're good to go!

Comment 14

[Aniket Kudale [:aniketk]]

(In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #11)
> (In reply to Brian Grinstead [:bgrins] from comment #10)
> > (In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #9)
> > > (In reply to knekeman from comment #1)
> > > > I would like to suggest Control E, as it's easy to reach and remember (E as
> > > > in Eyedropper).
> > > Seems like this is a candidate; Brian, is there any reason why this key
> > > command wouldn't work?
> > 
> > ctrl+key keyboard shortcuts are hard to get (most of them are already in use
> > on certain platforms or by other browser features).  So if nothing else
> > ctrl+shift+e (cmd+shift+e on mac) would be safer.  What key does Sketch use?
> Sketch rather inconveniently uses Ctrl+C... seems like that might be a
> confusing key command for devtools, if it's not already taken :( Let's go
> with your ctrl+shift+e (cmd+shift+e on mac) suggestion.

We cannot go for 'ctrl+shift+e', it is already been used for grouping tabs!

I think 'ctrl+shift+z' is best solution for this, since it isn't been used for any other purpose!

I'm attaching the patch file with changes made.

- Cheers!!

Comment 15

[Aniket Kudale [:aniketk]]

Attachment: Added shortcut keys to open Eyedropper.

Comment 16

[Helen V. Holmes (:helenvholmes) (:✨)]

Comment on attachment 8715250 [details] [diff] [review]
Added shortcut keys to open Eyedropper.

Switching the review request to Brian—I think he's more familiar with the code.

Thanks for the patch!

Comment 17

[Brian Grinstead [:bgrins]]

Comment on attachment 8715250 [details] [diff] [review]
Added shortcut keys to open Eyedropper.

Review of attachment 8715250 [details] [diff] [review]:
-----------------------------------------------------------------

This is a good start.  We need a couple of other pieces here:

When the colorpicker is opened we want to trigger the eyedropper within the colorpicker as in Comment 6 (i.e. open a new tab data:text/html,<body style='color:orange'>hi</body>, inspect the body, then open up the colorpicker on the orange swatch).  There's an object here with an _openEyeDropper function that can be called: https://dxr.mozilla.org/mozilla-central/source/devtools/client/shared/widgets/Tooltip.js#1127.

As for how to pipe these two things together, we could either go from browser.js/openEyedropper level and find an active colorpicker or we could add the a key shortcut in the tooltip and prevent default behavior.  I'm inclined to go with the latter - so we'd need to then bind to the keydown handler in the Tooltip the colorpicker popup and preventDefault on that key so we don't also trigger the browser's command.  If that works, then we can expose a duplicate key through a properties file like https://dxr.mozilla.org/mozilla-central/source/devtools/client/locales/en-US/eyedropper.properties.

Comment 18

[Aniket Kudale [:aniketk]]

I don't understand this case - triggering the eyedropper within the colorpicker. Do you mean when I open the colorpicker on color swatch and press the shortcut keys, it should trigger eyedropper? I am getting a little confused here!

Comment 19

[Brian Grinstead [:bgrins]]

(In reply to Aniket Kudale [:aniketk] from comment #18)
> I don't understand this case - triggering the eyedropper within the
> colorpicker. Do you mean when I open the colorpicker on color swatch and
> press the shortcut keys, it should trigger eyedropper? I am getting a little
> confused here!

Right now in the colorpicker if you press the 'eyedropper' button then the colorpicker closes and the eyedropper opens.  Then when you select a color from the page instead of it copying to the clipboard, it sets the current color value on the CSS property.  So if the eyedropper is triggered from a keyboard shortcut while the colorpicker is opened, then it should have the same behavior (as if the button was pressed)

Comment 20

[Julian Descottes [:jdescottes]]

Inspector bug triage. Filter on CLIMBING SHOES.

Not sure about the CTRL+SHIFT+Z shortcut: it is the alternate shortcut for "Redo" (even if there is also CTRL+Y). Just tested on FF Windows and OSX and indeed CTRL+SHIFT+Z and CTRL+Y are both mapped to "Redo". 
FWIW, CTRL+SHIFT+I seems available. 

Aniket: Are you still working on this bug?

Comment 21

[Aniket Kudale [:aniketk]]

CTRL+SHIFT+I is for Toggle Tools on Windows.

I think we need to finalize the shortcut keys combination suitable for all platform.

Once finalized, I'll update and upload the patch!

Comment 23

[Sebastian Zartner [:sebo]]

Aniket, what's the status of this bug? Are you still working on it? If not, you should remove yourself as assignee, so somebody else can jump in.

Sebastian

Comment 24

[Aniket Kudale [:aniketk]]

Hi,

We still need to decide what keys combination we need for eyedropper.

Once finalized, I'll update the patch.

Cheers,
Aniket Kudale
aniket.co

Comment 25

[Brian Grinstead [:bgrins]]

(In reply to Aniket Kudale [:aniketk] from comment #14)
> (In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #11)
> > (In reply to Brian Grinstead [:bgrins] from comment #10)
> > > (In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #9)
> > > > (In reply to knekeman from comment #1)
> > > > > I would like to suggest Control E, as it's easy to reach and remember (E as
> > > > > in Eyedropper).
> > > > Seems like this is a candidate; Brian, is there any reason why this key
> > > > command wouldn't work?
> > > 
> > > ctrl+key keyboard shortcuts are hard to get (most of them are already in use
> > > on certain platforms or by other browser features).  So if nothing else
> > > ctrl+shift+e (cmd+shift+e on mac) would be safer.  What key does Sketch use?
> > Sketch rather inconveniently uses Ctrl+C... seems like that might be a
> > confusing key command for devtools, if it's not already taken :( Let's go
> > with your ctrl+shift+e (cmd+shift+e on mac) suggestion.
> 
> We cannot go for 'ctrl+shift+e', it is already been used for grouping tabs!

Is ctrl+shift+e still reserved?  The tabs group feature has been removed, so maybe we can claim ctrl+shift+e now: https://support.mozilla.org/en-US/kb/tab-groups-removal

Comment 26

[Sebastian Zartner [:sebo]]

(In reply to Brian Grinstead [:bgrins] from comment #25)
> (In reply to Aniket Kudale [:aniketk] from comment #14)
> > (In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #11)
> > > (In reply to Brian Grinstead [:bgrins] from comment #10)
> > > > (In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #9)
> > > > > (In reply to knekeman from comment #1)
> > > > > > I would like to suggest Control E, as it's easy to reach and remember (E as
> > > > > > in Eyedropper).
> > > > > Seems like this is a candidate; Brian, is there any reason why this key
> > > > > command wouldn't work?
> > > > 
> > > > ctrl+key keyboard shortcuts are hard to get (most of them are already in use
> > > > on certain platforms or by other browser features).  So if nothing else
> > > > ctrl+shift+e (cmd+shift+e on mac) would be safer.  What key does Sketch use?
> > > Sketch rather inconveniently uses Ctrl+C... seems like that might be a
> > > confusing key command for devtools, if it's not already taken :( Let's go
> > > with your ctrl+shift+e (cmd+shift+e on mac) suggestion.
> > 
> > We cannot go for 'ctrl+shift+e', it is already been used for grouping tabs!
> 
> Is ctrl+shift+e still reserved?  The tabs group feature has been removed, so
> maybe we can claim ctrl+shift+e now:
> https://support.mozilla.org/en-US/kb/tab-groups-removal

It still exists as extension, though. So, there would still be a conflict when it is installed. How about Ctrl+Alt+E?

Sebastian

Comment 27

[mitzi.akhavan]

Wow! I'm very happy that someone now look after that! I voted for that month ago @ the uservoice.com site but sadly until now nothing was done. :(

CTRL + Shift + Z would be my suggestion! In case it`s used by another feature I think there are certainly enough other free keys to manage this. ;)

Another suggestion is to implement a icon for the eyedropper into the "Additional Tools and Features" window where users can customize their toolbar. In this case everyone who really needs it could then customize his toolbar with it to get a quicker access!

You must know that a simple shortcut reduces the clicks to get the eyedropper significantly! A eyedropper is really useful thing for e.g. a webdesigners who is working on his design and searching for some inspiration on the web. I use the colorpicker very, very often e.g while developing a web template... and the fact that I always have to press ALT to open the FF menu, than move down to dev tools to get the eydropper is really anoying! In the Developer Edition of FF there is at least the option to activate the tiny little eydropper icon in the panel which is much much better than crawl through the Extras menu! Until now I don't know why this feature is only implemented in the Developer Edition of FF?

So I hope that this feature incl. a simple shortcut will soon be implemented in the new version...and thx in advance to all devs who are working on a solution... :)

Comment 28

[Sebastian Zartner [:sebo]]

Aniket, there were a few suggestions for the shortcut in the meantime:

Ctrl+Shift+E (conflicts with the Tab Groups extension)
Ctrl+Alt+E
Ctrl+Shift+Z (conflicts with redoing a deleted node in the Inspector)

If shortcuts with E are a problem, maybe one with C (for *C*olor picker) like Ctrl+Alt+C may work or Ctrl+Shift+Y (for e*Y*edropper).

So, I guess it's up to you to pick one.

Sebastian

Comment 29

[Sebastian Zartner [:sebo]]

As Aniket wasn't active on Bugzilla for more than half a year now, I think it's safe to unassign this bug again to give somebody else the chance to add this.

Regarding my previous comment, I'd vote for Ctrl+Shift+Y, or, as Tab Groups won't work anymore with Firefox 57, Ctrl+Shift+E. Ctrl+Alt+E actually conflicts with the Euro sign.

Sebastian

Comment 30

[mitzi.akhavan]

Hey guys, what's up? Two years have gone now since this discussion was sartet... and you still talk about which shortcut you might gonna use! This is a joke, isn't it!? On the very top of this thread the best solution was suggested by Acheron:

(In reply to Acheron from comment #3)
> I would also recommend to add an option to the Developer Tools config screen
> to enable the keyboard shortcut and have it disabled by default.
> 
> Not all users understand what this EyeDropper tool is and a regular user
> accidentally pressing this keyboard shortcut might consider the new behavior
> to be a bug.

To not assign another shortcut... why you don't give the user the option to choose their own shortcut!?!?!?!?!??!?!?!

Comment 31

[Patrick Brosset <:pbro>]

(In reply to mitzi.akhavan from comment #30)
> Hey guys, what's up? Two years have gone now since this discussion was
> sartet... and you still talk about which shortcut you might gonna use! This
> is a joke, isn't it!? On the very top of this thread the best solution was
> suggested by Acheron:
> 
> (In reply to Acheron from comment #3)
> > I would also recommend to add an option to the Developer Tools config screen
> > to enable the keyboard shortcut and have it disabled by default.
> > 
> > Not all users understand what this EyeDropper tool is and a regular user
> > accidentally pressing this keyboard shortcut might consider the new behavior
> > to be a bug.
> 
> To not assign another shortcut... why you don't give the user the option to
> choose their own shortcut!?!?!?!?!??!?!?!
Comments such as "this is a joke" or "why don't you just ..." won't help get this bug resolved, and will certainly not attract people to fix this bug.
Please be constructive and, if you have JS coding skills, please consider contributing yourself to this bug: https://devtools-html.github.io/
I, too, would love it if things were as simple as "just fixing" everything. Unfortunately that's not how things work.

Comment 32

[mitzi.akhavan]

Hello Patrik,

sorry for my rude statement. I dont want to put sombodys's nose out of joint. I only wanted to say that now 2 years have gone and for me it's not really understandable that people still discuss about the right shortcut. But thats only my point of view. Hope you still can understand it? Believe me... I really appreciate all the developer work and if I could easily write JS code like you all I surely would help you out or at least I would build my own FF addon to get my own shortcut. The best thing now I can do is to bring something into action again..., sorry.

Kind regards,

Mitzi

Comment 33

[onCIrcetrI]

Any update on this?

Comment 34

[juraj.masiar]

Hello from the future :)
Maybe we can mark this as good first bug to attract someone?
Until then one can use "Alt + T + B + Y" :D

Comment 35

[tsukiyomaru0]

Will this ever be brought back?

Comment 36

[bugzilla.af49e]

It would be nice to have this feature for those who do webdev work on Firefox

Comment 37

[Gaétan Fine]

Hi, is this still an issue ? I've got some spare time and I'm looking for some easy issues to start with :)

Comment 38

[tsukiyomaru0]

Yep, there's no shortcut for eyedropper at the moment.

Comment 39

[Sebastian Zartner [:sebo]]

Gaétan, I've assigned the bug to you now! Regarding my previous comment about which shortcut to choose, I'd still say Ctrl+Shift+Y. Ctrl+Shift+E is now taken by the Network panel and Ctrl+Alt+E is for the Euro sign.

Sebastian

Comment 40

[Gaétan Fine]

I have a first version working (still need tests and a bit of cleanup), but it only works when the inspector is opened, is that the desired behavior ? Or should I make it work even when it's not opened ? Because then Ctrl+Shift+Y is already the shortcut for the library.

Comment 41

[Julian Descottes [:jdescottes]]

it only works when the inspector is opened, is that the desired behavior ?

DevTools already registers too many shortcuts, so it should only work when the inspector is opened and focused.

Comment 42

[tsukiyomaru0]

The desired behavior is so it would not depend on the inspector. The idea is akin to helping artists pull out a desired color from an image they see in the browser.

Comment 43

[Julian Descottes [:jdescottes]]

(In reply to tsukiyomaru0 from comment #42)

The desired behavior is so it would not depend on the inspector. The idea is akin to helping artists pull out a desired color from an image they see in the browser.

Maybe an addon would be a better fit for this specific request? https://addons.mozilla.org/en-US/firefox/addon/colorzilla/ seems to do what you expect.

As I said, DevTools already registers too many global shortcuts. A patch adding a new shortcut which doesn't depend on DevTools being open will not be accepted.

Comment 44

[Gaétan Fine]

So, I write some tests and submit a patch, making it available only when the inspector is opened. Does that seem good to you ?

Comment 45

[Julian Descottes [:jdescottes]]

(In reply to Gaétan Fine from comment #44)

So, I write some tests and submit a patch, making it available only when the inspector is opened. Does that seem good to you ?

Sounds good, thanks!

Comment 46

[Gaétan Fine]

Attachment: Bug 1177108 - [devtools] Add shortcut to eyedropper. r=jdescottes!

Comment 47

[Gaétan Fine]

Attachment: Bug 1177108 - [devtools] Merge the eyedropper+searchbox shortcut. r=jdescottes!

Comment 48

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/574a9c54e77c
https://hg.mozilla.org/integration/autoland/rev/2ee633308b91
[devtools] Add shortcut to eyedropper. r=jdescottes,devtools-reviewers

Comment 49

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/20dc0130e0bf
https://hg.mozilla.org/integration/autoland/rev/427bc623f84e
Revert "Bug 1177108 - [devtools] Add shortcut to eyedropper. r=jdescottes,devtools-reviewers" for causing dt failures @ browser_inspector_highlighter-eyedropper-keyboard-shortcut.js

Comment 50

[amarc]

Backed out for causing dt failures

• Backout link
• Push with failures
• Failure Log

Comment 51

[Julian Descottes [:jdescottes]]

Ah slightly bad timing, this landed right after Bug 1980576 landed, which introduced breaking changes for the test.

Comment 52

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/fa7bb621eb26
https://hg.mozilla.org/integration/autoland/rev/1e8cb4dd91bf
[devtools] Add shortcut to eyedropper. r=jdescottes,devtools-reviewers

Comment 53

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/1e8cb4dd91bf

Comment 54

[Sebastian Zartner [:sebo]]

A bit late, though maybe it can be added to the release notes at https://www.firefox.com/en-US/firefox/143.0/releasenotes/ and maybe https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/143.

[Why is this notable]: Long requested webdev feature
[Affects Firefox for Android]: no
[Suggested wording]: When the Inspector is focused, you can now launch the eyedropper to pick a color via the keyboard shortcut Ctrl+Shift+Y.
[Links (documentation, blog post, etc)]: none I know of, should probably be added to https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/inspect_and_select_colors/index.html and https://firefox-source-docs.mozilla.org/devtools-user/keyboard_shortcuts/index.html.

Comment 55

[Ryan VanderMeulen [:RyanVM]]

Added to the Fx143 relnotes. Sorry for the delay.