⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 243720 in webkit


Ignore:
Timestamp:
Apr 1, 2019, 3:41:28 PM (7 years ago)
Author:
Devin Rousso
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):

Location:
trunk/Source/WebInspectorUI
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r243718 r243720  
     12019-04-01  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Canvas: auto-record after page load sometimes shows the wrong UI
     4        https://bugs.webkit.org/show_bug.cgi?id=196320
     5        <rdar://problem/49356686>
     6
     7        Reviewed by Joseph Pecoraro.
     8
     9        It was previously possible that the timing of a recording being started and the preview
     10        image being loaded would not always be in the same order.
     11
     12        Utilize the existing `View.prototype.layout` mechanics to ensure that updates are coalesced
     13        and that the changes are always applied in a particular order.
     14
     15        * UserInterface/Views/CanvasContentView.js:
     16        (WI.CanvasContentView):
     17        (WI.CanvasContentView.prototype.refreshPreview): Added.
     18        (WI.CanvasContentView.prototype.initialLayout):
     19        (WI.CanvasContentView.prototype.layout):
     20        (WI.CanvasContentView.prototype.shown):
     21        (WI.CanvasContentView.prototype.attached):
     22        (WI.CanvasContentView.prototype._refreshPixelSize):
     23        (WI.CanvasContentView.prototype.refresh): Deleted.
     24        (WI.CanvasContentView.prototype._recordingStarted): Deleted.
     25        (WI.CanvasContentView.prototype._recordingProgress): Deleted.
     26        (WI.CanvasContentView.prototype._recordingStopped): Deleted.
     27        (WI.CanvasContentView.prototype._shaderProgramAdded): Deleted.
     28        (WI.CanvasContentView.prototype._shaderProgramRemoved): Deleted.
     29
     30        * UserInterface/Views/CanvasOverviewContentView.js:
     31        (WI.CanvasOverviewContentView.prototype._refreshPreviews):
     32
    1332019-04-01  Devin Rousso  <drousso@apple.com>
    234

  • trunk/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.js

    r242937 r243720  
    4646        this._refreshButtonNavigationItem = new WI.ButtonNavigationItem("refresh", WI.UIString("Refresh"), "Images/ReloadFull.svg", 13, 13);
    4747        this._refreshButtonNavigationItem.visibilityPriority = WI.NavigationItem.VisibilityPriority.Low;
    48         this._refreshButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this.refresh, this);
     48        this._refreshButtonNavigationItem.addEventListener(WI.ButtonNavigationItem.Event.Clicked, this.refreshPreview, this);
    4949
    5050        this._showGridButtonNavigationItem = new WI.ActivateButtonNavigationItem("show-grid", WI.UIString("Show Grid"), WI.UIString("Hide Grid"), "Images/NavigationItemCheckers.svg", 13, 13);
    … …  
    6363    }
    6464
    65     refresh()
     65    refreshPreview()
    6666    {
    6767        this._pendingContent = null;
    … …  
    159159            this._showError();
    160160
    161         if (isCard) {
     161        if (isCard)
    162162            this._refreshPixelSize();
    163             this._updateMemoryCost();
    164             this._updateProgressView();
    165         }
    166163    }
    167164
    … …  
    170167        super.layout();
    171168
    172         if (!this._pendingContent)
    173             return;
    174 
    175         if (this._errorElement) {
    176             this._errorElement.remove();
    177             this._errorElement = null;
    178         }
    179 
    180         if (!this._previewImageElement) {
    181             this._previewImageElement = document.createElement("img");
    182             this._previewImageElement.addEventListener("error", this._showError.bind(this));
    183         }
    184 
    185         this._previewImageElement.src = this._pendingContent;
    186         this._pendingContent = null;
    187 
    188         if (!this._previewImageElement.parentNode)
    189             this._previewContainerElement.appendChild(this._previewImageElement);
    190 
    191         this._updateImageGrid();
    192     }
    193 
    194     shown()
    195     {
    196         super.shown();
    197 
    198         this.refresh();
     169        if (this._pendingContent) {
     170            if (this._errorElement) {
     171                this._errorElement.remove();
     172                this._errorElement = null;
     173            }
     174
     175            if (!this._previewImageElement) {
     176                this._previewImageElement = document.createElement("img");
     177                this._previewImageElement.addEventListener("error", this._showError.bind(this));
     178            }
     179
     180            this._previewImageElement.src = this._pendingContent;
     181            this._pendingContent = null;
     182
     183            if (!this._previewImageElement.parentNode)
     184                this._previewContainerElement.appendChild(this._previewImageElement);
     185        }
    199186
    200187        this._updateRecordNavigationItem();
    201188        this._updateProgressView();
     189        this._updateViewRelatedItems();
     190        this._updateMemoryCost();
     191        this._updateImageGrid();
     192    }
     193
     194    shown()
     195    {
     196        super.shown();
     197
     198        this.refreshPreview();
    202199    }
    203200
    … …  
    207204
    208205        this.representedObject.addEventListener(WI.Canvas.Event.MemoryChanged, this._updateMemoryCost, this);
    209         this.representedObject.addEventListener(WI.Canvas.Event.RecordingStarted, this._recordingStarted, this);
    210         this.representedObject.addEventListener(WI.Canvas.Event.RecordingProgress, this._recordingProgress, this);
    211         this.representedObject.addEventListener(WI.Canvas.Event.RecordingStopped, this._recordingStopped, this);
    212         this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemAdded, this._shaderProgramAdded, this);
    213         this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemRemoved, this._shaderProgramRemoved, this);
     206        this.representedObject.addEventListener(WI.Canvas.Event.RecordingStarted, this.needsLayout, this);
     207        this.representedObject.addEventListener(WI.Canvas.Event.RecordingProgress, this.needsLayout, this);
     208        this.representedObject.addEventListener(WI.Canvas.Event.RecordingStopped, this.needsLayout, this);
     209        this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemAdded, this.needsLayout, this);
     210        this.representedObject.shaderProgramCollection.addEventListener(WI.Collection.Event.ItemRemoved, this.needsLayout, this);
    214211
    215212        this.representedObject.requestNode().then((node) => {
    … …  
    267264    }
    268265
    269     _recordingStarted(event)
    270     {
    271         this._updateRecordNavigationItem();
    272         this._updateProgressView();
    273     }
    274 
    275     _recordingProgress(event)
    276     {
    277         this._updateProgressView();
    278     }
    279 
    280     _recordingStopped(event)
    281     {
    282         this._updateRecordNavigationItem();
    283         this._updateProgressView();
    284         this._updateViewRelatedItems();
    285     }
    286 
    287     _shaderProgramAdded(event)
    288     {
    289         this._updateViewRelatedItems();
    290     }
    291 
    292     _shaderProgramRemoved(event)
    293     {
    294         this._updateViewRelatedItems();
    295     }
    296 
    297266    _refreshPixelSize()
    298267    {
    … …  
    310279            }
    311280
    312             this.refresh();
     281            this.refreshPreview();
    313282        };
    314283

  • trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.js

    r242809 r243720  
    147147    {
    148148        for (let canvasContentView of this.subviews)
    149             canvasContentView.refresh();
     149            canvasContentView.refreshPreview();
    150150    }
    151151
Note: See TracChangeset for help on using the changeset viewer.