Changeset 195504 in webkit

Timestamp:

Jan 22, 2016 10:46:56 PM (8 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: Reduce unnecessary forced layouts in TimelineRuler
​https://bugs.webkit.org/show_bug.cgi?id=153390
<rdar://problem/24312241>

Patch by Joseph Pecoraro <Joseph Pecoraro> on 2016-01-22
Reviewed by Timothy Hatcher.

TimelineRuler's width rarely changes. It should only need to calculate
its width when added to the DOM or if the content view containing it
has resized and the bounds of the ruler may have changed.

Switch everything in TimelineRuler to using a cached width, and add
an explicit method, resize, to update this width. This eliminated
frequent hangs I was seeing while recording timelines.

• UserInterface/Views/OverviewTimelineView.js:

(WebInspector.OverviewTimelineView.prototype.shown):
(WebInspector.OverviewTimelineView.prototype.updateLayoutForResize):
Resize the ruler when the view is shown or resized.

• UserInterface/Views/TimelineOverview.js:

(WebInspector.TimelineOverview.prototype.shown):
(WebInspector.TimelineOverview.prototype.updateLayoutForResize):
Resize the ruler when the view is shown or resized.

• UserInterface/Views/TimelineRecordingContentView.js:

(WebInspector.TimelineRecordingContentView.prototype.layout):
Inform the current content view of a resize if possible.

• UserInterface/Views/TimelineRuler.js:

(WebInspector.TimelineRuler.prototype.resize):
Update the width.

(WebInspector.TimelineRuler.prototype._recalculate):
(WebInspector.TimelineRuler.prototype._needsMarkerLayout):
(WebInspector.TimelineRuler.prototype._needsSelectionLayout):
(WebInspector.TimelineRuler.prototype._handleMouseMove):
(WebInspector.TimelineRuler.prototype._handleSelectionHandleMouseMove):
Use cached width.

• UserInterface/Views/TimelineRecordBar.js:

(WebInspector.TimelineRecordBar.createCombinedBars): Deleted.
Remove some stale code.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/OverviewTimelineView.js (modified) (2 diffs)
• UserInterface/Views/TimelineOverview.js (modified) (2 diffs)
• UserInterface/Views/TimelineRecordBar.js (modified) (1 diff)
• UserInterface/Views/TimelineRecordingContentView.js (modified) (1 diff)
• UserInterface/Views/TimelineRuler.js (modified) (5 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2016-01-22  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: Reduce unnecessary forced layouts in TimelineRuler
+        https://bugs.webkit.org/show_bug.cgi?id=153390
+        <rdar://problem/24312241>
+
+        Reviewed by Timothy Hatcher.
+
+        TimelineRuler's width rarely changes. It should only need to calculate
+        its width when added to the DOM or if the content view containing it
+        has resized and the bounds of the ruler may have changed.
+
+        Switch everything in TimelineRuler to using a cached width, and add
+        an explicit method, resize, to update this width. This eliminated
+        frequent hangs I was seeing while recording timelines.
+
+        * UserInterface/Views/OverviewTimelineView.js:
+        (WebInspector.OverviewTimelineView.prototype.shown):
+        (WebInspector.OverviewTimelineView.prototype.updateLayoutForResize):
+        Resize the ruler when the view is shown or resized.
+
+        * UserInterface/Views/TimelineOverview.js:
+        (WebInspector.TimelineOverview.prototype.shown):
+        (WebInspector.TimelineOverview.prototype.updateLayoutForResize):
+        Resize the ruler when the view is shown or resized.
+
+        * UserInterface/Views/TimelineRecordingContentView.js:
+        (WebInspector.TimelineRecordingContentView.prototype.layout):
+        Inform the current content view of a resize if possible.
+
+        * UserInterface/Views/TimelineRuler.js:
+        (WebInspector.TimelineRuler.prototype.resize):
+        Update the width.
+
+        (WebInspector.TimelineRuler.prototype._recalculate):
+        (WebInspector.TimelineRuler.prototype._needsMarkerLayout):
+        (WebInspector.TimelineRuler.prototype._needsSelectionLayout):
+        (WebInspector.TimelineRuler.prototype._handleMouseMove):
+        (WebInspector.TimelineRuler.prototype._handleSelectionHandleMouseMove):
+        Use cached width.
+
+        * UserInterface/Views/TimelineRecordBar.js:
+        (WebInspector.TimelineRecordBar.createCombinedBars): Deleted.
+        Remove some stale code.
+
 2016-01-22  Devin Rousso  <dcrousso+webkit@gmail.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js

@@ -82 +82 @@
 
         this._treeOutlineDataGridSynchronizer.synchronize();
+        this._timelineRuler.resize();
     }
 
@@ -158 +159 @@
 
         WebInspector.showOriginalOrFormattedSourceCodeLocation(treeElement.sourceCodeTimeline.sourceCodeLocation);
+    }
+
+    updateLayoutForResize()
+    {
+        this._timelineRuler.resize();
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js

@@ -258 +258 @@
         this._visible = true;
 
+        this._timelineRuler.resize()
+
         for (var timelineOverviewGraph of this._timelineOverviewGraphsMap.values())
             timelineOverviewGraph.shown();
@@ -314 +316 @@
     {
         this._cachedScrollContainerWidth = NaN;
+        this._timelineRuler.resize()
         this.updateLayout();
     }

trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js

@@ -126 +126 @@
         }
 
-        lastRecordType = null;
-
         var activeStartTime = NaN;
         var activeEndTime = NaN;

trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js

@@ -325 +325 @@
     {
         this._currentTimelineOverview.updateLayoutForResize();
+
+        let currentContentView = this._contentViewContainer.currentContentView;
+        if (currentContentView && currentContentView.updateLayoutForResize)
+            currentContentView.updateLayoutForResize();
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js

@@ -507 +507 @@
             this._scheduledMarkerLayoutUpdateIdentifier = undefined;
 
-            let visibleWidth = this.element.clientWidth;
+            let visibleWidth = this._cachedClientWidth;
             if (visibleWidth <= 0)
                 return;
@@ -530 +530 @@
             this._scheduledSelectionLayoutUpdateIdentifier = undefined;
 
-            let visibleWidth = this.element.clientWidth;
+            let visibleWidth = this._cachedClientWidth;
             if (visibleWidth <= 0)
                 return;
@@ -538 +538 @@
     }
 
+    resize()
+    {
+        this._cachedClientWidth = this.element.clientWidth;
+        this._recalculate();
+    }
+
     _recalculate()
     {
-        let visibleWidth = this.element.clientWidth;
+        let visibleWidth = this._cachedClientWidth;
         if (visibleWidth <= 0)
             return 0;
@@ -733 +739 @@
         }
 
-        this._updateSelection(this.element.clientWidth, this.duration);
+        this._updateSelection(this._cachedClientWidth, this.duration);
 
         event.preventDefault();
@@ -827 +833 @@
         }
 
-        this._updateSelection(this.element.clientWidth, this.duration);
+        this._updateSelection(this._cachedClientWidth, this.duration);
 
         event.preventDefault();