Changeset 214099 in webkit

Timestamp:

Mar 16, 2017 10:29:51 PM (7 years ago)

Author:

webkit@devinrousso.com

Message:

Web Inspector: memory category timelines would look better with ruler tick-aligned guides
​https://bugs.webkit.org/show_bug.cgi?id=158100

Reviewed by Joseph Pecoraro.

• UserInterface/Views/MemoryTimelineView.css:

(.timeline-view.memory > .content > .details):
(.timeline-view.memory > .content > .details > .timeline-ruler):
(body[dir=ltr] .timeline-view.memory > .content > .details > .timeline-ruler):
(body[dir=rtl] .timeline-view.memory > .content > .details > .timeline-ruler):
Make the TimelineRuler absolutely positioned so it can use the full height of the view,
providing enough space for the markers to be visible.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/MemoryTimelineView.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2017-03-16  Devin Rousso  <webkit@devinrousso.com>
+
+        Web Inspector: memory category timelines would look better with ruler tick-aligned guides
+        https://bugs.webkit.org/show_bug.cgi?id=158100
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Views/MemoryTimelineView.css:
+        (.timeline-view.memory > .content > .details):
+        (.timeline-view.memory > .content > .details > .timeline-ruler):
+        (body[dir=ltr] .timeline-view.memory > .content > .details > .timeline-ruler):
+        (body[dir=rtl] .timeline-view.memory > .content > .details > .timeline-ruler):
+        Make the TimelineRuler absolutely positioned so it can use the full height of the view,
+        providing enough space for the markers to be visible.
+
 2017-03-16  Devin Rousso  <webkit@devinrousso.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css

@@ -44 +44 @@
 }
 
+.timeline-view.memory > .content > .details {
+    position: relative;
+}
+
 .timeline-view.memory > .content > .details > .timeline-ruler {
-    position: relative;
+    position: absolute;
     top: 5px;
-
-    --memory-timeline-view-details-timeline-ruler-margin-start: 150px;
+    bottom: 0;
+    right: 0;
+    left: 0;
+
+    --memory-timeline-view-details-timeline-ruler-offset-start: 150px;
 }
 
 body[dir=ltr] .timeline-view.memory > .content > .details > .timeline-ruler {
-    margin-left: var(--memory-timeline-view-details-timeline-ruler-margin-start);
+    left: var(--memory-timeline-view-details-timeline-ruler-offset-start);
 }
 
 body[dir=rtl] .timeline-view.memory > .content > .details > .timeline-ruler {
-    margin-right: var(--memory-timeline-view-details-timeline-ruler-margin-start);
+    right: var(--memory-timeline-view-details-timeline-ruler-offset-start);
 }