ChangeLog

112018-02-07 Matt Baker <mattbaker@apple.com>

        Web Inspector: add listing of Canvases/Programs/Recordings to the NavigationSidebar

        https://bugs.webkit.org/show_bug.cgi?id=178744

        <rdar://problem/35374379>

        Reviewed by Devin Rousso.

        * Localizations/en.lproj/localizedStrings.js:

        * UserInterface/Images/Canvas2D.svg:

        * UserInterface/Images/Canvas3D.svg:

        * UserInterface/Images/Recording.svg:

        Update canvas icons to be monochrome. Simplified the recording icon.

        * UserInterface/Main.html:

        * UserInterface/Models/RecordingAction.js:

        (WI.RecordingAction.prototype.set snapshot):

        Allow (2D) canvas snapshots to be associated with the action. Used by

        RecordingActionDetailsSidebarPanel to retrieve the snapshot context.

        * UserInterface/Views/CanvasContentView.css:

        (.content-view.canvas:not(.tab)):

        (.content-view.canvas:not(.tab) > .progress): Deleted.

        (.content-view.canvas:not(.tab) > .progress > .frame-count): Deleted.

        * UserInterface/Views/CanvasContentView.js:

        (WI.CanvasContentView):

        (WI.CanvasContentView.prototype.get navigationItems):

        (WI.CanvasContentView.prototype.layout):

        (WI.CanvasContentView.prototype.shown):

        (WI.CanvasContentView.prototype._recordingStarted):

        (WI.CanvasContentView.prototype._recordingProgress):

        (WI.CanvasContentView.prototype._recordingStopped):

        (WI.CanvasContentView.prototype._handlePreviewImageClick):

        (WI.CanvasContentView.prototype._updateRecordNavigationItem):

        (WI.CanvasContentView.prototype._updateProgressView):

        Replace progress UI with a reusable ProgressView class.

        Clicking the canvas thumbnail or progress UI (overview only) now navigates

        to a dedicated CanvasContentView, for inspecting shaders and recordings.

        * UserInterface/Views/CanvasDetailsSidebarPanel.js:

        (WI.CanvasDetailsSidebarPanel.prototype.inspect):

        * UserInterface/Views/CanvasOverviewContentView.css:

        (.content-view.canvas-overview .content-view.canvas):

        (.content-view.canvas-overview .content-view.canvas.is-recording):

        (.content-view.canvas-overview .content-view.canvas > header):

        (.content-view.canvas-overview .content-view.canvas.is-recording > header):

        (.content-view.canvas-overview .content-view.canvas > header > .navigation-bar):

        (.content-view.canvas-overview .content-view.canvas:matches(:hover, .is-recording) > header > .navigation-bar):

        (.content-view.canvas-overview .content-view.canvas.is-recording > .progress-view):

        (.content-view.canvas-overview .content-view.canvas.is-recording > .progress-view,):

        (.content-view.canvas-overview .content-view.canvas.is-recording > .preview):

        (.content-view.canvas-overview .content-view.canvas > .preview > img):

        (.content-view.canvas-overview .content-view.canvas > :matches(header, .progress, .preview, footer)): Deleted.

        (.content-view.canvas-overview .content-view.canvas.selected > :matches(.progress, .preview, footer),): Deleted.

        (.content-view.canvas-overview .content-view.canvas:not(:hover, .is-recording, .selected) > header > .navigation-bar): Deleted.

        (.content-view.canvas-overview .content-view.canvas > :matches(.progress, .preview)): Deleted.

        (.content-view.canvas-overview .content-view.canvas > .preview): Deleted.

        (.content-view.canvas-overview .content-view.canvas > .progress ~ .preview): Deleted.

        Clean up styles, and remove selection styles as canvases are no longer selectable in the overview.

        * UserInterface/Views/CanvasOverviewContentView.js:

        (WI.CanvasOverviewContentView):

        (WI.CanvasOverviewContentView.prototype.get navigationItems):

        (WI.CanvasOverviewContentView.prototype.attached):

        (WI.CanvasOverviewContentView.prototype.detached):

        (WI.CanvasOverviewContentView.prototype.get selectionPathComponents): Deleted.

        (WI.CanvasOverviewContentView.prototype._changeSelectedItemVertically): Deleted.

        (WI.CanvasOverviewContentView.prototype._changeSelectedItemHorizontally): Deleted.

        (WI.CanvasOverviewContentView.prototype._selectionPathComponentsChanged): Deleted.

        (WI.CanvasOverviewContentView.prototype._handleUp): Deleted.

        (WI.CanvasOverviewContentView.prototype._handleRight): Deleted.

        (WI.CanvasOverviewContentView.prototype._handleDown): Deleted.

        (WI.CanvasOverviewContentView.prototype._handleLeft): Deleted.

        (WI.CanvasOverviewContentView.prototype._handleSpace): Deleted.

        (WI.CanvasOverviewContentView.prototype._supplementalRepresentedObjectsDidChange): Deleted.

        Disable canvas selection. Remove logic for supplemental represented objects,

        path components, and selection keyboard shortcuts.

        * UserInterface/Views/CanvasSidebarPanel.css: Added.

        (.sidebar > .panel.navigation.canvas > .content):

        (.sidebar > .panel.navigation.canvas > .navigation-bar > .item.record-start-stop.disabled):

        (.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.canvas.canvas-2d .icon):

        (.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.canvas.webgl .icon):

        (.sidebar > .panel.navigation.canvas > .content > .navigation-bar):

        (.sidebar > .panel.navigation.canvas.has-recordings > .content > .tree-outline.canvas):

        (.sidebar > .panel.navigation.canvas:not(.has-recordings) > .filter-bar,):

        (.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.recording > .icon):

        (.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.shader-program > .icon):

        (.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.folder-icon > .icon):

        (.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.folder-icon > .status):

        * UserInterface/Views/CanvasSidebarPanel.js: Added.

        (WI.CanvasSidebarPanel):

        (WI.CanvasSidebarPanel.prototype.set canvas):

        (WI.CanvasSidebarPanel.prototype.set recording):

        (WI.CanvasSidebarPanel.prototype.set action):

        (WI.CanvasSidebarPanel.prototype.shown):

        (WI.CanvasSidebarPanel.prototype.hidden):

        (WI.CanvasSidebarPanel.prototype.hasCustomFilters):

        (WI.CanvasSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):

        (WI.CanvasSidebarPanel.prototype.initialLayout):

        (WI.CanvasSidebarPanel.prototype._recordingAdded):

        (WI.CanvasSidebarPanel.prototype._recordingRemoved):

        (WI.CanvasSidebarPanel.prototype._scopeBarSelectionChanged):

        (WI.CanvasSidebarPanel.prototype._toggleRecording):

        (WI.CanvasSidebarPanel.prototype._currentRepresentedObjectsDidChange):

        (WI.CanvasSidebarPanel.prototype._treeOutlineSelectionDidChange):

        (WI.CanvasSidebarPanel.prototype._canvasChanged):

        (WI.CanvasSidebarPanel.prototype._recordingChanged):

        (WI.CanvasSidebarPanel.prototype._updateRecordNavigationItem):

        (WI.CanvasSidebarPanel.prototype._updateRecordingScopeBar):

        Add new navigation sidebar, split into two sections. The upper section

        contains a tree with a single element for the current canvas, and child

        elements for any shader programs. The maximum height of this section is 50%

        of the sidebar's height. The lower section contains a tree for the selected

        recording, and a scope bar for choosing between recordings.

        * UserInterface/Views/CanvasTabContentView.css:

        (.content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon):

        (.content-view.tab.canvas .navigation-bar > .item .canvas.canvas-2d .icon):

        (.content-view.tab.canvas .navigation-bar > .item .canvas.webgl .icon):

        (.content-view.tab.canvas .navigation-bar > .item .shader-program > .icon):

        (.content-view.tab.canvas .navigation-bar > .item > .hierarchical-path-component > .icon): Deleted.

        (.content-view.tab.canvas .navigation-bar > .item .canvas .icon): Deleted.

        * UserInterface/Views/CanvasTabContentView.js:

        (WI.CanvasTabContentView):

        (WI.CanvasTabContentView.prototype.canShowRepresentedObject):

        (WI.CanvasTabContentView.prototype.attached):

        (WI.CanvasTabContentView.prototype._addCanvas):

        (WI.CanvasTabContentView.prototype._removeCanvas):

        (WI.CanvasTabContentView.prototype._canvasTreeOutlineSelectionDidChange):

        (WI.CanvasTabContentView.prototype._recordingAdded):

        (WI.CanvasTabContentView.prototype._handleSpace):

        (WI.CanvasTabContentView.prototype.showRepresentedObject): Deleted.

        (WI.CanvasTabContentView.prototype._navigationSidebarTreeOutlineSelectionChanged): Deleted.

        (WI.CanvasTabContentView.prototype._recordingActionIndexChanged): Deleted.

        (WI.CanvasTabContentView.prototype._updateActionIndex): Deleted.

        The canvas tab now maintains a tree outline of all canvases, with an

        "Overview" element as the root. The Overview element is always the first

        item of content browser's hierarchical path.

        * UserInterface/Views/CanvasTreeElement.js:

        (WI.CanvasTreeElement.createRecordingTreeElement):

        (WI.CanvasTreeElement):

        (WI.CanvasTreeElement.prototype.onattach):

        (WI.CanvasTreeElement.prototype.onpopulate):

        (WI.CanvasTreeElement.prototype._updateStatus):

        (WI.CanvasTreeElement.prototype.ondetach): Deleted.

        Make it possible to not show recordings under the Canvas element.

        Create `isRecording` status element (spinner).

        * UserInterface/Views/CollectionContentView.js:

        (WI.CollectionContentView.prototype.shown):

        (WI.CollectionContentView.prototype.hidden):

        Child ContentViews need to be updated when the collection's visibility changes.

        * UserInterface/Views/ContentView.js:

        (WI.ContentView.isViewable):

        * UserInterface/Views/ProgressView.css: Added.

        (.progress-view):

        (.progress-view > .titles):

        (.progress-view > .titles > .title):

        (.progress-view > .titles > .subtitle):

        (.progress-view > .titles > .subtitle::before):

        (.progress-view > .indeterminate-progress-spinner):

        * UserInterface/Views/ProgressView.js: Added.

        (WI.ProgressView):

        (WI.ProgressView.prototype.get title):

        (WI.ProgressView.prototype.set title):

        (WI.ProgressView.prototype.get subtitle):

        (WI.ProgressView.prototype.set subtitle):

        (WI.ProgressView.prototype.get visible):

        (WI.ProgressView.prototype.set visible):

        (WI.ProgressView.prototype.initialLayout):

        (WI.ProgressView.prototype._updateTitles):

        New view class (not a ContentView) for showing a generic progress message,

        with a title, subtitle, and progress spinner.

        * UserInterface/Views/RecordingContentView.css:

        (.content-view:not(.tab).recording > .preview-container):

        Remove unnecessary styles.

        * UserInterface/Views/RecordingContentView.js:

        (WI.RecordingContentView):

        (WI.RecordingContentView.prototype.get navigationItems):

        (WI.RecordingContentView.prototype.get supplementalRepresentedObjects):

        (WI.RecordingContentView.prototype.updateActionIndex):

        (WI.RecordingContentView.prototype.get saveData):

        (WI.RecordingContentView.prototype._exportRecording):

        Relocate the recording export logic and UI.

        (WI.RecordingContentView.prototype.async._generateContentCanvas2D):

        (WI.RecordingContentView.prototype.async._generateContentCanvasWebGL):

        (WI.RecordingContentView.prototype._sliderChanged):

        Refactor logic for notifying the rest of the UI of changes to the action slider.

        The selected action is now exposed as a supplemental represented object, and a

        corresponding SupplementalRepresentedObjectsDidChange event.

        * UserInterface/Views/RecordingStateDetailsSidebarPanel.js:

        (WI.RecordingStateDetailsSidebarPanel.prototype.inspect):

        (WI.RecordingStateDetailsSidebarPanel.prototype.set action):

        (WI.RecordingStateDetailsSidebarPanel.prototype.updateAction): Deleted.

        * UserInterface/Views/RecordingTraceDetailsSidebarPanel.js:

        (WI.RecordingTraceDetailsSidebarPanel.prototype.inspect):

        (WI.RecordingTraceDetailsSidebarPanel.prototype.set action):

        (WI.RecordingTraceDetailsSidebarPanel):

        (WI.RecordingTraceDetailsSidebarPanel.prototype.updateAction): Deleted.

        Now that the selected action is exposed to the UI as a supplemental

        represented object, details sidebars can be more decoupled from the

        canvas tab, and be notified of changes to the selection via `inspect()`.

        * UserInterface/Views/ResourceIcons.css:

        (.canvas > .icon): Deleted.

        (.shader-program .icon): Deleted.

