chrome-devtools-frontend 1.0.937775 → 1.0.939144

package/.stylelintrc.json

@@ -12,15 +12,6 @@
     "declaration-no-important": true,
     "color-named": "never",
     "max-empty-lines": 1,
-    "property-no-vendor-prefix": [
-      true,
-      {
-        "ignoreProperties": [
-          "border-image",
-          "/^mask-/"
-        ]
-      }
-    ],
     "selector-type-no-unknown": [
       true,
       {
@@ -28,6 +19,19 @@
           "/^devtools-/"
         ]
       }
-    ]
-  }
+    ],
+    "max-line-length": null,
+    "selector-class-pattern": null,
+    "keyframes-name-pattern": null,
+    "selector-no-vendor-prefix": null,
+    "property-no-vendor-prefix": null,
+    "value-no-vendor-prefix": null,
+    "media-feature-name-no-vendor-prefix": null
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts"],
+      "customSyntax": "html"
+    }
+  ]
 }

package/config/gni/all_devtools_files.gni

@@ -30,7 +30,6 @@ all_devtools_files = [
   "front_end/legacy_test_runner/bindings_test_runner/IsolatedFilesystemTestRunner.js",
   "front_end/legacy_test_runner/bindings_test_runner/OverridesTestRunner.js",
   "front_end/legacy_test_runner/bindings_test_runner/PersistenceTestRunner.js",
-  "front_end/panels/browser_debugger/module.json",
   "front_end/third_party/codemirror/codemirror.css",
   "front_end/legacy_test_runner/console_test_runner/console_test_runner.js",
   "front_end/legacy_test_runner/coverage_test_runner/coverage_test_runner.js",
@@ -43,7 +42,6 @@ all_devtools_files = [
   "front_end/legacy_test_runner/elements_test_runner/ElementsTestRunner.js",
   "front_end/legacy_test_runner/elements_test_runner/SetOuterHTMLTestRunner.js",
   "front_end/legacy_test_runner/elements_test_runner/StylesUpdateLinksTestRunner.js",
-  "front_end/panels/elements/module.json",
   "front_end/emulated_devices/module.json",
   "front_end/panels/emulation/deviceModeToolbar.css",
   "front_end/panels/emulation/deviceModeView.css",
@@ -73,7 +71,6 @@ all_devtools_files = [
   "front_end/ui/legacy/components/perf_ui/overviewGrid.css",
   "front_end/ui/legacy/components/perf_ui/timelineGrid.css",
   "front_end/ui/legacy/components/perf_ui/timelineOverviewInfo.css",
-  "front_end/panels/protocol_monitor/module.json",
   "front_end/legacy_test_runner/performance_test_runner/performance_test_runner.js",
   "front_end/legacy_test_runner/performance_test_runner/TimelineDataTestRunner.js",
   "front_end/legacy_test_runner/performance_test_runner/TimelineTestRunner.js",
@@ -136,7 +133,6 @@ all_devtools_files = [
   "front_end/models/issues_manager/descriptions/TwaDigitalAssetLinksFailed.md",
   "front_end/models/issues_manager/descriptions/TwaHttpError.md",
   "front_end/models/issues_manager/descriptions/TwaPageUnavailableOffline.md",
-  "front_end/panels/protocol_monitor/module.json",
   "front_end/panels/application/module.json",
   "front_end/panels/screencast/module.json",
   "front_end/legacy_test_runner/sdk_test_runner/sdk_test_runner.js",
@@ -158,7 +154,6 @@ all_devtools_files = [
   "front_end/legacy_test_runner/sources_test_runner/LiveEditTestRunner.js",
   "front_end/legacy_test_runner/sources_test_runner/SearchTestRunner.js",
   "front_end/legacy_test_runner/sources_test_runner/SourcesTestRunner.js",
-  "front_end/panels/sources/module.json",
   "front_end/ui/legacy/components/text_editor/autocompleteTooltip.css",
   "front_end/ui/legacy/components/text_editor/cmdevtools.css",
   "front_end/ui/legacy/components/text_editor/module.json",

package/config/gni/devtools_grd_files.gni

@@ -302,6 +302,7 @@ grd_files_release_sources = [
   "front_end/models/issues_manager/descriptions/cspTrustedTypesPolicyViolation.md",
   "front_end/models/issues_manager/descriptions/cspTrustedTypesSinkViolation.md",
   "front_end/models/issues_manager/descriptions/cspURLViolation.md",
+  "front_end/models/issues_manager/descriptions/deprecation.md",
   "front_end/models/issues_manager/descriptions/deprecationNavigatorUserAgent.md",
   "front_end/models/issues_manager/descriptions/genericCrossOriginPortalPostMessageError.md",
   "front_end/models/issues_manager/descriptions/heavyAd.md",
@@ -339,7 +340,6 @@ grd_files_release_sources = [
   "front_end/panels/browser_debugger/browser_debugger-legacy.js",
   "front_end/panels/browser_debugger/browser_debugger-meta.js",
   "front_end/panels/browser_debugger/browser_debugger.js",
-  "front_end/panels/browser_debugger/browser_debugger_module.js",
   "front_end/panels/changes/changes-legacy.js",
   "front_end/panels/changes/changes-meta.js",
   "front_end/panels/changes/changes.js",
@@ -360,7 +360,6 @@ grd_files_release_sources = [
   "front_end/panels/elements/elements-legacy.js",
   "front_end/panels/elements/elements-meta.js",
   "front_end/panels/elements/elements.js",
-  "front_end/panels/elements/elements_module.js",
   "front_end/panels/emulation/components/components.js",
   "front_end/panels/emulation/emulation-legacy.js",
   "front_end/panels/emulation/emulation-meta.js",
@@ -408,7 +407,6 @@ grd_files_release_sources = [
   "front_end/panels/profiler/profiler_module.js",
   "front_end/panels/protocol_monitor/protocol_monitor-meta.js",
   "front_end/panels/protocol_monitor/protocol_monitor.js",
-  "front_end/panels/protocol_monitor/protocol_monitor_module.js",
   "front_end/panels/screencast/screencast-meta.js",
   "front_end/panels/screencast/screencast.js",
   "front_end/panels/search/search-legacy.js",
@@ -432,7 +430,6 @@ grd_files_release_sources = [
   "front_end/panels/sources/sources-legacy.js",
   "front_end/panels/sources/sources-meta.js",
   "front_end/panels/sources/sources.js",
-  "front_end/panels/sources/sources_module.js",
   "front_end/panels/timeline/components/components.js",
   "front_end/panels/timeline/timeline-legacy.js",
   "front_end/panels/timeline/timeline-meta.js",
@@ -719,6 +716,7 @@ grd_files_debug_sources = [
   "front_end/models/issues_manager/ContrastCheckTrigger.js",
   "front_end/models/issues_manager/CorsIssue.js",
   "front_end/models/issues_manager/CrossOriginEmbedderPolicyIssue.js",
+  "front_end/models/issues_manager/DeprecationIssue.js",
   "front_end/models/issues_manager/GenericIssue.js",
   "front_end/models/issues_manager/HeavyAdIssue.js",
   "front_end/models/issues_manager/Issue.js",

package/front_end/Tests.js

@@ -1290,7 +1290,6 @@
 
   TestSuite.prototype.testInspectedElementIs = async function(nodeName) {
     this.takeControl();
-    await self.runtime.loadModulePromise('elements');
     if (!Elements.ElementsPanel.firstInspectElementNodeNameForTest) {
       await new Promise(f => this.addSniffer(Elements.ElementsPanel, 'firstInspectElementCompletedForTest', f));
     }
@@ -1332,8 +1331,8 @@
     const browserContextIds = [];
     const targetAgent = self.SDK.targetManager.mainTarget().targetAgent();
 
-    const target1 = await createIsolatedTarget(url);
-    const target2 = await createIsolatedTarget(url);
+    const target1 = await createIsolatedTarget(url, browserContextIds);
+    const target2 = await createIsolatedTarget(url, browserContextIds);
 
     const response = await targetAgent.invoke_getBrowserContexts();
     this.assertEquals(response.browserContextIds.length, 2);
@@ -1357,34 +1356,37 @@
     this.assertEquals(removedTargets.indexOf(target2) !== -1, true);
 
     this.releaseControl();
+  };
 
-    /**
-     * @param {string} url
-     * @return {!Promise<!SDK.Target>}
-     */
-    async function createIsolatedTarget(url) {
-      const {browserContextId} = await targetAgent.invoke_createBrowserContext();
-      browserContextIds.push(browserContextId);
+  /**
+   * @param {string} url
+   * @return {!Promise<!SDK.Target>}
+   */
+  async function createIsolatedTarget(url, opt_browserContextIds) {
+    const targetAgent = self.SDK.targetManager.mainTarget().targetAgent();
+    const {browserContextId} = await targetAgent.invoke_createBrowserContext();
+    if (opt_browserContextIds) {
+      opt_browserContextIds.push(browserContextId);
+    }
 
-      const {targetId} = await targetAgent.invoke_createTarget({url: 'about:blank', browserContextId});
-      await targetAgent.invoke_attachToTarget({targetId, flatten: true});
+    const {targetId} = await targetAgent.invoke_createTarget({url: 'about:blank', browserContextId});
+    await targetAgent.invoke_attachToTarget({targetId, flatten: true});
 
-      const target = self.SDK.targetManager.targets().find(target => target.id() === targetId);
-      const pageAgent = target.pageAgent();
-      await pageAgent.invoke_enable();
-      await pageAgent.invoke_navigate({url});
-      return target;
-    }
+    const target = self.SDK.targetManager.targets().find(target => target.id() === targetId);
+    const pageAgent = target.pageAgent();
+    await pageAgent.invoke_enable();
+    await pageAgent.invoke_navigate({url});
+    return target;
+  }
 
-    async function disposeBrowserContext(browserContextId) {
-      const targetAgent = self.SDK.targetManager.mainTarget().targetAgent();
-      await targetAgent.invoke_disposeBrowserContext({browserContextId});
-    }
+  async function disposeBrowserContext(browserContextId) {
+    const targetAgent = self.SDK.targetManager.mainTarget().targetAgent();
+    await targetAgent.invoke_disposeBrowserContext({browserContextId});
+  }
 
-    async function evalCode(target, code) {
-      return (await target.runtimeAgent().invoke_evaluate({expression: code})).result.value;
-    }
-  };
+  async function evalCode(target, code) {
+    return (await target.runtimeAgent().invoke_evaluate({expression: code})).result.value;
+  }
 
   TestSuite.prototype.testInputDispatchEventsToOOPIF = async function() {
     this.takeControl();
@@ -1392,14 +1394,12 @@
     await new Promise(callback => this._waitForTargets(2, callback));
 
     async function takeLogs(target) {
-      const code = `
+      return await evalCode(target, `
         (function() {
           var result = window.logs.join(' ');
           window.logs = [];
           return result;
-        })()
-      `;
-      return (await target.runtimeAgent().invoke_evaluate({expression: code})).result.value;
+        })()`);
     }
 
     let parentFrameOutput;

package/front_end/core/host/InspectorFrontendHost.ts

@@ -364,13 +364,7 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
 export let InspectorFrontendHostInstance: InspectorFrontendHostStub = window.InspectorFrontendHost;
 
 class InspectorFrontendAPIImpl {
-  readonly #debugFrontend: boolean;
-
   constructor() {
-    this.#debugFrontend = (Boolean(Root.Runtime.Runtime.queryParam('debugFrontend'))) ||
-        // @ts-ignore Compatibility hacks
-        (window['InspectorTest'] && window['InspectorTest']['debugTest']);
-
     for (const descriptor of EventDescriptors) {
       // @ts-ignore Dispatcher magic
       this[descriptor[1]] = this.dispatch.bind(this, descriptor[0], descriptor[2], descriptor[3]);
@@ -378,35 +372,27 @@ class InspectorFrontendAPIImpl {
   }
 
   private dispatch(name: symbol, signature: string[], runOnceLoaded: boolean, ...params: string[]): void {
-    if (this.#debugFrontend) {
-      setTimeout(() => innerDispatch(), 0);
-    } else {
-      innerDispatch();
-    }
-
-    function innerDispatch(): void {
-      // Single argument methods get dispatched with the param.
-      if (signature.length < 2) {
-        try {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          InspectorFrontendHostInstance.events.dispatchEventToListeners<any>(name, params[0]);
-        } catch (error) {
-          console.error(error + ' ' + error.stack);
-        }
-        return;
-      }
-      const data: {
-        [x: string]: string,
-      } = {};
-      for (let i = 0; i < signature.length; ++i) {
-        data[signature[i]] = params[i];
-      }
+    // Single argument methods get dispatched with the param.
+    if (signature.length < 2) {
       try {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        InspectorFrontendHostInstance.events.dispatchEventToListeners<any>(name, data);
+        InspectorFrontendHostInstance.events.dispatchEventToListeners<any>(name, params[0]);
       } catch (error) {
         console.error(error + ' ' + error.stack);
       }
+      return;
+    }
+    const data: {
+      [x: string]: string,
+    } = {};
+    for (let i = 0; i < signature.length; ++i) {
+      data[signature[i]] = params[i];
+    }
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      InspectorFrontendHostInstance.events.dispatchEventToListeners<any>(name, data);
+    } catch (error) {
+      console.error(error + ' ' + error.stack);
     }
   }
 

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -368,4 +368,5 @@ export enum EnumeratedHistogram {
   LinearMemoryInspectorTarget = 'DevTools.LinearMemoryInspector.Target',
   Language = 'DevTools.Language',
   ConsoleShowsCorsErrors = 'DevTools.ConsoleShowsCorsErrors',
+  SyncSetting = 'DevTools.SyncSetting',
 }

package/front_end/core/host/UserMetrics.ts

@@ -245,6 +245,22 @@ export class UserMetrics {
     InspectorFrontendHostInstance.recordEnumeratedHistogram(
         EnumeratedHistogram.ConsoleShowsCorsErrors, Number(show), 2);
   }
+
+  syncSetting(devtoolsSyncSettingEnabled: boolean): void {
+    const size = Object.keys(SyncSetting).length + 1;
+
+    InspectorFrontendHostInstance.getSyncInformation(syncInfo => {
+      let settingValue = SyncSetting.ChromeSyncDisabled;
+      if (syncInfo.isSyncActive && !syncInfo.arePreferencesSynced) {
+        settingValue = SyncSetting.ChromeSyncSettingsDisabled;
+      } else if (syncInfo.isSyncActive && syncInfo.arePreferencesSynced) {
+        settingValue = devtoolsSyncSettingEnabled ? SyncSetting.DevToolsSyncSettingEnabled :
+                                                    SyncSetting.DevToolsSyncSettingDisabled;
+      }
+
+      InspectorFrontendHostInstance.recordEnumeratedHistogram(EnumeratedHistogram.SyncSetting, settingValue, size);
+    });
+  }
 }
 
 // Codes below are used to collect UMA histograms in the Chromium port.
@@ -800,3 +816,12 @@ export const Language: Record<string, number> = {
   'zh-TW': 81,
   'zu': 82,
 };
+
+// TODO(crbug.com/1167717): Make this a const enum again
+// eslint-disable-next-line rulesdir/const_enum
+export enum SyncSetting {
+  ChromeSyncDisabled = 1,
+  ChromeSyncSettingsDisabled = 2,
+  DevToolsSyncSettingDisabled = 3,
+  DevToolsSyncSettingEnabled = 4,
+}

package/front_end/core/i18n/locales/en-US.json

@@ -935,6 +935,9 @@
   "entrypoints/inspector_main/RenderingOptions.ts | forcesCssColorgamutMediaFeature": {
     "message": "Forces CSS color-gamut media feature"
   },
+  "entrypoints/inspector_main/RenderingOptions.ts | forcesCssForcedColors": {
+    "message": "Forces CSS forced-colors media feature"
+  },
   "entrypoints/inspector_main/RenderingOptions.ts | forcesCssPreferscolorschemeMedia": {
     "message": "Forces CSS prefers-color-scheme media feature"
   },
@@ -9147,7 +9150,7 @@
     "message": "Coverage: n/a"
   },
   "panels/sources/CoveragePlugin.ts | coverageS": {
-    "message": "Coverage: {PH1} %"
+    "message": "Coverage: {PH1}"
   },
   "panels/sources/CoveragePlugin.ts | showDetails": {
     "message": "Show Details"

package/front_end/core/i18n/locales/en-XL.json

@@ -935,6 +935,9 @@
   "entrypoints/inspector_main/RenderingOptions.ts | forcesCssColorgamutMediaFeature": {
     "message": "F̂ór̂ćêś ĈŚŜ color-gamut ḿêd́îá f̂éât́ûŕê"
   },
+  "entrypoints/inspector_main/RenderingOptions.ts | forcesCssForcedColors": {
+    "message": "F̂ór̂ćêś ĈŚŜ f́ôŕĉéd̂-ćôĺôŕŝ ḿêd́îá f̂éât́ûŕê"
+  },
   "entrypoints/inspector_main/RenderingOptions.ts | forcesCssPreferscolorschemeMedia": {
     "message": "F̂ór̂ćêś ĈŚŜ prefers-color-scheme ḿêd́îá f̂éât́ûŕê"
   },
@@ -9147,7 +9150,7 @@
     "message": "Ĉóv̂ér̂áĝé: n̂/á"
   },
   "panels/sources/CoveragePlugin.ts | coverageS": {
-    "message": "Ĉóv̂ér̂áĝé: {PH1} %"
+    "message": "Ĉóv̂ér̂áĝé: {PH1}"
   },
   "panels/sources/CoveragePlugin.ts | showDetails": {
     "message": "Ŝh́ôẃ D̂ét̂áîĺŝ"

package/front_end/core/sdk/DOMModel.ts

@@ -159,7 +159,7 @@ export class DOMNode {
       this.childrenInternal = [];
     }
 
-    const frameOwnerTags = new Set(['EMBED', 'IFRAME', 'OBJECT', 'PORTAL']);
+    const frameOwnerTags = new Set(['EMBED', 'IFRAME', 'OBJECT', 'PORTAL', 'FENCEDFRAME']);
     if (payload.contentDocument) {
       this.contentDocumentInternal = new DOMDocument(this.#domModelInternal, payload.contentDocument);
       this.contentDocumentInternal.parentNode = this;

package/front_end/core/sdk/EmulationModel.ts

@@ -76,6 +76,8 @@ export class EmulationModel extends SDKModel<void> {
         Common.Settings.Settings.instance().moduleSetting<string>('emulatedCSSMediaFeatureColorGamut');
     const mediaFeaturePrefersColorSchemeSetting =
         Common.Settings.Settings.instance().moduleSetting<string>('emulatedCSSMediaFeaturePrefersColorScheme');
+    const mediaFeatureForcedColorsSetting =
+        Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeatureForcedColors');
     const mediaFeaturePrefersContrastSetting =
         Common.Settings.Settings.instance().moduleSetting<string>('emulatedCSSMediaFeaturePrefersContrast');
     const mediaFeaturePrefersReducedDataSetting =
@@ -90,6 +92,7 @@ export class EmulationModel extends SDKModel<void> {
       ['type', mediaTypeSetting.get()],
       ['color-gamut', mediaFeatureColorGamutSetting.get()],
       ['prefers-color-scheme', mediaFeaturePrefersColorSchemeSetting.get()],
+      ['forced-colors', mediaFeatureForcedColorsSetting.get()],
       ['prefers-contrast', mediaFeaturePrefersContrastSetting.get()],
       ['prefers-reduced-data', mediaFeaturePrefersReducedDataSetting.get()],
       ['prefers-reduced-motion', mediaFeaturePrefersReducedMotionSetting.get()],
@@ -106,6 +109,10 @@ export class EmulationModel extends SDKModel<void> {
       this.#mediaConfiguration.set('prefers-color-scheme', mediaFeaturePrefersColorSchemeSetting.get());
       this.updateCssMedia();
     });
+    mediaFeatureForcedColorsSetting.addChangeListener(() => {
+      this.#mediaConfiguration.set('forced-colors', mediaFeatureForcedColorsSetting.get());
+      this.updateCssMedia();
+    });
     mediaFeaturePrefersContrastSetting.addChangeListener(() => {
       this.#mediaConfiguration.set('prefers-contrast', mediaFeaturePrefersContrastSetting.get());
       this.updateCssMedia();
@@ -367,6 +374,10 @@ export class EmulationModel extends SDKModel<void> {
         name: 'prefers-color-scheme',
         value: this.#mediaConfiguration.get('prefers-color-scheme') ?? '',
       },
+      {
+        name: 'forced-colors',
+        value: this.#mediaConfiguration.get('forced-colors') ?? '',
+      },
       {
         name: 'prefers-contrast',
         value: this.#mediaConfiguration.get('prefers-contrast') ?? '',

package/front_end/core/sdk/NetworkManager.ts

@@ -552,6 +552,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
           timestamp,
           type: type || Protocol.Network.ResourceType.Other,
           response: redirectResponse,
+          hasExtraInfo: false,
           frameId,
         });
       }

package/front_end/core/sdk/sdk-meta.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as Common from '../common/common.js';
-
 import * as i18n from '../i18n/i18n.js';
+
 const UIStrings = {
   /**
   *@description Title of a setting under the Console category that can be invoked through the Command Menu
@@ -746,6 +746,35 @@ Common.Settings.registerSettingExtension({
   title: i18nLazyString(UIStrings.emulateCssMediaFeature, {PH1: 'prefers-color-scheme'}),
 });
 
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.RENDERING,
+  settingName: 'emulatedCSSMediaFeatureForcedColors',
+  settingType: Common.Settings.SettingType.ENUM,
+  storageType: Common.Settings.SettingStorageType.Session,
+  defaultValue: '',
+  options: [
+    {
+      title: i18nLazyString(UIStrings.doNotEmulateCss, {PH1: 'forced-colors'}),
+      text: i18nLazyString(UIStrings.noEmulation),
+      value: '',
+    },
+    {
+      title: i18nLazyString(UIStrings.emulateCss, {PH1: 'forced-colors: active'}),
+      text: i18n.i18n.lockedLazyString('forced-colors: active'),
+      value: 'active',
+    },
+    {
+      title: i18nLazyString(UIStrings.emulateCss, {PH1: 'forced-colors: none'}),
+      text: i18n.i18n.lockedLazyString('forced-colors: none'),
+      value: 'none',
+    },
+  ],
+  tags: [
+    i18nLazyString(UIStrings.query),
+  ],
+  title: i18nLazyString(UIStrings.emulateCssMediaFeature, {PH1: 'forced-colors'}),
+});
+
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.RENDERING,
   settingName: 'emulatedCSSMediaFeaturePrefersReducedMotion',

package/front_end/entrypoints/devtools_app/devtools_app.json

@@ -3,8 +3,6 @@
     { "name": "panels/emulation", "type": "autostart" },
 
     { "name": "panels/lighthouse" },
-    { "name": "panels/browser_debugger" },
-    { "name": "panels/elements" },
     { "name": "emulated_devices" },
     { "name": "panels/issues" },
     { "name": "panels/layers" },

package/front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -187,6 +187,10 @@ const UIStrings = {
   * page from loading images with the WebP format.
   */
   disableWebpImageFormat: 'Disable `WebP` image format',
+  /**
+   * @description Explanation text for the 'Forces CSS forced-colors' setting in the Rendering tool.
+   */
+  forcesCssForcedColors: 'Forces CSS forced-colors media feature',
 };
 const str_ = i18n.i18n.registerUIStrings('entrypoints/inspector_main/RenderingOptions.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -263,13 +267,16 @@ export class RenderingOptionsView extends UI.Widget.VBox {
         i18nString(UIStrings.forcesCssPreferscolorschemeMedia),
         Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeaturePrefersColorScheme'));
     this.appendSelect(
-        i18nString(UIStrings.forcesCssPrefersreducedmotion),
-        Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeaturePrefersReducedMotion'));
+        i18nString(UIStrings.forcesCssForcedColors),
+        Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeatureForcedColors'));
     if (supportsPrefersContrast()) {
       this.appendSelect(
           i18nString(UIStrings.forcesCssPreferscontrastMedia),
           Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeaturePrefersContrast'));
     }
+    this.appendSelect(
+        i18nString(UIStrings.forcesCssPrefersreducedmotion),
+        Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeaturePrefersReducedMotion'));
     if (supportsPrefersReducedData()) {
       this.appendSelect(
           i18nString(UIStrings.forcesCssPrefersreduceddataMedia),

package/front_end/entrypoints/inspector_main/renderingOptions.css

@@ -8,8 +8,8 @@
   padding: 12px;
 }
 
-[is=dt-checkbox] {
-  margin: 0 0 10px 0;
+[is="dt-checkbox"] {
+  margin: 0 0 10px;
   flex: none;
 }
 

package/front_end/entrypoints/main/MainImpl.ts

@@ -47,6 +47,7 @@ import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Snippets from '../../panels/snippets/snippets.js';
 import * as Timeline from '../../panels/timeline/timeline.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -147,6 +148,9 @@ export class MainImpl {
     console.timeStamp('Main._gotPreferences');
     this.createSettings(prefs);
     await this.requestAndRegisterLocaleData();
+
+    Host.userMetrics.syncSetting(Common.Settings.Settings.instance().moduleSetting<boolean>('sync_preferences').get());
+
     this.createAppUI();
   }
 
@@ -873,6 +877,16 @@ export class MainMenuItem implements UI.Toolbar.Provider {
       if (location !== 'drawer-view' && location !== 'panel') {
         continue;
       }
+
+      if (viewExtension.isPreviewFeature()) {
+        const previewIcon = new IconButton.Icon.Icon();
+        previewIcon.data = {iconName: 'ic_preview_feature', color: 'var(--icon-color)', width: '14px', height: '14px'};
+        moreTools.defaultSection().appendItem(title, () => {
+          UI.ViewManager.ViewManager.instance().showView(id, true, false);
+        }, /* disabled=*/ false, previewIcon);
+        continue;
+      }
+
       moreTools.defaultSection().appendItem(title, () => {
         UI.ViewManager.ViewManager.instance().showView(id, true, false);
       });

package/front_end/entrypoints/main/main-meta.ts

@@ -237,8 +237,6 @@ async function loadMainModule(): Promise<typeof Main> {
 
 async function loadInspectorMainModule(): Promise<typeof InspectorMain> {
   if (!loadedInspectorMainModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('entrypoints/inspector_main');
     loadedInspectorMainModule = await import('../inspector_main/inspector_main.js');
   }
   return loadedInspectorMainModule;

package/front_end/entrypoints/node_app/node_app-meta.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 // eslint-disable-next-line rulesdir/es_modules_import
@@ -27,8 +26,6 @@ let loadedSourcesModule: (typeof Sources|undefined);
 
 async function loadHelpModule(): Promise<typeof Sources> {
   if (!loadedSourcesModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('sources');
     loadedSourcesModule = await import('../../panels/sources/sources.js');
   }
   return loadedSourcesModule;

package/front_end/entrypoints/node_app/node_app.js

@@ -7,4 +7,7 @@ import '../node_main/node_main-meta.js';
 import './node_app-meta.js';
 import * as Startup from '../startup/startup.js';  // eslint-disable-line rulesdir/es_modules_import
 
+// Side-effect start the `node_main` module, which implements runnables in
+// the NodeMain class
+await import('../node_main/node_main.js');
 Startup.RuntimeInstantiator.startApplication('node_app');

package/front_end/entrypoints/node_main/nodeConnectionsPanel.css

@@ -13,7 +13,7 @@
   flex: none;
   max-width: 600px;
   max-height: 202px;
-  margin: 20px 0 5px 0;
+  margin: 20px 0 5px;
 }
 
 .network-discovery-list-empty {
@@ -25,7 +25,7 @@
 }
 
 .network-discovery-list-item {
-  padding: 3px 5px 3px 5px;
+  padding: 3px 5px;
   height: 30px;
   display: flex;
   align-items: center;

package/front_end/entrypoints/shell/shell.json

@@ -6,8 +6,6 @@
     { "name": "ui/legacy/components/source_frame", "type": "autostart" },
 
     { "name": "ui/legacy/components/perf_ui" },
-    { "name": "panels/profiler" },
-    { "name": "panels/protocol_monitor"},
-    { "name": "panels/sources" }
+    { "name": "panels/profiler" }
   ]
 }

package/front_end/entrypoints/worker_app/worker_app.json

@@ -1,7 +1,5 @@
 {
   "modules" : [
-    { "name": "panels/browser_debugger" },
-    { "name": "panels/elements" },
     { "name": "panels/issues" },
     { "name": "panels/layer_viewer" },
     { "name": "panels/network" },