1502713 - Set focus to sidebar web extension add-on when activating by keyboard shortcut

Status: NEW

(WebExtensions :: Frontend, defect, P3)

Description

[aafn]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0

Steps to reproduce:

Navigate to a web page.
Use an add-on with sidebar, like mine https://addons.mozilla.org/en-US/firefox/addon/bookmark-search-plus-2/ (BSP2)
De-activate it by whatever mean you want (i.e get the sidebar off), then re-activate the sidebar with the configured keyboard shortcut:
- Ctrl+Q in Windows
- Ctrl+Shift+B in Linux
- Alt+B in MAC
Type some keys (letters or arrows) on keyboard


Actual results:

Keys are going to the web page (scrolling if you are using keyboard arrows up and down and the web page height is bigger than the displayed part).
=> Keyboard focus remains on the web page or where it was previously


Expected results:

Keys should go to the add-on sidebar, by having keyboard focus set to the sidebar by FF.
In the example of BSP2 sidebar add-on, they would go to the search box.
This is the normal FF behavior with the native bookmark sidebar (Ctr+B). Not for add-ons :-(

Note that add-ons appear to have no way to get keyboard focus by themselves: window.focus() and <input object>.focus() do nothing.

Comment 1

[Paul_B]

Hi reporter, 

Thank you for taking the time to add this report.

I was able to reproduce it on the latest Fx Versions ( 63.0.1 Release Build/20181030165643; 64.0b5 DevEdition Build/ 20181029164536; 65.0a1 Nightly Build: 20181101100640) on Windows 7, Windows 10, MacOSX and Ubuntu 16.04, following the steps provided above. 

I'm going to add this to Toolkit: Add-ons manager for a more advised input, but if this is not the proper component feel free to change it to a more appropriate one.

Comment 2

[Trishul]

While digging the code to fix this, I found following:

Every sidebar show this._fireFocusedEvent() method is called
https://searchfox.org/mozilla-central/source/browser/base/content/browser-sidebar.js#401
Which dispatches a custom event 'SidebarFocused'
https://searchfox.org/mozilla-central/source/browser/base/content/browser-sidebar.js#320

This custom event can be received by sidebar JS and focus can be set accordingly.

window.addEventListener("SidebarFocused",() => someFunction());

As we do in history sidebar
https://searchfox.org/mozilla-central/source/browser/components/places/content/historySidebar.js#124

@aafn can you try this?

Comment 3

[aafn]

Hello @Trishul , thanks for the digging.

I checked by adding that piece of code:

window.addEventListener("SidebarFocused",
function () {
SearchTextInput.focus();
console.log("here");
}
);

and that doesn't have any effect.

As a matter of fact, the (non documented in MDN https://developer.mozilla.org/en-US/docs/Web/Events) event
doesn't even seem to fire when I press the key combination for my sidebar (although the sidebar does appear):

• no message in the browser console
• no break when I set a breakpoint on SearchTextInput.focus(); in the debugger

There must be something else somewhere preventing that event to really happen ?

Comment 4

[Trishul]

Oh my bad, the context changes :(
So the dispatched event is not received in extension context.

Comment 5

[aafn]

Ok. Let me know if there is anything else you want me to try.

Comment 6

[kesselborn]

Hey: I am running in the same problem with my extension (conex) which I want to provide a sidbar to as well.

I would like to have the sidebar always open and focus an input field via a keyboard shortcut -- ideally without closing the sidebar (so, slightly different to the original description, but perhaps this can both be enabled).

Comment 7

[ariasuni]

I think that it would be a mistake to automatically give the focus to the sidebar, because for some extensions that’s not a desirable behavior. For example, in Tab Center Reborn, we don’t want to take focus away from the user; however, we would really like to give the user a shortcut to focus the sidebar and so the filter bar (text field at the top), which we cannot do right now.

Instead, I propose a new API (that could only be triggered in response to a user action). That can be sidebarAction.focus().

Comment 8

[ariasuni]

(In reply to ariasuni from comment #7)

Instead, I propose a new API (that could only be triggered in response to a user action). That can be sidebarAction.focus().

Any thoughts on this proposition?

Comment 9

[kesselborn]

I think this would be a very good solution ... I could imagine more extension having the need to focus the sidebar on user request.

Comment 10

[Tim Weißenfels]

(In reply to ariasuni from comment #7)

Instead, I propose a new API (that could only be triggered in response to a user action). That can be sidebarAction.focus().

It should also be possible to open the sidebar and focus it automatically since
await sidebarAction.open(); sidebarAction.focus();
would not work if sidebarAction.focus() can only be called in response to a user action.

Therefore I suggest a (non-breaking) change to the sidebarAction.open() API:
Add an optional options object that has a (optional) focus flag.

Calling sidebarAction.open({focus:true}) should

• open the sidebar & focus it if the sidebar is not open yet
• focus the sidebar if it is already open

Comment 11

[L.I.A.R.]

Would be very great to API this API.
I indeed use "Bookmarks Search + 2" to compensate the lack of ability in base FF to get the parent directory of a bookmark. It would be great if the search input of this Add-On would be selected by default, so that when I open the BS2+ sidebar hitting the correct key binding, I can directly use it, ithout having to grab the mouse to switch the focus.
Pre-selecting important fields in forms is a good practice, like when you open any web page with a form, to have the first item already selected.
Wouldn't you be annoyed if, on some authentication pages, the login input text field would not be pre-selected or if on the Google/microsoft search/... main page, the search field would not be pre-selected ?
So YES please implement this new API so that Add-Ons developers can use it. Thanks :)

Comment 12

[Yo'av Moshe]

Attachment: Bug 1502713 - allow sidebar extensions to grab focus upon user action. r=mixedpuppy,emalysz

This patch allows sidebar extensions to call sidebarAction.open({focus: true}) to get the focus after opening. If the sidebar is already open, this will only give the sidebar the focus. The .open() call cannot be called without a user action.

Comment 13

[Yo'av Moshe]

I took a stab at fixing this as it is extremely annoying to have to click with the mouse inside those sidebar to give them focus, and I think that if sidebar could ask for it, we can have a much more flowy way of interacting with them.

My patch implemented the idea that Tim Weißenfels suggested - having an optional focus parameter that gives the focus to the user.

I have a feeling that are cleaner ways of doing this, but from what I've tested - this works fine and it doesn't break anything. I am also attaching an example extension that uses the new API.

Comment 14

[Yo'av Moshe]

Attachment: example-ext.zip

This is an example extension that registers two commands - "open-and-focus" and "open-only" - the former calls sidebarAction.open({focus: true}) and the latter calls sidebarAction.open() normally.

Comment 15

[Shane Caraveo (:mixedpuppy)]

We discussed this on our team a couple weeks ago (I forgot to drop the note here) and decided that the extension sidebar should behave exactly like any other sidebar in firefox.

With our builtin sidebars (e.g. history), focus is given when they are opened. However on startup and creation of a new window, focus is not given.

Currently it deviates from that behavior, so lets address that first.

Comment 16

[aafn]

Comment 15 looks good to me and would address the bug in my view, assuming that this is a more general statement of the problem,
and so that this includes opening by keyboard shortcuts as stated in this report, but also opening by selecting the sidebar in any Firefox menu/drop down, or by sidebar action from an extension toolbar icon (for example).

Comment 17

[BugBot [:suhaib / :marco/ :calixte]]

The bug assignee didn't login in Bugzilla in the last 7 months, so the assignee is being reset.

Comment 18

[Maciej Krawczyk]

Please consider allowing to focus an already open extension sidebar as well. This could be either via the new sidebarAction.focus() method or ensuring that calling the future sidebarAction.open({ focus: true ) while the extension's sidebar is already open will re-focus its sidebar.

Just focusing the sidebar on open is not enough to have a keyboard-friendly extension sidebar. The reason for focusing is to enable keyboard interactions, so the user should have the ability to focus the sidebar with a keyboard shortcut any time. Some extensions' sidebars are meant to be displayed pretty much all the time, i.e. Tree Style Tab.

Comment 19

[mprops]

+1 on a .focus() method. For instance if I use mousewheel on my open sidebar which works without a proper focus and then try to do something with the keyboard it will fail since it's not really focused, I'm forced to click somewhere inside first.