DevTools: add rendering overlay options to command menu

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

 /*
  * Copyright (C) 2013 Google 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.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 41 matching lines @@
         Common.UIString(
             'Highlights elements (teal) that can slow down scrolling, including touch & wheel event handlers and other main-thread scrolling situations.'),
         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);
+    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');
     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;
 
     SDK.targetManager.observeTargets(this);
   }
@@ skipping 16 matching lines @@
     var checkboxLabel = UI.CheckboxLabel.create(label, false, subtitle);
     UI.SettingsUI.bindCheckbox(checkboxLabel.checkboxElement, setting);
     this.contentElement.appendChild(checkboxLabel);
   }
 
   /**
    * @override
    * @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);
   }
 
   /**
    * @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();
   }
 
   /**
    * @override
    * @param {!SDK.Target} target
    */
   targetRemoved(target) {
   }
 };