1238982 - Make it possible to manage the visible command buttons using a popup on the toolbar

Status: RESOLVED WONTFIX

(DevTools :: Framework, defect)

Description

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

Attachment: toolbar-popups.png

In order to clean up the command-buttons I'd like to use something similar to iTunes's edit-panels popup. (See toolbar-pops.png for the design.)

Some of the icons will be uneditable and always remain in the same place no matter what on the dock: search at the beginning (always the first icon), and settings (always the last). Everything else can be toggled on or off.

This might also be a good candidate for React component, since we'd like to use this same sort of widget elsewhere as well.

Comment 1

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

Attachment: toolbar-pops-ux.mov

Video to show UX a little more clearly.

Comment 2

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

Summarizing some discussion from IRC regarding the search button:

The search button should continue to be panel-specific. The designs are simply updating /where/ the search bar is placed (by adding it to the toolbar, each tool has a bit more space and we end up with a very consistent searching experience). So, for example, if you are in the debugger, the search bar would have the normal debugger search commands.

The one exception (that I know of) is the Inspector: the Inspector's Rule area will continue to have its own search. The panel-specific search in that instance will only search the HTML.

Comment 3

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

Attachment: toolbar-popups.png

Comment 4

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

Note from bgrins on IRC: "we'll have to be smart about 'take screenshot' not including the popup".

Comment 5

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

Attachment: toolbar-popups.png

Comment 6

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

I'm going to close out this bug because the designs for this are changing.

Please refer to the URL in bug 1239859 for designs.