Title: [243720] trunk/Source/WebInspectorUI
Revision
243720
Author
[email protected]
Date
2019-04-01 15:41:28 -0700 (Mon, 01 Apr 2019)

Log Message

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):

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (243719 => 243720)


--- trunk/Source/WebInspectorUI/ChangeLog	2019-04-01 22:41:24 UTC (rev 243719)
+++ trunk/Source/WebInspectorUI/ChangeLog	2019-04-01 22:41:28 UTC (rev 243720)
@@ -1,5 +1,37 @@
 2019-04-01  Devin Rousso  <[email protected]>
 
+        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  <[email protected]>
+
         Web Inspector: Canvas: add compatibility support for WebMetal
         https://bugs.webkit.org/show_bug.cgi?id=196412
         <rdar://problem/49439417>

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js (243719 => 243720)


--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js	2019-04-01 22:41:24 UTC (rev 243719)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js	2019-04-01 22:41:28 UTC (rev 243720)
@@ -45,7 +45,7 @@
 
         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 @@
         return [this._refreshButtonNavigationItem, this._showGridButtonNavigationItem];
     }
 
-    refresh()
+    refreshPreview()
     {
         this._pendingContent = null;
 
@@ -158,11 +158,8 @@
         if (this._errorElement)
             this._showError();
 
-        if (isCard) {
+        if (isCard)
             this._refreshPixelSize();
-            this._updateMemoryCost();
-            this._updateProgressView();
-        }
     }
 
     layout()
@@ -169,25 +166,28 @@
     {
         super.layout();
 
-        if (!this._pendingContent)
-            return;
+        if (this._pendingContent) {
+            if (this._errorElement) {
+                this._errorElement.remove();
+                this._errorElement = null;
+            }
 
-        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 = null;
+
+            if (!this._previewImageElement.parentNode)
+                this._previewContainerElement.appendChild(this._previewImageElement);
         }
 
-        this._previewImageElement.src = ""
-        this._pendingContent = null;
-
-        if (!this._previewImageElement.parentNode)
-            this._previewContainerElement.appendChild(this._previewImageElement);
-
+        this._updateRecordNavigationItem();
+        this._updateProgressView();
+        this._updateViewRelatedItems();
+        this._updateMemoryCost();
         this._updateImageGrid();
     }
 
@@ -195,10 +195,7 @@
     {
         super.shown();
 
-        this.refresh();
-
-        this._updateRecordNavigationItem();
-        this._updateProgressView();
+        this.refreshPreview();
     }
 
     attached()
@@ -206,11 +203,11 @@
         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 @@
         }
     }
 
-    _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 @@
                     this._pixelSizeElement.textContent = emDash;
             }
 
-            this.refresh();
+            this.refreshPreview();
         };
 
         this.representedObject.requestSize()

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js (243719 => 243720)


--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js	2019-04-01 22:41:24 UTC (rev 243719)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js	2019-04-01 22:41:28 UTC (rev 243720)
@@ -146,7 +146,7 @@
     _refreshPreviews()
     {
         for (let canvasContentView of this.subviews)
-            canvasContentView.refresh();
+            canvasContentView.refreshPreview();
     }
 
     _updateNavigationItems()
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to