Changeset 161893 in webkit


Ignore:
Timestamp:
Jan 13, 2014 11:07:40 AM (10 years ago)
Author:
timothy@apple.com
Message:

Snap time dividers to nearest numbers instead of just dividing the time span into max density slices.

https://bugs.webkit.org/show_bug.cgi?id=125081

Reviewed by Joseph Pecoraro.

  • UserInterface/TimelineDecorations.js:

(WebInspector.TimelineDecorations.prototype.updateHeaderTimes): Snap the time slice to a nearest number.
(WebInspector.TimelineDecorations.prototype.updateEventMarkers): Rename boundarySpan to timeSpan.

Location:
trunk/Source/WebInspectorUI
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebInspectorUI/ChangeLog

    r161691 r161893  
     12014-01-13  Timothy Hatcher  <timothy@apple.com>
     2
     3        Snap time dividers to nearest numbers instead of just dividing the time span into max density slices.
     4
     5        https://bugs.webkit.org/show_bug.cgi?id=125081
     6
     7        Reviewed by Joseph Pecoraro.
     8
     9        * UserInterface/TimelineDecorations.js:
     10        (WebInspector.TimelineDecorations.prototype.updateHeaderTimes): Snap the time slice to a nearest number.
     11        (WebInspector.TimelineDecorations.prototype.updateEventMarkers): Rename boundarySpan to timeSpan.
     12
    1132014-01-10  Joseph Pecoraro  <pecoraro@apple.com>
    214
  • trunk/Source/WebInspectorUI/UserInterface/TimelineDecorations.js

    r155241 r161893  
    4242}
    4343
     44WebInspector.TimelineDecorations.MinimumDividerSpacing = 64;
     45
    4446WebInspector.TimelineDecorations.StyleClassName = "timeline-decorations";
    4547WebInspector.TimelineDecorations.HeaderElementStyleClassName = "header";
     
    7274    },
    7375
    74     updateHeaderTimes: function(boundarySpan, leftPadding, rightPadding, force)
     76    updateHeaderTimes: function(timeSpan, leftPadding, rightPadding, force)
    7577    {
    7678        if (!this.isShowingHeaderDividers())
    7779            return;
    7880
    79         if (isNaN(boundarySpan))
     81        if (isNaN(timeSpan))
    8082            return;
    8183
     
    8486
    8587        var clientWidth = this._headerElement.clientWidth;
     88
    8689        var leftVisibleEdge = leftPadding;
    8790        var rightVisibleEdge = clientWidth - rightPadding;
     
    9093            return;
    9194
    92         var dividerCount = Math.round(visibleWidth / 64);
    93         var slice = boundarySpan / dividerCount;
    94         if (!force && this._currentDividerSlice === slice)
    95             return;
    96 
    97         this._currentDividerSlice = slice;
     95        var pixelsPerSecond = clientWidth / timeSpan;
     96
     97        if (!force && this._currentPixelsPerSecond === pixelsPerSecond)
     98            return;
     99
     100        this._currentPixelsPerSecond = pixelsPerSecond;
     101
     102        // Calculate a divider count based on the maximum allowed divider density.
     103        var dividerCount = Math.round(visibleWidth / WebInspector.TimelineDecorations.MinimumDividerSpacing);
     104
     105        // Calculate the slice time based on the rough divider count and the time span.
     106        var sliceTime = timeSpan / dividerCount;
     107
     108        // Snap the slice time to a nearest number (e.g. 0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 50, etc.)
     109        sliceTime = Math.pow(10, Math.ceil(Math.log(sliceTime) / Math.LN10));
     110        if (sliceTime * pixelsPerSecond >= 5 * WebInspector.TimelineDecorations.MinimumDividerSpacing)
     111            sliceTime = sliceTime / 5;
     112        if (sliceTime * pixelsPerSecond >= 2 * WebInspector.TimelineDecorations.MinimumDividerSpacing)
     113            sliceTime = sliceTime / 2;
     114
     115        var firstDividerTime = sliceTime;
     116        var lastDividerTime = timeSpan;
     117
     118        // Calculate the divider count now based on the final slice time.
     119        dividerCount = Math.ceil((lastDividerTime - firstDividerTime) / sliceTime);
    98120
    99121        var dividerElement = this._headerElement.firstChild;
     
    114136            var fractionLeft = totalLeft / clientWidth;
    115137            var percentLeft = 100 * fractionLeft;
    116             var time = fractionLeft * boundarySpan;
     138            var time = firstDividerTime + (sliceTime * i);
    117139
    118140            var currentPercentLeft = parseFloat(dividerElement.style.left);
     
    120142                dividerElement.style.left = percentLeft + "%";
    121143
    122             dividerElement._labelElement.textContent = isNaN(slice) ? "" : Number.secondsToString(time);
     144            dividerElement._labelElement.textContent = isNaN(time) ? "" : Number.secondsToString(time);
    123145            dividerElement = dividerElement.nextSibling;
    124146        }
     
    139161            return;
    140162
    141         var boundarySpan = maximumBoundary - minimumBoundary;
    142         if (isNaN(boundarySpan))
     163        var timeSpan = maximumBoundary - minimumBoundary;
     164        if (isNaN(timeSpan))
    143165            return;
    144166
     
    164186
    165187            var time = eventMarker.timestamp - minimumBoundary;
    166             var percentLeft = (100 * time) / boundarySpan;
     188            var percentLeft = (100 * time) / timeSpan;
    167189
    168190            var tooltipElement = document.createElement("div");
Note: See TracChangeset for help on using the changeset viewer.