Web Inspector: determine hasVisibleEffect for each RecordingAction as…

… it's processed

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

Reviewed by Joseph Pecoraro.

Source/WebInspectorUI:

* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Base/Setting.js:
* UserInterface/Base/Utilities.js:

* UserInterface/Models/RecordingAction.js:
(WI.RecordingAction.prototype.process.getContent):
(WI.RecordingAction.prototype.process):

* UserInterface/Views/RecordingActionTreeElement.js:
(WI.RecordingActionTreeElement.prototype.onattach):

* UserInterface/Views/SettingsTabContentView.js:
(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):

* UserInterface/Views/RecordingContentView.js:
(WI.RecordingContentView.prototype._updateImageGrid):
Drive-by: don't attempt to show the image grid if we haven't called initialized yet.

* UserInterface/Views/CanvasSidebarPanel.js:
(WI.CanvasSidebarPanel.prototype._treeOutlineSelectionDidChange):
Drive-by: ensure that the `WI.RecordingContentView` is showing before applying the action.

LayoutTests:

* inspector/unit-tests/array-utilities-expected.txt:
* inspector/unit-tests/array-utilities.html:


Canonical link: https://commits.webkit.org/204979@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@236539 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog

@@ -1,3 +1,13 @@
+2018-09-26  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: determine hasVisibleEffect for each RecordingAction as it's processed
+        https://bugs.webkit.org/show_bug.cgi?id=189860
+
+        Reviewed by Joseph Pecoraro.
+
+        * inspector/unit-tests/array-utilities-expected.txt:
+        * inspector/unit-tests/array-utilities.html:
+
 2018-09-26  Justin Fan  <justin_fan@apple.com>
 
         WebGL 2: updated passing test expectations for deqp/primitiverestart

LayoutTests/inspector/unit-tests/array-utilities-expected.txt

@@ -33,6 +33,19 @@ PASS: partition should handle duplicates.
 PASS: partition should produce an empty list for the negative side.
 PASS: partition should produce an empty list for the positive side.
 
+-- Running test case: Array.isTypedArray
+PASS: isTypedArray of non-array.
+PASS: isTypedArray of non-typed-array should be false.
+PASS: isTypedArray of Int8Array should be true.
+PASS: isTypedArray of Int16Array should be true.
+PASS: isTypedArray of Int32Array should be true.
+PASS: isTypedArray of Uint8Array should be true.
+PASS: isTypedArray of Uint8ClampedArray should be true.
+PASS: isTypedArray of Uint16Array should be true.
+PASS: isTypedArray of Uint32Array should be true.
+PASS: isTypedArray of Float32Array should be true.
+PASS: isTypedArray of Float64Array should be true.
+
 -- Running test case: Array.shallowEqual
 PASS: shallowEqual of empty arrays should be true.
 PASS: shallowEqual of an array with itself should be true.
@@ -42,6 +55,18 @@ PASS: shallowEqual of unequal arrays should be false.
 PASS: shallowEqual of unequal arrays should be false.
 PASS: shallowEqual of an array and null should be false.
 PASS: shallowEqual of an array and non-array should be false.
+PASS: shallowEqual of a typed-array and it's array counterpart should be true.
+PASS: shallowEqual of a typed-array with itself should be true.
+PASS: shallowEqual of equal typed-array and it's array counterpart should be true.
+PASS: shallowEqual of equal typed-arrays should be true.
+PASS: shallowEqual of equal typed-array and it's array counterpart should be true.
+PASS: shallowEqual of equal typed-arrays should be true.
+PASS: shallowEqual of unequal typed-array and it's array counterpart should be false.
+PASS: shallowEqual of unequal typed-arrays should be false.
+PASS: shallowEqual of unequal typed-array and it's array counterpart should be false.
+PASS: shallowEqual of unequal typed-arrays should be false.
+PASS: shallowEqual of a typed-array and null should be false.
+PASS: shallowEqual of a typed-array and non-array should be false.
 PASS: shallowEqual of a non-array with itself should be false.
 PASS: shallowEqual of non-arrays should be false.
 

LayoutTests/inspector/unit-tests/array-utilities.html

@@ -85,6 +85,26 @@
         }
     });
 
