Attachment 372867 Details for Bug 199051 – Patch

[patch] Patch

bug-199051-20190625145503.patch (text/plain), 24.05 KB, created by Dean Johnson on 2019-06-25 14:55:03 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Dean Johnson

Created: 2019-06-25 14:55:03 PDT

Size: 24.05 KB

patch

obsolete

>Subversion Revision: 246793
>diff --git a/Websites/perf.webkit.org/ChangeLog b/Websites/perf.webkit.org/ChangeLog
>index ace89f225e46361dc06586c03713177487c217b6..df3f1f73c5191662eecc54089dddc7cd4cfc531f 100644
>--- a/Websites/perf.webkit.org/ChangeLog
>+++ b/Websites/perf.webkit.org/ChangeLog
>@@ -1,3 +1,71 @@
>+2019-06-25  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: continuous-domain-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.prototype.setStartTime): Ensure startTime is never less than 1.
>+        (ChartsToolbar.htmlTemplate): Moved 'Add Pane' buttons from ContinuousDomainToolbar.
>+        (ChartsToolbar.cssTemplate): Moved 'Add Pane' styling from ContinuousDomainToolbar.
>+        (ChartsToolbar.prototype.setNumberOfDaysCallback): Moved to ContinuousDomainToolbar.
>+        (ChartsToolbar.prototype._setInputElementValue): Ditto.
>+        (ChartsToolbar.prototype._enterTextMode): Ditto.
>+        (ChartsToolbar.prototype._exitTextMode): Ditto.
>+        (ChartsToolbar.prototype._sliderValueMayHaveChanged): Ditto.
>+        (ChartsToolbar.prototype._editorValueMayHaveChanged): Ditto.
>+        (ChartsToolbar.prototype._callNumberOfDaysCallback): Ditto.
>+        * public/v3/pages/continuous-domain-toolbar.js: Copied initially from
>+        Websites/perf.webkit.org/public/v3/pages/charts-toolbar.js.
>+        (ContinuousDomainToolbar): New. Based on ChartsToolbar and contains primary logic for
>+        a 'slider' that adjusts time. Used by both ChartsToolbar and SummaryToolbar. Constructor adds
>+        a this._inTextMode = false default, to figure out if text mode is currently in use in SummaryToolbar.
>+        (ContinuousDomainToolbar.prototype.render): Moved from ChartsToolbar.
>+        (ContinuousDomainToolbar.prototype.setNumberOfDaysCallback): Ditto.
>+        (ContinuousDomainToolbar.prototype.setStartTime): Ditto.
>+        (ContinuousDomainToolbar.prototype._setInputElementValue): Ditto.
>+        (ContinuousDomainToolbar.prototype._enterTextMode): Ditto, but expanded to update this._inTextMode.
>+        (ContinuousDomainToolbar.prototype._exitTextMode): Ditto to _enterTextMode.
>+        (ContinuousDomainToolbar.prototype._sliderValueMayHaveChanged): Moved from ChartsToolbar.
>+        (ContinuousDomainToolbar.prototype._editorValueMayHaveChanged): Ditto.
>+        (ContinuousDomainToolbar.prototype._callNumberOfDaysCallback): Ditto.
>+        (ContinuousDomainToolbar.daysCountLabelText): Added so content of daysCountLabel can be modified.
>+        (ContinuousDomainToolbar.htmlTemplate): Moved from ChartsToolbar, but removes 'Add Pane' button and
>+        allows customization of daysCount label text.
>+        (ContinuousDomainToolbar.cssTemplate): Moved from ChartsToolbar, except for 'Add Pane' styling.
>+        * public/v3/pages/domain-control-toolbar.js:
>+        (DomainControlToolbar.prototype.setStartTime): Adjust logic to account for 0 day value.
>+        (DomainControlToolbar.prototype.setNumberOfDays): Ditto.
>+        (DomainControlToolbar):
>+        * public/v3/pages/summary-page.js:
>+        (SummaryPage): Add a contructor argument for a toolbar.
>+        (SummaryPage.prototype.open): Split primary logic into updateAndRenderForRange.
>+        (SummaryPage.prototype.updateAndRenderForRange): New. Used to change # days ago at which summary
>+        calculations were applied.
>+        (SummaryPage.prototype.setNumberOfDaysFromToolbar): Callback for when slider or textMode 'days' value
>+        changes.
>+        * public/v3/pages/summary-toolbar.js: New. Adds a slider for the summary page to re-evaluate at some
>+        # of days ago.
>+        (SummaryToolbar): New.
>+        (SummaryToolbar.prototype._addSliderTextFormattingForZeroDays): Changes styling when day count goes to
>+        '0'.
>+        (SummaryToolbar.prototype._removeSliderTextFormattingForZeroDays): Changes styling when day count goes
>+        above 0, or when in textMode.
>+        (SummaryToolbar.prototype.render): Dynamically adjust styling based on this._numberOfDays value.
>+        (SummaryToolbar.prototype._enterTextMode): Use this.enqueueToRender to render as-needed.
>+        (SummaryToolbar.prototype._exitTextMode): Ditto.
>+
> 2019-06-24  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..df76d7d0ebc3a017a323870da4fbfa105eab2a34 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/continuous-domain-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..09f1648272f714df8afa015d12e40f077d65eb8c 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 ContinuousDomainToolbar {
>     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)
>@@ -53,61 +29,9 @@ class ChartsToolbar extends DomainControlToolbar {
> 
>     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);
>+        if (startTime < 1)
>+            startTime = 1;
>+        super.setStartTime(startTime);
>     }
> 
>     _togglePaneSelector(event)
>@@ -145,34 +69,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 +95,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 +107,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/continuous-domain-toolbar.js b/Websites/perf.webkit.org/public/v3/pages/continuous-domain-toolbar.js
>new file mode 100644
>index 0000000000000000000000000000000000000000..eae05764bf3f88c80129ee3b62ec4d387015aba8
>--- /dev/null
>+++ b/Websites/perf.webkit.org/public/v3/pages/continuous-domain-toolbar.js
>@@ -0,0 +1,157 @@
>+
>+class ContinuousDomainToolbar 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._inTextMode = false;
>+        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._dayCountSpan = this.content('day-count');
>+    }
>+
>+    render()
>+    {
>+        super.render();
>+        this._dayCountSpan.textContent = this._numberOfDays;
>+        this._setInputElementValue(this._numberOfDays);
>+    }
>+
>+    setNumberOfDaysCallback(callback)
>+    {
>+        console.assert(!callback || callback instanceof Function);
>+        this._numberOfDaysCallback = callback;
>+    }
>+
>+    setStartTime(startTime=this._defaultNumberOfDays)
>+    {
>+        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._inTextMode = true;
>+        this._editor.style.opacity = 1;
>+        this._editor.style.marginLeft = '-2.5rem';
>+        this._dayCountSpan.style.opacity = 0;
>+        this._slider.style.opacity = 0;
>+    }
>+
>+    _exitTextMode(event)
>+    {
>+        if (event)
>+            event.preventDefault();
>+        this._inTextMode = false;
>+        this._editor.style.opacity = 0;
>+        this._editor.style.marginLeft = null;
>+        this._dayCountSpan.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 id="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;
>+            }
>+
>+            #day-count {
>+                display: inline-block;
>+                text-align: right;
>+                width: 2rem;
>+            }
>+        `;
>+    }
>+}
>+
>+ComponentBase.defineElement('continuous-domain-toolbar', ContinuousDomainToolbar);
>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..2d99ae98c4550fcc073d9c74af4e85090db55aae 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 (typeof(numberOfDays) != 'number')
>             return;
> 
>         this._startTime = null;
>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 e4619b197487ce972c18c80afe89bfdb2cea887f..ee4c3976808438e61df30cad4f0e3ef29b0818b4 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..dc33cf6897b7f3ddc7583f27b32a202b6e91ff57
>--- /dev/null
>+++ b/Websites/perf.webkit.org/public/v3/pages/summary-toolbar.js
>@@ -0,0 +1,52 @@
>+class SummaryToolbar extends ContinuousDomainToolbar {
>+    constructor()
>+    {
>+        super('summary-toolbar', 0);
>+
>+        this._minDayCount = 0;
>+        this._maxDayCount = 366;
>+
>+        this._dayCountDescription = this.content('day-count-description');
>+    }
>+
>+    _addSliderTextFormattingForZeroDays() {
>+        this._dayCountSpan.textContent = '';
>+        this._dayCountSpan.style.width = '1.25rem';
>+        this._dayCountDescription.style.width = '4.5rem';
>+        this._dayCountDescription.textContent = ' Current';
>+    }
>+
>+    _removeSliderTextFormattingForZeroDays() {
>+        this._dayCountSpan.style.width = '2rem';
>+        this._dayCountDescription.style.width = '3.75rem';
>+        this._dayCountDescription.textContent = ' days ago';
>+    }
>+
>+    render()
>+    {
>+        super.render();
>+        if (!this._numberOfDays && !this._inTextMode)
>+            this._addSliderTextFormattingForZeroDays();
>+        else
>+            this._removeSliderTextFormattingForZeroDays();
>+    }
>+
>+    _enterTextMode(event)
>+    {
>+        super._enterTextMode(event);
>+        this.enqueueToRender();
>+    }
>+
>+    _exitTextMode(event)
>+    {
>+        super._exitTextMode(event);
>+        this.enqueueToRender();
>+    }
>+
>+    static daysCountLabelText()
>+    {
>+        return `<label id="day-count-description" class="label"></label>`;
>+    }
>+}
>+
>+ComponentBase.defineElement('summary-toolbar', SummaryToolbar);

Actions: View | Formatted Diff | Diff

Attachments on bug 199051: 372540 | 372600 | 372867 | 372879 | 393802 | 393896 | 394128