Changeset 196792 in webkit


Ignore:
Timestamp:
Feb 18, 2016 6:44:34 PM (8 years ago)
Author:
rniwa@webkit.org
Message:

The rows in the analysis results table should be expandable
​https://bugs.webkit.org/show_bug.cgi?id=154427

Reviewed by Chris Dumez.

Added "(Expand)" link between rows that have hidden points. Upon click it inserts the hidden rows.

We insert around five rows at a time when there are hundreds of hidden points but we also avoid leaving
behind expandable rows of less than two rows.

Also fixed a bug in CustomizableTestGroupForm that getElementsById would throw in the shipping Safari
because getElementsById doesn't exist on Element.prototype by using class name instead.

  • public/v3/components/analysis-results-viewer.js:

(AnalysisResultsViewer):
(AnalysisResultsViewer.prototype.setCurrentTestGroup): Removed superfluous call to render().
(AnalysisResultsViewer.prototype.setPoints): Always show the start and the end points.
(AnalysisResultsViewer.prototype.buildRowGroups):
(AnalysisResultsViewer.prototype._buildRowsForPointsAndTestGroups): Add an instance of ExpandableRow which
shows a "(Expand)" link to show hidden rows here.
(AnalysisResultsViewer.prototype._expandBetween): Added. Expands rows between two points.
(AnalysisResultsViewer.cssTemplate): Added rules for "(Expand)" links.
(AnalysisResultsViewer.ExpandableRow): Added.
(AnalysisResultsViewer.ExpandableRow.prototype.resultContent): Added. Overrides what's in the results column.
(AnalysisResultsViewer.ExpandableRow.prototype.heading): Added. Generates "(Expand)" link.

  • public/v3/components/customizable-test-group-form.js:

(CustomizableTestGroupForm.prototype._computeRootSetMap): Use getElementsByClassName instead of
getElementById.
(CustomizableTestGroupForm.prototype._classForLabelAndRepository): Renamed from _idForLabelAndRepository.
(CustomizableTestGroupForm._constructRevisionRadioButtons): Set class name instead of id.

  • public/v3/components/results-table.js:

(ResultsTable.prototype.render): Don't generate radio buttons to select a row when root set is missing;
e.g. for rows that show "(Expand)" links.

