[webkit-changes] [WebKit/WebKit] 23c03d: Web Inspector: add support for console snippets

Devin Rousso noreply at github.com
Mon Sep 19 12:10:12 PDT 2022 

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: 23c03d7c6c3a03eca6396e8b563ec86f880a0dff
      https://github.com/WebKit/WebKit/commit/23c03d7c6c3a03eca6396e8b563ec86f880a0dff
  Author: Devin Rousso <drousso at apple.com>
  Date:   2022-09-19 (Mon, 19 Sep 2022)

  Changed paths:
    M LayoutTests/inspector/unit-tests/set-utilities-expected.txt
    M LayoutTests/inspector/unit-tests/set-utilities.html
    M Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
    M Source/WebInspectorUI/UserInterface/Base/ObjectStore.js
    M Source/WebInspectorUI/UserInterface/Base/Utilities.js
    M Source/WebInspectorUI/UserInterface/Controllers/ConsoleManager.js
    M Source/WebInspectorUI/UserInterface/Controllers/DOMManager.js
    M Source/WebInspectorUI/UserInterface/Controllers/JavaScriptLogViewController.js
    A Source/WebInspectorUI/UserInterface/Images/Start.svg
    M Source/WebInspectorUI/UserInterface/Main.html
    A Source/WebInspectorUI/UserInterface/Models/ConsoleSnippet.js
    M Source/WebInspectorUI/UserInterface/Test.html
    M Source/WebInspectorUI/UserInterface/Views/AnimationContentView.js
    M Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js
    M Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js
    M Source/WebInspectorUI/UserInterface/Views/CanvasTreeElement.js
    M Source/WebInspectorUI/UserInterface/Views/ConsoleCommandView.js
    M Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.css
    A Source/WebInspectorUI/UserInterface/Views/ConsoleSnippetTreeElement.css
    A Source/WebInspectorUI/UserInterface/Views/ConsoleSnippetTreeElement.js
    M Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js
    M Source/WebInspectorUI/UserInterface/Views/HeapSnapshotInstanceDataGridNode.js
    M Source/WebInspectorUI/UserInterface/Views/InputPopover.js
    M Source/WebInspectorUI/UserInterface/Views/LogContentView.css
    M Source/WebInspectorUI/UserInterface/Views/LogContentView.js
    M Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js
    M Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js
    M Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.js
    M Source/WebInspectorUI/UserInterface/Views/QuickConsole.js
    M Source/WebInspectorUI/UserInterface/Views/ResourceIcons.css
    M Source/WebInspectorUI/UserInterface/Views/ScriptContentView.js
    M Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.js
    M Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css
    M Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js
    M Source/WebInspectorUI/UserInterface/Views/WebSocketDataGridNode.js
    M Source/WebInspectorUI/UserInterface/Views/WebSocketResourceTreeElement.js

  Log Message:
  -----------
  Web Inspector: add support for console snippets
https://bugs.webkit.org/show_bug.cgi?id=245161

Reviewed by Patrick Angle.

Console Snippets can be very useful for developers that frequently run the same JS over and over.

Previously, the developer would have to either repeatedly type the same thing, use the up arrow to
find the JS in the Console history, or even use the pasteboard (likely from another app/file).

With Console Snippets, the developer can rely on Web Inspector to organize and maintain the "library"
of JS that the developer might want to invoke, as well as having quick ways to actually do so.

* Source/WebInspectorUI/UserInterface/Models/ConsoleSnippet.js: Added.
(WI.ConsoleSnippet):
(WI.ConsoleSnippet.createDefaultWithTitle):
(WI.ConsoleSnippet.prototype.get title):
(WI.ConsoleSnippet.prototype.run):
(WI.ConsoleSnippet.fromJSON):
(WI.ConsoleSnippet.prototype.toJSON):
* Source/WebInspectorUI/UserInterface/Controllers/ConsoleManager.js:
(WI.ConsoleManager):
(WI.ConsoleManager.prototype.get snippets): Added.
(WI.ConsoleManager.prototype.addSnippet): Added.
(WI.ConsoleManager.prototype.removeSnippet): Added.
(WI.ConsoleManager.prototype._handleSnippetContentChanged): Added.

* Source/WebInspectorUI/UserInterface/Views/ResourceIcons.css:
(:is(.anonymous-script-icon, .resource-icon.resource-type-script.console-snippet) .icon): Renamed from `.anonymous-script-icon .icon`.
(@media (prefers-color-scheme: dark) :is(.anonymous-script-icon, .resource-icon.resource-type-script.console-snippet) .icon): Renamed from `@media (prefers-color-scheme: dark) .anonymous-script-icon .icon`.
Force Console Snippets to use the JS clipping icon.

