Clean up and refactor TimelineDecorations into TimelineRuler.

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

Reviewed by Joseph Pecoraro.

* UserInterface/Main.html:
* UserInterface/OverviewTimelineView.css:
(.timeline-view.overview > .timeline-ruler):
(.timeline-view.overview > .timeline-ruler > .header):
(.timeline-view.overview > .timeline-ruler > .event-markers):
Updated class names and border sides.

* UserInterface/OverviewTimelineView.js:
(WebInspector.OverviewTimelineView):
(WebInspector.OverviewTimelineView.prototype.updateLayout):
Call updateLayout on the TimelineRuler.

* UserInterface/TimelineRuler.css: Renamed from Source/WebInspectorUI/UserInterface/TimelineDecorations.css.
(.timeline-ruler):
(.timeline-ruler > .header):
(.timeline-ruler > .header > .divider):
(.timeline-ruler > .header > .divider > .label):
(.timeline-ruler > .event-markers):
(.timeline-ruler > .event-markers > .event-marker-tooltip):
(.timeline-ruler > .event-markers > .event-marker):
(.timeline-ruler > .event-markers > .event-marker.load-event):
(.timeline-ruler > .event-markers > .event-marker.dom-content-event):
(.timeline-ruler > .event-markers > .event-marker.timestamp):
Updated class names and border sides.

* UserInterface/TimelineRuler.js: Renamed from Source/WebInspectorUI/UserInterface/TimelineDecorations.js.
(WebInspector.TimelineRuler):
(WebInspector.TimelineRuler.prototype.get element):
(WebInspector.TimelineRuler.prototype.get headerElement):
(WebInspector.TimelineRuler.prototype.get allowsClippedLabels):
(WebInspector.TimelineRuler.prototype.set allowsClippedLabels):
(WebInspector.TimelineRuler.prototype.get zeroTime):
(WebInspector.TimelineRuler.prototype.set zeroTime):
(WebInspector.TimelineRuler.prototype.get startTime):
(WebInspector.TimelineRuler.prototype.set startTime):
(WebInspector.TimelineRuler.prototype.get duration):
(WebInspector.TimelineRuler.prototype.set duration):
(WebInspector.TimelineRuler.prototype.get endTime):
(WebInspector.TimelineRuler.prototype.set endTime):
(WebInspector.TimelineRuler.prototype.get secondsPerPixel):
(WebInspector.TimelineRuler.prototype.set secondsPerPixel):
(WebInspector.TimelineRuler.prototype.updateLayout.removeDividerAndSelectNext):
(WebInspector.TimelineRuler.prototype.updateLayout):
(WebInspector.TimelineRuler.prototype._needsLayout):
(WebInspector.TimelineRuler.prototype._recalculate):
Refactor so the times are stored on TimelineRuler and not passed in each time an update is needed.
Support dividers that don't always start at the zero position, allowing a sliding time ruler.
Support for a non-pinned ruler where the end time is not fixed and the scale is specified in
seconds-per-pixel.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162407 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog

