⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 249124 in webkit


Ignore:
Timestamp:
Aug 26, 2019, 4:36:50 PM (7 years ago)
Author:
zhifei_fang@apple.com
Message:

[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
Location:
trunk/Tools
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/Tools/ChangeLog

    r249116 r249124  
     12019-08-26  Zhifei Fang  <zhifei_fang@apple.com>
     2
     3        [results.webkit.org Timline] Add symbols to the timeline dot
     4        https://bugs.webkit.org/show_bug.cgi?id=201105
     5
     6        Reviewed by Jonathan Bedard.
     7
     8        * resultsdbpy/resultsdbpy/view/static/js/timeline.js:
     9        * resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:
     10        (Timeline.CanvasSeriesComponent): Modify the drawDot api to provide user ability to add symbol to the dots, it supports unicode symbol
     11        * resultsdbpy/resultsdbpy/view/templates/base.html: Add the encoding UTF-8 for the page, so that we can add unicode symbol to the dots
     12
    1132019-08-26  Yusuke Suzuki  <ysuzuki@apple.com>
    214

  • trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/timeline.js

    r249111 r249124  
    4343    PASS: 0x40,
    4444};
     45
     46const TestResultsSymbolMap = {
     47    success: '✓',
     48    failed: '𝖷',
     49    timedout: '⎋',
     50    crashed: '!',
     51}
    4552
    4653class Expectations
    … …  
    544551                let tag = null;
    545552                let color = colorMap.success;
     553                let symbol = TestResultsSymbolMap.success;
    546554                if (data.stats) {
    547555                    tag = data.stats[`tests${willFilterExpected ? '_unexpected_' : '_'}failed`];
    … …  
    556564
    557565                    failureTypeOrder.forEach(type => {
    558                         if (data.stats[`tests${willFilterExpected ? '_unexpected_' : '_'}${type}`] > 0)
     566                        if (data.stats[`tests${willFilterExpected ? '_unexpected_' : '_'}${type}`] > 0) {
    559567                            color = colorMap[type];
     568                            symbol = TestResultsSymbolMap[type];
     569                        }
    560570                    });
    561571                } else {
    … …  
    564574                        resultId = Expectations.stringToStateId(Expectations.unexpectedResults(data.actual, data.expected));
    565575                    failureTypeOrder.forEach(type => {
    566                         if (Expectations.stringToStateId(failureTypeMapping[type]) >= resultId)
     576                        if (Expectations.stringToStateId(failureTypeMapping[type]) >= resultId) {
    567577                            color = colorMap[type];
     578                            symbol = TestResultsSymbolMap[type];
     579                        }
    568580                    });
    569581                }
    570582
    571                 return drawDot(context, x, y, false, tag ? tag : null, false, color);
     583                return drawDot(context, x, y, false, tag ? tag : null, symbol, false, color);
    572584            },
    573585        };
    … …  
    791803         <div class="lengend timeline">
    792804            <div class="item">
    793                 <div class="dot success"></div>
     805                <div class="dot success"><div class="text">${TestResultsSymbolMap.success}</div></div>
    794806                ${LegendLabel(
    795807                    updateLabelEvents,
    … …  
    799811            </div>
    800812            <div class="item">
    801                 <div class="dot failed"></div>
     813                <div class="dot failed"><div class="text">${TestResultsSymbolMap.failed}</div></div>
    802814                ${LegendLabel(
    803815                    updateLabelEvents,
    … …  
    807819            </div>
    808820            <div class="item">
    809                 <div class="dot timeout"></div>
     821                <div class="dot timeout"><div class="text">${TestResultsSymbolMap.timedout}</div></div>
    810822                ${LegendLabel(
    811823                    updateLabelEvents,
    … …  
    815827            </div>
    816828            <div class="item">
    817                 <div class="dot crash"></div>
     829                <div class="dot crash"><div class="text">${TestResultsSymbolMap.crashed}</div></div>
    818830                ${LegendLabel(
    819831                    updateLabelEvents,

  • trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/docs.yaml

    r249021 r249124  
    14061406                        <div class="lengend">
    14071407                            <div class="item">
    1408                                 <div class="dot success"></div>
     1408                                <div class="dot success">
     1409                                    <div class="text">✓</div>
     1410                                </div>
    14091411                                <div class="label">Tests Pass</div>
    14101412                            </div>
    … …  
    14231425                        <div class="lengend horizontal">
    14241426                            <div class="item">
    1425                                 <div class="dot success"></div>
     1427                                <div class="dot success">
     1428                                    <div class="text">✓</div>
     1429                                </div>
    14261430                                <div class="label">Tests Pass</div>
    14271431                            </div>
    … …  
    14401444                        <div class="lengend timeline">
    14411445                            <div class="item">
    1442                                 <div class="dot success"></div>
     1446                                <div class="dot success">
     1447                                    <div class="text">✓</div>
     1448                                </div>
    14431449                                <div class="label">Tests Pass</div>
    14441450                            </div>

  • trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/generate-webkit-css-docs

    r249021 r249124  
    2626import yaml
    2727import sys
     28import codecs
    2829
    2930html_template = jinja2.Template("""
    … …  
    3637        <link rel="shortcut icon" sizes="32x32" type="image/x-icon" href="https://webkit.org/favicon.ico">
    3738        <meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport">
     39        <meta charset="UTF-8">
    3840    </head>
    3941    <body>
    … …  
    136138    with open(args.yaml) as input_f:
    137139        docs_cfg = yaml.load(input_f)
    138         with open(args.output, 'w') as output_f:
     140        with codecs.open(args.output, 'w', "utf-8") as output_f:
    139141            output_f.write(html_template.render(sections=docs_cfg));
    140142            print("Output to {}".format(args.output))

  • trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/index.html

    r249021 r249124  
    88        <link rel="shortcut icon" sizes="32x32" type="image/x-icon" href="https://webkit.org/favicon.ico">
    99        <meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport">
     10        <meta charset="UTF-8">
    1011    </head>
    1112    <body>
    … …  
    31063107                            <pre><xmp><div class="lengend">
    31073108    <div class="item">
    3108         <div class="dot success"></div>
     3109        <div class="dot success">
     3110            <div class="text">✓</div>
     3111        </div>
    31093112        <div class="label">Tests Pass</div>
    31103113    </div>
    … …  
    31223125                            <div class="lengend">
    31233126    <div class="item">
    3124         <div class="dot success"></div>
     3127        <div class="dot success">
     3128            <div class="text">✓</div>
     3129        </div>
    31253130        <div class="label">Tests Pass</div>
    31263131    </div>
    … …  
    31443149                            <pre><xmp><div class="lengend horizontal">
    31453150    <div class="item">
    3146         <div class="dot success"></div>
     3151        <div class="dot success">
     3152            <div class="text">✓</div>
     3153        </div>
    31473154        <div class="label">Tests Pass</div>
    31483155    </div>
    … …  
    31603167                            <div class="lengend horizontal">
    31613168    <div class="item">
    3162         <div class="dot success"></div>
     3169        <div class="dot success">
     3170            <div class="text">✓</div>
     3171        </div>
    31633172        <div class="label">Tests Pass</div>
    31643173    </div>
    … …  
    31823191                            <pre><xmp><div class="lengend timeline">
    31833192    <div class="item">
    3184         <div class="dot success"></div>
     3193        <div class="dot success">
     3194            <div class="text">✓</div>
     3195        </div>
    31853196        <div class="label">Tests Pass</div>
    31863197    </div>
    … …  
    31983209                            <div class="lengend timeline">
    31993210    <div class="item">
    3200         <div class="dot success"></div>
     3211        <div class="dot success">
     3212            <div class="text">✓</div>
     3213        </div>
    32013214        <div class="label">Tests Pass</div>
    32023215    </div>

  • trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css

    r249021 r249124  
    21292129  display: flex;
    21302130  vertical-align: middle;
     2131  align-items: center;
    21312132}
    21322133
    21332134.lengend>.item .dot{
    2134   width: var(--tinySize);
    2135   height: var(--tinySize);
    2136   border-radius: var(--tinySize);
     2135  width: var(--smallSize);
     2136  height: var(--smallSize);
     2137  border-radius: var(--smallSize);
     2138  font-size: calc(var(--tinySize));
     2139  text-align: middle;
    21372140  flex: none;
    21382141  vertical-align: middle;
    … …  
    21402143  display: flex;
    21412144  margin: 0 var(--tinySize);
     2145  position: relative;
     2146}
     2147.lengend>.item .dot .text {
     2148  font-size: calc(var(--tinySize));
     2149  font-weight: 400;
     2150  text-align: center;
     2151  width: var(--smallSize);
     2152  height: var(--smallSize);
     2153  display: inline-block;
     2154  -webkit-touch-callout: none;
     2155  -webkit-user-select: none;
     2156  user-select: none;
     2157  cursor: default;
    21422158}
    21432159.timeline.lengend>.item .dot::before{
    2144   margin-left: calc(0px - var(--tinySize));
     2160  left: calc(0px - var(--tinySize));
    21452161  width: var(--tinySize);
    21462162  content: "";
    … …  
    21492165  display: inline-block;
    21502166  flex: none;
     2167  position: absolute;
    21512168}
    21522169.timeline.lengend>.item .dot::after{
    2153   margin-left: var(--tinySize);
     2170  right: calc(0px - var(--tinySize));
    21542171  width: var(--tinySize);
    21552172  content: "";
    … …  
    21582175  display: inline-block;
    21592176  flex: none;
     2177  position: absolute;
    21602178}
    21612179.lengend>.item .label{
    21622180  font-size: var(--tinySize);
    2163   line-height: 1;
    21642181  padding: 0 4px;
    21652182}

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

    r248995 r249124  
    216216    let defaultDotColor = computedStyle.getPropertyValue('--greenLight').trim();
    217217    let defaultEmptyLineColor = computedStyle.getPropertyValue('--grey').trim();
    218     let defaultFontSize = parseInt(computedStyle.getPropertyValue('--tinySize'));
     218    let defaultInnerLableColor = computedStyle.getPropertyValue('--white').trim();
     219    let defaultFontSize = 10;
    219220
    220221    // Get configuration
    … …  
    229230    const height = option.height ? option.height : 2 * radius + tagHeight;
    230231    const colorBatchRender = new ColorBatchRender();
     232    let drawLabelsSeqs = [];
    231233
    232234    // Draw dot api can be used in user defined render function
    233     const drawDot = (context, x, y, isEmpty, tag = null, useRadius, color, emptylineColor) => {
     235    const drawDot = (context, x, y, isEmpty, tag = null, innerLabel, useRadius, color, innerLabelColor, emptylineColor) => {
    234236        useRadius = useRadius ? useRadius : radius;
    235237        color = color ? color : defaultDotColor;
    236238        emptylineColor = emptylineColor ? emptylineColor : defaultEmptyLineColor;
     239        innerLabelColor = innerLabelColor ? innerLabelColor : defaultInnerLableColor;
     240        const fontSize = useRadius * 1.5;
     241        const baselineY = y + useRadius;
    237242        if (!isEmpty) {
    238243            // Draw the dot
    239244            colorBatchRender.lazyCreateColorSeqs(color, (context) => {
    240245                context.beginPath();
     246                drawLabelsSeqs = [];
    241247            }, (context, color) => {
    242248                context.fillStyle = color;
    243249                context.fill();
     250                context.font = `${fontSize}px ${fontFamily}`;
     251                context.textBaseline = "top";
     252                context.textAlign = "center";
     253                context.fontWeight = 400;
     254                context.fillStyle = innerLabelColor;
     255                drawLabelsSeqs.forEach(seq => seq());
    244256            });
    245257            colorBatchRender.addSeq(color, (context, color) => {
    246                 context.arc(x + dotMargin + radius, y, radius, 0, 2 * Math.PI);
    247             });
    248 
     258                context.arc(x + dotMargin + useRadius, baselineY, useRadius, 0, 2 * Math.PI);
     259                if (typeof innerLabel === "number" || typeof innerLabel === "string") {
     260                    drawLabelsSeqs.push(() => {
     261                        // Draw the inner label
     262                        const innerLabelSize = context.measureText(innerLabel);
     263                        const fontHeight = innerLabelSize.fontBoundingBoxAscent + innerLabelSize.fontBoundingBoxDescent;
     264                        const actualHeight = innerLabelSize.actualBoundingBoxAscent + innerLabelSize.actualBoundingBoxDescent;
     265                        const realStartGap = innerLabelSize.fontBoundingBoxAscent - innerLabelSize.actualBoundingBoxAscent;
     266                        context.fillText(innerLabel, x + dotMargin + useRadius, y - realStartGap + useRadius - (actualHeight < fontHeight ?  actualHeight : fontHeight) / 2);
     267                    });
     268                }
     269            });
    249270        } else {
    250271            // Draw the empty
    … …  
    256277            });
    257278            colorBatchRender.addSeq(emptylineColor, (context) => {
    258                 context.moveTo(x + dotMargin, y);
    259                 context.lineTo(x + dotMargin + 2 * radius, y);
     279                context.moveTo(x + dotMargin, baselineY);
     280                context.lineTo(x + dotMargin + 2 * useRadius, baselineY);
    260281                context.lineWidth = 1;
    261282            });
    … …  
    264285        // Draw the tag
    265286        if (typeof tag === "number" || typeof tag === "string") {
    266             context.font = `${fontFamily} ${defaultFontSize}px`;
     287            context.font = `${defaultFontSize}px ${fontFamily}`;
    267288            context.fillStyle = color;
    268             const tagSize = context.measureText(tag);
    269             context.fillText(tag, x + dotMargin + radius - tagSize.width / 2, radius * 2 + tagSize.emHeightAscent);
    270         }
     289            context.textAlign = "center";
     290            context.textBaseline = "top";
     291            context.fillText(tag, x + dotMargin + radius, baselineY + useRadius);
     292        }
     293       
    271294    };
    272295    const render = typeof option.renderFactory === "function" ? option.renderFactory(drawDot) : (dot, context, x, y) => drawDot(context, x, y, !dot);
    … …  
    350373            let x = i * dotWidth - scrollLeft;
    351374            if (currentDotIndex < dots.length && comp(scales[i], getScale(dots[currentDotIndex])) === 0) {
    352                 render(dots[currentDotIndex], context, x, radius);
     375                render(dots[currentDotIndex], context, x, 0);
    353376                dots[currentDotIndex]._dotCenter = {x: x + dotMargin + radius, y: radius};
    354377                dots[currentDotIndex]._cachedScrollLeft = scrollLeft;
    … …  
    356379                currentDotIndex += 1;
    357380            } else
    358                 render(null, context, x, radius);
     381                render(null, context, x, 0);
    359382        }
    360383        colorBatchRender.batchRender(context);

  • trunk/Tools/resultsdbpy/resultsdbpy/view/templates/base.html

    r248859 r249124  
    2828<head>
    2929<title>{{title}}</title>
     30<meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport">
     31<meta charset="UTF-8">
    3032<link rel="stylesheet" type="text/css" href="/library/css/webkit.css">
    3133{% block head %}{% endblock %}
Note: See TracChangeset for help on using the changeset viewer.