Goals (feel free to add any I've forgotten):

- Make snippets accessible and createable from the Command Menu (using a ! prefix).
- Provide a way to access the Command Menu, initialized to show snippets, from the Console.
- Preload DevTools with some useful/example snippets.
- Add a more visible means of creating snippets from the Navigator (vs. requiring a right-click)
- (opt) Make snippets directly accessible from the console (e.g. "My Helpful Snippet" can be invoked as "console.snippet.myHelpfulSnippet()")

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/9f279cdef07d7a89a55a6a5d8c8eea225e4adbed

commit 9f279cdef07d7a89a55a6a5d8c8eea225e4adbed
Author: einbinder <einbinder@chromium.org>
Date: Thu Oct 20 23:24:16 2016

DevTools: New snippet button and icon

BUG= 657982 

Review-Url: https://chromiumcodereview.appspot.com/2442543002
Cr-Commit-Position: refs/heads/master@{#426644}

[modify] https://crrev.com/9f279cdef07d7a89a55a6a5d8c8eea225e4adbed/third_party/WebKit/LayoutTests/inspector/network/network-toggle-type-filter-expected.txt
[modify] https://crrev.com/9f279cdef07d7a89a55a6a5d8c8eea225e4adbed/third_party/WebKit/Source/devtools/BUILD.gn
[modify] https://crrev.com/9f279cdef07d7a89a55a6a5d8c8eea225e4adbed/third_party/WebKit/Source/devtools/front_end/Images/src/optimize_png.hashes
[modify] https://crrev.com/9f279cdef07d7a89a55a6a5d8c8eea225e4adbed/third_party/WebKit/Source/devtools/front_end/Images/src/svg2png.hashes
[modify] https://crrev.com/9f279cdef07d7a89a55a6a5d8c8eea225e4adbed/third_party/WebKit/Source/devtools/front_end/Images/src/toolbarButtonGlyphs.svg
[modify] https://crrev.com/9f279cdef07d7a89a55a6a5d8c8eea225e4adbed/third_party/WebKit/Source/devtools/front_end/Images/toolbarButtonGlyphs.png
[modify] https://crrev.com/9f279cdef07d7a89a55a6a5d8c8eea225e4adbed/third_party/WebKit/Source/devtools/front_end/Images/toolbarButtonGlyphs_2x.png
[modify] https://crrev.com/9f279cdef07d7a89a55a6a5d8c8eea225e4adbed/third_party/WebKit/Source/devtools/front_end/common/ResourceType.js
[modify] https://crrev.com/9f279cdef07d7a89a55a6a5d8c8eea225e4adbed/third_party/WebKit/Source/devtools/front_end/snippets/ScriptSnippetModel.js
[modify] https://crrev.com/9f279cdef07d7a89a55a6a5d8c8eea225e4adbed/third_party/WebKit/Source/devtools/front_end/sources/NavigatorView.js
[modify] https://crrev.com/9f279cdef07d7a89a55a6a5d8c8eea225e4adbed/third_party/WebKit/Source/devtools/front_end/sources/SourcesNavigator.js
[modify] https://crrev.com/9f279cdef07d7a89a55a6a5d8c8eea225e4adbed/third_party/WebKit/Source/devtools/front_end/sources/module.json
[add] https://crrev.com/9f279cdef07d7a89a55a6a5d8c8eea225e4adbed/third_party/WebKit/Source/devtools/front_end/sources/navigatorTree.css
[modify] https://crrev.com/9f279cdef07d7a89a55a6a5d8c8eea225e4adbed/third_party/WebKit/Source/devtools/front_end/sources/navigatorView.css

Thanks for the suggestion, woxxom. I certainly agree that tabs on the narrow sidebar make Snippets more difficult to discover. However, the scope of this bug was to make snippets more accessible anywhere within DevTools, not just the Sources panel. The initial summary was a little too broad to capture this. I've updated it accordingly.

If you feel like filing a bug to address the Navigator sidebar's shortcomings, feel free to CC me on it. Improving these sidebars is something I hope we can address and more demand will help get it prioritized sooner.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/6a4e7f8ba35f2ddbec1bfd97468cd044cf07cb02

commit 6a4e7f8ba35f2ddbec1bfd97468cd044cf07cb02
Author: einbinder <einbinder@chromium.org>
Date: Thu Nov 10 00:18:12 2016

DevTools: Move the Run Snippet button into the status bar.

BUG= 657982 

Review-Url: https://codereview.chromium.org/2485573009
Cr-Commit-Position: refs/heads/master@{#431093}

[modify] https://crrev.com/6a4e7f8ba35f2ddbec1bfd97468cd044cf07cb02/third_party/WebKit/Source/devtools/front_end/sources/JavaScriptSourceFrame.js
[modify] https://crrev.com/6a4e7f8ba35f2ddbec1bfd97468cd044cf07cb02/third_party/WebKit/Source/devtools/front_end/sources/SourcesPanel.js
[modify] https://crrev.com/6a4e7f8ba35f2ddbec1bfd97468cd044cf07cb02/third_party/WebKit/Source/devtools/front_end/sources/SourcesView.js

 Issue 666783  has been merged into this issue.

Copied from the duplicate bug, as reported by user:
"
To reduce the number of steps needed to trigger a snippet, what if we introduced a "snippet:" syntax in the DevTools console. Typing the name of the snippet after snippet: would begin to autocomplete it based on filename. The developer can then hit enter to run the snippet without needing to leave the console at all.

e.g 

snippet: conso
snippet: console-image.js
         console-formatters.js
[hits enter -> runs]

Request from Twitter: https://twitter.com/darcy/status/799662234590937089
"

Now this issue is relevant again: the Snippets panel is almost completely undiscoverable.
That's because "File system" and "Overrides" panels were added recently.

Currently I have to make two additional clicks EVERY TIME I open devtools just to show the Snippets panel.
Of course I could widen the navigation pane on the left but it's a bad "solution" as I don't need it to be that wide in 99% of cases.

A possible solution would be adding the ability to customize the order of sub-panels.
For example, by dragging just like the devtools top panels.

A better solution would be to make Snippets much more easy to discover and access.
Maybe show the sub-panel titles vertically like other advanced IDE do - Visual Studio (not VSCode), for example.