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 36 matching lines @@
         Common.UIString('FPS Meter'),
         Common.UIString('Plots frames per second, frame rate distribution, and GPU memory'),
         Common.moduleSetting('showFPSCounter'));
     this._appendCheckbox(
         Common.UIString('Scrolling Performance Issues'),
         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);
-
-    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);
   }
 
   /**
    * @param {string} label
    * @param {string} subtitle
    * @param {!Common.Setting} setting
    */
   _appendCheckbox(label, subtitle, setting) {
     var checkboxLabel = UI.CheckboxLabel.create(label, false, subtitle);
     UI.SettingsUI.bindCheckbox(checkboxLabel.checkboxElement, setting);
     this.contentElement.appendChild(checkboxLabel);
   }
 
   /**
    * @override
    * @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);
   }
 
   /**
    * @override
    * @param {!SDK.EmulationModel} emulationModel
    */
   modelRemoved(emulationModel) {
   }
 };