1690340 - Simplify the Web Developer menu

Status: VERIFIED FIXED

(Firefox :: Menus, defect, P1)

Description

[Mike Conley (:mconley) (:⚙️)]

I believe this is something that can ship pre-Proton. The DevTools menu is a bit special - it constructs itself dynamically, inserting <xul:menuitem> elements at runtime into the menuWebDeveloperPopup popup defined here: https://searchfox.org/mozilla-central/rev/b2433a832c250c55255e0ee37d05192d04f20427/browser/base/content/browser-menubar.inc#410-414

Interestingly, the "Page Source" item is baked into that popup to begin with, and our DevTools code knows how to put it in the expected position: https://searchfox.org/mozilla-central/rev/b2433a832c250c55255e0ee37d05192d04f20427/devtools/client/framework/browser-menus.js#269-274

What we need to do is dramatically pare down the Web Developer menu. Specifically, we're going to be removing all of the menuitems for the various individualpanels of the DevTools toolbox.

I can imagine, however, that we'll want to keep the keyboard shortcuts for those panels around. That might involve putting <key> elements for those menuitems we're removing into the mainKeySet instead: https://searchfox.org/mozilla-central/rev/b2433a832c250c55255e0ee37d05192d04f20427/browser/base/content/browser-sets.inc#124

The new contents of the menu should be:

Web Developer Tools
Remote Debugging
Browser Toolbox (if enabled)
Browser Content Toolbox (if enabled)
Browser Console
Responsive Design Mode
Eyedropper
Page Source
Extensions for Developers

So, things to do here:

1. Port the necessary DevTools strings to Fluent, forking them so that we have a set for the menubar, and a set for panels.
2. Change the "Toggle Tools" strings to "Web Developer Tools".
3. Remove the Inspector, Web Console, Debugger, Network, Style Editor, Performance, Storage Inspector, Accessibility, Application and DOM menuitems from the list. Also remove the separators. This will likely involve changing how they're dynamically inserted (see above). We should try to keep the keyboard shortcuts around, however, by adding key commands to the mainKeySet.
4. Update the "Get More Tools" strings to be "Extensions for Developers"

Remember when updating strings to ensure that they're not re-used elsewhere - if so, double-check that the propagated change is acceptable with UX, or create a new string just for the menu.

Also remember that if you're updating a string, you still have to update the ID of it so that our localizers know to re-translate.

Naturally, any tests that rely on the old structure or old behaviours will need to be modified as well.

Comment 1

[Mike Conley (:mconley) (:⚙️)]

Setting docs-needed since we're removing the following items from the Web Developer menu:

• Inspector
• Web Console
• Debugger
• Network
• Style Editor
• Performance
• Storage Inspector
• Accessibility
• Application
• DOM

We will be keeping the keyboard shortcuts for those items, however. All of those panels will still be reachable by choosing "Web Developer Tools" and choosing the associated DevTools panel.

Release Note Request (optional, but appreciated)
[Why is this notable]:

We're changing the contents of the Web Developer menu. This might be even more notable for the Developer Edition.

[Affects Firefox for Android]:

No.

[Suggested wording]:

We've greatly simplified the Web Developer menu.

[Links (documentation, blog post, etc)]:

None.

Comment 2

[Mike Conley (:mconley) (:⚙️)]

Hey gl! I noticed you assigned yourself to this one! Thanks for volunteering. :) We're hoping to have the structural update work for the menus mostly wrapped this week. Do you think you'll have this sorted by then?

Comment 3

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to Mike Conley (:mconley) (:⚙️) (Catching up on needinfos) from comment #2)

Hey gl! I noticed you assigned yourself to this one! Thanks for volunteering. :) We're hoping to have the structural update work for the menus mostly wrapped this week. Do you think you'll have this sorted by then?

Looking into it! Will try to have this sorted it out soon.

Comment 4

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Bug 1690340 - Part 1: Port the necessary DevTools strings to Fluent for the appmenu. r=mconley

Comment 5

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Bug 1690340 - Part 1: Hide all the panel tools in the developer tools menu. r=jdescottes

For now, we hide all the individual panel tools from the developertools menu.

We will want to evaluate whether or not to remove all the logic for adding all
the tools to the menu in the future if we see a permanent need for no longer
having it.

See https://searchfox.org/mozilla-central/rev/d3343662ce0aced933b30e053b33c93f759292eb/devtools/client/framework/browser-menus.js#197

Depends on D104867

Comment 6

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Bug 1690340 - Part 2: Use the new naming for the developer tools menu items. r=jdescottes,mconley

• Renames "Toggle Tools" to "Web Developer Tools"
• Renames "Get More Tools" to "Extensions for Developers"
• Removes some of the menu separators to confirm to the proton design

Depends on D104868

Comment 7

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Bug 1690340 - Part 3: Remove the "Work Offline" menu item from the developer tools menu. r=mconley,jdescottes

Depends on D104869

Comment 8

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Bug 1690340 - Part 4: Insert the "Page Source" before the "Extensions for Developers" menu item. r=mconley,jdescottes

Depends on D104870

Comment 9

[Gabriel Luong [:gl] (ΦωΦ)]

Try https://treeherder.mozilla.org/jobs?repo=try&revision=8fe9f7ff1f4b6fa51c9dcdfaf22f523c50ecb0a3 🙏

Comment 10

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Bug 1690340 - Part 5: Remove the menu separators from the developer tools menu. r=jdescottes

This removes the menu separators frmo the developer tools menu to conform to
the proton design.

We can safely remove the "devToolsEndSeparator" separator since it is no longer
used to append the "Work Offline" that is removed in Part 5.

We change the anchor element to be the "menu_devtools_remotedebugging" menu item
with the removal oof the "menu_devtools_separator" separator.

Depends on D104871

Comment 11

[Gabriel Luong [:gl] (ΦωΦ)]

Try https://treeherder.mozilla.org/#/jobs?repo=try&revision=484455595fed80205acbc83a63823041a48ac506

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f81b94287dd8
Part 1: Hide all the panel tools in the developer tools menu. r=jdescottes
https://hg.mozilla.org/integration/autoland/rev/c86dc4f007dc
Part 2: Use the new naming for the developer tools menu items. r=jdescottes
https://hg.mozilla.org/integration/autoland/rev/a4522233c94f
Part 3: Remove the "Work Offline" menu item from the developer tools menu. r=mconley,jdescottes
https://hg.mozilla.org/integration/autoland/rev/92bc4e8bc287
Part 4: Insert the "Page Source" before the "Extensions for Developers" menu item. r=mconley,jdescottes
https://hg.mozilla.org/integration/autoland/rev/2260fd69931c
Part 5: Remove the menu separators from the developer tools menu. r=jdescottes

Comment 13

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/f81b94287dd8
https://hg.mozilla.org/mozilla-central/rev/c86dc4f007dc
https://hg.mozilla.org/mozilla-central/rev/a4522233c94f
https://hg.mozilla.org/mozilla-central/rev/92bc4e8bc287
https://hg.mozilla.org/mozilla-central/rev/2260fd69931c

Comment 14

[Alin Ilea, Desktop Test Engineering]

Verified - Fixed in Beta 87.0b4 and latest Nightly 88.0a1 (2021-03-01) using Win10, MacOS 10.15 and Ubuntu 18.04.

Comment 15

[Julien Cristau [:jcristau] (back August 18)]

Added to the 87.0beta release notes.