* Source/WebInspectorUI/UserInterface/Views/ConsoleSnippetTreeElement.js: Added.
(WI.ConsoleSnippetTreeElement):
(WI.ConsoleSnippetTreeElement.prototype.onattach):
(WI.ConsoleSnippetTreeElement.prototype.ondelete):
(WI.ConsoleSnippetTreeElement.prototype.onspace):
(WI.ConsoleSnippetTreeElement.prototype.canSelectOnMouseDown):
(WI.ConsoleSnippetTreeElement.prototype.updateStatus):
* Source/WebInspectorUI/UserInterface/Views/ConsoleSnippetTreeElement.css: Added.
(.tree-outline .item.console-snippet > .status):
(.tree-outline .item.console-snippet > .status > img):
(.tree-outline .item.console-snippet:not(:hover) > .status > img):
(body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .item.console-snippet.selected:hover > .status > img):
(@media (prefers-color-scheme: dark) .tree-outline .item.console-snippet:hover > .status > img):
* Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.js:
(WI.SourcesNavigationSidebarPanel):
(WI.SourcesNavigationSidebarPanel.prototype.closed):
(WI.SourcesNavigationSidebarPanel.prototype.createContentTreeOutline):
(WI.SourcesNavigationSidebarPanel.prototype.willDismissPopover):
(WI.SourcesNavigationSidebarPanel.prototype._willDismissConsoleSnippetPopover): Added.
(WI.SourcesNavigationSidebarPanel.prototype._compareTreeElements):
(WI.SourcesNavigationSidebarPanel.prototype._addConsoleSnippet): Added.
(WI.SourcesNavigationSidebarPanel.prototype._removeConsoleSnippet): Added.
(WI.SourcesNavigationSidebarPanel.prototype._handleCreateConsoleSnippetButtonClicked): Added.
(WI.SourcesNavigationSidebarPanel.prototype.async _populateCreateResourceContextMenu):
(WI.SourcesNavigationSidebarPanel.prototype._handleConsoleSnippetAdded): Added.
(WI.SourcesNavigationSidebarPanel.prototype._handleConsoleSnippetRemoved): Added.
* Source/WebInspectorUI/UserInterface/Views/SourcesNavigationSidebarPanel.css:
(.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container, .local-overrides-container, .console-snippets-container)): Renamed from `.sidebar > .panel.navigation.sources > .content > :matches(.pause-reason-container, .call-stack-container, .breakpoints-container, .local-overrides-container)`.
(@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container, .local-overrides-container, .console-snippets-container)): Renamed from `@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > :matches(.call-stack-container, .breakpoints-container, .resources-container, .local-overrides-container)`.
(@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > .console-snippets-container): Added.
(@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > .console-snippets-container > .details-section): Added.
(@media (min-height: 650px) .sidebar > .panel.navigation.sources > .content > .console-snippets-container > .details-section > .content): Added.
(.sidebar > .panel.navigation.sources > .content > .local-overrides): Deleted.
Add a "Console Snippets" section to the navigation sidebar in the Sources Tab.

* Source/WebInspectorUI/UserInterface/Views/LogContentView.js:
(WI.LogContentView):
(WI.LogContentView.prototype.get navigationItems):
(WI.LogContentView.prototype.willDismissPopover):
(WI.LogContentView.prototype._handleDrop):
(WI.LogContentView.prototype._handleSnippetsNavigationItemContextMenu): Added.
* Source/WebInspectorUI/UserInterface/Views/LogContentView.css:
(.navigation-bar > .item.console-snippets > img): Added.
(.console-user-command:not(:hover) > .console-snippet-options): Added.
(.create-snippet-popover > .label): Added.
(@media (prefers-color-scheme: dark) .navigation-bar > .item.console-snippets > img):
Add a snippets button navigation item to the Console for quick access when not in the Sources Tab.

* Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.js:
(WI.OpenResourceDialog.prototype.didDismissDialog):
(WI.OpenResourceDialog.prototype.didPresentDialog):
(WI.OpenResourceDialog.prototype._handleConsoleSnippetAdded): Added.
(WI.OpenResourceDialog.prototype._handleConsoleSnippetRemoved): Added.
* Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.js:
(WI.SearchSidebarPanel.prototype.performSearch):
Support jumping to Console Snippets.

