[results.webkit.org Timeline] New axis style
authorzhifei_fang@apple.com <zhifei_fang@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 30 Sep 2019 19:36:26 +0000 (19:36 +0000)
committerzhifei_fang@apple.com <zhifei_fang@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 30 Sep 2019 19:36:26 +0000 (19:36 +0000)
https://bugs.webkit.org/show_bug.cgi?id=202292

Reviewed by Jonathan Bedard.

* resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:

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

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

index 336dd6f..14b6b64 100644 (file)
@@ -1,3 +1,12 @@
+2019-09-30  Zhifei Fang  <zhifei_fang@apple.com>
+
+        [results.webkit.org Timeline] New axis style
+        https://bugs.webkit.org/show_bug.cgi?id=202292
+
+        Reviewed by Jonathan Bedard.
+
+        * resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:
+
 2019-09-30  Alex Christensen  <achristensen@webkit.org>
 
         Move DownloadMonitor test speed multiplier from WebProcessPool to WebsiteDataStoreConfiguration
index 96c16d9..4cde3fb 100644 (file)
@@ -623,6 +623,8 @@ Timeline.CanvasXAxisComponent = (scales, option = {}) => {
     const scaleWidth = parseInt(computedStyle.getPropertyValue('--smallSize')) + parseInt(computedStyle.getPropertyValue('--tinySize'));
     const scaleTagLineHeight = parseInt(computedStyle.getPropertyValue('--smallSize'));
     const scaleTagLinePadding = 10;
+    const scaleGroupTagLinePadding = 3;
+    const scaleGroupMargin = fontSizeNumber / 2;
     const scaleBroadLineHeight = parseInt(computedStyle.getPropertyValue('--tinySize')) / 2;
     const maxinumTextHeight = scaleWidth * 4.5;
     const canvasHeight = typeof option.height === "number" ? option.height : parseInt(computedStyle.getPropertyValue('--smallSize')) * 5;
@@ -637,6 +639,7 @@ Timeline.CanvasXAxisComponent = (scales, option = {}) => {
         const baseLineY = isTop ? y + canvasHeight - scaleBroadLineHeight : y + scaleBroadLineHeight;
         const middlePointX = x + totalWidth / 2;
         if (group > 1) {
+            const groupBaselineY = isTop ? baseLineY - scaleBroadLineHeight : baseLineY + scaleBroadLineHeight;
             colorBatchRender.lazyCreateColorSeqs(usedGroupColor, (context) => {
                 context.beginPath();
             }, (context, color) => {
@@ -645,27 +648,27 @@ Timeline.CanvasXAxisComponent = (scales, option = {}) => {
                 context.stroke();
             });
             colorBatchRender.addSeq(usedGroupColor, (context) => {
-                context.moveTo(x + context.lineWidth, isTop ? canvasHeight : y);
-                context.lineTo(x + context.lineWidth, baseLineY);
-                context.moveTo(x, baseLineY);
-                context.lineTo(x + totalWidth, baseLineY);
-                context.moveTo(x + totalWidth, isTop ? canvasHeight : y);
-                context.lineTo(x + totalWidth, baseLineY);
-                context.moveTo(middlePointX, baseLineY);
+                context.moveTo(x + scaleGroupMargin, groupBaselineY);
+                context.lineTo(x + scaleGroupMargin, baseLineY);
+                context.moveTo(x + scaleGroupMargin, groupBaselineY);
+                context.lineTo(x + totalWidth - scaleGroupMargin, groupBaselineY);
+                context.moveTo(x + totalWidth - scaleGroupMargin, groupBaselineY);
+                context.lineTo(x + totalWidth - scaleGroupMargin, baseLineY);
+                context.moveTo(middlePointX, groupBaselineY);
                 if (!isTop)
-                    context.lineTo(middlePointX, baseLineY + scaleTagLineHeight - scaleTagLinePadding);
+                    context.lineTo(middlePointX, groupBaselineY + scaleTagLineHeight - scaleTagLinePadding - scaleGroupTagLinePadding);
                 else
-                    context.lineTo(middlePointX, baseLineY - scaleTagLineHeight + scaleTagLinePadding);
+                    context.lineTo(middlePointX, groupBaselineY - scaleTagLineHeight + scaleTagLinePadding + scaleGroupTagLinePadding);
             });
         } else {
-            colorBatchRender.lazyCreateColorSeqs(usedLineColor, (context) => {
+            colorBatchRender.lazyCreateColorSeqs(usedGroupColor, (context) => {
                 context.beginPath();
             }, (context, color) => {
                 context.lineWidth = 1;
                 context.strokeStyle = color;
                 context.stroke();
             });
-            colorBatchRender.addSeq(usedLineColor, (context) => {
+            colorBatchRender.addSeq(usedGroupColor, (context) => {
                 context.moveTo(middlePointX, baseLineY);
                 if (!isTop)
                     context.lineTo(middlePointX, baseLineY + scaleTagLineHeight - scaleTagLinePadding);