ChangeLog

2018-03-14  Devin Rousso  <webkit@devinrousso.com>

        Web Inspector: Canvas tab: create icons for recordings/shaders in the preview tile

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

        Reviewed by NOBODY (OOPS!).

        * Localizations/en.lproj/localizedStrings.js:

        * UserInterface/Views/CanvasContentView.js:

        (WI.CanvasContentView):

        (WI.CanvasContentView.prototype.initialLayout):

        (WI.CanvasContentView.prototype.attached):

        (WI.CanvasContentView.prototype._recordingStopped):

        (WI.CanvasContentView.prototype._shaderProgramAdded):

        (WI.CanvasContentView.prototype._shaderProgramRemoved):

        (WI.CanvasContentView.prototype._updateViewRelated):

        (WI.CanvasContentView.prototype._handleViewShaderButtonClicked):

        (WI.CanvasContentView.prototype._handleViewRecordingButtonClicked):

        (WI.CanvasContentView.prototype._addRecording): Deleted.

        (WI.CanvasContentView.prototype._handleRecordingSelectElementChange): Deleted.

        * UserInterface/Views/CanvasOverviewContentView.css:

        (.content-view.canvas-overview .content-view.canvas > footer > .view-related):

        (.content-view.canvas-overview .content-view.canvas > footer > .view-related > :matches(.view-shader, .view-recording)):

        (.content-view.canvas-overview .content-view.canvas > footer > .view-related > img + img):

        (.content-view.canvas-overview .content-view.canvas > footer > .view-related > .view-shader):

        (.content-view.canvas-overview .content-view.canvas > footer > .view-related > .view-recording):

        (.content-view.canvas-overview .content-view.canvas > footer > .recordings): Deleted.

        (.content-view.canvas-overview .content-view.canvas > footer > .recordings::before): Deleted.

        (.content-view.canvas-overview .content-view.canvas > footer > .recordings > select): Deleted.

        (.content-view.canvas-overview .content-view.canvas > footer .recordings > select:focus): Deleted.

        Create two image buttons in the bottom left corner of each canvas tile that appear when the

        canvas has associated shaders and/or recordings. Clicking each image button will function

        similar to path components, in that if there is only one shader/recording, it is immediately

        selected, whereas if there are multiple a dropdown is shown.

2018-03-14  Devin Rousso  <webkit@devinrousso.com>

        Web Inspector: Canvas: a recording initiated by the user should be shown immediately on completion

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

@@localizedStrings["Vertex"] = "Vertex";

localizedStrings["Vertex Shader"] = "Vertex Shader";

localizedStrings["Vertical"] = "Vertical";

localizedStrings["View Image"] = "View Image";

1034 localizedStrings["View Recordings... (%d)"] = "View Recordings... (%d)";

1034localizedStrings["View Recording"] = "View Recording";

1035localizedStrings["View Shader"] = "View Shader";

localizedStrings["View variable value"] = "View variable value";

localizedStrings["Visibility"] = "Visibility";

localizedStrings["Visible"] = "Visible";

Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js

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

        this._pixelSize = null;

        this._pixelSizeElement = null;

        this._canvasNode = null;

45 this._recordingOptionElementMap = new WeakMap;

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

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

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

        let footer = this.element.appendChild(document.createElement("footer"));

        footer.addEventListener("click", (event) => { event.stopPropagation(); });

130 this._r~~ecordingS~~el~~ect~~Container = footer.appendChild(document.createElement("div"));

131 this._r~~ecordingS~~el~~ect~~Container.classList.add("~~recordings", "hidden~~");

129 this._viewRelatedContainer = footer.appendChild(document.createElement("div"));

130 this._viewRelatedContainer.classList.add("view-related");

132131

133 this._recordingSelectText = this._recordingSelectContainer.appendChild(document.createElement("span"));

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

        this._viewShaderButton.classList.add("view-shader");

        this._viewShaderButton.title = WI.UIString("View Shader");

        this._viewShaderButton.addEventListener("click", this._handleViewShaderButtonClicked.bind(this));

134136

135 this._recordingSelectElement = this._recordingSelectContainer.appendChild(document.createElement("select"));

136 this._recordingSelectElement.addEventListener("change", this._handleRecordingSelectElementChange.bind(this));

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

        this._viewRecordingButton.classList.add("view-recording");

        this._viewRecordingButton.title = WI.UIString("View Recording");

        this._viewRecordingButton.addEventListener("click", this._handleViewRecordingButtonClicked.bind(this));

137141

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

139 this._addRecording(recording);

142 this._updateViewRelated();

        let flexibleSpaceElement = footer.appendChild(document.createElement("div"));

        flexibleSpaceElement.className = "flexible-space";

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

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

        WI.canvasManager.addEventListener(WI.CanvasManager.Event.RecordingProgress, this._recordingProgress, this);

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

212 WI.canvasManager.addEventListener(WI.CanvasManager.Event.ShaderProgramAdded, this._shaderProgramAdded, this);