2018-02-07  Matt Baker  <mattbaker@apple.com>

        Web Inspector: replace isAncestor with Node.contains() in LegacyTabBar

        https://bugs.webkit.org/show_bug.cgi?id=182586

Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@localizedStrings["Cancel comparison"] = "Cancel comparison";

localizedStrings["Canvas"] = "Canvas";

localizedStrings["Canvas %d"] = "Canvas %d";

localizedStrings["Canvas %s"] = "Canvas %s";

171 localizedStrings["Canvas Overview"] = "Canvas Overview";

localizedStrings["Canvases"] = "Canvases";

localizedStrings["Cap"] = "Cap";

localizedStrings["Caps"] = "Caps";

@@localizedStrings["Experimental"] = "Experimental";

localizedStrings["Expires"] = "Expires";

localizedStrings["Export"] = "Export";

localizedStrings["Export HAR"] = "Export HAR";

404localizedStrings["Export recording (%s)"] = "Export recording (%s)";

localizedStrings["Expression"] = "Expression";

localizedStrings["Extension Scripts"] = "Extension Scripts";

localizedStrings["Extensions"] = "Extensions";

@@localizedStrings["Image Size"] = "Image Size";

localizedStrings["Images"] = "Images";

localizedStrings["Immediate Pause Requested"] = "Immediate Pause Requested";

localizedStrings["Import"] = "Import";

499localizedStrings["Import recording from file"] = "Import recording from file";

500localizedStrings["Imported Recordings"] = "Imported Recordings";

localizedStrings["Incomplete"] = "Incomplete";

localizedStrings["Indent"] = "Indent";

localizedStrings["Indent width:"] = "Indent width:";

@@localizedStrings["Stalled"] = "Stalled";

localizedStrings["Start Time"] = "Start Time";

localizedStrings["Start element selection (%s)"] = "Start element selection (%s)";

localizedStrings["Start recording (%s)\nCreate new recording (%s)"] = "Start recording (%s)\nCreate new recording (%s)";

908 localizedStrings["Start recording canvas actions. Shift-click to record a single frame."] = "Start recording canvas actions. Shift-click to record a single frame.";

910localizedStrings["Start recording canvas actions.\nShift-click to record a single frame."] = "Start recording canvas actions.\nShift-click to record a single frame.";

localizedStrings["Start to Finish"] = "Start to Finish";

localizedStrings["State"] = "State";

localizedStrings["Status"] = "Status";

Source/WebInspectorUI/UserInterface/Images/Canvas2D.svg

11<?xml version="1.0" encoding="utf-8"?>

<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <polygon fill="rgb(242, 97, 97)" stroke="white" stroke-width="0.5" points="9,5.226497308103743 14,13.88675134594813 4,13.88675134594813" />

    <circle fill="rgb(97, 242, 97)" stroke="white" stroke-width="0.5" cx="10" cy="5" r="4" />

    <rect fill="rgb(92, 140, 229)" stroke="white" stroke-width="0.5" x="1.5" y="3" width="8" height="8" />

<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">

    <rect x="1.5" y="1.5" width="13" height="13" rx="1.5" ry="1.5" fill="#fff" stroke="#4d4d4d"/>

    <path d="M11,9,9,11,6,8,3,11v1.3a.7.7,0,0,0,.7.7h8.6a.7.7,0,0,0,.7-.7V11Z" fill="#666"/>

    <circle cx="10.5" cy="5.5" r="1.75" fill="#666"/>

77</svg>

Source/WebInspectorUI/UserInterface/Images/Canvas3D.svg

11<?xml version="1.0" encoding="utf-8"?>

<svg viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <path fill="rgb(92, 140, 229)" stroke="white" stroke-width="0.5" stroke-linejoin="round" stroke-linecap="square" d="M 0.5 4.29857047 L 7.09714095 7.59714095 L 7.09714095 15.0189245 L 0.5 11.720354 L 0.5 4.29857047 Z" />

    <path fill="rgb(242, 97, 97)" stroke="white" stroke-width="0.5" stroke-linejoin="round" stroke-linecap="square" d="M 13.697 4.299 L 7.097 7.597 L 7.097 15.019 L 13.697 11.72 L 13.697 4.299 Z"/>

    <path fill="rgb(97, 242, 97)" stroke="white" stroke-width="0.5" stroke-linejoin="round" d="M 0.5 4.29857047 L 7.09714095 1 L 13.6908901 4.29857047 L 7.09714095 7.59714095 L 0.5 4.29857047 Z"/>

<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">

    <rect x="1.5" y="1.5" width="13" height="13" rx="1.5" ry="1.5" fill="#fff" stroke="#4d4d4d"/>

    <polygon points="12.109 10.361 8.451 12.469 8 12.731 7.549 12.469 3.891 10.361 3.891 5.63 4.207 5.45 7.982 3.269 11.775 5.45 12.1 5.639 12.1 6.315 12.109 10.361" fill="#ccc" stroke="#666"/>

    <path d="M12.1,5.639,8,8,3.891,5.63M8,8v4.731" fill="none" stroke="#666"/>

77</svg>

Source/WebInspectorUI/UserInterface/Images/Recording.svg

<?xml version="1.0" encoding="utf-8"?>

<!-- Copyright © 2017 Apple Inc. All rights reserved. -->

<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">

4 <path d="M 6.5 8 A 1.5 1.5 0 1 1 5 6.5 1.5 1.5 0 0 1 6.5 8 Z M 5 9.5 h 6 m 0 -3 A 1.5 1.5 0 1 0 12.5 8 1.5 1.5 0 0 0 11 6.5 Z" fill="none" stroke="currentColor"/>

5 <path d="M1.5 3.729 v 8.542 a 1.127 1.127 0 0 0 1 1.22 h 11 a 1.127 1.127 0 0 0 1 -1.22 V 3.729 a 1.127 1.127 0 0 0 -1 -1.22 H 2.5 A 1.127 1.127 0 0 0 1.5 3.729 Z" fill="none" stroke="currentColor"/>

    <circle cx="4" cy="8" r="2.5" fill="none" stroke="rgb(26, 26, 26)" stroke-width="1.2"/>

    <circle cx="12" cy="8" r="2.5" fill="none" stroke="rgb(26, 26, 26)" stroke-width="1.2"/>

    <line x1="4" y1="10.5" x2="12" y2="10.5" fill="none" stroke="rgb(26, 26, 26)"/>

67</svg>

Source/WebInspectorUI/UserInterface/Main.html

    <link rel="stylesheet" href="Views/CanvasContentView.css">

    <link rel="stylesheet" href="Views/CanvasDetailsSidebarPanel.css">

    <link rel="stylesheet" href="Views/CanvasOverviewContentView.css">

49 <link rel="stylesheet" href="Views/CanvasSidebarPanel.css">

    <link rel="stylesheet" href="Views/CanvasTabContentView.css">

    <link rel="stylesheet" href="Views/ChartDetailsSectionRow.css">

    <link rel="stylesheet" href="Views/CheckboxNavigationItem.css">

    <link rel="stylesheet" href="Views/ProbeDetailsSidebarPanel.css">

    <link rel="stylesheet" href="Views/ProbeSetDataGrid.css">

    <link rel="stylesheet" href="Views/ProfileView.css">

