Jeff Griffiths (:canuckistani) (:⚡︎) Reporter
	Description • 9 years ago

See uservoice: 

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

	Acheron
	Comment 1 • 9 years ago

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");

	Aniket Kudale [:aniketk]
	Comment 2 • 8 years ago

I'd like to work on this!

	Acheron
	Comment 3 • 8 years ago

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.

	Aniket Kudale [:aniketk]
	Comment 4 • 8 years ago

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

	Brian Grinstead [:bgrins]
	Comment 5 • 8 years ago

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.

	Helen V. Holmes (:helenvholmes) (:✨)
	Comment 6 • 8 years ago

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.

	Aniket Kudale [:aniketk]
	Comment 8 • 8 years ago

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.

	Helen V. Holmes (:helenvholmes) (:✨)
	Comment 9 • 8 years ago

(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?

	Brian Grinstead [:bgrins]
	Comment 10 • 8 years ago

(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.

	Helen V. Holmes (:helenvholmes) (:✨)
	Comment 11 • 8 years ago

(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...

	Aniket Kudale [:aniketk]
	Comment 12 • 8 years ago

(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

	Helen V. Holmes (:helenvholmes) (:✨)
	Comment 13 • 8 years ago

(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!

	Aniket Kudale [:aniketk]
	Comment 14 • 8 years ago

(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!!

	Helen V. Holmes (:helenvholmes) (:✨)
	Comment 16 • 8 years ago

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!

	Brian Grinstead [:bgrins]
	Comment 17 • 8 years ago

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.

	Aniket Kudale [:aniketk]
	Comment 18 • 8 years ago

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!

	Brian Grinstead [:bgrins]
	Comment 19 • 8 years ago

(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)

	Julian Descottes [:jdescottes]
	Comment 20 • 8 years ago

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?

	Aniket Kudale [:aniketk]
	Comment 21 • 8 years ago

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!

	Sebastian Zartner [:sebo]
	Comment 23 • 8 years ago

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

	Aniket Kudale [:aniketk]
	Comment 24 • 8 years ago

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

	Brian Grinstead [:bgrins]
	Comment 25 • 8 years ago

(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

	Sebastian Zartner [:sebo]
	Comment 26 • 8 years ago

(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

	mitzi.akhavan
	Comment 27 • 8 years ago

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... :)

	Sebastian Zartner [:sebo]
	Comment 28 • 7 years ago • Edited

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

	Sebastian Zartner [:sebo]
	Comment 29 • 7 years ago

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

	mitzi.akhavan
	Comment 30 • 7 years ago

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!?!?!?!?!??!?!?!

	Patrick Brosset <:pbro>
	Comment 31 • 7 years ago

(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.

	mitzi.akhavan
	Comment 32 • 7 years ago

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