DevTools: add rendering overlay options to command menu

third_party/WebKit/Source/devtools/front_end/main/RenderingOptions.js

Index: third_party/WebKit/Source/devtools/front_end/main/RenderingOptions.js
diff --git a/third_party/WebKit/Source/devtools/front_end/main/RenderingOptions.js b/third_party/WebKit/Source/devtools/front_end/main/RenderingOptions.js
index f3e8102c3f24e11a95910e6f06ab9c27d83494f9..2190bc681462cd968d40def2c1b9f2cac8c57b39 100644
--- a/third_party/WebKit/Source/devtools/front_end/main/RenderingOptions.js
+++ b/third_party/WebKit/Source/devtools/front_end/main/RenderingOptions.js
@@ -54,18 +54,17 @@ Main.RenderingOptionsView = class extends UI.VBox {
         Common.moduleSetting('showScrollBottleneckRects'));
     this.contentElement.createChild('div').classList.add('panel-section-separator');
 
-    var cssMediaSubtitle = Common.UIString('Forces media type for testing print and screen styles');
-    var checkboxLabel = UI.CheckboxLabel.create(Common.UIString('Emulate CSS Media'), false, cssMediaSubtitle);
-    this._mediaCheckbox = checkboxLabel.checkboxElement;
-    this._mediaCheckbox.addEventListener('click', this._mediaToggled.bind(this), false);
-    this.contentElement.appendChild(checkboxLabel);
-
-    var mediaRow = this.contentElement.createChild('div', 'media-row');
-    this._mediaSelect = mediaRow.createChild('select', 'chrome-select');
-    this._mediaSelect.appendChild(new Option(Common.UIString('print'), 'print'));
-    this._mediaSelect.appendChild(new Option(Common.UIString('screen'), 'screen'));
-    this._mediaSelect.addEventListener('change', this._mediaToggled.bind(this), false);
-    this._mediaSelect.disabled = true;
+    this._mediaSetting = Common.moduleSetting('emulateCSSMedia');
+    this._mediaSetting.addChangeListener(this._mediaChanged.bind(this));
+    var emulateMediaExtension = self.runtime.extensions('setting').find(
+        extension => extension.descriptor()['settingName'] === 'emulateCSSMedia' && !!extension.descriptor().options);
+    if (emulateMediaExtension) {
+      var mediaOptions = emulateMediaExtension.descriptor().options;

[pfeldman, 2017/05/10 20:55:19]

I'm seeing the same code in SettingsScreen.js - can we have something that
creates the setting based on the id or description in SettingsUI?

[luoe, 2017/05/11 21:40:02]

We can do a settingExtensionToControl that holds common control builder logic.

+      var mediaSelect = UI.SettingsUI.createSettingSelect(
+          Common.UIString('Emulate CSS Media'), mediaOptions, this._mediaSetting,
+          Common.UIString('Forces media type for testing print and screen styles'));
+      this.contentElement.createChild('div', 'media-row').appendChild(mediaSelect);
+    }
 
     SDK.targetManager.observeModels(SDK.EmulationModel, this);
   }
@@ -86,15 +85,14 @@ Main.RenderingOptionsView = class extends UI.VBox {
    * @param {!SDK.EmulationModel} emulationModel
    */
   modelAdded(emulationModel) {
-    if (this._mediaCheckbox.checked)
-      emulationModel.emulateCSSMedia(this._mediaSelect.value);
+    var mediaValue = this._mediaSetting.get() === 'none' ? null : this._mediaSetting.get();
+    emulationModel.emulateCSSMedia(mediaValue);
   }
 
-  _mediaToggled() {
-    this._mediaSelect.disabled = !this._mediaCheckbox.checked;
-    var media = this._mediaCheckbox.checked ? this._mediaSelect.value : null;
+  _mediaChanged() {
+    var mediaValue = this._mediaSetting.get() === 'none' ? null : this._mediaSetting.get();
     for (var emulationModel of SDK.targetManager.models(SDK.EmulationModel))
-      emulationModel.emulateCSSMedia(media);
+      emulationModel.emulateCSSMedia(mediaValue);
   }
 
   /**