143 <link rel="stylesheet" href="Views/ProgressView.css">

    <link rel="stylesheet" href="Views/QuickConsole.css">

    <link rel="stylesheet" href="Views/RadioButtonNavigationItem.css">

    <link rel="stylesheet" href="Views/RecordingActionTreeElement.css">

    <link rel="stylesheet" href="Views/RecordingContentView.css">

    <link rel="stylesheet" href="Views/RecordingStateDetailsSidebarPanel.css">

    <link rel="stylesheet" href="Views/RecordingTraceDetailsSidebarPanel.css">

148 <link rel="stylesheet" href="Views/RecordingNavigationSidebarPanel.css">

    <link rel="stylesheet" href="Views/RenderingFrameTimelineOverviewGraph.css">

    <link rel="stylesheet" href="Views/RenderingFrameTimelineView.css">

    <link rel="stylesheet" href="Views/Resizer.css">

    <script src="Views/CanvasContentView.js"></script>

    <script src="Views/CanvasDetailsSidebarPanel.js"></script>

    <script src="Views/CanvasOverviewContentView.js"></script>

564 <script src="Views/CanvasSidebarPanel.js"></script>

    <script src="Views/CanvasTreeElement.js"></script>

    <script src="Views/ChartDetailsSectionRow.js"></script>

    <script src="Views/CheckboxNavigationItem.js"></script>

    <script src="Views/ProfileNodeDataGridNode.js"></script>

    <script src="Views/ProfileNodeTreeElement.js"></script>

    <script src="Views/ProfileView.js"></script>

693 <script src="Views/ProgressView.js"></script>

    <script src="Views/QuickConsole.js"></script>

    <script src="Views/QuickConsoleNavigationBar.js"></script>

    <script src="Views/RadioButtonNavigationItem.js"></script>

    <script src="Views/RecordingActionTreeElement.js"></script>

    <script src="Views/RecordingContentView.js"></script>

696 <script src="Views/RecordingNavigationSidebarPanel.js"></script>

    <script src="Views/RecordingStateDetailsSidebarPanel.js"></script>

    <script src="Views/RecordingTraceDetailsSidebarPanel.js"></script>

    <script src="Views/RenderingFrameTimelineDataGridNode.js"></script>

Source/WebInspectorUI/UserInterface/Models/RecordingAction.js

@@WI.RecordingAction = class RecordingAction extends WI.Object

    get parameters() { return this._parameters; }

    get swizzleTypes() { return this._payloadSwizzleTypes; }

    get trace() { return this._trace; }

9495 get snapshot() { return this._snapshot; }

96 set snapshot(snapshot) { this._snapshot = snapshot; }

    get valid() { return this._valid; }

    get isFunction() { return this._isFunction; }

    get isGetter() { return this._isGetter; }

Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css

.content-view.canvas:not(.tab) {

    background-color: hsl(0, 0%, 90%);

    --progress-padding: 8px;

}

.content-view.canvas:not(.tab) > .progress {

    padding: var(--progress-padding) 0;

    text-align: center;

    color: var(--text-color-gray-medium);

}

.content-view.canvas:not(.tab) > .progress > .frame-count {

    color: var(--text-color-gray-dark);

}

.content-view.canvas:not(.tab) > .preview {

    padding: 15px;

}

.content-view.canvas:not(.tab) {

    display: flex;

    flex-direction: column;

}

.content-view.canvas:not(.tab) > .preview > img {

    max-width: 100%;

    max-height: 100%;

Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js

@@WI.CanvasContentView = class CanvasContentView extends WI.ContentView

        this.element.classList.add("canvas");

36 this._~~recordingP~~rogressEl~~ement~~ = null;

36 this._progressView = null;

        this._previewContainerElement = null;

        this._previewImageElement = null;

        this._errorElement = null;

@@WI.CanvasContentView = class CanvasContentView extends WI.ContentView

        this._recordingOptionElementMap = new WeakMap;

        if (this.representedObject.contextType === WI.Canvas.ContextType.Canvas2D || this.representedObject.contextType === WI.Canvas.ContextType.WebGL) {

48 const toolTip = WI.UIString("Start recording canvas actions. Shift-click to record a single frame.");

48 const toolTip = WI.UIString("Start recording canvas actions.\nShift-click to record a single frame.");

            const altToolTip = WI.UIString("Stop recording canvas actions");

            this._recordButtonNavigationItem = new WI.ToggleButtonNavigationItem("record-start-stop", toolTip, altToolTip, "Images/Record.svg", "Images/Stop.svg", 13, 13);

            this._recordButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.High;

@@WI.CanvasContentView = class CanvasContentView extends WI.ContentView

    get navigationItems()

    {

        let navigationItems = [this._refreshButtonNavigationItem, this._showGridButtonNavigationItem];

        if (this._recordButtonNavigationItem)

            navigationItems.unshift(this._recordButtonNavigationItem);

        return navigationItems;

        // The toggle recording NavigationItem isn't added to the ContentBrowser's NavigationBar.

        // It's added to the "quick access" NavigationBar shown when hovering the canvas in the overview.

        return [this._refreshButtonNavigationItem, this._showGridButtonNavigationItem];

    }

    refresh()

@@WI.CanvasContentView = class CanvasContentView extends WI.ContentView

        if (!this._previewImageElement) {

            this._previewImageElement = document.createElement("img");

158 this._previewImageElement.addEventListener("click", this._handlePreviewImageClick.bind(this));

            this._previewImageElement.addEventListener("error", this._showError.bind(this));

        }

@@WI.CanvasContentView = class CanvasContentView extends WI.ContentView

        this.refresh();

        this._updateRecordNavigationItem();

181 this._updateProgressView();

    }

    attached()

@@WI.CanvasContentView = class CanvasContentView extends WI.ContentView

    _recordingStarted(event)

    {

        this._updateRecordNavigationItem();

        if (!this.representedObject.isRecording)

            return;

        if (!this._recordingProgressElement) {

            this._recordingProgressElement = this._previewContainerElement.insertAdjacentElement("beforebegin", document.createElement("div"));

            this._recordingProgressElement.className = "progress";

        }

        this._recordingProgressElement.textContent = WI.UIString("Waiting for frames…");

266 this._updateProgressView();

    }

    _recordingProgress(event)

@@WI.CanvasContentView = class CanvasContentView extends WI.ContentView

        if (canvas !== this.representedObject)

            return;

        this._recordingProgressElement.removeChildren();

        let frameCountElement = this._recordingProgressElement.appendChild(document.createElement("span"));

        frameCountElement.className = "frame-count";

        let frameString = frameCount === 1 ? WI.UIString("%d Frame") : WI.UIString("%d Frames");

        frameCountElement.textContent = frameString.format(frameCount);

        this._recordingProgressElement.append(" ");

        let bufferUsedElement = this._recordingProgressElement.appendChild(document.createElement("span"));

        bufferUsedElement.className = "buffer-used";

        bufferUsedElement.textContent = "(" + Number.bytesToString(bufferUsed) + ")";

275 this._updateProgressView(frameCount, bufferUsed);

    }

    _recordingStopped(event)

@@WI.CanvasContentView = class CanvasContentView extends WI.ContentView

        if (canvas !== this.representedObject)

            return;

286 this._updateProgressView();

287

306288 if (recording)

307289 this._addRecording(recording);

290 }

308291

        if (this._recordingProgressElement) {

            this._recordingProgressElement.remove();

            this._recordingProgressElement = null;

        }

    _handlePreviewImageClick(event)

    {

        WI.showRepresentedObject(this.representedObject);

    }

    _handleRecordingSelectElementChange(event)

@@WI.CanvasContentView = class CanvasContentView extends WI.ContentView

        this._recordButtonNavigationItem.enabled = isRecording || !WI.canvasManager.recordingCanvas;

        this._recordButtonNavigationItem.toggled = isRecording;

373 this._refreshButtonNavigationItem.enabled = !isRecording;

374

391375 this.element.classList.toggle("is-recording", isRecording);

392376 }

    _updateProgressView(frameCount, bufferUsed)

    {

        if (!this.representedObject.isRecording) {

            if (this._progressView && this._progressView.parentView) {

                this.removeSubview(this._progressView);

                this._progressView = null;

            }

            return;

        }

        if (!this._progressView) {

            this._progressView = new WI.ProgressView;

            this._progressView.element.addEventListener("click", this._handlePreviewImageClick.bind(this));

            this.element.insertBefore(this._progressView.element, this._previewContainerElement);

            this.addSubview(this._progressView);

        }

        let title;

        if (frameCount) {

            let formatString = frameCount === 1 ? WI.UIString("%d Frame") : WI.UIString("%d Frames");

            title = formatString.format(frameCount);

        } else

            title = WI.UIString("Waiting for frames…")

        this._progressView.title = title;

        this._progressView.subtitle = bufferUsed ? Number.bytesToString(bufferUsed) : "";

    }

393405};

Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js

@@WI.CanvasDetailsSidebarPanel = class CanvasDetailsSidebarPanel extends WI.Detail

        this.canvas = objects.find((object) => object instanceof WI.Canvas);

58 return ~~true~~;

58 return !!this.canvas;

    }

    get canvas()

Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css

    background-color: white;

}

