DevTools: Add custom CPU throttling option to timeline.

third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
index e58206b54a6d50b611bb1a5a1a4892b860b7a3d9..fa6e9d13eee540d1f877688fea6bb513628cf6b2 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
@@ -406,23 +406,39 @@ WebInspector.TimelinePanel.prototype = {
         if (Runtime.experiments.isEnabled("cpuThrottling")) {
             this._panelToolbar.appendSeparator();
             this._cpuThrottlingCombobox = new WebInspector.ToolbarComboBox(this._onCPUThrottlingChanged.bind(this));
-            /**
-             * @param {string} name
-             * @param {number} value
-             * @this {WebInspector.TimelinePanel}
-             */
-            function addGroupingOption(name, value)
-            {
-                var option = this._cpuThrottlingCombobox.createOption(name, "", String(value));
-                this._cpuThrottlingCombobox.addOption(option);
-                if (value === this._cpuThrottlingManager.rate())
-                    this._cpuThrottlingCombobox.select(option);
-            }
-            addGroupingOption.call(this, WebInspector.UIString("No CPU throttling"), 1);
-            addGroupingOption.call(this, WebInspector.UIString("High end device\u2003(2x slowdown)"), 2);
-            addGroupingOption.call(this, WebInspector.UIString("Low end device\u2003(5x slowdown)"), 5);
             this._panelToolbar.appendToolbarItem(this._cpuThrottlingCombobox);
+            this._populateCPUThrottingCombobox();
+        }
+    },
+
+    _populateCPUThrottingCombobox: function()
+    {
+        var cpuThrottlingCombobox = this._cpuThrottlingCombobox;
+        cpuThrottlingCombobox.removeOptions();
+        var currentRate = this._cpuThrottlingManager.rate();
+        var hasSelection = false;
+        /**
+         * @param {string} name
+         * @param {number} value
+         */
+        function addGroupingOption(name, value)
+        {
+            var option = cpuThrottlingCombobox.createOption(name, "", String(value));
+            cpuThrottlingCombobox.addOption(option);
+            if (hasSelection || (value && value !== currentRate))
+                return;
+            cpuThrottlingCombobox.select(option);
+            hasSelection = true;
         }
+        var predefinedRates = new Map([
+            [1, WebInspector.UIString("No CPU throttling")],
+            [2, WebInspector.UIString("High end device (2\xD7 slowdown)")],
+            [5, WebInspector.UIString("Low end device (5\xD7 slowdown)")]
+        ]);
+        for (var rate of predefinedRates)
+            addGroupingOption(rate[1], rate[0]);
+        var customRate = predefinedRates.has(currentRate) ? "" : WebInspector.UIString(" (%d\xD7 slowdown)", currentRate);
+        addGroupingOption(WebInspector.UIString("Custom rate%s\u2026", customRate), 0);

[caseq, 2016/08/10 18:28:47]

addGroupingOption(predefinedRates.has(currentRate) ? WebInspector.UIString(...)
: WebInspector.UIString(...)) -- this is better from l10n prospective.

[alph, 2016/08/10 21:14:21]

Done.

     },
 
     _prepareToLoadTimeline: function()
@@ -558,8 +574,22 @@ WebInspector.TimelinePanel.prototype = {
     {
         if (!this._cpuThrottlingManager)
             return;
-        var value = Number.parseFloat(this._cpuThrottlingCombobox.selectedOption().value);
-        this._cpuThrottlingManager.setRate(value);
+        var value = this._cpuThrottlingCombobox.selectedOption().value;
+        this._populateCPUThrottingCombobox();
+        if (value === "0")

[caseq, 2016/08/10 18:28:47]

can we have some other check here? Either check for selectedIndex or have a more
descriptive constant than "0"?

[alph, 2016/08/10 21:14:21]

Done.

+            WebInspector.TimelinePanel.CustomCPUThrottlingRateDialog.show(setNewRate.bind(this), this._cpuThrottlingCombobox.element);
+        else
+            setNewRate.call(this, value);
+
+        /**
+         * @param {string} text
+         * @this {WebInspector.TimelinePanel}
+         */
+        function setNewRate(text)
+        {
+            this._cpuThrottlingManager.setRate(Number.parseFloat(text));
+            this._populateCPUThrottingCombobox();
+        }
     },
 
     /**
@@ -2023,3 +2053,72 @@ WebInspector.CPUThrottlingManager.prototype = {
 
     __proto__: WebInspector.Object.prototype
 }
+
+/**
+ * @constructor
+ * @extends {WebInspector.HBox}
+ * @param {function(string)} callback

[caseq, 2016/08/10 18:28:47]

use a promise perhaps?

[alph, 2016/08/10 21:14:21]

Done.

+ */
+WebInspector.TimelinePanel.CustomCPUThrottlingRateDialog = function(callback)
+{
+    WebInspector.HBox.call(this, true);
+    this.registerRequiredCSS("ui_lazy/dialog.css");

[caseq, 2016/08/10 18:28:47]

can this be taken care of by Dialog?

[alph, 2016/08/10 21:14:21]

Looks like a separate CL.

+    this.contentElement.createChild("label").textContent = WebInspector.UIString("CPU Slowdown Rate: ");
+
+    this._input = this.contentElement.createChild("input");
+    this._input.setAttribute("type", "text");
+    this._input.style.width = "64px";
+    this._input.addEventListener("keydown", this._onKeyDown.bind(this), false);
+
+    var addButton = this.contentElement.createChild("button");
+    addButton.textContent = WebInspector.UIString("Set");
+    addButton.addEventListener("click", this._apply.bind(this), false);
+
+    this.setDefaultFocusedElement(this._input);
+    this._callback = callback;
+    this.contentElement.tabIndex = 0;
+}
+
+/**
+ * @param {function(string)} callback
+ * @param {!Element=} anchor
+ */
+WebInspector.TimelinePanel.CustomCPUThrottlingRateDialog.show = function(callback, anchor)
+{
+    var dialog = new WebInspector.Dialog();
+    var dialogContent = new WebInspector.TimelinePanel.CustomCPUThrottlingRateDialog(done);
+    dialogContent.show(dialog.element);
+    dialog.setWrapsContent(true);
+    if (anchor)
+        dialog.setPosition(anchor.totalOffsetLeft() - 32, anchor.totalOffsetTop() + anchor.offsetHeight);
+    dialog.show();
+
+    /**
+     * @param {string} value
+     */
+    function done(value)
+    {
+        dialog.detach();
+        callback(value);
+    }
+}
+
+WebInspector.TimelinePanel.CustomCPUThrottlingRateDialog.prototype = {
+    _apply: function()
+    {
+        this._callback(this._input.value);
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _onKeyDown: function(event)
+    {
+        if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Enter.code) {
+            event.preventDefault();
+            this._apply();
+        }
+    },
+
+    __proto__: WebInspector.HBox.prototype
+}