Changeset 248134 in webkit

Timestamp:

Aug 1, 2019 2:45:42 PM (5 years ago)

Author:

commit-queue@webkit.org

Message:

[results.webkit.org] Timeline.CanvasXAxisComponent height should be defined by option
​https://bugs.webkit.org/show_bug.cgi?id=200321

Patch by Zhifei Fang <​zhifei_fang@apple.com> on 2019-08-01
Reviewed by Jonathan Bedard.

*resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:
Let the axis' height be defined in the option. Timeine component will use this value as
padding-top for headers which allows headers start in the right position, even with multiple
top axises.
(Timeline.CanvasSeriesComponent):
(prototype.Timeline.CanvasContainer):

Location:

trunk/Tools

Files:

• ChangeLog (modified) (1 diff)
• resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js (modified) (4 diffs)

trunk/Tools/ChangeLog

@@ +1 @@
+2019-08-01  Zhifei Fang  <zhifei_fang@apple.com>
+
+        [results.webkit.org] Timeline.CanvasXAxisComponent height should be defined by option
+        https://bugs.webkit.org/show_bug.cgi?id=200321
+
+        Reviewed by Jonathan Bedard.
+
+        *resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:
+        Let the axis' height be defined in the option. Timeine component will use this value as 
+        padding-top for headers which allows headers start in the right position, even with multiple 
+        top axises.
+        (Timeline.CanvasSeriesComponent):
+        (prototype.Timeline.CanvasContainer):
+
 2019-08-01  Zhifei Fang  <zhifei_fang@apple.com>
 

trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js

@@ -510 +510 @@
     const scaleBroadLineHeight = parseInt(computedStyle.getPropertyValue('--tinySize')) / 2;
     const maxinumTextHeight = scaleWidth * 4.5;
-    const canvasHeight = parseInt(computedStyle.getPropertyValue('--smallSize')) * 4;
+    const canvasHeight = typeof option.height === "number" ? option.height : parseInt(computedStyle.getPropertyValue('--smallSize')) * 5;
     const sqrt3 = Math.sqrt(3);
 
@@ -733 +733 @@
             </div>`;
         }),
-        isAxis: true // Mark self as an axis
+        isAxis: true, // Mark self as an axis,
+        height: canvasHeight, // Expose Height to parent
     };
 }
 
 Timeline.CanvasContainer = (exporter, ...children) => {
-    const hasTopXAxis = children[0].isAxis;
+    let headerAxisPlaceHolderHeight = 0;
+    let topAxis = true;
     const upackChildren = (children) => {
         const headers = [];
@@ -750 +752 @@
                 headers.push(child.header);
             serieses.push(child.series);
+            if (child.isAxis && topAxis)
+                headerAxisPlaceHolderHeight += child.height;
+            else if (topAxis)
+                topAxis = false;
         });
         return {headers, serieses};
@@ -764 +770 @@
     return (
         `<div class="timeline">
-            <div class="header ${hasTopXAxis ? "with-top-x-axis" : ""}">
+            <div class="header" style="padding-top:${headerAxisPlaceHolderHeight}px">
                 ${ListComponent(composer, ...headers)}
             </div>