41 .content-view.canvas-overview .content-view.canvas ~~> :matches(header, .progress, .preview, footer)~~ {

41.content-view.canvas-overview .content-view.canvas {

    border: 1px solid var(--border-color);

}

.content-view.canvas-overview .content-view.canvas.selected > :matches(.progress, .preview, footer),

.content-view.canvas-overview .content-view.canvas.selected:not(.is-recording) > header {

    border-color: var(--selected-background-color);

45.content-view.canvas-overview .content-view.canvas.is-recording {

46 border-color: red;

}

.content-view.canvas-overview .content-view.canvas > :matches(header, footer) {

.content-view.canvas-overview .content-view.canvas > header {

    font-size: 13px;

62 border-bottom: none;

}

.content-view.canvas-overview .content-view.canvas.is-recording > header {

    background-color: red;

67 border-color: red;

}

.content-view.canvas-overview .content-view.canvas > header > .titles,

.content-view.canvas-overview .content-view.canvas > header > .navigation-bar {

    align-items: initial;

    border: none;

100 opacity: 0;

101 transition: opacity 200ms ease-in-out;

103102}

104103

105 .content-view.canvas-overview .content-view.canvas:not(:hover, .is-recording, .selected) > header > .navigation-bar {

106 visibility: hidden;

.content-view.canvas-overview .content-view.canvas:matches(:hover, .is-recording) > header > .navigation-bar {

    opacity: 1;

    transition: opacity 200ms ease-in-out;

}

.content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop.disabled {

    filter: brightness(80%);

}

.content-view.canvas-overview .content-view.canvas > :matches(.progress, .preview) {

    border-top: none;

    border-bottom: none;

122.content-view.canvas-overview .content-view.canvas.is-recording > .progress-view {

123 cursor: pointer;

125124}

126125

126.content-view.canvas-overview .content-view.canvas.is-recording > .progress-view,

127127.content-view.canvas-overview .content-view.canvas > .preview {

    height: var(--preview-height);

    --preview-height: 280px;

128 height: 280px;

131129}

132130

.content-view.canvas-overview .content-view.canvas > .progress ~ .preview {

    /* Keep the height of each CanvasContentView constant by subtracting the padding-top, */

    /* padding-bottom, and text-height (1em) from the previously set height. */

    height: calc(var(--preview-height) - 1em - (2 * var(--progress-padding)));

131.content-view.canvas-overview .content-view.canvas.is-recording > .preview {

132 display: none;

}

.content-view.canvas-overview .content-view.canvas > .preview > img {

    border-radius: 4px;

    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.58);

138 cursor: pointer;

}

.content-view.canvas-overview .content-view.canvas > .preview > .message-text-view {

Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js

@@WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec

        this.element.classList.add("canvas-overview");

        this._importButtonNavigationItem = new WI.ButtonNavigationItem("import-recording", WI.UIString("Import"), "Images/Import.svg", 15, 15);

        this._importButtonNavigationItem.toolTip = WI.UIString("Import recording from file");

        this._importButtonNavigationItem.buttonStyle = WI.ButtonNavigationItem.Style.ImageAndText;

        this._importButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, () => { WI.canvasManager.importRecording(); });

        this._refreshButtonNavigationItem = new WI.ButtonNavigationItem("refresh-all", WI.UIString("Refresh all"), "Images/ReloadFull.svg", 13, 13);

        this._refreshButtonNavigationItem.enabled = false;

        this._refreshButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._refreshPreviews, this);

@@WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec

        this._showGridButtonNavigationItem.activated = !!WI.settings.showImageGrid.value;

        this._showGridButtonNavigationItem.enabled = false;

        this._showGridButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._showGridButtonClicked, this);

        this.selectionEnabled = true;

        this._keyboardShortcuts = [

            new WI.KeyboardShortcut(null, WI.KeyboardShortcut.Key.Up, this._handleUp.bind(this)),

            new WI.KeyboardShortcut(null, WI.KeyboardShortcut.Key.Right, this._handleRight.bind(this)),

            new WI.KeyboardShortcut(null, WI.KeyboardShortcut.Key.Down, this._handleDown.bind(this)),

            new WI.KeyboardShortcut(null, WI.KeyboardShortcut.Key.Left, this._handleLeft.bind(this)),

        ];

        let recordShortcut = new WI.KeyboardShortcut(null, WI.KeyboardShortcut.Key.Space, this._handleSpace.bind(this));

        recordShortcut.implicitlyPreventsDefault = false;

        this._keyboardShortcuts.push(recordShortcut);

        let recordSingleFrameShortcut = new WI.KeyboardShortcut(WI.KeyboardShortcut.Modifier.Shift, WI.KeyboardShortcut.Key.Space, this._handleSpace.bind(this));

        recordSingleFrameShortcut.implicitlyPreventsDefault = false;

        this._keyboardShortcuts.push(recordSingleFrameShortcut);

        for (let shortcut of this._keyboardShortcuts)

            shortcut.disabled = true;

    }

    // Public

    get navigationItems()

    {

        return [this._refreshButtonNavigationItem, this._showGridButtonNavigationItem];

    }

    get selectionPathComponents()

    {

        let components = [];

        if (this.supplementalRepresentedObjects.length) {

            let [canvas] = this.supplementalRepresentedObjects;

            let tabContentView = WI.tabBrowser.selectedTabContentView;

            if (tabContentView) {

                let treeElement = tabContentView.treeElementForRepresentedObject(canvas);

                console.assert(treeElement);

                if (treeElement) {

                    let pathComponent = new WI.GeneralTreeElementPathComponent(treeElement);

                    pathComponent.addEventListener(WI.HierarchicalPathComponent.Event.SiblingWasSelected, this._selectionPathComponentsChanged, this);

                    components.push(pathComponent);

                }

            }

        }

        return components;

67 return [this._importButtonNavigationItem, new WI.DividerNavigationItem, this._refreshButtonNavigationItem, this._showGridButtonNavigationItem];

    }

    hidden()

@@WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec

        super.attached();

        WI.settings.showImageGrid.addEventListener(WI.Setting.Event.Changed, this._updateShowImageGrid, this);

        this.addEventListener(WI.ContentView.Event.SupplementalRepresentedObjectsDidChange, this._supplementalRepresentedObjectsDidChange, this);

        for (let shortcut of this._keyboardShortcuts)

            shortcut.disabled = false;

    }

    detached()

    {

        WI.settings.showImageGrid.removeEventListener(null, null, this);

        this.removeEventListener(null, null, this);

        for (let shortcut of this._keyboardShortcuts)

            shortcut.disabled = true;

        super.detached();

    }

@@WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec

            canvasContentView.refresh();

    }

    _changeSelectedItemVertically(shift)

    {

        let itemElementWidth = this.element.firstElementChild.offsetWidth + (2 * this._itemMargin);

        let itemsPerRow = Math.floor(this.element.offsetWidth / itemElementWidth);

        let items = Array.from(this.representedObject.items);

        let index = items.indexOf(this._selectedItem);

        if (index === -1)

            index = shift < 0 ? items.length + 1 : itemsPerRow;

        index += shift * itemsPerRow;

        if (index < 0)

            index = items.length + index;

        this.setSelectedItem(items[index % items.length]);

    }

    _changeSelectedItemHorizontally(shift)

    {

        let itemElementWidth = this.element.firstElementChild.offsetWidth + (2 * this._itemMargin);

        let itemsPerRow = Math.floor(this.element.offsetWidth / itemElementWidth);

        let items = Array.from(this.representedObject.items);

        let index = items.indexOf(this._selectedItem);

        if (index === -1)

            index = shift >= 0 ? itemsPerRow - 1 : 0;

        let selectedRow = Math.floor(index / itemsPerRow);

        index += shift;

        if (index < selectedRow * itemsPerRow)

            index += itemsPerRow;

        else if (index >= (selectedRow + 1) * itemsPerRow)

            index -= itemsPerRow;

        this.setSelectedItem(items[index]);

    }

    _updateNavigationItems()

    {

        let hasItems = !!this.representedObject.items.size;

@@WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec

        this._showGridButtonNavigationItem.enabled = hasItems;

    }

    _selectionPathComponentsChanged(event)

    {

        let pathComponent = event.data.pathComponent;

        if (pathComponent.representedObject instanceof WI.Canvas)

            this.setSelectedItem(pathComponent.representedObject);

        else if (pathComponent.representedObject instanceof WI.Recording)

            WI.showRepresentedObject(pathComponent.representedObject);

    }

    _showGridButtonClicked(event)

    {

        WI.settings.showImageGrid.value = !this._showGridButtonNavigationItem.activated;

    }

    _handleUp(event)

    {

        this._changeSelectedItemVertically(-1);

    }

    _handleRight(event)

    {

        let shift = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? -1 : 1;

        this._changeSelectedItemHorizontally(shift);

    }

    _handleDown(event)

    {

        this._changeSelectedItemVertically(1);

    }

    _handleLeft(event)

    {

        let shift = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? 1 : -1;

        this._changeSelectedItemHorizontally(shift);

    }

    _handleSpace(event)

    {

        if (WI.isEventTargetAnEditableField(event))

            return;

        if (!this._selectedItem)

            return;

        if (this._selectedItem.isRecording)

            WI.canvasManager.stopRecording();

        else if (!WI.canvasManager.recordingCanvas) {

            let singleFrame = !!event.shiftKey;

            WI.canvasManager.startRecording(this._selectedItem, singleFrame);

        }

        event.preventDefault();

    }

    _updateShowImageGrid()

    {

        this._showGridButtonNavigationItem.activated = !!WI.settings.showImageGrid.value;

    }

    _supplementalRepresentedObjectsDidChange()

    {

        this.dispatchEventToListeners(WI.ContentView.Event.SelectionPathComponentsDidChange);

    }

    _contentViewMouseEnter(event)

    {

        let contentView = WI.View.fromElement(event.target);

Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css

/*

 * Copyright (C) 2018 Apple Inc. All rights reserved.

 *

 * Redistribution and use in source and binary forms, with or without

 * modification, are permitted provided that the following conditions

 * are met:

 * 1. Redistributions of source code must retain the above copyright

 *    notice, this list of conditions and the following disclaimer.

 * 2. Redistributions in binary form must reproduce the above copyright

 *    notice, this list of conditions and the following disclaimer in the

 *    documentation and/or other materials provided with the distribution.

 *

 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''

 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,

 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR

 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS

 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR

 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF

 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS

 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN

 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)

 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF

 * THE POSSIBILITY OF SUCH DAMAGE.

 */

.sidebar > .panel.navigation.canvas > .content {

    top: var(--navigation-bar-height);

}

.sidebar > .panel.navigation.canvas > .navigation-bar > .item.record-start-stop.disabled {

    filter: grayscale();

    opacity: 0.5;

}

.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.canvas.canvas-2d .icon {

    content: url(../Images/Canvas2D.svg);

}

.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.canvas.webgl .icon {

    content: url(../Images/Canvas3D.svg);

}

.sidebar > .panel.navigation.canvas > .content > .navigation-bar {

    border-top: 1px solid var(--border-color);

}

.sidebar > .panel.navigation.canvas.has-recordings > .content > .tree-outline.canvas {

    max-height: 50%;

    overflow-y: scroll;

}

.sidebar > .panel.navigation.canvas:not(.has-recordings) > .filter-bar,

.sidebar > .panel.navigation.canvas:not(.has-recordings) > .content > .navigation-bar {

    display: none;

}

.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.recording > .icon {

    content: url(../Images/Recording.svg);

}

.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.shader-program > .icon {

    content: image-set(url(../Images/DocumentGL.png) 1x, url(../Images/DocumentGL@2x.png) 2x);

}

.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.folder-icon > .icon {

    content: url(../Images/RenderingFrame.svg);

}

.sidebar > .panel.navigation.canvas > .content > .tree-outline .item.folder-icon > .status {

    line-height: 16px;

}

Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js

/*

 * Copyright (C) 2018 Apple Inc. All rights reserved.

 *

 * Redistribution and use in source and binary forms, with or without

 * modification, are permitted provided that the following conditions

 * are met:

 * 1. Redistributions of source code must retain the above copyright

 *    notice, this list of conditions and the following disclaimer.

 * 2. Redistributions in binary form must reproduce the above copyright

 *    notice, this list of conditions and the following disclaimer in the

 *    documentation and/or other materials provided with the distribution.

 *

 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''

 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,

 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR

 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS

 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR

 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF

 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS

 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN

 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)

 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF

 * THE POSSIBILITY OF SUCH DAMAGE.

 */

WI.CanvasSidebarPanel = class CanvasSidebarPanel extends WI.NavigationSidebarPanel

{

    constructor()

    {

        super("canvas", WI.UIString("Canvas"));

        this._canvas = null;

        this._recording = null;

        this._navigationBar = new WI.NavigationBar;

        this._scopeBar = null;

        const toolTip = WI.UIString("Start recording canvas actions.\nShift-click to record a single frame.");

        const altToolTip = WI.UIString("Stop recording canvas actions");

        this._recordButtonNavigationItem = new WI.ToggleButtonNavigationItem("record-start-stop", toolTip, altToolTip, "Images/Record.svg", "Images/Stop.svg", 13, 13);

        this._recordButtonNavigationItem.enabled = false;

        this._recordButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._toggleRecording, this);

        this._navigationBar.addNavigationItem(this._recordButtonNavigationItem);

        this.addSubview(this._navigationBar);

        const suppressFiltering = true;

        this._canvasTreeOutline = this.createContentTreeOutline(suppressFiltering);

        this._canvasTreeOutline.element.classList.add("canvas");

        this._recordingNavigationBar = new WI.NavigationBar;

        this.contentView.addSubview(this._recordingNavigationBar);

        this._recordingTreeOutline = this.contentTreeOutline;

        this.contentView.element.appendChild(this._recordingTreeOutline.element);

        this._canvasTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeOutlineSelectionDidChange, this);

        this._recordingTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._treeOutlineSelectionDidChange, this);

        WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStarted, this._updateRecordNavigationItem, this);

        WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStopped, this._updateRecordNavigationItem, this);

    }

    // Public

    get canvas()

    {

        return this._canvas;

    }

    set canvas(canvas)

    {

        if (this._canvas === canvas)

            return;

        if (this._canvas)

            this._canvas.recordingCollection.removeEventListener(null, null, this);

        this._canvas = canvas;

        if (this._canvas) {

            this._canvas.recordingCollection.addEventListener(WI.Collection.Event.ItemAdded, this._recordingAdded, this);

            this._canvas.recordingCollection.addEventListener(WI.Collection.Event.ItemRemoved, this._recordingRemoved, this);

        }

        this._canvasChanged();

        this._updateRecordNavigationItem();

        this._updateRecordingScopeBar();

    }

    set recording(recording)

    {

        if (recording === this._recording)

            return;

        if (recording)

            this.canvas = recording.source;

        this._recording = recording;

        this._recordingChanged();

    }

    set action(action)

    {

        if (!this._recording)

            return;

        let treeElement = this._recordingTreeOutline.findTreeElement(action);

        console.assert(treeElement, "Missing tree element for recording action.", action);

        if (!treeElement)

            return;

        this._recording[WI.CanvasSidebarPanel.SelectedActionSymbol] = action;

        const omitFocus = false;

        const selectedByUser = false;

        treeElement.revealAndSelect(omitFocus, selectedByUser);

    }

    shown()

    {

        super.shown();

        this.contentBrowser.addEventListener(WI.ContentBrowser.Event.CurrentRepresentedObjectsDidChange, this._currentRepresentedObjectsDidChange, this);

    }

    hidden()

    {

        this.contentBrowser.removeEventListener(null, null, this);

        super.hidden();

    }

    // Protected

    hasCustomFilters()

    {

        return true;

    }

    matchTreeElementAgainstCustomFilters(treeElement)

    {

        // Keep recording frame tree elements.

        if (treeElement instanceof WI.FolderTreeElement)

            return true;

        // Always show the Initial State tree element.

        if (treeElement instanceof WI.RecordingActionTreeElement && treeElement.representedObject instanceof WI.RecordingInitialStateAction)

            return true;

        return super.matchTreeElementAgainstCustomFilters(treeElement);

    }

    initialLayout()

    {

        super.initialLayout();

        let filterFunction = (treeElement) => {

            if (!(treeElement.representedObject instanceof WI.RecordingAction))

                return false;

            return treeElement.representedObject.isVisual || treeElement.representedObject instanceof WI.RecordingInitialStateAction;

        };

        const activatedByDefault = false;

        const defaultToolTip = WI.UIString("Only show visual actions");

        const activatedToolTip = WI.UIString("Show all actions");

        this.filterBar.addFilterBarButton("recording-show-visual-only", filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, "Images/Paint.svg", 15, 15);

    }

    // Private

    _recordingAdded(event)

    {

        this.recording = event.data.item;

        this._updateRecordNavigationItem();

        this._updateRecordingScopeBar();

    }

    _recordingRemoved(event)

    {

        let recording = event.data.item;

        if (recording === this.recording)

            this.recording = this._canvas ? this._canvas.recordingCollection.toArray().lastValue : null;

        this._updateRecordingScopeBar();

    }

    _scopeBarSelectionChanged()

    {

        let selectedScopeBarItem = this._scopeBar.selectedItems[0];

        this.recording = selectedScopeBarItem.__recording || null;

    }

    _toggleRecording(event)

    {

        if (!this._canvas)

            return;

        if (this._canvas.isRecording)

            WI.canvasManager.stopRecording();

        else if (!WI.canvasManager.recordingCanvas) {

            let singleFrame = event.data.nativeEvent.shiftKey;

            WI.canvasManager.startRecording(this._canvas, singleFrame);

        }

    }

    _currentRepresentedObjectsDidChange(event)

    {

        let objects = this.contentBrowser.currentRepresentedObjects;

        let canvas = objects.find((object) => object instanceof WI.Canvas);

        if (canvas) {

            this.canvas = canvas;

            return;

        }

        let shaderProgram = objects.find((object) => object instanceof WI.ShaderProgram);

        if (shaderProgram) {

            this.canvas = shaderProgram.canvas;

            let treeElement = this._canvasTreeOutline.findTreeElement(shaderProgram);

            const omitFocus = false;

            const selectedByUser = false;

            treeElement.revealAndSelect(omitFocus, selectedByUser);

            return;

        }

        let recording = objects.find((object) => object instanceof WI.Recording);

        if (recording) {

            this.canvas = recording.source;

            this.recording = recording;

            this.action = objects.find((object) => object instanceof WI.RecordingAction);

            return;

        }

        this.canvas = null;

    }

    _treeOutlineSelectionDidChange(event)

    {

        let treeElement = event.data.selectedElement;

        if (!treeElement)

            return;

        if ((treeElement instanceof WI.CanvasTreeElement) || (treeElement instanceof WI.ShaderProgramTreeElement)) {

            this.showDefaultContentViewForTreeElement(treeElement);

            return;

        }

        if (treeElement instanceof WI.FolderTreeElement)

            treeElement = treeElement.children.lastValue;

        if (!(treeElement instanceof WI.RecordingActionTreeElement))

            return;

        console.assert(this._recording, "Missing recording for action tree element.", treeElement);

        this._recording[WI.CanvasSidebarPanel.SelectedActionSymbol] = treeElement.representedObject;

        let recordingContentView = this.contentBrowser.showContentViewForRepresentedObject(this._recording);

        if (recordingContentView)

            recordingContentView.updateActionIndex(treeElement.index);

    }

    _canvasChanged()

    {

        this._canvasTreeOutline.removeChildren();

        if (!this._canvas)

            return;

        const showRecordings = false;

        let canvasTreeElement = new WI.CanvasTreeElement(this._canvas, showRecordings);

        canvasTreeElement.expanded = true;

        this._canvasTreeOutline.appendChild(canvasTreeElement);

        const omitFocus = false;

        const selectedByUser = false;

        canvasTreeElement.revealAndSelect(omitFocus, selectedByUser);

        if (WI.Canvas.ContextType.Canvas2D || this._canvas.contextType === WI.Canvas.ContextType.WebGL)

            this._recordButtonNavigationItem.enabled = true;

        let defaultSelectedRecording = null;

        if (this._canvas.recordingCollection.items.size)

            defaultSelectedRecording = this._canvas.recordingCollection.toArray().lastValue;

        this.recording = defaultSelectedRecording;

    }

    _recordingChanged()

    {

        this._recordingTreeOutline.removeChildren();

        if (!this._recording)

            return;

        let recording = this._recording;

        this._recording.actions.then((actions) => {

            if (recording !== this._recording)

                return;

            this._recordingTreeOutline.element.dataset.indent = Number.countDigits(actions.length);

            if (actions[0] instanceof WI.RecordingInitialStateAction)

                this._recordingTreeOutline.appendChild(new WI.RecordingActionTreeElement(actions[0], 0, this._recording.type));

            let cumulativeActionIndex = 1;

            this._recording.frames.forEach((frame, frameIndex) => {

                let folder = new WI.FolderTreeElement(WI.UIString("Frame %d").format((frameIndex + 1).toLocaleString()));

                this._recordingTreeOutline.appendChild(folder);

                for (let i = 0; i < frame.actions.length; ++i)

                    folder.appendChild(new WI.RecordingActionTreeElement(frame.actions[i], cumulativeActionIndex + i, this._recording.type));

                if (!isNaN(frame.duration)) {

                    const higherResolution = true;

                    folder.status = Number.secondsToString(frame.duration / 1000, higherResolution);

                }

                if (frame.incomplete)

                    folder.subtitle = WI.UIString("Incomplete");

                if (this._recording.frames.length === 1)

                    folder.expand();

                cumulativeActionIndex += frame.actions.length;

            });

            if (this._scopeBar) {

                let scopeBarItem = this._scopeBar.item(this._recording.displayName);

                console.assert(scopeBarItem, "Missing scopeBarItem for recording.", this._recording);

                scopeBarItem.selected = true;

            }

            this.action = this._recording[WI.CanvasSidebarPanel.SelectedActionSymbol] || null;

        });

    }

    _updateRecordNavigationItem()

    {

        if (!this._canvas || !(this._canvas.contextType === WI.Canvas.ContextType.Canvas2D || this._canvas.contextType === WI.Canvas.ContextType.WebGL)) {

            this._recordButtonNavigationItem.enabled = false;

            return;

        }

        let isRecording = this._canvas.isRecording;

        this._recordButtonNavigationItem.enabled = isRecording || !WI.canvasManager.recordingCanvas;

        this._recordButtonNavigationItem.toggled = isRecording;

    }

    _updateRecordingScopeBar()

    {

        if (this._scopeBar) {

            this._recordingNavigationBar.removeNavigationItem(this._scopeBar);

            this._scopeBar = null;

        }

        if (!this._canvas || !this._canvas.recordingCollection.items.size) {

            this.element.classList.remove("has-recordings");

            return;

        }

        let scopeBarItems = [];

        let selectedScopeBarItem = null;

        for (let recording of this._canvas.recordingCollection.items) {

            let scopeBarItem = new WI.ScopeBarItem(recording.displayName, recording.displayName);

            if (recording === this._recording)

                selectedScopeBarItem = scopeBarItem;

            scopeBarItem.__recording = recording;

            scopeBarItems.push(scopeBarItem);

        }

        if (!selectedScopeBarItem)

            selectedScopeBarItem = scopeBarItems[0];

        this._scopeBar = new WI.ScopeBar("canvas-recordinga-scope-bar", scopeBarItems, selectedScopeBarItem, true);

        this._scopeBar.addEventListener(WI.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionChanged, this);

        this._recordingNavigationBar.insertNavigationItem(this._scopeBar, 0);

        this.element.classList.add("has-recordings");

    }

};

