Changeset 250523 in webkit

Timestamp:

Sep 30, 2019 12:36:26 PM (5 years ago)

Author:

zhifei_fang@apple.com

Message:

[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:

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-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>
 

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

@@ -624 +624 @@
     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;
@@ -638 +640 @@
         const middlePointX = x + totalWidth / 2;
         if (group > 1) {
+            const groupBaselineY = isTop ? baseLineY - scaleBroadLineHeight : baseLineY + scaleBroadLineHeight;
             colorBatchRender.lazyCreateColorSeqs(usedGroupColor, (context) => {
                 context.beginPath();
@@ -646 +649 @@
             });
             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) => {
@@ -666 +669 @@
                 context.stroke();
             });
-            colorBatchRender.addSeq(usedLineColor, (context) => {
+            colorBatchRender.addSeq(usedGroupColor, (context) => {
                 context.moveTo(middlePointX, baseLineY);
                 if (!isTop)