[DevTools] Enable emulating CSS media features

This patch adds support for emulating CSS media features in general.
For now, explicit presets are added for `prefers-color-scheme: light`
(useful when the developer has enabled dark mode at the OS level) and
`prefers-color-scheme: dark` (useful when the developer has enabled
light mode at the OS level), as well as `prefers-reduced-motion:
reduce`.

The new UI is available in the Rendering drawer. The new settings are
also accessible through the Command Menu.

As Chrome implements support for additional CSS media features in the
future, we can expand the current UI accordingly using the same
mechanism introduced by this CL.

CSS media features:
https://drafts.csswg.org/mediaqueries-5/#mf-user-preferences

Boring but useful demo/test page:
https://mathiasbynens.be/demo/css-media

Design doc: https://goo.gle/devtools-dark-mode

Bug: chromium:1004246
Change-Id: I7dd067ea1659c6f27872c4f7a5464896618d1663
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1832206Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Mathias Bynens <mathias@chromium.org>
Cr-Commit-Position: refs/heads/master@{#701688}

third_party/blink/renderer/devtools/front_end/inspector_main/RenderingOptions.js

@@ -62,12 +62,14 @@ InspectorMain.RenderingOptionsView = class extends UI.VBox {
             Common.moduleSetting('showHitTestBorders'));
         this.contentElement.createChild('div').classList.add('panel-section-separator');
 
-        const mediaSetting = Common.moduleSetting('emulatedCSSMedia');
-        const selectSubtitle = ls`Forces media type for testing print and screen styles`;
-        const mediaSelect = UI.SettingsUI.createControlForSetting(mediaSetting, selectSubtitle);
-        if (mediaSelect) {
-          this.contentElement.appendChild(mediaSelect);
-        }
+        this._appendSelect(
+            ls`Forces media type for testing print and screen styles`, Common.moduleSetting('emulatedCSSMedia'));
+        this._appendSelect(
+            ls`Forces CSS prefers-color-scheme media feature`,
+            Common.moduleSetting('emulatedCSSMediaFeaturePrefersColorScheme'));
+        this._appendSelect(
+            ls`Forces CSS prefers-reduced-motion media feature`,
+            Common.moduleSetting('emulatedCSSMediaFeaturePrefersReducedMotion'));
   }
 
   /**
@@ -80,4 +82,15 @@ InspectorMain.RenderingOptionsView = class extends UI.VBox {
     UI.SettingsUI.bindCheckbox(checkboxLabel.checkboxElement, setting);
     this.contentElement.appendChild(checkboxLabel);
   }
+
+  /**
+   * @param {string} label
+   * @param {!Common.Setting} setting
+   */
+  _appendSelect(label, setting) {
+    const control = UI.SettingsUI.createControlForSetting(setting, label);
+    if (control) {
+      this.contentElement.appendChild(control);
+    }
+  }
 };

third_party/blink/renderer/devtools/front_end/inspector_main/inspector_main_strings.grdp

@@ -36,6 +36,12 @@
   <message name="IDS_DEVTOOLS_53f2f05226edcd77bd4351cb27d07ba8" desc="Text in Rendering Options">
     Highlights frames (red) detected to be ads.
   </message>
+  <message name="IDS_DEVTOOLS_5b67348d29677cd12d3e02b7e1d7cc87" desc="Subtitle for a select box under the Rendering drawer">
+    Forces CSS prefers-reduced-motion media feature
+  </message>
+  <message name="IDS_DEVTOOLS_616e08b00feb46b7abdca3c6190f63ac" desc="Subtitle for a select box under the Rendering drawer">
+    Forces CSS prefers-color-scheme media feature
+  </message>
   <message name="IDS_DEVTOOLS_6526f858ca97d80241dacb00b40504bb" desc="Checkbox subtitle for 'Hit-test borders' in the Rendering tool">
     Shows borders around hit-test regions.
   </message>
@@ -84,4 +90,4 @@
   <message name="IDS_DEVTOOLS_f23c9ba06e7123f0b4c906de90fbcc9f" desc="Title of a setting under the DevTools category that can be invoked through the Command Menu">
     Auto-open <ph name="LOCKED_1">DevTools</ph> for popups
   </message>
-</grit-part>
\ No newline at end of file
+</grit-part>

third_party/blink/renderer/devtools/front_end/inspector_main/renderingOptions.css