WI.CanvasSidebarPanel.SelectedActionSymbol = Symbol("selected-action");

Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css

 * THE POSSIBILITY OF SUCH DAMAGE.

 */

26 .content-view.tab.canvas .navigation-bar > .item > .h~~ierarchical-path-component >~~ .icon {

27 ~~opaci~~ty~~: 0~~.7;

26.content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon {

27 content: url(../Images/CanvasOverview.svg);

2828}

2929

/* FIXME: this can be removed once <https://webkit.org/b/177606> is complete. */

.content-view.tab.canvas .navigation-bar > .item .canvas .icon {

    content: url(../Images/Canvas.svg);

.content-view.tab.canvas .navigation-bar > .item .canvas.canvas-2d .icon {

    content: url(../Images/Canvas2D.svg);

}

.content-view.tab.canvas .navigation-bar > .item .canvas.webgl .icon {

    content: url(../Images/Canvas3D.svg);

}

.content-view.tab.canvas .navigation-bar > .item .recording > .icon {

    content: url(../Images/Recording.svg);

}

.content-view.tab.canvas .navigation-bar > .item .shader-program > .icon {

    content: image-set(url(../Images/DocumentGL.png) 1x, url(../Images/DocumentGL@2x.png) 2x);

}

Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.js

@@WI.CanvasTabContentView = class CanvasTabContentView extends WI.ContentBrowserTa

        let tabBarItem = WI.GeneralTabBarItem.fromTabInfo(WI.CanvasTabContentView.tabInfo());

34 const navigationSidebarPanelConstructor = WI.~~RecordingNavigation~~SidebarPanel;

34 const navigationSidebarPanelConstructor = WI.CanvasSidebarPanel;

        const detailsSidebarPanelConstructors = [WI.RecordingStateDetailsSidebarPanel, WI.RecordingTraceDetailsSidebarPanel, WI.CanvasDetailsSidebarPanel];

        const disableBackForward = true;

        super("canvas", ["canvas"], tabBarItem, navigationSidebarPanelConstructor, detailsSidebarPanelConstructors, disableBackForward);

@@WI.CanvasTabContentView = class CanvasTabContentView extends WI.ContentBrowserTa

        this._canvasTreeOutline = new WI.TreeOutline;

        this._canvasTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._canvasTreeOutlineSelectionDidChange, this);

        const leftArrow = "Images/BackForwardArrows.svg#left-arrow-mask";

        const rightArrow = "Images/BackForwardArrows.svg#right-arrow-mask";

        let isRTL = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL;

        let backButtonImage = isRTL ? rightArrow : leftArrow;

        this._overviewNavigationItem = new WI.ButtonNavigationItem("canvas-overview", WI.UIString("Canvas Overview"), backButtonImage, 8, 13);

        this._overviewNavigationItem.hidden = true;

        this._overviewNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.High;

        this._overviewNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, () => { this.showRepresentedObject(this._canvasCollection); });