+2013-12-13  Timothy Hatcher  <timothy@apple.com>
+
+        Clean up and refactor TimelineDecorations into TimelineRuler.
+
+        https://bugs.webkit.org/show_bug.cgi?id=125709
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.html:
+        * UserInterface/OverviewTimelineView.css:
+        (.timeline-view.overview > .timeline-ruler):
+        (.timeline-view.overview > .timeline-ruler > .header):
+        (.timeline-view.overview > .timeline-ruler > .event-markers):
+        Updated class names and border sides.
+
+        * UserInterface/OverviewTimelineView.js:
+        (WebInspector.OverviewTimelineView):
+        (WebInspector.OverviewTimelineView.prototype.updateLayout):
+        Call updateLayout on the TimelineRuler.
+
+        * UserInterface/TimelineRuler.css: Renamed from Source/WebInspectorUI/UserInterface/TimelineDecorations.css.
+        (.timeline-ruler):
+        (.timeline-ruler > .header):
+        (.timeline-ruler > .header > .divider):
+        (.timeline-ruler > .header > .divider > .label):
+        (.timeline-ruler > .event-markers):
+        (.timeline-ruler > .event-markers > .event-marker-tooltip):
+        (.timeline-ruler > .event-markers > .event-marker):
+        (.timeline-ruler > .event-markers > .event-marker.load-event):
+        (.timeline-ruler > .event-markers > .event-marker.dom-content-event):
+        (.timeline-ruler > .event-markers > .event-marker.timestamp):
+        Updated class names and border sides.
+
+        * UserInterface/TimelineRuler.js: Renamed from Source/WebInspectorUI/UserInterface/TimelineDecorations.js.
+        (WebInspector.TimelineRuler):
+        (WebInspector.TimelineRuler.prototype.get element):
+        (WebInspector.TimelineRuler.prototype.get headerElement):
+        (WebInspector.TimelineRuler.prototype.get allowsClippedLabels):
+        (WebInspector.TimelineRuler.prototype.set allowsClippedLabels):
+        (WebInspector.TimelineRuler.prototype.get zeroTime):
+        (WebInspector.TimelineRuler.prototype.set zeroTime):
+        (WebInspector.TimelineRuler.prototype.get startTime):
+        (WebInspector.TimelineRuler.prototype.set startTime):
+        (WebInspector.TimelineRuler.prototype.get duration):
+        (WebInspector.TimelineRuler.prototype.set duration):
+        (WebInspector.TimelineRuler.prototype.get endTime):
+        (WebInspector.TimelineRuler.prototype.set endTime):
+        (WebInspector.TimelineRuler.prototype.get secondsPerPixel):
+        (WebInspector.TimelineRuler.prototype.set secondsPerPixel):
+        (WebInspector.TimelineRuler.prototype.updateLayout.removeDividerAndSelectNext):
+        (WebInspector.TimelineRuler.prototype.updateLayout):
+        (WebInspector.TimelineRuler.prototype._needsLayout):
+        (WebInspector.TimelineRuler.prototype._recalculate):
+        Refactor so the times are stored on TimelineRuler and not passed in each time an update is needed.
+        Support dividers that don't always start at the zero position, allowing a sliding time ruler.
+        Support for a non-pinned ruler where the end time is not fixed and the scale is specified in
+        seconds-per-pixel.
+
 2014-01-08  Timothy Hatcher  <timothy@apple.com>
 
         Improve scroll performance of WebInspector.TreeOutlineDataGridSynchronizer.

Source/WebInspectorUI/UserInterface/Main.html

@@ -85,7 +85,7 @@
     <link rel="stylesheet" href="TimelineContentView.css">
     <link rel="stylesheet" href="OverviewTimelineView.css">
     <link rel="stylesheet" href="TimelineIcons.css">
-    <link rel="stylesheet" href="TimelineDecorations.css">
+    <link rel="stylesheet" href="TimelineRuler.css">
     <link rel="stylesheet" href="TimelineDataGrid.css">
     <link rel="stylesheet" href="TimelineOverview.css">
     <link rel="stylesheet" href="ProfileView.css">
@@ -343,7 +343,7 @@
     <script src="IndeterminateProgressSpinner.js"></script>
     <script src="TimelineSidebarPanel.js"></script>
     <script src="SourceCodeTimelineTreeElement.js"></script>
-    <script src="TimelineDecorations.js"></script>
+    <script src="TimelineRuler.js"></script>
     <script src="TimelineDataGrid.js"></script>
     <script src="LayoutTimelineDataGrid.js"></script>
     <script src="ScriptTimelineDataGrid.js"></script>

Source/WebInspectorUI/UserInterface/OverviewTimelineView.css