* Source/WebInspectorUI/UserInterface/Base/ObjectStore.js:
(WI.ObjectStore._open):
Bump the version for the new `console-snippets` store.

* Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js:
(WI.ButtonNavigationItem):
(WI.ButtonNavigationItem.prototype._update):
Wait to set the `title` until we know we know what `buttonStyle` we're using.

* Source/WebInspectorUI/UserInterface/Views/ConsoleCommandView.js:
(WI.ConsoleCommandView):
(WI.ConsoleCommandView.prototype.render):
Add a way for clients to add a `"click"` event listener after the command has `render()`.

* Source/WebInspectorUI/UserInterface/Views/ConsoleDrawer.css:
(.console-drawer > .navigation-bar > .item > :is(.glyph, img), .console-drawer > .navigation-bar > .log-scope-bar > li): Renamed from `.console-drawer > .navigation-bar > .item > .glyph, .console-drawer > .navigation-bar > .log-scope-bar > li`.
Allow `WI.ButtonNavigationItem.ImageType.IMG` to be clickable.

* Source/WebInspectorUI/UserInterface/Views/InputPopover.js:
(WI.InputPopover):
(WI.InputPopover.prototype.get identifier): Added.
(WI.InputPopover.prototype.get value):
(WI.InputPopover.prototype.show):
(WI.InputPopover.prototype.get result): Deleted.
It should be possible to get the `value` even if the developer has not hit enter/return.

* Source/WebInspectorUI/UserInterface/Views/ScriptContentView.js:
(WI.ScriptContentView.prototype._handleTextEditorContentDidChange):
Debounce how often we save the current contents after modifications (to prevent swamping IndexedDB).

* Source/WebInspectorUI/UserInterface/Base/Utilities.js:
(Set.prototype.some): Added.
Add utility function that behaves just like `Array.prototype.some`.

* Source/WebInspectorUI/UserInterface/Controllers/JavaScriptLogViewController.js:
(WI.JavaScriptLogViewController):
(WI.JavaScriptLogViewController.prototype.startNewSession):
(WI.JavaScriptLogViewController.prototype.appendImmediateExecutionWithResult):
(WI.JavaScriptLogViewController.prototype.consolePromptTextCommitted):
(WI.JavaScriptLogViewController.prototype._appendConsoleMessageView):
* Source/WebInspectorUI/UserInterface/Controllers/DOMManager.js:
(WI.DOMManager.prototype.inspectNodeObject.nodeAvailable):
* Source/WebInspectorUI/UserInterface/Views/AnimationContentView.js:
(WI.AnimationContentView.prototype._populateAnimationTargetButtonContextMenu):
* Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js:
(WI.CanvasContentView.prototype._populateCanvasElementButtonContextMenu):
* Source/WebInspectorUI/UserInterface/Views/CanvasTreeElement.js:
(WI.CanvasTreeElement.prototype.populateContextMenu):
* Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js:
* Source/WebInspectorUI/UserInterface/Views/HeapSnapshotInstanceDataGridNode.js:
(WI.HeapSnapshotInstanceDataGridNode.logHeapSnapshotNode.node.shortestGCRootPath.):
(WI.HeapSnapshotInstanceDataGridNode.logHeapSnapshotNode):
* Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js:
(WI.ObjectPreviewView.prototype._contextMenuHandler):
* Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js:
(WI.ObjectTreeBaseTreeElement.prototype._logSymbolProperty):
(WI.ObjectTreeBaseTreeElement.prototype._logValue):
* Source/WebInspectorUI/UserInterface/Views/QuickConsole.js:
(WI.QuickConsole.prototype._handleDrop):
* Source/WebInspectorUI/UserInterface/Views/WebSocketDataGridNode.js:
(WI.WebSocketDataGridNode.prototype.appendContextMenuItems):
* Source/WebInspectorUI/UserInterface/Views/WebSocketResourceTreeElement.js:
(WI.WebSocketResourceTreeElement.prototype.populateContextMenu):
Drive-by: Rework parameters of `appendImmediateExecutionWithResult` to use an `options = {}`.

* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:
* Source/WebInspectorUI/UserInterface/Images/Start.svg: Added.
* Source/WebInspectorUI/UserInterface/Main.html:
* Source/WebInspectorUI/UserInterface/Test.html:

Canonical link: https://commits.webkit.org/254636@main

More information about the webkit-changes mailing list