Diff
Modified: trunk/Tools/ChangeLog (249123 => 249124)
--- trunk/Tools/ChangeLog 2019-08-26 23:20:45 UTC (rev 249123)
+++ trunk/Tools/ChangeLog 2019-08-26 23:36:50 UTC (rev 249124)
@@ -1,3 +1,15 @@
+2019-08-26 Zhifei Fang <[email protected]>
+
+ [results.webkit.org Timline] Add symbols to the timeline dot
+ https://bugs.webkit.org/show_bug.cgi?id=201105
+
+ Reviewed by Jonathan Bedard.
+
+ * resultsdbpy/resultsdbpy/view/static/js/timeline.js:
+ * resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:
+ (Timeline.CanvasSeriesComponent): Modify the drawDot api to provide user ability to add symbol to the dots, it supports unicode symbol
+ * resultsdbpy/resultsdbpy/view/templates/base.html: Add the encoding UTF-8 for the page, so that we can add unicode symbol to the dots
+
2019-08-26 Yusuke Suzuki <[email protected]>
Unreviewed, remove useMaximalFlushInsertionPhase use
Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/timeline.js (249123 => 249124)
--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/timeline.js 2019-08-26 23:20:45 UTC (rev 249123)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/timeline.js 2019-08-26 23:36:50 UTC (rev 249124)
@@ -43,6 +43,13 @@
PASS: 0x40,
};
+const TestResultsSymbolMap = {
+ success: '✓',
+ failed: '𝖷',
+ timedout: '⎋',
+ crashed: '!',
+}
+
class Expectations
{
static stringToStateId(string) {
@@ -543,6 +550,7 @@
let tag = null;
let color = colorMap.success;
+ let symbol = TestResultsSymbolMap.success;
if (data.stats) {
tag = data.stats[`tests${willFilterExpected ? '_unexpected_' : '_'}failed`];
@@ -555,8 +563,10 @@
}
failureTypeOrder.forEach(type => {
- if (data.stats[`tests${willFilterExpected ? '_unexpected_' : '_'}${type}`] > 0)
+ if (data.stats[`tests${willFilterExpected ? '_unexpected_' : '_'}${type}`] > 0) {
color = colorMap[type];
+ symbol = TestResultsSymbolMap[type];
+ }
});
} else {
let resultId = Expectations.stringToStateId(data.actual);
@@ -563,12 +573,14 @@
if (willFilterExpected)
resultId = Expectations.stringToStateId(Expectations.unexpectedResults(data.actual, data.expected));
failureTypeOrder.forEach(type => {
- if (Expectations.stringToStateId(failureTypeMapping[type]) >= resultId)
+ if (Expectations.stringToStateId(failureTypeMapping[type]) >= resultId) {
color = colorMap[type];
+ symbol = TestResultsSymbolMap[type];
+ }
});
}
- return drawDot(context, x, y, false, tag ? tag : null, false, color);
+ return drawDot(context, x, y, false, tag ? tag : null, symbol, false, color);
},
};
@@ -790,7 +802,7 @@
let result = `<br>
<div class="lengend timeline">
<div class="item">
- <div class="dot success"></div>
+ <div class="dot success"><div class="text">${TestResultsSymbolMap.success}</div></div>
${LegendLabel(
updateLabelEvents,
plural ? 'No unexpected results' : 'Result expected',
@@ -798,7 +810,7 @@
)}
</div>
<div class="item">
- <div class="dot failed"></div>
+ <div class="dot failed"><div class="text">${TestResultsSymbolMap.failed}</div></div>
${LegendLabel(
updateLabelEvents,
plural ? 'Some tests unexpectedly failed' : 'Unexpectedly failed',
@@ -806,7 +818,7 @@
)}
</div>
<div class="item">
- <div class="dot timeout"></div>
+ <div class="dot timeout"><div class="text">${TestResultsSymbolMap.timedout}</div></div>
${LegendLabel(
updateLabelEvents,
plural ? 'Some tests unexpectedly timed out' : 'Unexpectedly timed out',
@@ -814,7 +826,7 @@
)}
</div>
<div class="item">
- <div class="dot crash"></div>
+ <div class="dot crash"><div class="text">${TestResultsSymbolMap.crashed}</div></div>
${LegendLabel(
updateLabelEvents,
plural ? 'Some tests unexpectedly crashed' : 'Unexpectedly crashed',
Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml (249123 => 249124)
--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml 2019-08-26 23:20:45 UTC (rev 249123)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml 2019-08-26 23:36:50 UTC (rev 249124)
@@ -1405,7 +1405,9 @@
html: |-
<div class="lengend">
<div class="item">
- <div class="dot success"></div>
+ <div class="dot success">
+ <div class="text">✓</div>
+ </div>
<div class="label">Tests Pass</div>
</div>
<div class="item">
@@ -1422,7 +1424,9 @@
html: |-
<div class="lengend horizontal">
<div class="item">
- <div class="dot success"></div>
+ <div class="dot success">
+ <div class="text">✓</div>
+ </div>
<div class="label">Tests Pass</div>
</div>
<div class="item">
@@ -1439,7 +1443,9 @@
html: |-
<div class="lengend timeline">
<div class="item">
- <div class="dot success"></div>
+ <div class="dot success">
+ <div class="text">✓</div>
+ </div>
<div class="label">Tests Pass</div>
</div>
<div class="item">
Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/generate-webkit-css-docs (249123 => 249124)
--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/generate-webkit-css-docs 2019-08-26 23:20:45 UTC (rev 249123)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/generate-webkit-css-docs 2019-08-26 23:36:50 UTC (rev 249124)
@@ -25,6 +25,7 @@
import jinja2
import yaml
import sys
+import codecs
html_template = jinja2.Template("""
<!-- This file is auto generated, please do not modify it directly -->
@@ -35,6 +36,7 @@
<link rel="stylesheet" href=""
<link rel="shortcut icon" sizes="32x32" type="image/x-icon" href=""
<meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport">
+ <meta charset="UTF-8">
</head>
<body>
<!-- example topbar -->
@@ -135,7 +137,7 @@
with open(args.yaml) as input_f:
docs_cfg = yaml.load(input_f)
- with open(args.output, 'w') as output_f:
+ with codecs.open(args.output, 'w', "utf-8") as output_f:
output_f.write(html_template.render(sections=docs_cfg));
print("Output to {}".format(args.output))
Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html (249123 => 249124)
--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html 2019-08-26 23:20:45 UTC (rev 249123)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html 2019-08-26 23:36:50 UTC (rev 249124)
@@ -7,6 +7,7 @@
<link rel="stylesheet" href=""
<link rel="shortcut icon" sizes="32x32" type="image/x-icon" href=""
<meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport">
+ <meta charset="UTF-8">
</head>
<body>
<!-- example topbar -->
@@ -3105,7 +3106,9 @@
<div class="content">
<pre><xmp><div class="lengend">
<div class="item">
- <div class="dot success"></div>
+ <div class="dot success">
+ <div class="text">✓</div>
+ </div>
<div class="label">Tests Pass</div>
</div>
<div class="item">
@@ -3121,7 +3124,9 @@
<div class="content">
<div class="lengend">
<div class="item">
- <div class="dot success"></div>
+ <div class="dot success">
+ <div class="text">✓</div>
+ </div>
<div class="label">Tests Pass</div>
</div>
<div class="item">
@@ -3143,7 +3148,9 @@
<div class="content">
<pre><xmp><div class="lengend horizontal">
<div class="item">
- <div class="dot success"></div>
+ <div class="dot success">
+ <div class="text">✓</div>
+ </div>
<div class="label">Tests Pass</div>
</div>
<div class="item">
@@ -3159,7 +3166,9 @@
<div class="content">
<div class="lengend horizontal">
<div class="item">
- <div class="dot success"></div>
+ <div class="dot success">
+ <div class="text">✓</div>
+ </div>
<div class="label">Tests Pass</div>
</div>
<div class="item">
@@ -3181,7 +3190,9 @@
<div class="content">
<pre><xmp><div class="lengend timeline">
<div class="item">
- <div class="dot success"></div>
+ <div class="dot success">
+ <div class="text">✓</div>
+ </div>
<div class="label">Tests Pass</div>
</div>
<div class="item">
@@ -3197,7 +3208,9 @@
<div class="content">
<div class="lengend timeline">
<div class="item">
- <div class="dot success"></div>
+ <div class="dot success">
+ <div class="text">✓</div>
+ </div>
<div class="label">Tests Pass</div>
</div>
<div class="item">
Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css (249123 => 249124)
--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css 2019-08-26 23:20:45 UTC (rev 249123)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css 2019-08-26 23:36:50 UTC (rev 249124)
@@ -2128,20 +2128,36 @@
margin: 4px;
display: flex;
vertical-align: middle;
+ align-items: center;
}
.lengend>.item .dot{
- width: var(--tinySize);
- height: var(--tinySize);
- border-radius: var(--tinySize);
+ width: var(--smallSize);
+ height: var(--smallSize);
+ border-radius: var(--smallSize);
+ font-size: calc(var(--tinySize));
+ text-align: middle;
flex: none;
vertical-align: middle;
align-items: center;
display: flex;
margin: 0 var(--tinySize);
+ position: relative;
}
+.lengend>.item .dot .text {
+ font-size: calc(var(--tinySize));
+ font-weight: 400;
+ text-align: center;
+ width: var(--smallSize);
+ height: var(--smallSize);
+ display: inline-block;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ user-select: none;
+ cursor: default;
+}
.timeline.lengend>.item .dot::before{
- margin-left: calc(0px - var(--tinySize));
+ left: calc(0px - var(--tinySize));
width: var(--tinySize);
content: "";
height: 1px;
@@ -2148,9 +2164,10 @@
background: var(--borderColorInlineElement);
display: inline-block;
flex: none;
+ position: absolute;
}
.timeline.lengend>.item .dot::after{
- margin-left: var(--tinySize);
+ right: calc(0px - var(--tinySize));
width: var(--tinySize);
content: "";
height: 1px;
@@ -2157,10 +2174,10 @@
background: var(--borderColorInlineElement);
display: inline-block;
flex: none;
+ position: absolute;
}
.lengend>.item .label{
font-size: var(--tinySize);
- line-height: 1;
padding: 0 4px;
}
Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js (249123 => 249124)
--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js 2019-08-26 23:20:45 UTC (rev 249123)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js 2019-08-26 23:36:50 UTC (rev 249124)
@@ -215,7 +215,8 @@
let fontFamily = computedStyle.getPropertyValue('font-family');
let defaultDotColor = computedStyle.getPropertyValue('--greenLight').trim();
let defaultEmptyLineColor = computedStyle.getPropertyValue('--grey').trim();
- let defaultFontSize = parseInt(computedStyle.getPropertyValue('--tinySize'));
+ let defaultInnerLableColor = computedStyle.getPropertyValue('--white').trim();
+ let defaultFontSize = 10;
// Get configuration
// Default order is left is biggest
@@ -228,24 +229,44 @@
const tagHeight = defaultFontSize;
const height = option.height ? option.height : 2 * radius + tagHeight;
const colorBatchRender = new ColorBatchRender();
+ let drawLabelsSeqs = [];
// Draw dot api can be used in user defined render function
- const drawDot = (context, x, y, isEmpty, tag = null, useRadius, color, emptylineColor) => {
+ const drawDot = (context, x, y, isEmpty, tag = null, innerLabel, useRadius, color, innerLabelColor, emptylineColor) => {
useRadius = useRadius ? useRadius : radius;
color = color ? color : defaultDotColor;
emptylineColor = emptylineColor ? emptylineColor : defaultEmptyLineColor;
+ innerLabelColor = innerLabelColor ? innerLabelColor : defaultInnerLableColor;
+ const fontSize = useRadius * 1.5;
+ const baselineY = y + useRadius;
if (!isEmpty) {
// Draw the dot
colorBatchRender.lazyCreateColorSeqs(color, (context) => {
context.beginPath();
+ drawLabelsSeqs = [];
}, (context, color) => {
context.fillStyle = color;
context.fill();
+ context.font = `${fontSize}px ${fontFamily}`;
+ context.textBaseline = "top";
+ context.textAlign = "center";
+ context.fontWeight = 400;
+ context.fillStyle = innerLabelColor;
+ drawLabelsSeqs.forEach(seq => seq());
});
colorBatchRender.addSeq(color, (context, color) => {
- context.arc(x + dotMargin + radius, y, radius, 0, 2 * Math.PI);
+ context.arc(x + dotMargin + useRadius, baselineY, useRadius, 0, 2 * Math.PI);
+ if (typeof innerLabel === "number" || typeof innerLabel === "string") {
+ drawLabelsSeqs.push(() => {
+ // Draw the inner label
+ const innerLabelSize = context.measureText(innerLabel);
+ const fontHeight = innerLabelSize.fontBoundingBoxAscent + innerLabelSize.fontBoundingBoxDescent;
+ const actualHeight = innerLabelSize.actualBoundingBoxAscent + innerLabelSize.actualBoundingBoxDescent;
+ const realStartGap = innerLabelSize.fontBoundingBoxAscent - innerLabelSize.actualBoundingBoxAscent;
+ context.fillText(innerLabel, x + dotMargin + useRadius, y - realStartGap + useRadius - (actualHeight < fontHeight ? actualHeight : fontHeight) / 2);
+ });
+ }
});
-
} else {
// Draw the empty
colorBatchRender.lazyCreateColorSeqs(emptylineColor, (context) => {
@@ -255,8 +276,8 @@
context.stroke();
});
colorBatchRender.addSeq(emptylineColor, (context) => {
- context.moveTo(x + dotMargin, y);
- context.lineTo(x + dotMargin + 2 * radius, y);
+ context.moveTo(x + dotMargin, baselineY);
+ context.lineTo(x + dotMargin + 2 * useRadius, baselineY);
context.lineWidth = 1;
});
}
@@ -263,11 +284,13 @@
// Draw the tag
if (typeof tag === "number" || typeof tag === "string") {
- context.font = `${fontFamily} ${defaultFontSize}px`;
+ context.font = `${defaultFontSize}px ${fontFamily}`;
context.fillStyle = color;
- const tagSize = context.measureText(tag);
- context.fillText(tag, x + dotMargin + radius - tagSize.width / 2, radius * 2 + tagSize.emHeightAscent);
+ context.textAlign = "center";
+ context.textBaseline = "top";
+ context.fillText(tag, x + dotMargin + radius, baselineY + useRadius);
}
+
};
const render = typeof option.renderFactory === "function" ? option.renderFactory(drawDot) : (dot, context, x, y) => drawDot(context, x, y, !dot);
const sortData = option.sortData === true ? option.sortData : false;
@@ -349,13 +372,13 @@
for (let i = startScalesIndex; i <= endScalesIndex; i++) {
let x = i * dotWidth - scrollLeft;
if (currentDotIndex < dots.length && comp(scales[i], getScale(dots[currentDotIndex])) === 0) {
- render(dots[currentDotIndex], context, x, radius);
+ render(dots[currentDotIndex], context, x, 0);
dots[currentDotIndex]._dotCenter = {x: x + dotMargin + radius, y: radius};
dots[currentDotIndex]._cachedScrollLeft = scrollLeft;
inCacheDots.push(dots[currentDotIndex]);
currentDotIndex += 1;
} else
- render(null, context, x, radius);
+ render(null, context, x, 0);
}
colorBatchRender.batchRender(context);
};
Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/templates/base.html (249123 => 249124)
--- trunk/Tools/resultsdbpy/resultsdbpy/view/templates/base.html 2019-08-26 23:20:45 UTC (rev 249123)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/templates/base.html 2019-08-26 23:36:50 UTC (rev 249124)
@@ -27,6 +27,8 @@
<html>
<head>
<title>{{title}}</title>
+<meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport">
+<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href=""
{% block head %}{% endblock %}
</head>