@@ -23,7 +23,7 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.timeline-view.overview > .timeline-decorations {
+.timeline-view.overview > .timeline-ruler {
     position: absolute;
     top: 0;
     left: 0;
@@ -31,12 +31,12 @@
     bottom: 0;
 }
 
-.timeline-view.overview > .timeline-decorations > .header {
-    border-bottom: 1px solid rgb(200, 200, 200);
+.timeline-view.overview > .timeline-ruler > .header {
+    border-top: 1px solid rgb(200, 200, 200);
     height: 23px;
 }
 
-.timeline-view.overview > .timeline-decorations > .event-markers {
+.timeline-view.overview > .timeline-ruler > .event-markers {
     top: 23px;
 }
 

Source/WebInspectorUI/UserInterface/OverviewTimelineView.js

@@ -34,8 +34,8 @@ WebInspector.OverviewTimelineView = function()
 
     this._treeOutlineDataGridSynchronizer = new WebInspector.TreeOutlineDataGridSynchronizer(this._contentTreeOutline, this._dataGrid);
 
-    this._timelineDecorations = new WebInspector.TimelineDecorations;
-    this.element.appendChild(this._timelineDecorations.element);
+    this._timelineRuler = new WebInspector.TimelineRuler;
+    this.element.appendChild(this._timelineRuler.element);
 
     this.element.classList.add(WebInspector.OverviewTimelineView.StyleClassName);
     this.element.appendChild(this._dataGrid.element);
@@ -71,6 +71,11 @@ WebInspector.OverviewTimelineView.prototype = {
         this._treeOutlineDataGridSynchronizer.synchronize();
     },
 
+    updateLayout: function()
+    {
+        this._timelineRuler.updateLayout();
+    },
+
     // Private
 
     _compareTreeElementsByDetails: function(a, b)

Source/WebInspectorUI/UserInterface/TimelineDecorations.css → Source/WebInspectorUI/UserInterface/TimelineRuler.css

@@ -23,47 +23,39 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.timeline-decorations {
+.timeline-ruler {
     position: relative;
     pointer-events: none;
 }
 
-.timeline-decorations > .header {
-    border-top: 1px solid rgb(200, 200, 200);
+.timeline-ruler > .header {
+    border-bottom: 1px solid rgb(200, 200, 200);
 
     height: 22px;
 
     position: relative;
 }
 
-.timeline-decorations > .header > .divider {
+.timeline-ruler > .header > .divider {
     position: absolute;
     width: 1px;
     top: 0;
     bottom: 0;
-    background-image: -webkit-linear-gradient(top, rgba(200, 200, 200, 1), rgba(200, 200, 200, 0) 85%);
+    -webkit-transform: translateX(-1px);
+    background-image: -webkit-linear-gradient(bottom, rgba(200, 200, 200, 1), rgba(200, 200, 200, 0) 85%);
 }
 
-.timeline-decorations > .header > .divider:first-child,
-.timeline-decorations > .header > .divider:last-child {
-    background-image: none;
-}
-
-.timeline-decorations > .header > .divider > .label {
+.timeline-ruler > .header > .divider > .label {
     position: absolute;
-    top: 3px;
-    right: 4px;
+    top: 5px;
+    right: 5px;
     font-size: 9px;
     font-family: "Lucida Grande", sans-serif;
     color: rgb(128, 128, 128);
     white-space: nowrap;
 }
 
-.timeline-decorations > .header > .divider:first-child > .label {
-    display: none;
-}
-
-.timeline-decorations > .event-markers {
+.timeline-ruler > .event-markers {
     position: absolute;
     top: 22px;
     left: 0;
@@ -71,7 +63,7 @@
     bottom: 0;
 }
 
-.timeline-decorations > .event-markers > .event-marker-tooltip {
+.timeline-ruler > .event-markers > .event-marker-tooltip {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -81,7 +73,7 @@
     pointer-events: auto;
 }
 
-.timeline-decorations > .event-markers > .event-marker {
+.timeline-ruler > .event-markers > .event-marker {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -93,14 +85,14 @@
     border-left-color: rgba(128, 128, 128, 0.5);
 }
 
-.timeline-decorations > .event-markers > .event-marker.load-event {
+.timeline-ruler > .event-markers > .event-marker.load-event {
     border-left-color: rgba(255, 0, 0, 0.5);
 }
 
-.timeline-decorations > .event-markers > .event-marker.dom-content-event {
+.timeline-ruler > .event-markers > .event-marker.dom-content-event {
     border-left-color: rgba(0, 0, 255, 0.5);
 }
 
-.timeline-decorations > .event-markers > .event-marker.timestamp {
+.timeline-ruler > .event-markers > .event-marker.timestamp {
     border-left-color: rgba(0, 110, 0, 0.5);
 }