44 this._overviewTreeElement = new WI.GeneralTreeElement("canvas-overview", WI.UIString("Overview"), null, this._canvasCollection);

45 this._canvasTreeOutline.appendChild(this._overviewTreeElement);

5246

53 this.contentBrowser.navigationBar.insertNavigationItem(this._overviewNavigationItem, 2);

54 this.contentBrowser.navigationBar.insertNavigationItem(new WI.DividerNavigationItem, 3);

        this._importedRecordingsTreeElement = new WI.FolderTreeElement(WI.UIString("Imported Recordings"));

        this._importedRecordingsTreeElement.hidden = true;

        this._overviewTreeElement.appendChild(this._importedRecordingsTreeElement);

5550

56 this.navigationSidebarPanel.contentTreeOutline.addEventListener(WI.TreeOutline.Event.SelectionDidChange, this._navigationSidebarTreeOutlineSelectionChanged, this);

        this._recordShortcut = new WI.KeyboardShortcut(null, WI.KeyboardShortcut.Key.Space, this._handleSpace.bind(this));

        this._recordShortcut.implicitlyPreventsDefault = false;

        this._recordSingleFrameShortcut = new WI.KeyboardShortcut(WI.KeyboardShortcut.Modifier.Shift, WI.KeyboardShortcut.Key.Space, this._handleSpace.bind(this));

        this._recordSingleFrameShortcut.implicitlyPreventsDefault = false;

    }

    static tabInfo()

@@WI.CanvasTabContentView = class CanvasTabContentView extends WI.ContentBrowserTa

    canShowRepresentedObject(representedObject)

    {

91 return representedObject instanceof WI.CanvasCollection

90 return representedObject instanceof WI.Canvas

91 || representedObject instanceof WI.CanvasCollection

            || representedObject instanceof WI.Recording

            || representedObject instanceof WI.ShaderProgram;

    }

    showRepresentedObject(representedObject, cookie)

    {

        super.showRepresentedObject(representedObject, cookie);

        this.navigationSidebarPanel.recording = null;

        if (representedObject instanceof WI.CanvasCollection || representedObject instanceof WI.ShaderProgram) {

            this._overviewNavigationItem.hidden = true;

            return;

        }

        if (representedObject instanceof WI.Recording) {

            this._overviewNavigationItem.hidden = false;

            this.navigationSidebarPanel.recording = representedObject;

            return;

        }

        console.assert(false, "Should not be reached.");

    }

    shown()

    {

        super.shown();

@@WI.CanvasTabContentView = class CanvasTabContentView extends WI.ContentBrowserTa

        WI.canvasManager.addEventListener(WI.CanvasManager.Event.CanvasRemoved, this._handleCanvasRemoved, this);

        WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingImported, this._recordingImportedOrStopped, this);

        WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStopped, this._recordingImportedOrStopped, this);

144 WI.RecordingContentView.addEventListener(WI.RecordingContentView.Event.RecordingActionIndexChanged, this._recordingActionIndexChanged, this);

        let canvases = new Set(Array.from(this._canvasCollection.items).concat(WI.canvasManager.canvases));

