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 521a8a804c6730f84f6b71f691e28b6fa0beaaf7..af9498d63179b6ad9c8c1ea937ca1539113062fa 100644
--- a/third_party/WebKit/Source/devtools/front_end/main/RenderingOptions.js
+++ b/third_party/WebKit/Source/devtools/front_end/main/RenderingOptions.js
@@ -59,6 +59,8 @@ Main.RenderingOptionsView = class extends UI.VBox {
     this._mediaCheckbox = checkboxLabel.checkboxElement;
     this._mediaCheckbox.addEventListener('click', this._mediaToggled.bind(this), false);
     this.contentElement.appendChild(checkboxLabel);
+    this._emulateCSSMediaSetting = Common.moduleSetting('emulateCSSMedia');
+    this._emulateCSSMediaSetting.addChangeListener(this._emulateCSSMediaSettingChanged, this);
 
     var mediaRow = this.contentElement.createChild('div', 'media-row');
     this._mediaSelect = mediaRow.createChild('select', 'chrome-select');
@@ -95,12 +97,21 @@ Main.RenderingOptionsView = class extends UI.VBox {
    * @param {!SDK.Target} target
    */
   targetAdded(target) {
-    if (this._mediaCheckbox.checked && target.hasBrowserCapability())
+    if (this._emulateCSSMediaSetting.get() !== 'none' && target.hasBrowserCapability())

[pfeldman, 2017/04/27 21:46:18]

Can we replace checkbox + combobox with the setting-driven combo that has a
"none" option? Would remove all the code below..

[luoe, 2017/05/09 02:58:27]

Done.

       this._applyPrintMediaOverride(target);
   }
 
   _mediaToggled() {
-    this._mediaSelect.disabled = !this._mediaCheckbox.checked;
+    this._emulateCSSMediaSetting.set(this._mediaCheckbox.checked ? this._mediaSelect.value : 'none');
+  }
+
+  _emulateCSSMediaSettingChanged() {
+    var mediaValue = this._emulateCSSMediaSetting.get();
+    var noEmulation = mediaValue === 'none';
+    if (!noEmulation)
+      this._mediaSelect.value = mediaValue;
+    this._mediaSelect.disabled = noEmulation;
+    this._mediaCheckbox.checked = !noEmulation;
     var targets = SDK.targetManager.targets(SDK.Target.Capability.Browser);
     for (var target of targets)
       this._applyPrintMediaOverride(target);
@@ -110,7 +121,8 @@ Main.RenderingOptionsView = class extends UI.VBox {
    * @param {!SDK.Target} target
    */
   _applyPrintMediaOverride(target) {
-    target.emulationAgent().setEmulatedMedia(this._mediaCheckbox.checked ? this._mediaSelect.value : '');
+    var mediaValue = this._emulateCSSMediaSetting.get() === 'none' ? '' : this._emulateCSSMediaSetting.get();
+    target.emulationAgent().setEmulatedMedia(mediaValue);
     var cssModel = target.model(SDK.CSSModel);
     if (cssModel)
       cssModel.mediaQueryResultChanged();