Location:
trunk/Websites/perf.webkit.org
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Websites/perf.webkit.org/ChangeLog

    r196787 r196792  
     12016-02-18  Ryosuke Niwa  <rniwa@webkit.org>
     2
     3        The rows in the analysis results table should be expandable
     4        https://bugs.webkit.org/show_bug.cgi?id=154427
     5
     6        Reviewed by Chris Dumez.
     7
     8        Added "(Expand)" link between rows that have hidden points. Upon click it inserts the hidden rows.
     9
     10        We insert around five rows at a time when there are hundreds of hidden points but we also avoid leaving
     11        behind expandable rows of less than two rows.
     12
     13        Also fixed a bug in CustomizableTestGroupForm that getElementsById would throw in the shipping Safari
     14        because getElementsById doesn't exist on Element.prototype by using class name instead.
     15
     16        * public/v3/components/analysis-results-viewer.js:
     17        (AnalysisResultsViewer):
     18        (AnalysisResultsViewer.prototype.setCurrentTestGroup): Removed superfluous call to render().
     19        (AnalysisResultsViewer.prototype.setPoints): Always show the start and the end points.
     20        (AnalysisResultsViewer.prototype.buildRowGroups):
     21        (AnalysisResultsViewer.prototype._buildRowsForPointsAndTestGroups): Add an instance of ExpandableRow which
     22        shows a "(Expand)" link to show hidden rows here.
     23        (AnalysisResultsViewer.prototype._expandBetween): Added. Expands rows between two points.
     24        (AnalysisResultsViewer.cssTemplate): Added rules for "(Expand)" links.
     25        (AnalysisResultsViewer.ExpandableRow): Added.
     26        (AnalysisResultsViewer.ExpandableRow.prototype.resultContent): Added. Overrides what's in the results column.
     27        (AnalysisResultsViewer.ExpandableRow.prototype.heading): Added. Generates "(Expand)" link.
     28
     29        * public/v3/components/customizable-test-group-form.js:
     30        (CustomizableTestGroupForm.prototype._computeRootSetMap): Use getElementsByClassName instead of
     31        getElementById.
     32        (CustomizableTestGroupForm.prototype._classForLabelAndRepository): Renamed from _idForLabelAndRepository.
     33        (CustomizableTestGroupForm._constructRevisionRadioButtons): Set class name instead of id.
     34
     35        * public/v3/components/results-table.js:
     36        (ResultsTable.prototype.render): Don't generate radio buttons to select a row when root set is missing;
     37        e.g. for rows that show "(Expand)" links.
     38
    1392016-02-18  Ryosuke Niwa  <rniwa@webkit.org>
    240

  • trunk/Websites/perf.webkit.org/public/v3/components/analysis-results-viewer.js

    r196463 r196792  
    1212        this._additionalHeading = null;
    1313        this._testGroupCallback = null;
     14        this._expandedPoints = new Set;
    1415    }
    1516
    … …  
    1920    {
    2021        this._currentTestGroup = testGroup;
    21         this.render();
    2222    }
    2323
    … …  
    2727        this._endPoint = endPoint;
    2828        this._shouldRenderTable = true;
     29        this._expandedPoints.clear();
     30        this._expandedPoints.add(startPoint);
     31        this._expandedPoints.add(endPoint);
    2932    }
    3033
    … …  
    9295        rowList.forEach(function (row, rowIndex) {
    9396            var matchingRootSets = rowToMatchingRootSets.get(row);
     97            if (!matchingRootSets) {
     98                console.assert(row instanceof AnalysisResultsViewer.ExpandableRow);
     99                return;
     100            }
     101
    94102            for (var entry of matchingRootSets) {
    95103                var testGroup = entry.testGroup();
    … …  
    145153        var rootSetsWithPoints = new Set;
    146154        var pointIndex = 0;
     155        var previousPoint;
    147156        for (var point = this._startPoint; point && point != pointAfterEnd; point = point.series.nextPoint(point), pointIndex++) {
    148157            var rootSetInPoint = point.rootSet();
    … …  
    155164            }
    156165
    157             if (!matchingRootSets.length && point != this._startPoint && point != this._endPoint)
     166            var hasMatchingTestGroup = !!matchingRootSets.length;
     167            if (!hasMatchingTestGroup && !this._expandedPoints.has(point))
    158168                continue;
    159169
    160170            var row = new ResultsTableRow(pointIndex.toString(), rootSetInPoint);
    161171            row.setResult(point);
     172
     173            if (previousPoint && previousPoint.series.nextPoint(previousPoint) != point)
     174                rowList.push(new AnalysisResultsViewer.ExpandableRow(this._expandBetween.bind(this, previousPoint, point)));
     175            previousPoint = point;
    162176
    163177            rowToMatchingRootSets.set(row, matchingRootSets);
    … …  
    171185            for (var i = 0; i < rowList.length; i++) {
    172186                var row = rowList[i];
    173                 if (row.rootSet().equals(entry.rootSet())) {
     187                if (!(row instanceof AnalysisResultsViewer.ExpandableRow) && row.rootSet().equals(entry.rootSet())) {
    174188                    rowToMatchingRootSets.get(row).push(entry);
    175189                    return;
    … …  
    179193            var groupTime = entry.rootSet().latestCommitTime();
    180194            for (var i = 0; i < rowList.length; i++) {
     195                if (rowList[i] instanceof AnalysisResultsViewer.ExpandableRow)
     196                    continue;
     197
    181198                var rowTime = rowList[i].rootSet().latestCommitTime();
    182199                if (rowTime > groupTime) {
    … …  
    191208                    var repositoriesInNewRow = entry.rootSet().repositories();
    192209                    for (var j = i; j < rowList.length; j++) {
     210                        if (rowList[j] instanceof AnalysisResultsViewer.ExpandableRow)
     211                            continue;
    193212                        for (var repository of repositoriesInNewRow) {
    194213                            var newCommit = entry.rootSet().commitForRepository(repository);
    … …  
    223242            this._testGroupCallback(testGroup);
    224243    }
     244   
     245    _expandBetween(pointBeforeExpansion, pointAfterExpansion)
     246    {
     247        console.assert(pointBeforeExpansion.series == pointAfterExpansion.series);
     248        var indexBeforeStart = pointBeforeExpansion.seriesIndex;
     249        var indexAfterEnd = pointAfterExpansion.seriesIndex;
     250        console.assert(indexBeforeStart + 1 < indexAfterEnd);
     251
     252        var series = pointAfterExpansion.series;
     253        var increment = Math.ceil((indexAfterEnd - indexBeforeStart) / 5);
     254        if (increment < 3)
     255            increment = 1;
     256        for (var i = indexBeforeStart + 1; i < indexAfterEnd; i += increment)
     257            this._expandedPoints.add(series.findPointByIndex(i));
     258        this._shouldRenderTable = true;
     259        this.render();
     260    }
    225261
    226262    static htmlTemplate()
    … …  
    285321                background: rgba(102, 102, 255, 0.5);
    286322            }
     323
     324            .analysis-view .point-label-with-expansion-link {
     325                font-size: 0.7rem;
     326            }
     327            .analysis-view .point-label-with-expansion-link a {
     328                color: #999;
     329                text-decoration: none;
     330            }
    287331        `;
    288332    }
    … …  
    290334
    291335ComponentBase.defineElement('analysis-results-viewer', AnalysisResultsViewer);
     336
     337AnalysisResultsViewer.ExpandableRow = class extends ResultsTableRow {
     338    constructor(callback)
     339    {
     340        super(null, null);
     341        this._callback = callback;
     342    }
     343
     344    resultContent() { return ''; }
     345
     346    heading()
     347    {
     348        return ComponentBase.createElement('span', {class: 'point-label-with-expansion-link'}, [
     349            ComponentBase.createLink('(Expand)', 'Expand', this._callback),
     350        ]);
     351    }
     352}
    292353
    293354AnalysisResultsViewer.RootSetInTestGroup = class {

  • trunk/Websites/perf.webkit.org/public/v3/components/customizable-test-group-form.js

    r196787 r196792  
    4343            var customRootSet = new CustomRootSet;
    4444            for (var repository of this._renderedRepositorylist) {
    45                 var id = CustomizableTestGroupForm._idForLabelAndRepository(label, repository);
    46                 var revision = this.content().getElementById(id).value;
     45                var className = CustomizableTestGroupForm._classForLabelAndRepository(label, repository);
     46                var revision = this.content().getElementsByClassName(className)[0].value;
    4747                console.assert(revision);
    4848                if (revision)
    … …  
    9393    }
    9494
    95     static _idForLabelAndRepository(label, repository) { return label + '-' + repository.id(); }
     95    static _classForLabelAndRepository(label, repository) { return label + '-' + repository.id(); }
    9696
    9797    static _constructRevisionRadioButtons(rootSetMap, repository, rowLabel)
    9898    {
    99         var id = this._idForLabelAndRepository(rowLabel, repository);
    100         var groupName = id + '-group';
     99        var className = this._classForLabelAndRepository(rowLabel, repository);
     100        var groupName = className + '-group';
    101101        var element = ComponentBase.createElement;
    102         var revisionEditor = element('input', {id: id});
     102        var revisionEditor = element('input', {class: className});
    103103
    104104        var nodes = [];

  • trunk/Websites/perf.webkit.org/public/v3/components/results-table.js

    r196708 r196792  
    3333        var extraRepositories = [];
    3434        var repositoryList = this._computeRepositoryList(rowGroups, extraRepositories);
     35
     36        this._selectedRange = {};
    3537
    3638        var barGraphGroup = new BarGraphGroup(this._valueFormatter);
    … …  
    4749
    4850                if (self._rangeSelectorLabels) {
    49                     self._selectedRange = {};
    50                     for (var label of self._rangeSelectorLabels)
    51                         cells.push(element('td', element('input',
    52                             {type: 'radio', name: label, onchange: self._rangeSelectorClicked.bind(self, label, row)})));
     51                    for (var label of self._rangeSelectorLabels) {
     52                        var content = '';
     53                        if (row.rootSet()) {
     54                            content = element('input',
     55                                {type: 'radio', name: label, onchange: self._rangeSelectorClicked.bind(self, label, row)});
     56                        }
     57                        cells.push(element('td', content));
     58                    }
    5359                }
    5460
Note: See TracChangeset for help on using the changeset viewer.