Command Menu/Palette: Combined Quick Open + Find in Project + MDN Search + Commands

[violasong]

Related:

• Requirements Planning Doc

---

Just filing this here so we have it, but it can go into some backlog :)

Maybe it could require certain commands to turn it into project search or MDN search, but it would be cool if it could make smart guesses for this.

The idea is that eventually every DevTool panel could have access to this functionality. It would allow you to switch between panels, as Chrome's command menu does. Debugger and Inspector examples: https://mozilla.invisionapp.com/share/39IG53NDEW7#/288014318_commandmodal

[bogas04]

Would love to work on this. @jasonLaster

[SebastianZ]

To pick this up again, let's discuss a bit the UI and UX. @violasong It would be great if you could share any previous discussions and decisions made that resulted in your mockups.

I'll analyze those mockups a bit here first. So what I see is:

1. Search field replacing any existing static search fields

   1. Context sensitive
   2. Providing usage information by typing '?'

2. Suggested content and commands

   1. Context specific content search suggestions

      1. Sources and last content searches in Debugger
      2. Last searched elements in Inspector

   2. Panel / context information options

      1. MDN links to panel descriptions and contextual content
      2. Panel specific options

   3. Panel / context related actions

      1. Debugging related actions in Debugger
      2. DOM related actions in Inspector

   4. Panel switching options

3. Commands and content search suggestions are initially shown

4. Options are split by category

5. Options have different icons depending on their type

6. Options may have additional information

7. Options may have a shortcut assigned

8. All options are one-off options

9. Options may be formatted

Sebastian

[violasong]

Some background: in my Feb 2020 survey, I found that folks were less excited about the Command Palette than the 6 other features I asked them about. (Of course, I wasn't asking about some kind of amazing omni-panel that also searched the codebase + MDN). The question was as follows:

Imagine that Firefox DevTools had a new command palette similar to the one in Chrome, accessible with Ctrl-Shift-P (Cmd-Shift-P on Mac). This palette would allow you to quickly navigate to files, switch to another panel, toggle settings, and find hidden-away features. Rate how much you agree with the sentence, “This would benefit my work.”

Results:

31% of Chrome users “Strongly Agreed” that a Command Palette in Firefox would benefit them compared to 23.3% of Firefox users. However, Chrome users still ranked Command Palette last when sorting it against the other features. When comparing numbers for “agree or strongly agree,” this feature got 50-60% approval, vs 80-90% for other features.

My gut feeling is that many people may find it too complicated to learn and use as part of an everyday workflow. My recommendation at the time was to postpone this feature in favor of more desired features, but that doesn't necessarily mean we shouldn't still look into this. :)

[RheingoldRiver]

Found this on a google search just now. I would find this SUPER helpful, but tbh only if the hotkey were customizeable - I'm too used to pressing ctrl+T in sublime, pycharm, vscode, etc, that's how I'd want to access this. In fact just now when playing with it in chrome I accidentally opened about 3 new tabs 😂 I assume the context will pull away from the window, so Ctrl+shift+P remains private window when you're not focusing devtools (& same would be for any potential rebind)?

[Rnbsov]

I'm here also because of Google search, and I consider this feature as very useful, I really miss this one in Firefox's devtools