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..80a3fff91044250ba0e352eabbeff41748a12cb1 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,20 @@ 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');
+    if (emulateMediaExtension) {
+      var mediaSelect = UI.SettingsUI.settingExtensionToControl(emulateMediaExtension);
+      if (mediaSelect) {
+        var mediaRow = this.contentElement.createChild('span', 'media-row');
+        mediaRow.createChild('label').textContent = Common.UIString('Emulate CSS Media');
+        mediaRow.createChild('p').textContent =
+            Common.UIString('Forces media type for testing print and screen styles');
+        mediaRow.appendChild(mediaSelect);
+      }
+    }
 
     SDK.targetManager.observeModels(SDK.EmulationModel, this);
   }
@@ -86,15 +88,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);
   }
 
   /**