Changeset 185734 in webkit

Timestamp:

Jun 18, 2015, 9:45:34 PM (11 years ago)

Author:

Matt Baker

Message:

Web Inspector: Rendering Frames timeline selection should snap to frame boundaries
​https://bugs.webkit.org/show_bug.cgi?id=146120

Reviewed by Timothy Hatcher.

• UserInterface/Views/RenderingFrameTimelineOverview.js:

Enable snapping to frame boundaries.

• UserInterface/Views/TimelineRecordingContentView.js:

(WebInspector.TimelineRecordingContentView.prototype._updateFrameSelection):
Updated filtering to account for ruler snapping.

• UserInterface/Views/TimelineRuler.js:

(WebInspector.TimelineRuler.prototype.get snapInterval):
(WebInspector.TimelineRuler.prototype.set snapInterval):
(WebInspector.TimelineRuler.prototype.set selectionStartTime):
(WebInspector.TimelineRuler.prototype.set selectionEndTime):
(WebInspector.TimelineRuler.prototype._snapValue):
(WebInspector.TimelineRuler.prototype._handleMouseMove):
Added support for snapping to a specified interval.

• UserInterface/Views/TimelineSidebarPanel.js:

Removed unnecessary code.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/RenderingFrameTimelineOverview.js (modified) (1 diff)
• UserInterface/Views/TimelineRecordingContentView.js (modified) (2 diffs)
• UserInterface/Views/TimelineRuler.js (modified) (5 diffs)
• UserInterface/Views/TimelineSidebarPanel.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2015-06-18  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: Rendering Frames timeline selection should snap to frame boundaries
+        https://bugs.webkit.org/show_bug.cgi?id=146120
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/RenderingFrameTimelineOverview.js:
+        Enable snapping to frame boundaries.
+
+        * UserInterface/Views/TimelineRecordingContentView.js:
+        (WebInspector.TimelineRecordingContentView.prototype._updateFrameSelection):
+        Updated filtering to account for ruler snapping.
+
+        * UserInterface/Views/TimelineRuler.js:
+        (WebInspector.TimelineRuler.prototype.get snapInterval):
+        (WebInspector.TimelineRuler.prototype.set snapInterval):
+        (WebInspector.TimelineRuler.prototype.set selectionStartTime):
+        (WebInspector.TimelineRuler.prototype.set selectionEndTime):
+        (WebInspector.TimelineRuler.prototype._snapValue):
+        (WebInspector.TimelineRuler.prototype._handleMouseMove):
+        Added support for snapping to a specified interval.
+
+        * UserInterface/Views/TimelineSidebarPanel.js:
+        Removed unnecessary code.
+
 2015-06-18  Devin Rousso  <drousso@apple.com>
 

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

@@ -38 +38 @@
     WebInspector.TimelineOverview.call(this, "frames", timelineRecording, minimumDurationPerPixel, maximumDurationPerPixel, defaultSettingsValues);
 
+    this.timelineRuler.snapInterval = 1;
     this.timelineRuler.formatLabelCallback = function(value) {
         return value.toFixed(0);

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

@@ -266 +266 @@
             if (this._renderingFrameTimeline && this._renderingFrameTimeline.records.length) {
                 var records = this._renderingFrameTimeline.records;
-                var startIndex = Math.floor(startTime);
+                var startIndex = this._currentTimelineOverview.timelineRuler.snapInterval ? startTime : Math.floor(startTime);
                 if (startIndex >= records.length)
                     return false;
 
-                var endIndex = Math.min(Math.floor(endTime), records.length - 1);
+                var endIndex = this._currentTimelineOverview.timelineRuler.snapInterval ? endTime - 1: Math.floor(endTime);
+                endIndex = Math.min(endIndex, records.length - 1);
                 console.assert(startIndex <= endIndex, startIndex);
 
@@ -672 +673 @@
 
         var startIndex = this._renderingFrameTimelineOverview.selectionStartTime;
-        var endIndex = startIndex + this._renderingFrameTimelineOverview.selectionDuration;
+        var endIndex = startIndex + this._renderingFrameTimelineOverview.selectionDuration - 1;
         this._timelineSidebarPanel.updateFrameSelection(startIndex, endIndex);
     }

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

@@ -254 +254 @@
     },
 
+    get snapInterval()
+    {
+        return this._snapInterval;
+    },
+
+    set snapInterval(x)
+    {
+        if (this._snapInterval === x)
+            return;
+
+        this._snapInterval = x;
+    },
+
     get selectionStartTime()
     {
@@ -261 +274 @@
     set selectionStartTime(x)
     {
+        x = this._snapValue(x);
         if (this._selectionStartTime === x)
             return;
@@ -277 +291 @@
     set selectionEndTime(x)
     {
+        x = this._snapValue(x);
         if (this._selectionEndTime === x)
             return;
@@ -603 +618 @@
 
         return Number.secondsToString(value, true);
+    },
+
+    _snapValue: function(value)
+    {
+        if (!value || !this.snapInterval)
+            return value;
+
+        return Math.round(value / this.snapInterval) * this.snapInterval;
     },
 
@@ -658 +681 @@
             var offsetTime = (currentMousePosition - this._lastMousePosition) * this.secondsPerPixel;
             var selectionDuration = this.selectionEndTime - this.selectionStartTime;
+            var oldSelectionStartTime = this.selectionStartTime;
 
             this.selectionStartTime = Math.max(this.startTime, Math.min(this.selectionStartTime + offsetTime, this.endTime - selectionDuration));
             this.selectionEndTime = this.selectionStartTime + selectionDuration;
+
+            if (this.snapInterval) {
+                // When snapping we need to check the mouse position delta relative to the last snap, rather than the
+                // last mouse move. If a snap occurs we adjust for the amount the cursor drifted, so that the mouse
+                // position relative to the selection remains constant.
+                var snapOffset = this.selectionStartTime - oldSelectionStartTime;
+                if (!snapOffset)
+                    return;
+
+                var positionDrift = (offsetTime - snapOffset * this.snapInterval) / this.secondsPerPixel;
+                currentMousePosition -= positionDrift;
+            }
 
             this._lastMousePosition = currentMousePosition;

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

@@ -318 +318 @@
         console.assert(startFrameIndex <= endFrameIndex);
         console.assert(this.viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames, this._viewMode);
-
-        startFrameIndex = Math.floor(startFrameIndex);
-        endFrameIndex = Math.floor(endFrameIndex);
         if (this._startFrameIndex === startFrameIndex && this._endFrameIndex === endFrameIndex)
             return;