@@ -5,17 +5,21 @@
  */
 
 :host {
-    padding: 12px;
+  padding: 12px;
  }
 
 [is=dt-checkbox] {
-    margin: 0px 0px 10px 0px;
-    flex: none;
+  margin: 0 0 10px 0;
+  flex: none;
 }
 
 .panel-section-separator {
-    height: 1px;
-    margin-bottom: 10px;
-    background: #f0f0f0;
-    flex: none;
+  height: 1px;
+  margin-bottom: 10px;
+  background: #f0f0f0;
+  flex: none;
+}
+
+.chrome-select-label {
+  margin-bottom: 16px;
 }

third_party/blink/renderer/devtools/front_end/sdk/EmulationModel.js

@@ -24,11 +24,31 @@ SDK.EmulationModel = class extends SDK.SDKModel {
       this._emulationAgent.setScriptExecutionDisabled(true);
     }
 
-    const mediaSetting = Common.moduleSetting('emulatedCSSMedia');
-    mediaSetting.addChangeListener(() => this._emulateCSSMedia(mediaSetting.get()));
-    if (mediaSetting.get()) {
-      this._emulateCSSMedia(mediaSetting.get());
-    }
+    const mediaTypeSetting = Common.moduleSetting('emulatedCSSMedia');
+    const mediaFeaturePrefersColorSchemeSetting = Common.moduleSetting('emulatedCSSMediaFeaturePrefersColorScheme');
+    const mediaFeaturePrefersReducedMotionSetting = Common.moduleSetting('emulatedCSSMediaFeaturePrefersReducedMotion');
+    // Note: this uses a different format than what the CDP API expects,
+    // because we want to update these values per media type/feature
+    // without having to search the `features` array (inefficient) or
+    // hardcoding the indices (not readable/maintainable).
+    this._mediaConfiguration = new Map([
+      ['type', mediaTypeSetting.get()],
+      ['prefers-color-scheme', mediaFeaturePrefersColorSchemeSetting.get()],
+      ['prefers-reduced-motion', mediaFeaturePrefersReducedMotionSetting.get()],
+    ]);
+    mediaTypeSetting.addChangeListener(() => {
+      this._mediaConfiguration.set('type', mediaTypeSetting.get());
+      this._updateCssMedia();
+    });
+    mediaFeaturePrefersColorSchemeSetting.addChangeListener(() => {
+      this._mediaConfiguration.set('prefers-color-scheme', mediaFeaturePrefersColorSchemeSetting.get());
+      this._updateCssMedia();
+    });
+    mediaFeaturePrefersReducedMotionSetting.addChangeListener(() => {
+      this._mediaConfiguration.set('prefers-reduced-motion', mediaFeaturePrefersReducedMotionSetting.get());
+      this._updateCssMedia();
+    });
+    this._updateCssMedia();
 
     this._touchEnabled = false;
     this._touchMobile = false;
@@ -99,10 +119,11 @@ SDK.EmulationModel = class extends SDK.SDKModel {
   }
 
   /**
-   * @param {string} media
+   * @param {string} type
+   * @param {!Array<{name: string, value: string}>} features
    */
-  _emulateCSSMedia(media) {
-    this._emulationAgent.setEmulatedMedia(media);
+  _emulateCSSMedia(type, features) {
+    this._emulationAgent.setEmulatedMedia(type, features);
     if (this._cssModel) {
       this._cssModel.mediaQueryResultChanged();
     }
@@ -158,6 +179,22 @@ SDK.EmulationModel = class extends SDK.SDKModel {
     this._emulationAgent.setTouchEmulationEnabled(configuration.enabled, 1);
     this._emulationAgent.setEmitTouchEventsForMouse(configuration.enabled, configuration.configuration);
   }
+
+  _updateCssMedia() {
+    // See the note above, where this._mediaConfiguration is defined.
+    const type = this._mediaConfiguration.get('type');
+    const features = [
+      {
+        name: 'prefers-color-scheme',
+        value: this._mediaConfiguration.get('prefers-color-scheme'),
+      },
+      {
+        name: 'prefers-reduced-motion',
+        value: this._mediaConfiguration.get('prefers-reduced-motion'),
+      },
+    ];
+    this._emulateCSSMedia(type, features);
+  }
 };
 
 SDK.SDKModel.register(SDK.EmulationModel, SDK.Target.Capability.Emulation, true);

third_party/blink/renderer/devtools/front_end/sdk/module.json

@@ -265,7 +265,56 @@
                 }
             ],
             "tags": "query",