@@WI.CanvasTabContentView = class CanvasTabContentView extends WI.ContentBrowserTa

    _addCanvas(canvas)

    {

171 this._~~canvas~~TreeOu~~tline~~.appendChild(new WI.CanvasTreeElement(canvas));

150 this._overviewTreeElement.appendChild(new WI.CanvasTreeElement(canvas));

        this._canvasCollection.add(canvas);

        for (let recording of canvas.recordingCollection.items)

@@WI.CanvasTabContentView = class CanvasTabContentView extends WI.ContentBrowserTa

    _removeCanvas(canvas)

    {

        // Move all existing recordings for the removed canvas to be imported recordings, as the

        // recording's source is no longer valid.

        for (let recording of canvas.recordingCollection.items) {

            recording.source = null;

            recording.createDisplayName();

            const subtitle = null;

            this._canvasTreeOutline.appendChild(new WI.GeneralTreeElement(["recording"], recording.displayName, subtitle, recording));

        }

159 // FIXME: Create tree elements/cards for recordings belonging to the removed canvas.

        let treeElement = this._canvasTreeOutline.findTreeElement(canvas);

        console.assert(treeElement, "Missing tree element for canvas.", canvas);

192 this._~~canvas~~TreeOu~~tline~~.removeChild(treeElement);

163 this._overviewTreeElement.removeChild(treeElement);

        this._canvasCollection.remove(canvas);

        let currentContentView = this.contentBrowser.currentContentView;

@@WI.CanvasTabContentView = class CanvasTabContentView extends WI.ContentBrowserTa

            return;

        let representedObject = selectedElement.representedObject;

        if (this.canShowRepresentedObject(representedObject)) {

            this.showRepresentedObject(representedObject);

            if (representedObject instanceof WI.Recording)

                this._updateActionIndex(0);

            return;

        }

        if (representedObject instanceof WI.Canvas) {

            this.showRepresentedObject(this._canvasCollection);

            this.contentBrowser.currentContentView.setSelectedItem(representedObject);

188 if (!this.canShowRepresentedObject(representedObject)) {

189 console.assert(false, "Unexpected representedObject.", representedObject);

            return;

        }

232 c~~onsole.assert(false, "Unexpected r~~epresentedObject~~.",~~ representedObject);

193 this.showRepresentedObject(representedObject);

    }

    _recordingImportedOrStopped(event)

@@WI.CanvasTabContentView = class CanvasTabContentView extends WI.ContentBrowserTa

        });

    }

    _navigationSidebarTreeOutlineSelectionChanged(event)

    {

        if (!event.data.selectedElement)

            return;

        let recordingContentView = this.contentBrowser.currentContentView;

        if (!(recordingContentView instanceof WI.RecordingContentView))

            return;

        let selectedTreeElement = event.data.selectedElement;

        if (selectedTreeElement instanceof WI.FolderTreeElement)

            selectedTreeElement = selectedTreeElement.children.lastValue;

        this._updateActionIndex(selectedTreeElement.index, {suppressNavigationSidebarUpdate: true});

    }

    _recordingAdded(recording, options = {})

    {

        if (!recording.source) {

            const subtitle = null;

            let recordingTreeElement = new WI.GeneralTreeElement(["recording"], recording.displayName, subtitle, recording);

267 this._canvasTreeOutline.appendChild(recordingTreeElement);

212 this._importedRecordingsTreeElement.hidden = false;

213 this._importedRecordingsTreeElement.appendChild(recordingTreeElement);

268214 }

269215

270 if (!options.suppressShowRecording) {

216 if (!options.suppressShowRecording)

271217 this.showRepresentedObject(recording);

272 this._updateActionIndex(0, {suppressNavigationSidebarUpdate: true});

273 }

274218 }

275219

276 _~~recordingActionIndexC~~hanged(event)

220 _handleSpace(event)

277221 {

278 if (event~~.target !== this.contentBrowser.currentContentView~~)

222 if (WI.isEventTargetAnEditableField(event))

279223 return;

280224

281 this.~~_updateAc~~tionIn~~dex(event.data.index~~);

282 }

225 if (!this.navigationSidebarPanel)

226 return;

283227

    _updateActionIndex(index, options = {})

    {

        options.actionCompletedCallback = (action, context) => {

            for (let detailsSidebarPanel of this.detailsSidebarPanels) {

                if (detailsSidebarPanel.updateAction)

                    detailsSidebarPanel.updateAction(action, context, options);

            }

        };

        let canvas = this.navigationSidebarPanel.canvas;

        if (!canvas)

            return;

292231

293 if (!options.suppressNavigationSidebarUpdate)

294 this.navigationSidebarPanel.updateActionIndex(index, options);

        if (canvas.isRecording)

            WI.canvasManager.stopRecording();

        else if (!WI.canvasManager.recordingCanvas) {

            let singleFrame = !!event.shiftKey;

            WI.canvasManager.startRecording(canvas, singleFrame);

        }

295238

296 ~~this.cont~~entB~~rowser.curr~~ent~~ContentView.updateActionIndex(index, options~~);

239 event.preventDefault();

    }

};

Source/WebInspectorUI/UserInterface/Views/CanvasTreeElement.js

WI.CanvasTreeElement = class CanvasTreeElement extends WI.FolderizedTreeElement

{

28 constructor(representedObject)

28 constructor(representedObject, showRecordings = true)

    {

        console.assert(representedObject instanceof WI.Canvas);

32 ~~cons~~t subtitle = null;

32 let subtitle = WI.Canvas.displayNameForContextType(representedObject.contextType);

        super(["canvas", representedObject.contextType], representedObject.displayName, subtitle, representedObject);

        this.registerFolderizeSettings("shader-programs", WI.UIString("Shader Programs"), this.representedObject.shaderProgramCollection, WI.ShaderProgramTreeElement);

37 function createRecordingTreeElement(recording) {

38 return new WI.GeneralTreeElement(["recording"], recording.displayName, subtitle, recording);

        WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStarted, this._updateStatus, this);

        WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingStopped, this._updateStatus, this);

        this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemAdded, this._handleItemAdded, this);

        this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemRemoved, this._handleItemRemoved, this);

        this._showRecordings = showRecordings;

        if (this._showRecordings) {

            function createRecordingTreeElement(recording) {

                return new WI.GeneralTreeElement(["recording"], recording.displayName, null, recording);

            }

            this.registerFolderizeSettings("recordings", WI.UIString("Recordings"), this.representedObject.recordingCollection, createRecordingTreeElement);

            this.representedObject.recordingCollection.addEventListener(WI.Collection.Event.ItemAdded, this._handleItemAdded, this);

            this.representedObject.recordingCollection.addEventListener(WI.Collection.Event.ItemRemoved, this._handleItemRemoved, this);

3952 }

40 this.registerFolderizeSettings("recordings", WI.UIString("Recordings"), this.representedObject.recordingCollection, createRecordingTreeElement);

    }

    // Protected

@@WI.CanvasTreeElement = class CanvasTreeElement extends WI.FolderizedTreeElement

    {

        super.onattach();

        this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemAdded, this._handleItemAdded, this);

        this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemRemoved, this._handleItemRemoved, this);

        this.representedObject.recordingCollection.addEventListener(WI.Collection.Event.ItemAdded, this._handleItemAdded, this);

        this.representedObject.recordingCollection.addEventListener(WI.Collection.Event.ItemRemoved, this._handleItemRemoved, this);

        this.element.addEventListener("mouseover", this._handleMouseOver.bind(this));

        this.element.addEventListener("mouseout", this._handleMouseOut.bind(this));

        this.onpopulate();

    }

    ondetach()

    {

        this.representedObject.shaderProgramCollection.removeEventListener(WI.Collection.Event.ItemAdded, this._handleItemAdded, this);

        this.representedObject.shaderProgramCollection.removeEventListener(WI.Collection.Event.ItemRemoved, this._handleItemRemoved, this);

        this.representedObject.recordingCollection.removeEventListener(WI.Collection.Event.ItemAdded, this._handleItemAdded, this);

        this.representedObject.recordingCollection.removeEventListener(WI.Collection.Event.ItemRemoved, this._handleItemRemoved, this);

        super.ondetach();

    }

    onpopulate()

    {

        super.onpopulate();

@@WI.CanvasTreeElement = class CanvasTreeElement extends WI.FolderizedTreeElement

        for (let program of this.representedObject.shaderProgramCollection.items)

            this.addChildForRepresentedObject(program);

86 for (let recording of this.representedObject.recordingCollection.items)

87 this.addChildForRepresentedObject(recording);

        if (this._showRecordings) {

            for (let recording of this.representedObject.recordingCollection.items)

                this.addChildForRepresentedObject(recording);

        }

    }

    populateContextMenu(contextMenu, event)

@@WI.CanvasTreeElement = class CanvasTreeElement extends WI.FolderizedTreeElement

    {

        WI.domTreeManager.hideDOMNodeHighlight();

    }

    _updateStatus()

    {

        if (this.representedObject.isRecording) {

            if (!this.status || !this.status[WI.CanvasTreeElement.SpinnerSymbol]) {

                let spinner = new WI.IndeterminateProgressSpinner;

                this.status = spinner.element;

                this.status[WI.CanvasTreeElement.SpinnerSymbol] = true;

            }

        } else {

            if (this.status && this.status[WI.CanvasTreeElement.SpinnerSymbol])

                this.status = "";

        }

    }

140151};

Source/WebInspectorUI/UserInterface/Views/CollectionContentView.js