+    suite.addTestCase({
+        name: "Array.isTypedArray",
+        test() {
+            InspectorTest.expectFalse(Array.isTypedArray(null), "isTypedArray of non-array.");
+            InspectorTest.expectFalse(Array.isTypedArray([]), "isTypedArray of non-typed-array should be false.");
+
+            InspectorTest.expectThat(Array.isTypedArray(new Int8Array), "isTypedArray of Int8Array should be true.");
+            InspectorTest.expectThat(Array.isTypedArray(new Int16Array), "isTypedArray of Int16Array should be true.");
+            InspectorTest.expectThat(Array.isTypedArray(new Int32Array), "isTypedArray of Int32Array should be true.");
+            InspectorTest.expectThat(Array.isTypedArray(new Uint8Array), "isTypedArray of Uint8Array should be true.");
+            InspectorTest.expectThat(Array.isTypedArray(new Uint8ClampedArray), "isTypedArray of Uint8ClampedArray should be true.");
+            InspectorTest.expectThat(Array.isTypedArray(new Uint16Array), "isTypedArray of Uint16Array should be true.");
+            InspectorTest.expectThat(Array.isTypedArray(new Uint32Array), "isTypedArray of Uint32Array should be true.");
+            InspectorTest.expectThat(Array.isTypedArray(new Float32Array), "isTypedArray of Float32Array should be true.");
+            InspectorTest.expectThat(Array.isTypedArray(new Float64Array), "isTypedArray of Float64Array should be true.");
+
+            return true;
+        }
+    });
+
     suite.addTestCase({
         name: "Array.shallowEqual",
         test() {
@@ -104,6 +124,25 @@
             InspectorTest.expectFalse(Array.shallowEqual([], null), "shallowEqual of an array and null should be false.");
             InspectorTest.expectFalse(Array.shallowEqual([], 1.23), "shallowEqual of an array and non-array should be false.");
 
+            let typedArray1 = Int8Array.from(arr1);
+            InspectorTest.expectThat(Array.shallowEqual(typedArray1, arr1), "shallowEqual of a typed-array and it's array counterpart should be true.");
+            InspectorTest.expectThat(Array.shallowEqual(typedArray1, typedArray1), "shallowEqual of a typed-array with itself should be true.");
+
+            let typedArray2 = Int8Array.from(arr2);
+            InspectorTest.expectThat(Array.shallowEqual(typedArray1, arr2), "shallowEqual of equal typed-array and it's array counterpart should be true.");
+            InspectorTest.expectThat(Array.shallowEqual(typedArray1, typedArray2), "shallowEqual of equal typed-arrays should be true.");
+            InspectorTest.expectThat(Array.shallowEqual(typedArray2, arr1), "shallowEqual of equal typed-array and it's array counterpart should be true.");
+            InspectorTest.expectThat(Array.shallowEqual(typedArray2, typedArray1), "shallowEqual of equal typed-arrays should be true.");
+
+            let typedArray3 = Int8Array.from(arr3);
+            InspectorTest.expectFalse(Array.shallowEqual(typedArray1, arr3), "shallowEqual of unequal typed-array and it's array counterpart should be false.");
+            InspectorTest.expectFalse(Array.shallowEqual(typedArray1, typedArray3), "shallowEqual of unequal typed-arrays should be false.");
+            InspectorTest.expectFalse(Array.shallowEqual(typedArray3, arr1), "shallowEqual of unequal typed-array and it's array counterpart should be false.");
+            InspectorTest.expectFalse(Array.shallowEqual(typedArray3, typedArray1), "shallowEqual of unequal typed-arrays should be false.");
+
+            InspectorTest.expectFalse(Array.shallowEqual(new Int8Array, null), "shallowEqual of a typed-array and null should be false.");
+            InspectorTest.expectFalse(Array.shallowEqual(new Int8Array, 1.23), "shallowEqual of a typed-array and non-array should be false.");
+
             let str = "abc";
             InspectorTest.expectFalse(Array.shallowEqual(str, str), "shallowEqual of a non-array with itself should be false.");
             InspectorTest.expectFalse(Array.shallowEqual({}, {}), "shallowEqual of non-arrays should be false.");

Source/WebInspectorUI/ChangeLog

@@ -1,3 +1,32 @@
+2018-09-26  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: determine hasVisibleEffect for each RecordingAction as it's processed
+        https://bugs.webkit.org/show_bug.cgi?id=189860
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Base/Setting.js:
+        * UserInterface/Base/Utilities.js:
+
+        * UserInterface/Models/RecordingAction.js:
+        (WI.RecordingAction.prototype.process.getContent):
+        (WI.RecordingAction.prototype.process):
+
+        * UserInterface/Views/RecordingActionTreeElement.js:
+        (WI.RecordingActionTreeElement.prototype.onattach):
+
+        * UserInterface/Views/SettingsTabContentView.js:
+        (WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
+
+        * UserInterface/Views/RecordingContentView.js:
+        (WI.RecordingContentView.prototype._updateImageGrid):
+        Drive-by: don't attempt to show the image grid if we haven't called initialized yet.
+
+        * UserInterface/Views/CanvasSidebarPanel.js:
+        (WI.CanvasSidebarPanel.prototype._treeOutlineSelectionDidChange):
+        Drive-by: ensure that the `WI.RecordingContentView` is showing before applying the action.
+
 2018-09-26  Nikita Vasilyev  <nvasilyev@apple.com>
 
         Web Inspector: Dark Mode: new watch expression popover has light background

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

@@ -157,7 +157,6 @@ localizedStrings["Canvas"] = "Canvas";
 localizedStrings["Canvas %d"] = "Canvas %d";
 localizedStrings["Canvas %s"] = "Canvas %s";
 localizedStrings["Canvas Element"] = "Canvas Element";
-localizedStrings["Canvas:"] = "Canvas:";
 localizedStrings["Canvases"] = "Canvases";
 localizedStrings["Capture Screenshot"] = "Capture Screenshot";
 localizedStrings["Capturing"] = "Capturing";
@@ -335,7 +334,6 @@ localizedStrings["Enable Event Listener"] = "Enable Event Listener";
 localizedStrings["Enable Layers Tab"] = "Enable Layers Tab";
 localizedStrings["Enable New Tab Bar"] = "Enable New Tab Bar";
 localizedStrings["Enable Program"] = "Enable Program";
-localizedStrings["Enable Visual Change Detection"] = "Enable Visual Change Detection";
 localizedStrings["Enable all breakpoints (%s)"] = "Enable all breakpoints (%s)";
 localizedStrings["Enable breakpoints"] = "Enable breakpoints";
 localizedStrings["Enable paint flashing"] = "Enable paint flashing";

Source/WebInspectorUI/UserInterface/Base/Setting.js

@@ -121,7 +121,6 @@ WI.settings = {
     // Experimental
     experimentalEnableLayersTab: new WI.Setting("experimental-enable-layers-tab", false),
     experimentalEnableNewTabBar: new WI.Setting("experimental-enable-new-tab-bar", false),
-    experimentalRecordingHasVisualEffect: new WI.Setting("experimental-recording-has-visual-effect", false),
 
     // DebugUI
     autoLogProtocolMessages: new WI.Setting("auto-collect-protocol-messages", false),

Source/WebInspectorUI/UserInterface/Base/Utilities.js

@@ -403,11 +403,35 @@ Object.defineProperty(Event.prototype, "stop",
     }
 });
 
+Object.defineProperty(Array, "isTypedArray",
+{
+    value(array)
+    {
+        if (!array)
+            return false;
+
+        let constructor = array.constructor;
+        return constructor === Int8Array
+            || constructor === Int16Array
+            || constructor === Int32Array
+            || constructor === Uint8Array
+            || constructor === Uint8ClampedArray
+            || constructor === Uint16Array
+            || constructor === Uint32Array
+            || constructor === Float32Array
+            || constructor === Float64Array;
+    }
+});
+
 Object.defineProperty(Array, "shallowEqual",
 {
     value(a, b)
     {
-        if (!Array.isArray(a) || !Array.isArray(b))
+        function isArrayLike(x) {
+            return Array.isArray(x) || Array.isTypedArray(x);
+        }
+
+        if (!isArrayLike(a) || !isArrayLike(b))
             return false;
 
         if (a === b)

Source/WebInspectorUI/UserInterface/Models/RecordingAction.js

@@ -128,22 +128,20 @@ WI.RecordingAction = class RecordingAction extends WI.Object
         if (recording.type === WI.Recording.Type.CanvasWebGL) {
             // We add each RecordingAction to the list of visualActionIndexes after it is processed.
             if (this._valid && this._isVisual) {
-                let contentBefore = recording.visualActionIndexes.length ? recording.visualActionIndexes.lastValue.snapshot : recording.initialState.content;
+                let contentBefore = recording.visualActionIndexes.length ? recording.actions[recording.visualActionIndexes.lastValue].snapshot : recording.initialState.content;
                 this._hasVisibleEffect = this._snapshot !== contentBefore;
             }
             return;
         }
 
         function getContent() {
-            if (context instanceof CanvasRenderingContext2D) {
-                let imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
-                return [imageData.width, imageData.height, ...imageData.data];
-            }
+            if (context instanceof CanvasRenderingContext2D)
+                return context.getImageData(0, 0, context.canvas.width, context.canvas.height).data;
 
             if (context instanceof WebGLRenderingContext || context instanceof WebGL2RenderingContext) {
                 let pixels = new Uint8Array(context.drawingBufferWidth * context.drawingBufferHeight * 4);
                 context.readPixels(0, 0, context.canvas.width, context.canvas.height, context.RGBA, context.UNSIGNED_BYTE, pixels);
-                return [...pixels];
+                return pixels;
             }
 
             if (context.canvas instanceof HTMLCanvasElement)
@@ -154,7 +152,7 @@ WI.RecordingAction = class RecordingAction extends WI.Object
         }
 
         let contentBefore = null;
-        let shouldCheckHasVisualEffect = WI.settings.experimentalRecordingHasVisualEffect.value && this._valid && this._isVisual;
+        let shouldCheckHasVisualEffect = this._valid && this._isVisual;
         if (shouldCheckHasVisualEffect)
             contentBefore = getContent();
 
@@ -366,7 +364,6 @@ WI.RecordingAction = class RecordingAction extends WI.Object
 
 WI.RecordingAction.Event = {
     ValidityChanged: "recording-action-marked-invalid",
-    HasVisibleEffectChanged: "recording-action-has-visible-effect-changed",
 };
 
 WI.RecordingAction._visualNames = {

Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.js

@@ -319,6 +319,8 @@ WI.CanvasSidebarPanel = class CanvasSidebarPanel extends WI.NavigationSidebarPan
         if (!recordingContentView)
             return;
 
+        this.contentBrowser.showContentView(recordingContentView);
+
         this._selectedRecordingActionIndex = treeElement.index;
         recordingContentView.updateActionIndex(this._selectedRecordingActionIndex);
     }

Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js

@@ -400,7 +400,7 @@ WI.RecordingActionTreeElement = class RecordingActionTreeElement extends WI.Gene
 
         this.element.dataset.index = this._index.toLocaleString();
 
-        if (WI.settings.experimentalRecordingHasVisualEffect.value && this.representedObject.valid && this.representedObject.isVisual && !this.representedObject.hasVisibleEffect) {
+        if (this.representedObject.valid && this.representedObject.isVisual && !this.representedObject.hasVisibleEffect) {
             this.addClassName("no-visible-effect");
 
             const title = WI.UIString("This action causes no visual change");

Source/WebInspectorUI/UserInterface/Views/RecordingContentView.js

@@ -444,7 +444,7 @@ WI.RecordingContentView = class RecordingContentView extends WI.ContentView
         let activated = WI.settings.showImageGrid.value;
         this._showGridButtonNavigationItem.activated = activated;
 
-        if (!isNaN(this._index))
+        if (this.didInitialLayout && !isNaN(this._index))
             this._previewContainer.firstElementChild.classList.toggle("show-grid", activated);
     }
 

Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js

@@ -247,9 +247,6 @@ WI.SettingsTabContentView = class SettingsTabContentView extends WI.TabContentVi
         experimentalSettingsView.addSetting(WI.UIString("User Interface:"), WI.settings.experimentalEnableNewTabBar, WI.UIString("Enable New Tab Bar"));
         experimentalSettingsView.addSeparator();
 
-        experimentalSettingsView.addSetting(WI.UIString("Canvas:"), WI.settings.experimentalRecordingHasVisualEffect, WI.UIString("Enable Visual Change Detection"));
-        experimentalSettingsView.addSeparator();
-
         let reloadInspectorButton = document.createElement("button");
         reloadInspectorButton.textContent = WI.UIString("Reload Web Inspector");
         reloadInspectorButton.addEventListener("click", () => { window.location.reload(); });