DevTools: Add custom CPU throttling option to timeline.

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

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 388 matching lines @@
         this._captureFilmStripSetting.addChangeListener(this._onModeChanged, this);
 
         this._panelToolbar.appendSeparator();
         var garbageCollectButton = new WebInspector.ToolbarButton(WebInspector.UIString("Collect garbage"), "garbage-collect-toolbar-item");
         garbageCollectButton.addEventListener("click", this._garbageCollectButtonClicked, this);
         this._panelToolbar.appendToolbarItem(garbageCollectButton);
 
         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()
     {
         console.assert(this._state === WebInspector.TimelinePanel.State.Idle);
         this._setState(WebInspector.TimelinePanel.State.Loading);
     },
 
     _createFileSelector: function()
     {
         if (this._fileSelectorElement)
             this._fileSelectorElement.remove();
@@ skipping 113 matching lines @@
     _onNetworkChanged: function()
     {
         if (this._flameChart)
             this._flameChart.enableNetworkPane(this._captureNetworkSetting.get(), true);
     },
 
     _onCPUThrottlingChanged: function()
     {
         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();
+        }
     },
 
     /**
      * @param {boolean} enabled
      */
     _setUIControlsEnabled: function(enabled)
     {
         /**
          * @param {!WebInspector.ToolbarButton} toolbarButton
          */
@@ skipping 1443 matching lines @@
      * @override
      * @param {!WebInspector.Target} target
      */
     targetRemoved: function(target)
     {
         this._targets.remove(target, true);
     },
 
     __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
+}