1491874 - pick element keyboard shortcut focuses dev tools window, not viewport

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[zotobi]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15

Steps to reproduce:

In Firefox Developer Edition 63.0b6 (64-bit) (on macOS?):

1. On any website, open the dev tools.
2. Make sure the dev tools are in a separate window, not part of the viewport window (not sidebar or bottom).
3. Click any non-link area in the website viewport to bring focus that window.
4. Hit [command+shift+c] (or the Windows equivalent) to enter "pick an element" mode.


Actual results:

The dev tools window is bought to the front and given focus. I have to click back into the viewport and then click again to select an element.


Expected results:

The viewport window should be given focus and require only one click to select an element.

Comment 2

[Patrick Brosset <:pbro>]

Some interesting reading to do in conjunction with this bug: bug 1213680, bug 1163646, bug 999568. The 2 last one aren't entirely related, but I think it's still good to have those other shortcut problems in mind when working on one.

Comment 3

[Daisuke Akatsuka (:daisuke)]

Hello! I investigated this cause a bit.

We may say the difference the behavior of OSX and Linux, Windows causes the issue. Concretely, window on Linux and Windows captures events such as mouse move on the web content area even if the window has no focus. Against that, OSX does not capture without focus. This means, in case of picking mode, on Linux and Windows, we can pick an element we want to inspect regardless the focusing, but OSX can not. Above behaviors are same as Safari and Chrome.

In order to resolve this, Safari and Chrome transfer the focus to the web content window if enter the picking mode, then we can pick easily.
Perhaps, as zotobi suggested, we also may be better transfer the focus to the content window when enter the picking mode which is caused by regardless shortcut key or button clicking.

Comment 4

[Martin Balfanz [:mbalfanz]]

Hey Daisuke. Thanks for looking into this issue!

I think we can set 2 simple rules from a user point of view on how this should behave.

#1 When the user invokes the keyboard shortcut CMD+SHIFT+C, don't switch the focus to a different window. This means that, if the user is currently in the browser window, the browser windows remains in focus. If the user has the devtools window focused and uses the keyboard shortcut, then devtools will stay focused.

#2 If the user selects an element with the element picker, then we switch the focus to devtools. This is what most people want.

Note for #1, currently the keyboard shortcut does not work when devtools is in focus. We should fix this as well :-)

Comment 5

[Daisuke Akatsuka (:daisuke)]

Hi Martin, thank you for the direction!
Okay, I'll take this bug :)

Comment 6

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 1491874: Enable Cmd+Shift+C shortcut key on the separated toolbox. r?pbro

Comment 7

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 1491874: Prevent raising the toolbox. r?pbro

Depends on D40377

Comment 8

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 1491874: Keep the shortcut key consistency of during picker mode. r?pbro

Depends on D40378

Comment 9

[Daisuke Akatsuka (:daisuke)]

Attachment: Bug 1491874: Add test the keybindings for element picker with separate window. r?pbro

Depends on D40379

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bf73cbaea2d9
Enable Cmd+Shift+C shortcut key on the separated toolbox. r=jdescottes
https://hg.mozilla.org/integration/autoland/rev/9b20b53bf18d
Prevent raising the toolbox. r=jdescottes
https://hg.mozilla.org/integration/autoland/rev/b25653ae5375
Keep the shortcut key consistency of during picker mode. r=pbro
https://hg.mozilla.org/integration/autoland/rev/e5728ddc7fac
Add test the keybindings for element picker with separate window. r=pbro

Comment 11

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/bf73cbaea2d9
https://hg.mozilla.org/mozilla-central/rev/9b20b53bf18d
https://hg.mozilla.org/mozilla-central/rev/b25653ae5375
https://hg.mozilla.org/mozilla-central/rev/e5728ddc7fac