Web Inspector: Canvas: auto-record after page load sometimes shows the wrong UI
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 1 Apr 2019 22:41:28 +0000 (22:41 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 1 Apr 2019 22:41:28 +0000 (22:41 +0000)
https://bugs.webkit.org/show_bug.cgi?id=196320
<rdar://problem/49356686>

Reviewed by Joseph Pecoraro.

It was previously possible that the timing of a recording being started and the preview
image being loaded would not always be in the same order.

Utilize the existing `View.prototype.layout` mechanics to ensure that updates are coalesced
and that the changes are always applied in a particular order.

* UserInterface/Views/CanvasContentView.js:
(WI.CanvasContentView):
(WI.CanvasContentView.prototype.refreshPreview): Added.
(WI.CanvasContentView.prototype.initialLayout):
(WI.CanvasContentView.prototype.layout):
(WI.CanvasContentView.prototype.shown):
(WI.CanvasContentView.prototype.attached):
(WI.CanvasContentView.prototype._refreshPixelSize):
(WI.CanvasContentView.prototype.refresh): Deleted.
(WI.CanvasContentView.prototype._recordingStarted): Deleted.
(WI.CanvasContentView.prototype._recordingProgress): Deleted.
(WI.CanvasContentView.prototype._recordingStopped): Deleted.
(WI.CanvasContentView.prototype._shaderProgramAdded): Deleted.
(WI.CanvasContentView.prototype._shaderProgramRemoved): Deleted.

* UserInterface/Views/CanvasOverviewContentView.js:
(WI.CanvasOverviewContentView.prototype._refreshPreviews):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@243720 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js
Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js

index 56ea3af..55e6a53 100644 (file)
@@ -1,5 +1,37 @@
 2019-04-01  Devin Rousso  <drousso@apple.com>
 
+        Web Inspector: Canvas: auto-record after page load sometimes shows the wrong UI
+        https://bugs.webkit.org/show_bug.cgi?id=196320
+        <rdar://problem/49356686>
+
+        Reviewed by Joseph Pecoraro.
+
+        It was previously possible that the timing of a recording being started and the preview
+        image being loaded would not always be in the same order.
+
+        Utilize the existing `View.prototype.layout` mechanics to ensure that updates are coalesced
+        and that the changes are always applied in a particular order.
+
+        * UserInterface/Views/CanvasContentView.js:
+        (WI.CanvasContentView):
+        (WI.CanvasContentView.prototype.refreshPreview): Added.
+        (WI.CanvasContentView.prototype.initialLayout):
+        (WI.CanvasContentView.prototype.layout):
+        (WI.CanvasContentView.prototype.shown):
+        (WI.CanvasContentView.prototype.attached):
+        (WI.CanvasContentView.prototype._refreshPixelSize):
+        (WI.CanvasContentView.prototype.refresh): Deleted.
+        (WI.CanvasContentView.prototype._recordingStarted): Deleted.
+        (WI.CanvasContentView.prototype._recordingProgress): Deleted.
+        (WI.CanvasContentView.prototype._recordingStopped): Deleted.
+        (WI.CanvasContentView.prototype._shaderProgramAdded): Deleted.
+        (WI.CanvasContentView.prototype._shaderProgramRemoved): Deleted.
+
+        * UserInterface/Views/CanvasOverviewContentView.js:
+        (WI.CanvasOverviewContentView.prototype._refreshPreviews):
+
+2019-04-01  Devin Rousso  <drousso@apple.com>
+
         Web Inspector: Canvas: add compatibility support for WebMetal
         https://bugs.webkit.org/show_bug.cgi?id=196412
         <rdar://problem/49439417>
index 7caea02..004762c 100644 (file)
@@ -45,7 +45,7 @@ WI.CanvasContentView = class CanvasContentView extends WI.ContentView
 
         this._refreshButtonNavigationItem = new WI.ButtonNavigationItem("refresh", WI.UIString("Refresh"), "Images/ReloadFull.svg", 13, 13);
         this._refreshButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
-        this._refreshButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this.refresh, this);
+        this._refreshButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this.refreshPreview, this);
 
         this._showGridButtonNavigationItem = new WI.ActivateButtonNavigationItem("show-grid", WI.UIString("Show Grid"), WI.UIString("Hide Grid"), "Images/NavigationItemCheckers.svg", 13, 13);
         this._showGridButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this._showGridButtonClicked, this);
@@ -62,7 +62,7 @@ WI.CanvasContentView = class CanvasContentView extends WI.ContentView
         return [this._refreshButtonNavigationItem, this._showGridButtonNavigationItem];
     }
 