-            "title": "Emulate CSS media"
+            "title": "Emulate CSS media type"
+        },
+        {
+            "type": "setting",
+            "category": "Rendering",
+            "settingName": "emulatedCSSMediaFeaturePrefersColorScheme",
+            "settingType": "enum",
+            "storageType": "session",
+            "defaultValue": "no-preference",
+            "options": [
+                {
+                    "title": "Do not emulate CSS prefers-color-scheme",
+                    "text": "No emulation",
+                    "value": "no-preference"
+                },
+                {
+                    "title": "Emulate CSS prefers-color-scheme: light",
+                    "text": "prefers-color-scheme: light",
+                    "value": "light"
+                },
+                {
+                  "title": "Emulate CSS prefers-color-scheme: dark",
+                  "text": "prefers-color-scheme: dark",
+                  "value": "dark"
+                }
+            ],
+            "tags": "query",
+            "title": "Emulate CSS media feature prefers-color-scheme"
+        },
+        {
+          "type": "setting",
+          "category": "Rendering",
+          "settingName": "emulatedCSSMediaFeaturePrefersReducedMotion",
+          "settingType": "enum",
+          "storageType": "session",
+          "defaultValue": "no-preference",
+          "options": [
+              {
+                  "title": "Do not emulate CSS prefers-reduced-motion",
+                  "text": "No emulation",
+                  "value": "no-preference"
+              },
+              {
+                  "title": "Emulate CSS prefers-reduced-motion: reduce",
+                  "text": "prefers-reduced-motion: reduce",
+                  "value": "reduce"
+              }
+          ],
+          "tags": "query",
+          "title": "Emulate CSS media feature prefers-reduced-motion"
         },
         {
             "type": "setting",

third_party/blink/renderer/devtools/front_end/sdk/sdk_strings.grdp

@@ -15,12 +15,18 @@
   <message name="IDS_DEVTOOLS_0b4e8f2008c602c781fee001c917dbf9" desc="Tooltip to explain why a cookie was blocked">
     This set-cookie had invalid syntax.
   </message>
+  <message name="IDS_DEVTOOLS_0d66520dddd8718f59f517582fafaebb" desc="Title of a media query that can be emulated via the Rendering drawer">
+    prefers-color-scheme: light
+  </message>
   <message name="IDS_DEVTOOLS_0fe1f9158e2f164da1332501f9e65702" desc="Text in Console Model">
     Navigated to <ph name="EVENT_DATA_URL">$1s<ex>https://example.com</ex></ph>
   </message>
   <message name="IDS_DEVTOOLS_1023bf87beb1d2947824df00fa0898ad" desc="Title of a setting under the Debugger category in Settings">
     Disable async stack traces
   </message>
+  <message name="IDS_DEVTOOLS_10bdea5cc4e1689c7db90eb7bf7f45c0" desc="Title of a setting under the Rendering drawer">
+    Emulate CSS media type
+  </message>
   <message name="IDS_DEVTOOLS_185bf49541541933dc3fd1fb89d3fea3" desc="Title of a setting under the Console category in Settings">
     Enable custom formatters
   </message>
@@ -45,6 +51,9 @@
   <message name="IDS_DEVTOOLS_23e8e5daea7e9dc939ae4298a6f74e36" desc="Text in Server Timing">
     ServerTiming: <ph name="MSG">$1s<ex>Extraneous trailing characters.</ex></ph>
   </message>
+  <message name="IDS_DEVTOOLS_242dd6b02f1ff7db7cbba7f7226abb4a" desc="Title of a setting under the Rendering drawer that can be invoked through the Command Menu">
+    Do not emulate CSS prefers-color-scheme
+  </message>
   <message name="IDS_DEVTOOLS_25121e2acd3c495847c5592661c2a2f9" desc="Tooltip to explain why a cookie was blocked">
     This set-cookie&apos;s Domain attribute was invalid with regards to the current host url.
   </message>
@@ -60,6 +69,12 @@
   <message name="IDS_DEVTOOLS_2cc895b2288b4709e1620a1510322de0" desc="Tooltip to explain why a cookie was blocked">
     This cookie was not sent due to user preferences.
   </message>
+  <message name="IDS_DEVTOOLS_5e53467e9b005376370c28e92b42b6f5" desc="Title of a setting under the Rendering drawer that can be invoked through the Command Menu">
+    Emulate CSS prefers-reduced-motion: reduce
+  </message>
+  <message name="IDS_DEVTOOLS_685c645cb0cb322c5b9989eb12bada19" desc="Title of a setting under the Rendering drawer that can be invoked through the Command Menu">
+    Emulate CSS media feature prefers-color-scheme
+  </message>
   <message name="IDS_DEVTOOLS_3034e08ec0b14678ddb50284eef02ee4" desc="Title of a setting under the Console category that can be invoked through the Command Menu">
     Do not preserve log upon navigation
   </message>
@@ -96,6 +111,9 @@
   <message name="IDS_DEVTOOLS_40dba446b661ae69dea3a8e026f76dfd" desc="Title of a setting under the Rendering category that can be invoked through the Command Menu">
     Hide paint flashing rectangles
   </message>
+  <message name="IDS_DEVTOOLS_41b61424daffc7d27c709bdd4f1ad0ec" desc="Title of a setting under the Rendering drawer that can be invoked through the Command Menu">
+    Emulate CSS prefers-color-scheme: dark
+  </message>
   <message name="IDS_DEVTOOLS_4249b3308a0ed3e1e90e0a91ca11cf21" desc="Text in the Event Listener Breakpoints Panel of the JavaScript Debugger in the Sources Panel">
     WebGL Error Fired
   </message>
@@ -204,9 +222,6 @@
   <message name="IDS_DEVTOOLS_83f2229658949472d34f78e19475fcdd" desc="Title of a setting under the Rendering category that can be invoked through the Command Menu">
     Show layer borders
   </message>
-  <message name="IDS_DEVTOOLS_869a8b1ed99306604574dca474a13994" desc="Title for emulatedCSSMedia setting">
-    Emulate CSS media
-  </message>
   <message name="IDS_DEVTOOLS_9028784c589c0c809700c7fbc66a5d96" desc="Text in Network Manager">
     Resource interpreted as <ph name="NETWORKREQUEST_RESOURCETYPE___TITLE__">$1s<ex>application</ex></ph> but transferred with MIME type <ph name="NETWORKREQUEST_MIMETYPE">$2s<ex>image</ex></ph>: &quot;<ph name="NETWORKREQUEST_URL__">$3s<ex>https://example.com</ex></ph>&quot;.
   </message>
@@ -276,6 +291,12 @@
   <message name="IDS_DEVTOOLS_ba50636875d999db0c9218b48b23027d" desc="Title of a setting under the Debugger category that can be invoked through the Command Menu">
     Do not capture async stack traces
   </message>
+  <message name="IDS_DEVTOOLS_be06029749b376cc5dec53b60a0cf135" desc="Title of a media query that can be emulated via the Rendering drawer">
+    prefers-reduced-motion: reduce
+  </message>
+  <message name="IDS_DEVTOOLS_beff15b1acf49b84bf1080cceb920ebf" desc="Title of a media query that can be emulated via the Rendering drawer">
+    prefers-color-scheme: dark
+  </message>
   <message name="IDS_DEVTOOLS_c432f4e5fdec5760a2f06b38f646168e" desc="Text in Console Model">
     Profile &apos;<ph name="DATA_TITLE">$1s<ex>title</ex></ph>&apos; started.
   </message>
@@ -291,6 +312,12 @@
   <message name="IDS_DEVTOOLS_ccab918ce9f085b521a52ac13f653c0b" desc="Tooltip to explain why a cookie was blocked">
     An unknown error was encountered when trying to send this cookie.
   </message>
+  <message name="IDS_DEVTOOLS_cdb227ce6e015a5e5570e286ccd8866c" desc="Title of a setting under the Rendering drawer">
+    Emulate CSS media feature prefers-reduced-motion
+  </message>
+  <message name="IDS_DEVTOOLS_ceb19b7234304452f0c748bac8ba3fb8" desc="Title of a setting under the Rendering drawer that can be invoked through the Command Menu">
+    Do not emulate CSS prefers-reduced-motion
+  </message>
   <message name="IDS_DEVTOOLS_cedab6b9e4e794e93bba797e8aff218a" desc="Message in Network Manager">
     <ph name="NETWORKREQUEST_RESOURCETYPE___TITLE__">$1s<ex>XHR</ex></ph> finished loading: <ph name="NETWORKREQUEST_REQUESTMETHOD">$2s<ex>GET</ex></ph> &quot;<ph name="NETWORKREQUEST_URL__">$3s<ex>https://example.com</ex></ph>&quot;.
   </message>
@@ -324,6 +351,9 @@
   <message name="IDS_DEVTOOLS_e69d85cd1acdf030f0cede48b61d7720" desc="Title of a setting under the Rendering category that can be invoked through the Command Menu">
     Hide scroll performance bottlenecks
   </message>
+  <message name="IDS_DEVTOOLS_e8e741c8bebb2da4dc93e5f9c1cecd8c" desc="Title of a setting under the Rendering drawer that can be invoked through the Command Menu">
+    Emulate CSS prefers-color-scheme: light
+  </message>
   <message name="IDS_DEVTOOLS_edb020d2175281d94054136e09a3e132" desc="Title of a setting under the Debugger category that can be invoked through the Command Menu">
     Do not pause on exceptions
   </message>