Add button for toggling DevTools

NEW
Unassigned

Status

enhancement
P3
normal
3 years ago
11 months ago

People

(Reporter: sebo, Unassigned)

Tracking

(Blocks 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

3 years ago
There should be a toolbar button added allowing to toggle the developer tools.

This button should be added by default in Firefox DevEdition, in all other versions it may be added manually.

Sebastian
(Reporter)

Updated

3 years ago
See Also: → 1302363
(Reporter)

Comment 1

3 years ago
This button may change its state depending on whether the DevTools are minimized. See bug 1178218.

Sebastian
See Also: → 1178218

Comment 2

3 years ago
There is already a devtools button which is automatically added in developer edition...

Updated

3 years ago
Component: Toolbars and Customization → Developer Tools
(Reporter)

Comment 3

3 years ago
Right, I just realized that myself. Though note that the button only opens the menu for the DevTools. To toggle them you need to click an option within that menu.

It would be great if toggling could happen in one step, e.g. by opening them immediately when clicking the button or by holding a keyboard button when clicking the button.

Sebastian
Priority: -- → P3
Blake, could you provide some mockups / ideas about how we should implement this from the UI point of view?

As mentioned in comment 2, we already have a button for devtools that is added by default in Firefox DevEdition, and in other versions needs be added manually. However, this button (a wrench icon) shows a menu with the same items of "Tools > Web Developer", plus another couple of things. If we want to have a button that when is clicked toggle directly the devtools, I think we have a potential UI / usability issues there. The scenarios I can imaging atm are:

1. Adding another button that do the job
In Dev Edition we'll end up with two similar buttons (also, which icons we should use for each of them?) added by default.

2. Adding another button, but linked to the wrench button (see bookmarks' button)
We mimic the bookmarks' button, where we have a star's button and a menu's button. Here we'll have a wrench's button (that toggle the devtools, and a menu's button (with the same icon of the bookmark's one) that will show the menu.

3. We change the functionality of the wrench button
Instead of open the menu – that can still be accessible mostly on "Tools > Web Developer" – on onclick we'll toggle the devtools directly.

Notice that the button that toggle the devtools could also have in future a different state based on the feature discussed in bug 1178218.
Assignee: nobody → zer0
Status: NEW → ASSIGNED
Flags: needinfo?(bwinton)
I've added this request to the priority queue at https://people-mozilla.org/~bwinton/devtools/ and will add it in the appropriate place as soon as Bryan and Patrick get back to me.  :)

In the meantime, I can say that as far as I know no other button does something different when you click it while holding down a key, so we probably shouldn't do that.  ;)

I'm also not a huge fan of adding another button to just toggle the devtools.  Both because it seems a little redundant, and because there's no reason to stop there.  Why not one to open the Scratchpad, or the Web Console, or the Debugger?

The second option seems okay to me, but note that the bookmarks menu, when placed in the main menu, turns into just a menu button and doesn't let you bookmark a site with one click, so perhaps that would be a not terrible idea.

The third option doesn't seem so great.  Many people don't use the menus (if I'm remembering the stats correctly), and they're not even displayed by default on Windows, so hiding our functionality behind them seems like a bad idea.

Finally, I'm not totally convinced that we should have a 'Toggle DevTools' button.  People who are that invested in opening and closing it quickly can use Ctrl-Shift-I (or Cmd-Shift-I on Mac), so perhaps we should just not do this…

Anyways, I'm sure there will be more details to come after we hire an actual designer.  ;)
Flags: needinfo?(bwinton)
(Reporter)

Comment 6

2 years ago
(In reply to Blake Winton (:bwinton) (:☕️) from comment #5)
> In the meantime, I can say that as far as I know no other button does
> something different when you click it while holding down a key, so we
> probably shouldn't do that.  ;)

I admit it's not the best UI for that as is not obvious.

> The second option seems okay to me, but note that the bookmarks menu, when
> placed in the main menu, turns into just a menu button and doesn't let you
> bookmark a site with one click, so perhaps that would be a not terrible idea.

The second option sounds the best of the three, as it would be consistent to the bookmarks menu and it would have an obvious UI. Downside is that when it's placed within the main menu, the one-click option to open the DevTools would not be available.

> Finally, I'm not totally convinced that we should have a 'Toggle DevTools'
> button.  People who are that invested in opening and closing it quickly can
> use Ctrl-Shift-I (or Cmd-Shift-I on Mac), so perhaps we should just not do
> this…

I have to say that I also prefer Ctrl+Shift+I or simply F12 to open the tools, though there were a few requests in the Firebug discussion group asking for a toggle button.

> Anyways, I'm sure there will be more details to come after we hire an actual
> designer.  ;)

Yes, somebody like Helen!

Sebastian

Comment 7

2 years ago
This was discussed in bug 1067337 which was originally about having a split button similar to the bookmarks menu.

[ toggle devtools ] | [ devtools menu ] (see attachment 8509705 [details])


Bug 1067337 comment 9 suggests that a split-menu requires ugly code, so perhaps what we want is a second separate button?

Also, we already have the 2 separate icons from attachment 8509705 [details] in our Toolbar.png sprites, so I suspect that reduces the amount of UX work needed.
(Reporter)

Comment 8

2 years ago
(In reply to Tim Nguyen :ntim from comment #7)
> This was discussed in bug 1067337 which was originally about having a split
> button similar to the bookmarks menu.
> 
> [ toggle devtools ] | [ devtools menu ] (see attachment 8509705 [details])
> 
> 
> Bug 1067337 comment 9 suggests that a split-menu requires ugly code, so
> perhaps what we want is a second separate button?

Or to fix the code regarding such buttons. :-)

I think it's ok to add another button, but as Blake mentioned, it also has some downsides.

Sebastian
Has the option where you have the button with an arrow for more options next to it as used by some add-ons be ruled out already? The "Web Developer" extension icon works that way for example (http://chrispederick.com/work/web-developer/). This won't allow for the doorhanger style used by all other "internal tooling buttons" and in case that's a requirement, sorry if this suggestion is just adding noise.

Comment 10

2 years ago
Unless there's a pressing reason to try to fix this ASAP, I would hold off on doing this.

Submenu buttons are annoying in the menupanel the way it currently exists. Having a panel/menu appear on top of the existing menu is ugly, especially one that's likely larger than the menupanel itself. And this is, after all, the default location for the web developer button for most users.
That trade-off may or may not change in the near-ish future (Fx 57 timeframe), that's still being hashed out.


Having 2 separate buttons, one of which only opens the tool immediately, feels like overkill. A substantially larger proportion of developers than normal users use keyboard shortcuts, and there are several keyboard shortcuts for opening the devtools, so adding an extra button doesn't seem as important as having good keyboard a11y.

If we really must add an extra button on short notice (why?), it feels like adding a button that immediately starts to 'inspect by mouse', like firebug and DOM inspector have, might be worthwhile in that it actually makes something that takes 3 or more clicks (and requires a mouse anyway) take 1 click.
(Reporter)

Comment 11

2 years ago
(In reply to :Gijs from comment #10)
> Unless there's a pressing reason to try to fix this ASAP, I would hold off
> on doing this.
> ...
> Having 2 separate buttons, one of which only opens the tool immediately,
> feels like overkill. A substantially larger proportion of developers than
> normal users use keyboard shortcuts, and there are several keyboard
> shortcuts for opening the devtools, so adding an extra button doesn't seem
> as important as having good keyboard a11y.

I also assume that most users rather use the keyboard shortcuts to open the tools, especially F12/Ctrl+Shift+I to toggle them. It would be good to have some numbers for that, though.

> If we really must add an extra button on short notice (why?)

Because Firebug users often used the button to open the tool and Firebug breaks with every new version of Firefox more and more. So those users will switch to the DevTools then.
(I filed this bug because there were several requests for such a button from the Firebug community.)

> it feels like adding a button that immediately starts to 'inspect by mouse', like firebug
> and DOM inspector have, might be worthwhile in that it actually makes
> something that takes 3 or more clicks (and requires a mouse anyway) take 1
> click.

That's covered in bug 1302363. Note that there's also a shortcut for that: Ctrl+Shift+C.

Sebastian
Assignee: zer0 → nobody
Status: ASSIGNED → NEW

Updated

11 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.