@@WI.CollectionContentView = class CollectionContentView extends WI.ContentView

        return [];

    }

    shown()

    {

        super.shown();

        for (let contentView of this._contentViewMap.values())

            contentView.shown();

    }

    hidden()

    {

        for (let contentView of this._contentViewMap.values())

            contentView.hidden();

        super.hidden();

    }

    get selectionEnabled()

    {

        return this._selectionEnabled;

Source/WebInspectorUI/UserInterface/Views/ContentView.js

@@WI.ContentView = class ContentView extends WI.View

            return true;

        if (representedObject instanceof WI.Canvas)

            return true;

258 if (representedObject instanceof WI.CanvasCollection)

259 return true;

        if (representedObject instanceof WI.ShaderProgram)

            return true;

        if (representedObject instanceof WI.TimelineRecording)

Source/WebInspectorUI/UserInterface/Views/ProgressView.css

/*

 * Copyright (C) 2018 Apple Inc. All rights reserved.

 *

 * Redistribution and use in source and binary forms, with or without

 * modification, are permitted provided that the following conditions

 * are met:

 * 1. Redistributions of source code must retain the above copyright

 *    notice, this list of conditions and the following disclaimer.

 * 2. Redistributions in binary form must reproduce the above copyright

 *    notice, this list of conditions and the following disclaimer in the

 *    documentation and/or other materials provided with the distribution.

 *

 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''

 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,

 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR

 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS

 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR

 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF

 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS

 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN

 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)

 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF

 * THE POSSIBILITY OF SUCH DAMAGE.

 */

.progress-view {

    display: flex;

    flex-shrink: 0;

    flex-direction: column;

    justify-content: center;

    font-size: var(--message-text-view-font-size);

    text-align: center;

}

.progress-view > .titles {

    padding: 15px 0;

}

.progress-view > .titles > .title {

    color: var(--text-color-gray-dark);

}

.progress-view > .titles > .subtitle {

    color: var(--text-color-gray-medium);

}

.progress-view > .titles > .subtitle::before {

    content: "\2002\2012\2002";

}

.progress-view > .indeterminate-progress-spinner {

    flex-shrink: 0;

    width: 24px;

    height: 24px;

    margin: 0 auto;

}

Source/WebInspectorUI/UserInterface/Views/ProgressView.js

/*

 * Copyright (C) 2018 Apple Inc. All rights reserved.

 *

 * Redistribution and use in source and binary forms, with or without

 * modification, are permitted provided that the following conditions

 * are met:

 * 1. Redistributions of source code must retain the above copyright

 *    notice, this list of conditions and the following disclaimer.

 * 2. Redistributions in binary form must reproduce the above copyright

 *    notice, this list of conditions and the following disclaimer in the

 *    documentation and/or other materials provided with the distribution.

 *

 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''

 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,

 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR

 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS

 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR

 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF

 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS

 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN

 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)

 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF

 * THE POSSIBILITY OF SUCH DAMAGE.

 */

WI.ProgressView = class ProgressView extends WI.View

{

    constructor(title, subtitle)

    {

        super();

        this.element.classList.add("progress-view");

        this._title = title || "";

        this._subtitle = subtitle || "";

        this._titlesElement = null;

        this._titleElement = null;

        this._subtitleElement = null;

    }

    // Public

    get title()

    {

        return this._title;

    }

    set title(title)

    {

        title = title || "";

        if (this._title === title)

            return;

        this._title = title;

        this._updateTitles();

    }

    get subtitle()

    {

        return this._subtitle;

    }

    set subtitle(subtitle)

    {

        subtitle = subtitle || "";

        if (this._subtitle === subtitle)

            return;

        this._subtitle = subtitle;

        this._updateTitles();

    }

    get visible() { return this._visible; }

    set visible(x)

    {

        if (this._visible === x)

            return;

        // FIXME: remove once <https://webkit.org/b/150741> is fixed.

        this._visible = x;

        this.element.classList.toggle("hidden", !this._visible);

    }

    // Protected

    initialLayout()

    {

        super.initialLayout();

        this._titlesElement = this.element.appendChild(document.createElement("div"));

        this._titlesElement.className = "titles";

        this._titleElement = this._titlesElement.appendChild(document.createElement("span"));

        this._titleElement.className = "title";

        this._subtitleElement = this._titlesElement.appendChild(document.createElement("span"));

        this._subtitleElement.className = "subtitle";

        let spinner = new WI.IndeterminateProgressSpinner;

        this.element.appendChild(spinner.element);

        this._updateTitles();

    }

    _updateTitles()

    {

        if (!this._titlesElement)

            return;

        this._titleElement.textContent = this._title;

        this._titleElement.classList.toggle("hidden", !this._title);

        this._subtitleElement.textContent = this._subtitle;

        this._subtitleElement.classList.toggle("hidden", !this._subtitle);

    }

};

Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css

    flex: 1;

    justify-content: center;

    align-items: center;

    position: relative;

    width: 100%;

    height: 100%;

}

.content-view:not(.tab).recording :matches(img, canvas) {

Source/WebInspectorUI/UserInterface/Views/RecordingContentView.js

@@WI.RecordingContentView = class RecordingContentView extends WI.ContentView

        super(representedObject);

        this._index = NaN;

35 this._action = null;

        this._snapshots = [];

        this._initialContent = null;

        this._throttler = this.throttle(200);

@@WI.RecordingContentView = class RecordingContentView extends WI.ContentView

            this._showGridButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;

            this._showGridButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._showGridButtonClicked, this);

            this._showGridButtonNavigationItem.activated = !!WI.settings.showImageGrid.value;

            this._exportButtonNavigationItem = new WI.ButtonNavigationItem("export-recording", WI.UIString("Export"), "Images/Export.svg", 15, 15);

            this._exportButtonNavigationItem.toolTip = WI.UIString("Export recording (%s)").format(WI.saveKeyboardShortcut.displayName);

            this._exportButtonNavigationItem.buttonStyle = WI.ButtonNavigationItem.Style.ImageAndText;

            this._exportButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.High;

            this._exportButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, () => { this._exportRecording(); });

        }

    }

@@WI.RecordingContentView = class RecordingContentView extends WI.ContentView

    {

        let isCanvas2D = this.representedObject.type === WI.Recording.Type.Canvas2D;

        let isCanvasWebGL = this.representedObject.type === WI.Recording.Type.CanvasWebGL;

        if (isCanvas2D || isCanvasWebGL) {

            let navigationItems = [this._showGridButtonNavigationItem];

            if (isCanvas2D && WI.RecordingContentView.supportsCanvasPathDebugging())

                navigationItems.unshift(this._showPathButtonNavigationItem);

            return navigationItems;

        }

        return [];

        if (!isCanvas2D && !isCanvasWebGL)

            return [];

        let navigationItems = [this._exportButtonNavigationItem, new WI.DividerNavigationItem];

        if (isCanvas2D && WI.RecordingContentView.supportsCanvasPathDebugging())

            navigationItems.push(this._showPathButtonNavigationItem);

        navigationItems.push(this._showGridButtonNavigationItem);

        return navigationItems;

    }

    get supplementalRepresentedObjects()

    {

        return this._action ? [this._action] : [];

98112 }

99113

100 updateActionIndex(index~~, options = {}~~)

114 updateActionIndex(index)

    {

        if (!this.representedObject)

            return;

@@WI.RecordingContentView = class RecordingContentView extends WI.ContentView

            this._updateSliderValue();

            if (this.representedObject.type === WI.Recording.Type.Canvas2D)

117 this._throttler._generateContentCanvas2D(index, actions~~, options~~);

131 this._throttler._generateContentCanvas2D(index, actions);

118132 else if (this.representedObject.type === WI.Recording.Type.CanvasWebGL)

119 this._throttler._generateContentCanvasWebGL(index, actions~~, options~~);

133 this._throttler._generateContentCanvasWebGL(index, actions);

        });

    }

@@WI.RecordingContentView = class RecordingContentView extends WI.ContentView

    get saveData()

    {

        let filename = this.representedObject.displayName;

        if (!filename.endsWith(".json"))

            filename += ".json";

        return {

            url: "web-inspector:///" + encodeURI(filename),

            content: JSON.stringify(this.representedObject.toJSON()),

            forceSaveAs: true,

        };

167 return {customSaveHandler: () => { this._exportRecording(); }};

    }

    // Protected

@@WI.RecordingContentView = class RecordingContentView extends WI.ContentView

    // Private

194 async _generateContentCanvas2D(index, actions, options = {})

    _exportRecording()

    {

        if (!this.representedObject) {

            InspectorFrontendHost.beep();

            return;

        }

        let filename = this.representedObject.displayName;

        let url = "web-inspector:///" + encodeURI(filename) + ".json";

        WI.saveDataToFile({

            url,

            content: JSON.stringify(this.representedObject.toJSON()),

            forceSaveAs: true,

        });

    }

    async _generateContentCanvas2D(index, actions)

    {

        let imageLoad = (event) => {

            // Loading took too long and the current action index has already changed.

            if (index !== this._index)

                return;

201 this._generateContentCanvas2D(index, actions~~, options~~);

224 this._generateContentCanvas2D(index, actions);

        };

        let initialState = this.representedObject.initialState;

@@WI.RecordingContentView = class RecordingContentView extends WI.ContentView

        }

        applyActions(snapshot.index, this._index, () => {

434 if (options.actionCompletedCallback)

435 options.actionCompletedCallback(actions[this._index], snapshot.context);

            this._action = actions[this._index];

            this._action.snapshot = snapshot;

            this.dispatchEventToListeners(WI.ContentView.Event.SupplementalRepresentedObjectsDidChange);

        });

        this._previewContainer.appendChild(snapshot.element);

        this._updateImageGrid();

    }

442 async _generateContentCanvasWebGL(index, actions~~, options = {}~~)

467 async _generateContentCanvasWebGL(index, actions)

    {

        let imageLoad = (event) => {

            // Loading took too long and the current action index has already changed.

            if (index !== this._index)

                return;

449 this._generateContentCanvasWebGL(index, actions~~, options~~);

474 this._generateContentCanvasWebGL(index, actions);

        };

        let initialState = this.representedObject.initialState;

@@WI.RecordingContentView = class RecordingContentView extends WI.ContentView

            this._updateImageGrid();

        }

484 if (options.actionCompletedCallback)

485 options.actionCompletedCallback(actions[this._index]);

509 this.dispatchEventToListeners(WI.ContentView.Event.SupplementalRepresentedObjectsDidChange);

    }

    _updateCanvasPath()

@@WI.RecordingContentView = class RecordingContentView extends WI.ContentView

        if (visualActionIndex !== -1)

            index = this.representedObject.visualActionIndexes[visualActionIndex];

548 this.~~dispatchEventToListeners(WI.RecordingContentView.Event.Recording~~ActionIndex~~Changed, {~~index});

572 this.updateActionIndex(index);

    }

};

WI.RecordingContentView.SnapshotInterval = 5000;

WI.RecordingContentView.Event = {

    RecordingActionIndexChanged: "recording-action-index-changed",

};

Source/WebInspectorUI/ChangeLog

Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

Source/WebInspectorUI/UserInterface/Images/Canvas2D.svg

Source/WebInspectorUI/UserInterface/Images/Canvas3D.svg

Source/WebInspectorUI/UserInterface/Images/Recording.svg

Source/WebInspectorUI/UserInterface/Main.html

Source/WebInspectorUI/UserInterface/Models/RecordingAction.js

Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css

Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js

Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js

Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css

Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js

Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css

Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js

Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css

Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.js

Source/WebInspectorUI/UserInterface/Views/CanvasTreeElement.js

Source/WebInspectorUI/UserInterface/Views/CollectionContentView.js

Source/WebInspectorUI/UserInterface/Views/ContentView.js

Source/WebInspectorUI/UserInterface/Views/ProgressView.css

Source/WebInspectorUI/UserInterface/Views/ProgressView.js

Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css

Source/WebInspectorUI/UserInterface/Views/RecordingContentView.js

Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.js

Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.js

Source/WebInspectorUI/UserInterface/Views/ResourceIcons.css