Changeset 91197 in webkit


Ignore:
Timestamp:
Jul 18, 2011 11:20:11 AM (13 years ago)
Author:
abarth@webkit.org
Message:

Increase information garden-o-matic information density by switching to a table
​https://bugs.webkit.org/show_bug.cgi?id=64642

Reviewed by Dimitri Glazkov.

The old layout couldn't handle the large number of failures we had
today. This patch switches garden-o-matic to a table-based layout,
which can handle many more failures gracefully. (I expect we'll need
more UI iterations.)

  • Scripts/webkitpy/tool/servers/data/gardeningserver/main.css:
  • Scripts/webkitpy/tool/servers/data/gardeningserver/main.js:
  • Scripts/webkitpy/tool/servers/data/gardeningserver/ui.js:
  • Scripts/webkitpy/tool/servers/data/gardeningserver/ui_unittests.js:
Location:
trunk/Tools
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/Tools/ChangeLog

    r91196 r91197  
     12011-07-18  Adam Barth  <abarth@webkit.org>
     2
     3        Increase information garden-o-matic information density by switching to a table
     4        https://bugs.webkit.org/show_bug.cgi?id=64642
     5
     6        Reviewed by Dimitri Glazkov.
     7
     8        The old layout couldn't handle the large number of failures we had
     9        today.  This patch switches garden-o-matic to a table-based layout,
     10        which can handle many more failures gracefully.  (I expect we'll need
     11        more UI iterations.)
     12
     13        * Scripts/webkitpy/tool/servers/data/gardeningserver/main.css:
     14        * Scripts/webkitpy/tool/servers/data/gardeningserver/main.js:
     15        * Scripts/webkitpy/tool/servers/data/gardeningserver/ui.js:
     16        * Scripts/webkitpy/tool/servers/data/gardeningserver/ui_unittests.js:
     17
    1182011-07-18  Adam Barth  <abarth@webkit.org>
    219

  • trunk/Tools/Scripts/webkitpy/tool/servers/data/gardeningserver/main.css

    r91196 r91197  
    1717}
    1818
    19 td {
     19td, th {
    2020    overflow: hidden;
    2121    vertical-align: top;
    … …  
    2323}
    2424
    25 td:last-of-type {
     25td:last-of-type, th:last-of-type {
    2626    border-right: 0px;
    2727}
     28
     29th {
     30    border-bottom: 1px solid #CCC;
     31}
     32
     33/*** butterbar ***/
    2834
    2935.butterbar {
    … …  
    3844    margin-left: 20px;
    3945}
     46
     47/*** alert ***/
    4048
    4149.alert {
    … …  
    6775}
    6876
     77/*** results-summary ***/
     78
     79table.results-summary {
     80    width: auto;
     81    table-layout: auto;
     82    margin: 5px auto;
     83    border: 1px solid #CCC;
     84}
     85
     86.results-summary td, .results-summary th {
     87    padding: 4px;
     88}
     89
     90.results-summary ul {
     91    margin: 0px;
     92    padding: 0px;
     93    list-style: none;
     94    display: inline-block;
     95}
     96
     97.results-summary li {
     98    display: inline-block;
     99    margin: 0px 5px;
     100}
     101
     102.results-summary a {
     103    font-weight: normal;
     104}
     105
     106.results-summary .what a {
     107    text-decoration: none;
     108    padding: 1px 2px;
     109    color: black;
     110}
     111
     112.results-summary .what a[draggable].IMAGE\+TEXT::after {
     113    content: 'IMAGE+TEXT';
     114    color: white;
     115    background-color: Indigo;
     116    font-size: 10px;
     117    padding: 1px 2px;
     118    margin: 0 0 0 3px;
     119    border-radius: 4px;
     120}
     121
     122.results-summary .what a[draggable].IMAGE::after {
     123    content: 'IMAGE';
     124    color: white;
     125    background-color: MidnightBlue;
     126    font-size: 10px;
     127    padding: 1px 2px;
     128    margin: 0 0 0 3px;
     129    border-radius: 4px;
     130}
     131
     132.results-summary .what a[draggable].TIMEOUT::after {
     133    content: 'TIMEOUT';
     134    color: white;
     135    background-color: DarkGoldenRod;
     136    font-size: 10px;
     137    padding: 1px 2px;
     138    margin: 0 0 0 3px;
     139    border-radius: 4px;
     140}
     141
     142.results-summary .what a[draggable].TEXT::after {
     143    content: 'TEXT';
     144    color: white;
     145    background-color: DodgerBlue;
     146    font-size: 10px;
     147    padding: 1px 2px;
     148    margin: 0 0 0 3px;
     149    border-radius: 4px;
     150}
     151
     152.results-summary .what a[draggable].CRASH::after {
     153    content: 'CRASH';
     154    color: white;
     155    background-color: Tomato;
     156    font-size: 10px;
     157    padding: 1px 2px;
     158    margin: 0 0 0 3px;
     159    border-radius: 4px;
     160}
     161
     162.results-summary .test[data-new-test="true"] .what a[draggable]::before {
     163    content: '(new)';
     164    margin: 0 3px;
     165}
     166
    69167/* If we've only seen a given test failure once, we dim it so as not to distract the gardener. */
    70 .test[data-failure-count="1"][data-new-test="false"] {
     168.results-summary .test[data-failure-count="1"][data-new-test="false"] {
    71169    -webkit-transition: 1s opacity;
    72170    opacity: 0.5;
    73171}
    74172
    75 .results {
    76     margin: 10px;
    77 }
    78 
    79 .regression {
    80     padding: 0 0 10px 0;
    81 }
    82 
    83 .regression .test {
    84     margin: 10px 0px;
    85 }
    86 
    87 .regression ul {
    88     margin: 0;
    89     list-style: none;
    90     display: inline-block;
    91     padding: 0 0 0 10px;
    92 }
    93 
    94 .regression li {
    95     display: inline-block;
    96     margin: 0px 5px;
    97 }
    98 
    99 .regression a {
    100     font-weight: normal;
    101 }
    102 
    103 .regression .what a {
    104     text-decoration: none;
    105 }
    106 
    107 .regression .what a[draggable].IMAGE\+TEXT::before {
    108     content: 'IMAGE+TEXT';
    109     color: white;
    110     background-color: Indigo;
    111     font-size: 10px;
    112     padding: 1px 2px;
    113     margin: 0 3px 0 0;
    114     border-radius: 4px;
    115 }
    116 
    117 .regression .what a[draggable].IMAGE::before {
    118     content: 'IMAGE';
    119     color: white;
    120     background-color: MidnightBlue;
    121     font-size: 10px;
    122     padding: 1px 2px;
    123     margin: 0 3px 0 0;
    124     border-radius: 4px;
    125 }
    126 
    127 .regression .what a[draggable].TIMEOUT::before {
    128     content: 'TIMEOUT';
    129     color: white;
    130     background-color: DarkGoldenRod;
    131     font-size: 10px;
    132     padding: 1px 2px;
    133     margin: 0 3px 0 0;
    134     border-radius: 4px;
    135 }
    136 
    137 .regression .what a[draggable].TEXT::before {
    138     content: 'TEXT';
    139     color: white;
    140     background-color: DodgerBlue;
    141     font-size: 10px;
    142     padding: 1px 2px;
    143     margin: 0 3px 0 0;
    144     border-radius: 4px;
    145 }
    146 
    147 .regression .what a[draggable].CRASH::before {
    148     content: 'CRASH';
    149     color: white;
    150     background-color: Tomato;
    151     font-size: 10px;
    152     padding: 1px 2px;
    153     margin: 0 3px 0 0;
    154     border-radius: 4px;
    155 }
    156 
    157 .regression .test[data-new-test="true"] .what a[draggable]::after {
    158     content: '(new)';
    159     margin: 0 3px;
    160 }
    161 
    162 .regression .what a {
    163     padding: 1px 2px;
    164     border-radius: 4px;
    165     color: black;
    166 }
    167 
    168 .partytime {
    169     display: none;
    170     text-align:center;
    171 }
    172 
    173 .regression .where li {
    174     margin: 3px;
    175     display: inline-block;
    176     padding: 1px 2px;
    177     border-radius: 4px;
    178     color: #555;
    179 }
    180 
    181 .regression .regression-range, .regression .failure-count {
    182     padding: 0px 2px;
    183     display: inline-block;
    184 }
    185 
    186 .regression .failure-count {
    187     color: #555;
    188 }
     173/*** results-detail ***/
    189174
    190175.results-detail {
    … …  
    250235    height: 100%;
    251236}
     237
     238/*** partytime ***/
     239
     240.partytime {
     241    display: none;
     242    text-align: center;
     243}

  • trunk/Tools/Scripts/webkitpy/tool/servers/data/gardeningserver/main.js

    r91196 r91197  
    5959            partyTime.fadeIn(1200).delay(7000).fadeOut();
    6060        } else {
    61             var regressions = $('<div class="results-summary regression"></div>');
     61            var regressions = ui.regressionsContainer();
     62
    6263            $.each(unexpectedFailures, function(testName, resultNodesByBuilder) {
    6364                var testSummary = ui.summarizeTest(testName, resultNodesByBuilder);
    64                 regressions.append(testSummary);
     65                $('tbody', regressions).append(testSummary);
    6566
    6667                var builderNameList = base.keys(resultNodesByBuilder);
    6768                results.unifyRegressionRanges(builderNameList, testName, function(oldestFailingRevision, newestPassingRevision) {
    68                     $('.regression-range', testSummary).append(ui.summarizeRegressionRange(oldestFailingRevision, newestPassingRevision));
     69                    $('.when', testSummary).append(ui.summarizeRegressionRange(oldestFailingRevision, newestPassingRevision));
    6970                    if (!newestPassingRevision)
    7071                        return;
    … …  
    7576                results.countFailureOccurances(builderNameList, testName, function(failureCount) {
    7677                    $(testSummary).attr(config.kFailureCountAttr, failureCount);
    77                     $('.failure-count', testSummary).text(ui.failureCount(failureCount));
     78                    $('.how-many', testSummary).text(ui.failureCount(failureCount));
    7879                });
    7980            });
    … …  
    169170}
    170171
    171 $('.regression .where a').live('click', showResultsDetail);
     172$('.results-summary .where a').live('click', showResultsDetail);
    172173$('.results-detail .actions .dismiss').live('click', hideResultsDetail);
    173174$('.results-detail .actions .rebaseline').live('click', rebaselineResults);

  • trunk/Tools/Scripts/webkitpy/tool/servers/data/gardeningserver/ui.js

    r91196 r91197  
    3232};
    3333
     34ui.regressionsContainer = function()
     35{
     36    return $(
     37        '<table class="results-summary">' +
     38            '<thead>' +
     39                '<tr>' +
     40                    '<th>Test</th><th>Bot</th><th>Regression Range</th><th>Frequency</th>' +
     41            '</thead>' +
     42            '<tbody></tbody>' +
     43        '</table>');
     44};
     45
    3446ui.summarizeTest = function(testName, resultNodesByBuilder)
    3547{
    3648    var unexpectedResults = results.collectUnexpectedResults(resultNodesByBuilder);
    3749    var block = $(
    38         '<div class="test">' +
    39           '<span class="what"><a draggable></a></span>' +
    40           '<span>fails on</span>' +
    41           '<ul class="where"></ul>' +
    42           '<div class="when">' +
    43             '<div class="regression-range"></div>' +
    44             '<div class="failure-count"></div>' +
    45           '</div>' +
    46         '</div>');
     50        '<tr class="test">' +
     51          '<td class="what"><a draggable></a></td>' +
     52          '<td class="where"><ul></ul></td>' +
     53          '<td class="when"></td>' +
     54          '<td class="how-many"></td>' +
     55        '</tr>');
    4756    $('.what a', block).text(testName).attr('href', ui.urlForTest(testName)).attr('class', unexpectedResults.join(' '));
    4857    block.attr(config.kFailureTypesAttr, unexpectedResults);
    … …  
    6170{
    6271    if (!oldestFailingRevision || !newestPassingRevision)
    63         return $('<div class="regression-range">Regression Range: Unknown</div>');
     72        return $('<div class="regression-range">Unknown</div>');
    6473
    6574    var impliedFirstFailingRevision = newestPassingRevision + 1;
    … …  
    7079        displayNameForRevision(impliedFirstFailingRevision) + '-' + displayNameForRevision(oldestFailingRevision);
    7180
    72     var block = $('<div class="regression-range">Regression Range: <a></a></div>');
     81    var block = $('<div class="regression-range"><a></a></div>');
    7382    $('a', block).attr('href', href).text(text)
    7483    return block;
    … …  
    94103        return '';
    95104    if (failureCount == 1)
    96         return '(Seen once.)';
    97     return '(Seen ' + failureCount + ' times.)';
     105        return 'Seen once.';
     106    return 'Seen ' + failureCount + ' times.';
    98107};
    99108

  • trunk/Tools/Scripts/webkitpy/tool/servers/data/gardeningserver/ui_unittests.js

    r91196 r91197  
    3434    var summaryWithMultipleRevisions = ui.summarizeRegressionRange(0, 0);
    3535    summaryWithMultipleRevisions.wrap('<wrapper></wrapper>');
    36     equal(summaryWithMultipleRevisions.parent().html(), '<div class="regression-range">Regression Range: Unknown</div>');
     36    equal(summaryWithMultipleRevisions.parent().html(), '<div class="regression-range">Unknown</div>');
    3737
    3838    var summaryWithMultipleRevisions = ui.summarizeRegressionRange(90424, 90426);
    3939    summaryWithMultipleRevisions.wrap('<wrapper></wrapper>');
    40     equal(summaryWithMultipleRevisions.parent().html(), '<div class="regression-range">Regression Range: <a href="http://trac.webkit.org/log/trunk/?rev=90424&amp;stop_rev=90427&amp;limit=100&amp;verbose=on">r90427-r90424</a></div>');
     40    equal(summaryWithMultipleRevisions.parent().html(), '<div class="regression-range"><a href="http://trac.webkit.org/log/trunk/?rev=90424&amp;stop_rev=90427&amp;limit=100&amp;verbose=on">r90427-r90424</a></div>');
    4141
    4242    var summaryWithOneRevision = ui.summarizeRegressionRange(90425, 90426);
    4343    summaryWithOneRevision.wrap('<wrapper></wrapper>');
    44     equal(summaryWithOneRevision.parent().html(), '<div class="regression-range">Regression Range: <a href="http://trac.webkit.org/log/trunk/?rev=90425&amp;stop_rev=90427&amp;limit=100&amp;verbose=on">r90427-r90425</a></div>');
     44    equal(summaryWithOneRevision.parent().html(), '<div class="regression-range"><a href="http://trac.webkit.org/log/trunk/?rev=90425&amp;stop_rev=90427&amp;limit=100&amp;verbose=on">r90427-r90425</a></div>');
    4545});
    4646
    4747test("failureCount", 4, function() {
    4848    equal(ui.failureCount(0), '');
    49     equal(ui.failureCount(1), '(Seen once.)');
    50     equal(ui.failureCount(2), '(Seen 2 times.)');
    51     equal(ui.failureCount(3), '(Seen 3 times.)');
     49    equal(ui.failureCount(1), 'Seen once.');
     50    equal(ui.failureCount(2), 'Seen 2 times.');
     51    equal(ui.failureCount(3), 'Seen 3 times.');
    5252});
    5353
Note: See TracChangeset for help on using the changeset viewer.