-    refresh()
+    refreshPreview()
     {
         this._pendingContent = null;
 
@@ -158,36 +158,36 @@ WI.CanvasContentView = class CanvasContentView extends WI.ContentView
         if (this._errorElement)
             this._showError();
 
-        if (isCard) {
+        if (isCard)
             this._refreshPixelSize();
-            this._updateMemoryCost();
-            this._updateProgressView();
-        }
     }
 
     layout()
     {
         super.layout();
 
-        if (!this._pendingContent)
-            return;
-
-        if (this._errorElement) {
-            this._errorElement.remove();
-            this._errorElement = null;
-        }
+        if (this._pendingContent) {
+            if (this._errorElement) {
+                this._errorElement.remove();
+                this._errorElement = null;
+            }
 
-        if (!this._previewImageElement) {
-            this._previewImageElement = document.createElement("img");
-            this._previewImageElement.addEventListener("error", this._showError.bind(this));
-        }
+            if (!this._previewImageElement) {
+                this._previewImageElement = document.createElement("img");
+                this._previewImageElement.addEventListener("error", this._showError.bind(this));
+            }
 
-        this._previewImageElement.src = this._pendingContent;
-        this._pendingContent = null;
+            this._previewImageElement.src = this._pendingContent;
+            this._pendingContent = null;
 
-        if (!this._previewImageElement.parentNode)
-            this._previewContainerElement.appendChild(this._previewImageElement);
+            if (!this._previewImageElement.parentNode)
+                this._previewContainerElement.appendChild(this._previewImageElement);
+        }
 
+        this._updateRecordNavigationItem();
+        this._updateProgressView();
+        this._updateViewRelatedItems();
+        this._updateMemoryCost();
         this._updateImageGrid();
     }
 
@@ -195,10 +195,7 @@ WI.CanvasContentView = class CanvasContentView extends WI.ContentView
     {
         super.shown();
 
-        this.refresh();
-
-        this._updateRecordNavigationItem();
-        this._updateProgressView();
+        this.refreshPreview();
     }
 
     attached()
@@ -206,11 +203,11 @@ WI.CanvasContentView = class CanvasContentView extends WI.ContentView
         super.attached();
 
         this.representedObject.addEventListener(WI.Canvas.Event.MemoryChanged, this._updateMemoryCost, this);
-        this.representedObject.addEventListener(WI.Canvas.Event.RecordingStarted, this._recordingStarted, this);
-        this.representedObject.addEventListener(WI.Canvas.Event.RecordingProgress, this._recordingProgress, this);
-        this.representedObject.addEventListener(WI.Canvas.Event.RecordingStopped, this._recordingStopped, this);
-        this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemAdded, this._shaderProgramAdded, this);
-        this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemRemoved, this._shaderProgramRemoved, this);
+        this.representedObject.addEventListener(WI.Canvas.Event.RecordingStarted, this.needsLayout, this);
+        this.representedObject.addEventListener(WI.Canvas.Event.RecordingProgress, this.needsLayout, this);
+        this.representedObject.addEventListener(WI.Canvas.Event.RecordingStopped, this.needsLayout, this);
+        this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemAdded, this.needsLayout, this);
+        this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemRemoved, this.needsLayout, this);
 
         this.representedObject.requestNode().then((node) => {
             console.assert(!this._canvasNode || this._canvasNode === node);
@@ -266,34 +263,6 @@ WI.CanvasContentView = class CanvasContentView extends WI.ContentView
         }
     }
 
-    _recordingStarted(event)
-    {
-        this._updateRecordNavigationItem();
-        this._updateProgressView();
-    }
-
-    _recordingProgress(event)
-    {
-        this._updateProgressView();
-    }
-
-    _recordingStopped(event)
-    {
-        this._updateRecordNavigationItem();
-        this._updateProgressView();
-        this._updateViewRelatedItems();
-    }
-
-    _shaderProgramAdded(event)
-    {
-        this._updateViewRelatedItems();
-    }
-
-    _shaderProgramRemoved(event)
-    {
-        this._updateViewRelatedItems();
-    }
-
     _refreshPixelSize()
     {
         let updatePixelSize = (size) => {
@@ -309,7 +278,7 @@ WI.CanvasContentView = class CanvasContentView extends WI.ContentView
                     this._pixelSizeElement.textContent = emDash;
             }
 
-            this.refresh();
+            this.refreshPreview();
         };
 
         this.representedObject.requestSize()
index 14f3831..fd64ae2 100644 (file)
@@ -146,7 +146,7 @@ WI.CanvasOverviewContentView = class CanvasOverviewContentView extends WI.Collec
     _refreshPreviews()
     {
         for (let canvasContentView of this.subviews)
-            canvasContentView.refresh();
+            canvasContentView.refreshPreview();
     }
 
     _updateNavigationItems()