Attachment 372535 Details for Bug 199054 – Patch

[patch] Patch

bug-199054-20190619225653.patch (text/plain), 24.10 KB, created by Dean Johnson on 2019-06-19 22:56:54 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Dean Johnson

Created: 2019-06-19 22:56:54 PDT

Size: 24.10 KB

patch

obsolete

>Subversion Revision: 246612
>diff --git a/Websites/perf.webkit.org/ChangeLog b/Websites/perf.webkit.org/ChangeLog
>index a08c0cca9ef55c9f9430f66451a3d1e55f97938a..1a42ab199a0cf4dd339f9d2faf5013cc2cc351f4 100644
>--- a/Websites/perf.webkit.org/ChangeLog
>+++ b/Websites/perf.webkit.org/ChangeLog
>@@ -1,3 +1,69 @@
>+2019-06-19  Dean Johnson  <dean_johnson@apple.com>
>+
>+        [perf.webkit.org] Add 'back in time' feature for Summary pages
>+        https://bugs.webkit.org/show_bug.cgi?id=199051
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        This adds a "Back in time" feature for all Summary pages on the WebKit Perf dashboard. There is a new
>+        slider in the top right corner which can be dragged to view the summary page 'N days ago'. The default view
>+        is the same as before.
>+
>+        * public/v3/index.html: Add new resources: slider-toolbar.js, summary-toolbar.js.
>+        * public/v3/main.js: Add new summaryToolbar, and initialize summary pages with it.
>+        (main):
>+        * public/v3/pages/charts-toolbar.js: Abstract the slider toolbar into a new class, and inherit from it.
>+        (ChartsToolbar): Now, ChartsToolbar is a mostly thin wrapper round SliderToolbar and implements the 'Add Pane'
>+        button + functionality.
>+        (ChartsToolbar.prototype.render):
>+        (ChartsToolbar.cssTemplate):
>+        (ChartsToolbar.prototype.setNumberOfDaysCallback): Deleted.
>+        (ChartsToolbar.prototype.setStartTime): Deleted.
>+        (ChartsToolbar.prototype._setInputElementValue): Deleted.
>+        (ChartsToolbar.prototype._enterTextMode): Deleted.
>+        (ChartsToolbar.prototype._exitTextMode): Deleted.
>+        (ChartsToolbar.prototype._sliderValueMayHaveChanged): Deleted.
>+        (ChartsToolbar.prototype._editorValueMayHaveChanged): Deleted.
>+        (ChartsToolbar.prototype._callNumberOfDaysCallback): Deleted.
>+        (ChartsToolbar.htmlTemplate): Wrap SilderToolbar's htmlTemplate with a nav and embed the 'Add Pane' button.
>+        * public/v3/pages/domain-control-toolbar.js:
>+        (DomainControlToolbar.prototype.setStartTime): Updated to support a value of 0 for numberOfDays.
>+        (DomainControlToolbar.prototype.setNumberOfDays): Ditto.
>+        (DomainControlToolbar):
>+        * public/v3/pages/slider-toolbar.js: Copied from Websites/perf.webkit.org/public/v3/pages/charts-toolbar.js.
>+        (SliderToolbar): Copied from charts-toolbar.js; Added _defaultNumberOfDays when invoking constructor and
>+        removed 'Add Pane' logic.
>+        (SliderToolbar.prototype.render): Moved from charts-toolbar.js.
>+        (SliderToolbar.prototype.setNumberOfDaysCallback): Ditto.
>+        (SliderToolbar.prototype.setStartTime): Ditto, but updated to use _defaultNumberOfDays.
>+        (SliderToolbar.prototype._setInputElementValue): Ditto.
>+        (SliderToolbar.prototype._enterTextMode): Ditto.
>+        (SliderToolbar.prototype._exitTextMode): Ditto.
>+        (SliderToolbar.prototype._sliderValueMayHaveChanged): Ditto.
>+        (SliderToolbar.prototype._editorValueMayHaveChanged): Ditto.
>+        (SliderToolbar.prototype._callNumberOfDaysCallback): Ditto.
>+        (SliderToolbar.daysCountLabelText): Return a custom element for modifying the text / styling used for 'days ago'.
>+        (SliderToolbar.htmlTemplate): Removed unnecessary nav and restructure to use static values for daysCountLabelText.
>+        (SliderToolbar.cssTemplate): Moved from charts-toolbar.js, without the 'Add Pane' styling.
>+        * public/v3/pages/summary-page.js:
>+        (SummaryPage): Change constructor to accept a toolbar argument.
>+        (SummaryPage.prototype.open): Refactored summary rendering into updateAndRenderForRange, so it can be called
>+        when the new slider is moved.
>+        (SummaryPage.prototype.updateAndRenderForRange): Updates summary page to show results for N days ago.
>+        (SummaryPage.prototype.setNumberOfDaysFromToolbar): Callback for re-rendering summary page with new results as
>+        the value on the slider changes.
>+        * public/v3/pages/summary-toolbar.js: Added.
>+        (SummaryToolbar): Based on SliderToolbar. Primary changes are to allow "0 days ago" to instead show "Current"
>+        when changing values on the slider and not in TextMode.
>+        (SummaryToolbar.prototype._addSliderTextFormattingForZeroDays): Adds formatting to use "Current" instead of
>+        "0 days ago" and not shift the slider toolbar.
>+        (SummaryToolbar.prototype._removeSliderTextFormattingForZeroDays): Removes formtting to revert to a default.
>+        (SummaryToolbar.prototype.render): Set the special formatting when numberOfDays == 0, otherwise use the default.
>+        (SummaryToolbar.prototype._enterTextMode): Remove all special formatting since '0 days ago' reads better than
>+        '0 Current'. Also set a new boolean (this._inTextMode) that can be used when rendering to keep from reverting
>+        from '0 days ago' to '0 Current'.
>+        (SummaryToolbar.prototype._exitTextMode): Sets the text mode back to Current if numberOfDays == 0.
>+
> 2019-06-19  Dean Johnson  <dean_johnson@apple.com>
> 
>         [perf.webkit.org] Update summary page calculations to use mean instead of median
>diff --git a/Websites/perf.webkit.org/public/v3/index.html b/Websites/perf.webkit.org/public/v3/index.html
>index e731077f6ebe00407adb068c7ffcbf61ea66cdcc..cbc8ee16bab4cc7cd8a5a7a6d743f49fba97e741 100644
>--- a/Websites/perf.webkit.org/public/v3/index.html
>+++ b/Websites/perf.webkit.org/public/v3/index.html
>@@ -113,6 +113,7 @@ Run tools/bundle-v3-scripts to speed up the load time for production.`);
>         <script src="pages/domain-control-toolbar.js"></script>
>         <script src="pages/dashboard-toolbar.js"></script>
>         <script src="pages/dashboard-page.js"></script>
>+        <script src="pages/slider-toolbar.js"></script>
>         <script src="pages/chart-pane-status-view.js"></script>
>         <script src="pages/chart-pane.js"></script>
>         <script src="pages/charts-toolbar.js"></script>
>@@ -123,6 +124,7 @@ Run tools/bundle-v3-scripts to speed up the load time for production.`);
>         <script src="pages/create-analysis-task-page.js"></script>
>         <script src="pages/build-request-queue-page.js"></script>
>         <script src="pages/summary-page.js"></script>
>+        <script src="pages/summary-toolbar.js"></script>
>         <script src="pages/test-freshness-page.js"></script>
> 
>         <script src="main.js"></script>
>diff --git a/Websites/perf.webkit.org/public/v3/main.js b/Websites/perf.webkit.org/public/v3/main.js
>index 0ebc2f01c7bc4e683e96869b5f12e6cdc2f80ae3..6217b3cfbacf0ae4519d24e87ca9bc86185c3998 100644
>--- a/Websites/perf.webkit.org/public/v3/main.js
>+++ b/Websites/perf.webkit.org/public/v3/main.js
>@@ -26,11 +26,12 @@ function main() {
>                 dashboardPages.push(new DashboardPage(name, manifest.dashboards[name], dashboardToolbar));
>         }
> 
>+        const summaryToolbar = new SummaryToolbar;
>         const summaryPages = [];
>         let testFreshnessPage = null;
>         if (manifest.summaryPages) {
>             for (const summaryPage of manifest.summaryPages)
>-                summaryPages.push(new SummaryPage(summaryPage));
>+                summaryPages.push(new SummaryPage(summaryPage, summaryToolbar));
>             testFreshnessPage = new TestFreshnessPage(manifest.summaryPages, manifest.testAgeToleranceInHours);
>         }
> 
>diff --git a/Websites/perf.webkit.org/public/v3/pages/charts-toolbar.js b/Websites/perf.webkit.org/public/v3/pages/charts-toolbar.js
>index a097e348e87f97bc1b91b97998fae247a67681fb..28ec9b352c3f8420eef19f9a8adaa429f6126c77 100644
>--- a/Websites/perf.webkit.org/public/v3/pages/charts-toolbar.js
>+++ b/Websites/perf.webkit.org/public/v3/pages/charts-toolbar.js
>@@ -1,24 +1,8 @@
> 
>-class ChartsToolbar extends DomainControlToolbar {
>+class ChartsToolbar extends SliderToolbar {
>     constructor()
>     {
>-        super('chars-toolbar', 7);
>-
>-        this._minDayCount = 1;
>-        this._maxDayCount = 366;
>-
>-        this._numberOfDaysCallback = null;
>-        this._slider = this.content().querySelector('.slider');
>-        this._slider.addEventListener('change', this._sliderValueMayHaveChanged.bind(this));
>-        this._slider.addEventListener('mousemove', this._sliderValueMayHaveChanged.bind(this));
>-
>-        this._editor = this.content().querySelector('.editor');
>-        this._editor.addEventListener('focus', this._enterTextMode.bind(this));
>-        this._editor.addEventListener('blur', this._exitTextMode.bind(this));
>-        this._editor.addEventListener('input', this._editorValueMayHaveChanged.bind(this));
>-        this._editor.addEventListener('change', this._editorValueMayHaveChanged.bind(this));
>-
>-        this._labelSpan = this.content().querySelector('.day-count');
>+        super('charts-toolbar', 7);
> 
>         this._addPaneCallback = null;
>         this._paneSelector = this.content().querySelector('pane-selector').component();
>@@ -35,14 +19,6 @@ class ChartsToolbar extends DomainControlToolbar {
>     {
>         super.render();
>         this._paneSelector.enqueueToRender();
>-        this._labelSpan.textContent = this._numberOfDays;
>-        this._setInputElementValue(this._numberOfDays);
>-    }
>-
>-    setNumberOfDaysCallback(callback)
>-    {
>-        console.assert(!callback || callback instanceof Function);
>-        this._numberOfDaysCallback = callback;
>     }
> 
>     setAddPaneCallback(callback)
>@@ -51,65 +27,6 @@ class ChartsToolbar extends DomainControlToolbar {
>         this._addPaneCallback = callback;
>     }
> 
>-    setStartTime(startTime)
>-    {
>-        this._exitTextMode();
>-        if (startTime)
>-            super.setStartTime(startTime);
>-        else
>-            super.setNumberOfDays(7);
>-    }
>-
>-    _setInputElementValue(value)
>-    {
>-        this._slider.value = Math.pow(value, 1/3);
>-        this._slider.min = Math.pow(this._minDayCount, 1/3);
>-        this._slider.max = Math.pow(this._maxDayCount, 1/3);
>-        this._slider.step = 'any';
>-        this._editor.value = value;
>-    }
>-
>-    _enterTextMode(event)
>-    {
>-        event.preventDefault();
>-        this._editor.style.opacity = 1;
>-        this._editor.style.marginLeft = '-2.5rem';
>-        this._labelSpan.style.opacity = 0;
>-        this._slider.style.opacity = 0;
>-    }
>-
>-    _exitTextMode(event)
>-    {
>-        if (event)
>-            event.preventDefault();
>-        this._editor.style.opacity = 0;
>-        this._editor.style.marginLeft = null;
>-        this._labelSpan.style.opacity = 1;
>-        this._slider.style.opacity = 1;
>-    }
>-
>-    _sliderValueMayHaveChanged(event)
>-    {
>-        var numberOfDays = Math.round(Math.pow(parseFloat(this._slider.value), 3));
>-        this._callNumberOfDaysCallback(event, numberOfDays);
>-    }
>-
>-    _editorValueMayHaveChanged(event)
>-    {
>-        var rawNumber = Math.round(parseFloat(this._editor.value));
>-        var numberOfDays = Math.max(this._minDayCount, Math.min(this._maxDayCount, rawNumber));
>-        if (this._editor.value != numberOfDays)
>-            this._editor.value = numberOfDays;
>-        this._callNumberOfDaysCallback(event, numberOfDays);
>-    }
>-
>-    _callNumberOfDaysCallback(event, numberOfDays)
>-    {
>-        var shouldUpdateState = event.type == 'change';
>-        if ((this.numberOfDays() != numberOfDays || shouldUpdateState) && this._numberOfDaysCallback)
>-            this._numberOfDaysCallback(numberOfDays, shouldUpdateState);
>-    }
>-
>     _togglePaneSelector(event)
>     {
>         event.preventDefault();
>@@ -145,34 +62,25 @@ class ChartsToolbar extends DomainControlToolbar {
>             this._addPaneCallback(platform, metric);
>     }
> 
>-
>     static htmlTemplate()
>     {
>         return `
>-            <nav class="charts-toolbar">
>+            <nav>
>                 <ul class="buttoned-toolbar">
>                     <li><a href="#" class="pane-selector-opener">Add pane</a></li>
>                 </ul>
>-                <ul class="buttoned-toolbar">
>-                    <li class="start-time-slider">
>-                        <label>
>-                            <input class="slider" type="range">
>-                            <input class="editor" type="number">
>-                            <span class="label"><span class="day-count" tabindex="0">?</span> days</span>
>-                        </label>
>-                    </li>
>-                </ul>
>                 <div class="pane-selector-container">
>                     <pane-selector></pane-selector>
>                 </div>
>-            </nav>`;
>+                ${ super.htmlTemplate() }
>+            </nav>
>+        `;
>     }
> 
>     static cssTemplate()
>     {
>-        return Toolbar.cssTemplate() + `
>-
>-            .charts-toolbar > .buttoned-toolbar:first-child {
>+        return super.cssTemplate() + `
>+            nav > .buttoned-toolbar:first-child {
>                 margin-right: 0.5rem;
>             }
> 
>@@ -180,7 +88,7 @@ class ChartsToolbar extends DomainControlToolbar {
>                 background: rgba(204, 153, 51, 0.1);
>             }
> 
>-            .charts-toolbar > .pane-selector-container {
>+            nav > .pane-selector-container {
>                 position: absolute;
>                 right: 1rem;
>                 margin: 0;
>@@ -192,39 +100,8 @@ class ChartsToolbar extends DomainControlToolbar {
>                 background: rgba(255, 255, 255, 0.8);
>                 -webkit-backdrop-filter: blur(0.5rem);
>             }
>-
>-            .buttoned-toolbar .start-time-slider {
>-                margin-left: 2rem;
>-                line-height: 1em;
>-                font-size: 0.9rem;
>-            }
>-
>-            .start-time-slider label {
>-                display: inline-block;
>-            }
>-
>-            .start-time-slider .slider {
>-                height: 0.8rem;
>-            }
>-
>-            .start-time-slider .editor {
>-                position: absolute;
>-                opacity: 0;
>-                width: 4rem;
>-                font-weight: inherit;
>-                font-size: 0.8rem;
>-                height: 0.9rem;
>-                outline: none;
>-                border: solid 1px #ccc;
>-                z-index: 5;
>-            }
>-
>-            .start-time-slider .day-count {
>-                display: inline-block;
>-                text-align: right;
>-                width: 2rem;
>-            }
>         `;
>     }
>-
> }
>+
>+ComponentBase.defineElement('charts-toolbar', ChartsToolbar);
>diff --git a/Websites/perf.webkit.org/public/v3/pages/domain-control-toolbar.js b/Websites/perf.webkit.org/public/v3/pages/domain-control-toolbar.js
>index c6bf614e36082c9894d4ab3b939d3f6079755de2..70eb770405eda2e2a59f6aac905b5003e6316f23 100644
>--- a/Websites/perf.webkit.org/public/v3/pages/domain-control-toolbar.js
>+++ b/Websites/perf.webkit.org/public/v3/pages/domain-control-toolbar.js
>@@ -17,7 +17,7 @@ class DomainControlToolbar extends Toolbar {
> 
>     setStartTime(startTime)
>     {
>-        this.setNumberOfDays(Math.max(1, Math.round((this._present - startTime) / this._millisecondsPerDay)));
>+        this.setNumberOfDays(Math.max(0, Math.round((this._present - startTime) / this._millisecondsPerDay)));
>         this._startTime = startTime;
>     }
> 
>@@ -28,7 +28,7 @@ class DomainControlToolbar extends Toolbar {
> 
>     setNumberOfDays(numberOfDays, setByUser)
>     {
>-        if (!numberOfDays)
>+        if (!numberOfDays && numberOfDays !== 0)
>             return;
> 
>         this._startTime = null;
>diff --git a/Websites/perf.webkit.org/public/v3/pages/slider-toolbar.js b/Websites/perf.webkit.org/public/v3/pages/slider-toolbar.js
>new file mode 100644
>index 0000000000000000000000000000000000000000..d4cb8d0c7317ef5569365709efd8c8f46a226663
>--- /dev/null
>+++ b/Websites/perf.webkit.org/public/v3/pages/slider-toolbar.js
>@@ -0,0 +1,154 @@
>+
>+class SliderToolbar extends DomainControlToolbar {
>+    constructor(name, defaultNumberOfDays)
>+    {
>+        super(name, defaultNumberOfDays);
>+
>+        this._minDayCount = 1;
>+        this._maxDayCount = 366;
>+        this._defaultNumberOfDays = defaultNumberOfDays;
>+
>+        this._numberOfDaysCallback = null;
>+        this._slider = this.content().querySelector('.slider');
>+        this._slider.addEventListener('change', this._sliderValueMayHaveChanged.bind(this));
>+        this._slider.addEventListener('mousemove', this._sliderValueMayHaveChanged.bind(this));
>+
>+        this._editor = this.content().querySelector('.editor');
>+        this._editor.addEventListener('focus', this._enterTextMode.bind(this));
>+        this._editor.addEventListener('blur', this._exitTextMode.bind(this));
>+        this._editor.addEventListener('input', this._editorValueMayHaveChanged.bind(this));
>+        this._editor.addEventListener('change', this._editorValueMayHaveChanged.bind(this));
>+
>+        this._labelSpan = this.content().querySelector('.day-count');
>+    }
>+
>+    render()
>+    {
>+        super.render();
>+        this._labelSpan.textContent = this._numberOfDays;
>+        this._setInputElementValue(this._numberOfDays);
>+    }
>+
>+    setNumberOfDaysCallback(callback)
>+    {
>+        console.assert(!callback || callback instanceof Function);
>+        this._numberOfDaysCallback = callback;
>+    }
>+
>+    setStartTime(startTime)
>+    {
>+        this._exitTextMode();
>+        if (startTime)
>+            super.setStartTime(startTime);
>+        else
>+            super.setNumberOfDays(this._defaultNumberOfDays);
>+    }
>+
>+    _setInputElementValue(value)
>+    {
>+        this._slider.value = Math.pow(value, 1/3);
>+        this._slider.min = Math.pow(this._minDayCount, 1/3);
>+        this._slider.max = Math.pow(this._maxDayCount, 1/3);
>+        this._slider.step = 'any';
>+        this._editor.value = value;
>+    }
>+
>+    _enterTextMode(event)
>+    {
>+        event.preventDefault();
>+        this._editor.style.opacity = 1;
>+        this._editor.style.marginLeft = '-2.5rem';
>+        this._labelSpan.style.opacity = 0;
>+        this._slider.style.opacity = 0;
>+    }
>+
>+    _exitTextMode(event)
>+    {
>+        if (event)
>+            event.preventDefault();
>+        this._editor.style.opacity = 0;
>+        this._editor.style.marginLeft = null;
>+        this._labelSpan.style.opacity = 1;
>+        this._slider.style.opacity = 1;
>+    }
>+
>+    _sliderValueMayHaveChanged(event)
>+    {
>+        var numberOfDays = Math.round(Math.pow(parseFloat(this._slider.value), 3));
>+        this._callNumberOfDaysCallback(event, numberOfDays);
>+    }
>+
>+    _editorValueMayHaveChanged(event)
>+    {
>+        var rawNumber = Math.round(parseFloat(this._editor.value));
>+        var numberOfDays = Math.max(this._minDayCount, Math.min(this._maxDayCount, rawNumber));
>+        if (this._editor.value != numberOfDays)
>+            this._editor.value = numberOfDays;
>+        this._callNumberOfDaysCallback(event, numberOfDays);
>+    }
>+
>+    _callNumberOfDaysCallback(event, numberOfDays)
>+    {
>+        var shouldUpdateState = event.type == 'change';
>+        if ((this.numberOfDays() != numberOfDays || shouldUpdateState) && this._numberOfDaysCallback)
>+            this._numberOfDaysCallback(numberOfDays, shouldUpdateState);
>+    }
>+
>+    static daysCountLabelText() { return ` days`; }
>+
>+    static htmlTemplate()
>+    {
>+        return `
>+                <ul class="buttoned-toolbar">
>+                    <li class="start-time-slider">
>+                        <label>
>+                            <input class="slider" type="range">
>+                            <input class="editor" type="number">
>+                            <span class="label">
>+                                <span class="day-count" tabindex="0"></span>
>+                                ${ this.daysCountLabelText() }
>+                            </span>
>+                        </label>
>+                    </li>
>+                </ul>`;
>+    }
>+
>+    static cssTemplate()
>+    {
>+        return Toolbar.cssTemplate() + `
>+            .buttoned-toolbar .start-time-slider {
>+                margin-left: 2rem;
>+                line-height: 1em;
>+                font-size: 0.9rem;
>+            }
>+
>+            .start-time-slider .label {
>+                display: inline-block;
>+            }
>+
>+            .start-time-slider .slider {
>+                height: 0.8rem;
>+            }
>+
>+            .start-time-slider .editor {
>+                position: absolute;
>+                opacity: 0;
>+                width: 4rem;
>+                font-weight: inherit;
>+                font-size: 0.8rem;
>+                height: 0.9rem;
>+                outline: none;
>+                border: solid 1px #ccc;
>+                z-index: 5;
>+            }
>+
>+            .start-time-slider .day-count {
>+                display: inline-block;
>+                text-align: right;
>+                width: 2rem;
>+            }
>+        `;
>+    }
>+}
>+
>+ComponentBase.defineElement('slider-toolbar', SliderToolbar);
>diff --git a/Websites/perf.webkit.org/public/v3/pages/summary-page.js b/Websites/perf.webkit.org/public/v3/pages/summary-page.js
>index 089ed982d7b074e45fe1b60c2eb5c15469c37b31..983e29744a379555a4e4c18c168fae6820ecddab 100644
>--- a/Websites/perf.webkit.org/public/v3/pages/summary-page.js
>+++ b/Websites/perf.webkit.org/public/v3/pages/summary-page.js
>@@ -1,9 +1,9 @@
> 
> class SummaryPage extends PageWithHeading {
> 
>-    constructor(summarySettings)
>+    constructor(summarySettings, toolbar)
>     {
>-        super(summarySettings.name, null);
>+        super(summarySettings.name, toolbar);
> 
>         this._route = summarySettings.route;
>         this._table = {
>@@ -31,14 +31,29 @@ class SummaryPage extends PageWithHeading {
> 
>     open(state)
>     {
>+        this.toolbar().setNumberOfDays(0, true);
>+        this.toolbar().enqueueToRender();
>+        this.toolbar().setNumberOfDaysCallback(this.setNumberOfDaysFromToolbar.bind(this))
>         super.open(state);
>+        this.updateAndRenderForRange(0)
>+    }
> 
>+    updateAndRenderForRange(days)
>+    {
>         var current = Date.now();
>-        var timeRange = [current - 24 * 3600 * 1000, current];
>+        var oneDay = 24 * 3600 * 1000;
>+        var timeRange = [current - oneDay - (days * oneDay), current - (days * oneDay)];
>         for (var group of this._configGroups)
>             group.fetchAndComputeSummary(timeRange).then(() => { this.enqueueToRender(); });
>     }
> 
>+    setNumberOfDaysFromToolbar(numberOfDays, shouldUpdateState)
>+    {
>+        this.toolbar().setNumberOfDays(numberOfDays, true);
>+        this.toolbar().enqueueToRender();
>+        this.updateAndRenderForRange(numberOfDays);
>+    }
>+
>     render()
>     {
>         Instrumentation.startMeasuringTime('SummaryPage', 'render');
>diff --git a/Websites/perf.webkit.org/public/v3/pages/summary-toolbar.js b/Websites/perf.webkit.org/public/v3/pages/summary-toolbar.js
>new file mode 100644
>index 0000000000000000000000000000000000000000..60b2bd9a33c6781b7c6da3de51ed4980d2bb567e
>--- /dev/null
>+++ b/Websites/perf.webkit.org/public/v3/pages/summary-toolbar.js
>@@ -0,0 +1,58 @@
>+class SummaryToolbar extends SliderToolbar {
>+    constructor()
>+    {
>+        super('summary-toolbar', 0);
>+
>+        this._minDayCount = 0;
>+        this._maxDayCount = 366;
>+        this._inTextMode = false;
>+
>+        this._dayCountDescription = this.content('day-count-description');
>+    }
>+
>+    _addSliderTextFormattingForZeroDays() {
>+        this._labelSpan.textContent = '';
>+        this._labelSpan.style.width = '1.25rem';
>+        this._dayCountDescription.style.width = '4.5rem';
>+        this._dayCountDescription.textContent = ' Current';
>+    }
>+
>+    _removeSliderTextFormattingForZeroDays() {
>+        this._labelSpan.style.width = '2rem';
>+        this._dayCountDescription.style.width = '3.75rem';
>+        this._dayCountDescription.textContent = ' days ago';
>+    }
>+
>+    render()
>+    {
>+        super.render();
>+        if (this._numberOfDays === 0 && !this._inTextMode) {
>+            this._addSliderTextFormattingForZeroDays();
>+        } else {
>+            this._removeSliderTextFormattingForZeroDays();
>+        }
>+    }
>+
>+    _enterTextMode(event)
>+    {
>+        super._enterTextMode(event);
>+        this._inTextMode = true;
>+        this._removeSliderTextFormattingForZeroDays();
>+    }
>+
>+    _exitTextMode(event)
>+    {
>+        super._exitTextMode(event);
>+        this._inTextMode = false;
>+        if (this._numberOfDays === 0) {
>+            this._addSliderTextFormattingForZeroDays();
>+        }
>+    }
>+
>+    static daysCountLabelText()
>+    {
>+        return `<label id="day-count-description" class="label"></label>`;
>+    }
>+}
>+
>+ComponentBase.defineElement('summary-toolbar', SummaryToolbar);

Actions: View | Formatted Diff | Diff

Attachments on bug 199054: 372534 | 372535 | 372541