213 WI.canvasManager.addEventListener(WI.CanvasManager.Event.ShaderProgramRemoved, this._shaderProgramRemoved, this);

209214

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

        if (this.didInitialLayout)

            this._recordingSelectElement.selectedIndex = -1;

    }

    detached()

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

        this._previewContainerElement.appendChild(this._errorElement);

    }

    _addRecording(recording)

    {

        let optionElement = this._recordingSelectElement.appendChild(document.createElement("option"));

        optionElement.textContent = recording.displayName;

        this._recordingOptionElementMap.set(optionElement, recording);

        let recordingCount = this._recordingSelectElement.options.length;

        this._recordingSelectText.textContent = WI.UIString("View Recordings... (%d)").format(recordingCount);

        this._recordingSelectContainer.classList.remove("hidden");

        this._recordingSelectElement.selectedIndex = -1;

    }

    _toggleRecording(event)

    {

        if (this.representedObject.isRecording)

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

    {

        this._updateRecordNavigationItem();

288 let {canvas~~, recording~~} = event.data;

276 let {canvas} = event.data;

        if (canvas !== this.representedObject)

            return;

        this._updateProgressView();

294 if (recording)

295 this._addRecording(recording);

282 this._updateViewRelated();

296283 }

297284

298 _~~han~~dleR~~ecordingSelectElementChange~~(event)

285 _shaderProgramAdded(event)

299286 {

        let selectedOption = this._recordingSelectElement.options[this._recordingSelectElement.selectedIndex];

        console.assert(selectedOption, "An option should have been selected.");

        if (!selectedOption)

287 let {shaderProgram} = event.data;

288 if (!shaderProgram || shaderProgram.canvas !== this.representedObject)

303289 return;

304290

        let representedObject = this._recordingOptionElementMap.get(selectedOption);

        console.assert(representedObject, "Missing map entry for option.");

        if (!representedObject)

        this._updateViewRelated();

    }

    _shaderProgramRemoved(event)

    {

        let {shaderProgram} = event.data;

        if (!shaderProgram || shaderProgram.canvas !== this.representedObject)

308298 return;

309299

310 WI~~.sho~~wRe~~presen~~ted~~Object(representedObject~~);

300 this._updateViewRelated();

    }

    _refreshPixelSize()

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

        this._progressView.title = title;

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

    }

    _updateViewRelated()

    {

        this._viewRelatedContainer.removeChildren();

        if (this.representedObject.shaderProgramCollection.items.size)

            this._viewRelatedContainer.appendChild(this._viewShaderButton);

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

            this._viewRelatedContainer.appendChild(this._viewRecordingButton);

    }

    _handleViewShaderButtonClicked(event)

    {

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

        console.assert(shaderPrograms.length);

        if (!shaderPrograms.length)

            return;

        if (shaderPrograms.length === 1) {

            WI.showRepresentedObject(shaderPrograms[0]);

            return;

        }

        let contextMenu = WI.ContextMenu.createFromEvent(event);

        for (let shaderProgram of shaderPrograms) {

            contextMenu.appendItem(shaderProgram.displayName, (event) => {

                WI.showRepresentedObject(shaderProgram);

            });

        }

        contextMenu.show();

    }

    _handleViewRecordingButtonClicked(event)

    {

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

        console.assert(recordings.length);

        if (!recordings.length)

            return;

        if (recordings.length === 1) {

            WI.showRepresentedObject(recordings[0]);

            return;

        }

        let contextMenu = WI.ContextMenu.createFromEvent(event);

        for (let recording of recordings) {

            contextMenu.appendItem(recording.displayName, (event) => {

                WI.showRepresentedObject(recording);

            });

        }

        contextMenu.show();

    }

428475};

Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css

    border-top: none;

}

146 .content-view.canvas-overview .content-view.canvas > footer > .recordings {

147 position: absolute;

146.content-view.canvas-overview .content-view.canvas > footer > .view-related {

    display: flex;

    align-items: center;

}

152 .content-view.canvas-overview .content-view.canvas > footer > .recordings::before {

153 display: inline-block;

151.content-view.canvas-overview .content-view.canvas > footer > .view-related > :matches(.view-shader, .view-recording) {

154152 width: 16px;

    margin-top: 3px;

    -webkit-padding-end: 4px;

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

153 height: 16px;

158154}

159155

.content-view.canvas-overview .content-view.canvas > footer > .recordings > select {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    margin: 0;

    padding: 0;

    border: none;

    opacity: 0;

    -webkit-appearance: none;

156.content-view.canvas-overview .content-view.canvas > footer > .view-related > img + img {

157 -webkit-margin-start: 4px;

171158}

172159

173 .content-view.canvas-overview .content-view.canvas > footer .recordings > select:focus {

174 -webkit-margin-start: 11px;

.content-view.canvas-overview .content-view.canvas > footer > .view-related > .view-shader {

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

}

.content-view.canvas-overview .content-view.canvas > footer > .view-related > .view-recording {

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

}

.content-view.canvas-overview .content-view.canvas > footer > .flexible-space {