Liu Song’s Projects

diff --git a/front_end/panels/emulation/BUILD.gn b/front_end/panels/emulation/BUILD.gn
index 06f1374959c783ac16be90b8259c3f2a3b7ae257..20a07a421abf82b8dc929115cdf1ab178b7e1edf 100644
--- a/front_end/panels/emulation/BUILD.gn
+++ b/front_end/panels/emulation/BUILD.gn
@@ -63,6 +63,7 @@
   visibility = [
     ":*",
     "../../../test/unittests/front_end/entrypoints/missing_entrypoints/*",
+    "../../../test/unittests/front_end/panels/emulation/*",
     "../../../test/unittests/front_end/panels/settings/emulation/*",
     "../../entrypoints/*",
 




diff --git a/front_end/panels/emulation/DeviceModeView.ts b/front_end/panels/emulation/DeviceModeView.ts
index e84fb1c5aa69080848a3299e24cc444f4d9d99ac..57a2d2079ba35102264cb345dd89d4dbddabfc64 100644
--- a/front_end/panels/emulation/DeviceModeView.ts
+++ b/front_end/panels/emulation/DeviceModeView.ts
@@ -103,9 +103,11 @@     this.registerRequiredCSS(deviceModeViewStyles);
 
     this.model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
     this.model.addEventListener(EmulationModel.DeviceModeModel.Events.Updated, this.updateUI, this);
-    this.mediaInspector =
+    this.mediaInspector = new MediaQueryInspector(
+  private presetBlocks!: HTMLElement[];
 import * as Platform from '../../core/platform/platform.js';
 
+  private cachedOutlineRect?: EmulationModel.DeviceModeModel.Rect;
     this.showMediaInspectorSetting = Common.Settings.Settings.instance().moduleSetting('showMediaQueryInspector');
     this.showMediaInspectorSetting.addChangeListener(this.updateUI, this);
     this.showRulersSetting = Common.Settings.Settings.instance().moduleSetting('emulation.showRulers');




diff --git a/front_end/panels/emulation/MediaQueryInspector.ts b/front_end/panels/emulation/MediaQueryInspector.ts
index 96acfb0477e57cbf9fa41d45c111938e77291286..645eefa8ef78233cfa4c62c6546d89940fe73043 100644
--- a/front_end/panels/emulation/MediaQueryInspector.ts
+++ b/front_end/panels/emulation/MediaQueryInspector.ts
@@ -32,13 +32,16 @@   elementsToCSSLocations: WeakMap;
   private cssModel?: SDK.CSSModel.CSSModel;
   private cachedQueryModels?: MediaQueryUIModel[];
 
+  constructor(
 // found in the LICENSE file.
-// Use of this source code is governed by a BSD-style license that can be
+    this.contentElement.addEventListener('click', this.onMediaQueryClicked.bind(this), false);
+      mediaThrottler: Common.Throttler.Throttler) {
     super(true);
     this.registerRequiredCSS(mediaQueryInspectorStyles);
     this.contentElement.classList.add('media-inspector-view');
     this.contentElement.addEventListener('click', this.onMediaQueryClicked.bind(this), false);
     this.contentElement.addEventListener('contextmenu', this.onContextMenu.bind(this), false);
+// found in the LICENSE file.
     this.mediaThrottler = new Common.Throttler.Throttler(0);
 
     this.getWidthCallback = getWidthCallback;
@@ -55,7 +58,7 @@   }
 
   modelAdded(cssModel: SDK.CSSModel.CSSModel): void {
     // FIXME: adapt this to multiple targets.
-    if (this.cssModel) {
+    if (cssModel.target() !== SDK.TargetManager.TargetManager.instance().mainFrameTarget()) {
       return;
     }
     this.cssModel = cssModel;




diff --git a/test/unittests/front_end/BUILD.gn b/test/unittests/front_end/BUILD.gn
index 7cf46b8a312be5d725ee531cede1e8bae4ad1483..b5ed21421eaa69792ee26f859bdef1fe09b3c17e 100644
--- a/test/unittests/front_end/BUILD.gn
+++ b/test/unittests/front_end/BUILD.gn
@@ -41,6 +41,7 @@     "panels/console",
     "panels/coverage",
     "panels/css_overview",
     "panels/elements",
+    "panels/emulation",
     "panels/issues",
     "panels/layers",
     "panels/lighthouse",




diff --git a/test/unittests/front_end/panels/emulation/BUILD.gn b/test/unittests/front_end/panels/emulation/BUILD.gn
new file mode 100644
index 0000000000000000000000000000000000000000..35d22608128c3bd9e6846bc9f2afdfe1fed2d6c4
--- /dev/null
+++ b/test/unittests/front_end/panels/emulation/BUILD.gn
@@ -0,0 +1,15 @@
+# Copyright 2022 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+import("../../../../../third_party/typescript/typescript.gni")
+
+ts_library("emulation") {
+  testonly = true
+  sources = [ "MediaQueryInspector_test.ts" ]
+
+  deps = [
+    "../../../../../front_end/panels/emulation:bundle",
+    "../../helpers",
+  ]
+}




diff --git a/test/unittests/front_end/panels/emulation/MediaQueryInspector_test.ts b/test/unittests/front_end/panels/emulation/MediaQueryInspector_test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8a0726267f2cb96ef14fd7aef32a07be4d6ea385
--- /dev/null
+++ b/test/unittests/front_end/panels/emulation/MediaQueryInspector_test.ts
@@ -0,0 +1,68 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../../../../front_end/core/common/common.js';
+import {assertNotNullOrUndefined} from '../../../../../front_end/core/platform/platform.js';
+import * as SDK from '../../../../../front_end/core/sdk/sdk.js';
+import * as Protocol from '../../../../../front_end/generated/protocol.js';
+import * as Emulation from '../../../../../front_end/panels/emulation/emulation.js';
+import {createTarget} from '../../helpers/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../helpers/MockConnection.js';
+
+describeWithMockConnection('MediaQueryInspector', () => {
+  const tests = (targetFactory: () => SDK.Target.Target) => {
+    let target: SDK.Target.Target;
+    let throttler: Common.Throttler.Throttler;
+    let onScheduled: () => void;
+    let inspector: Emulation.MediaQueryInspector.MediaQueryInspector;
+
+    beforeEach(() => {
+      target = targetFactory();
+      throttler = new Common.Throttler.Throttler(0);
+      onScheduled = () => {};
+      sinon.stub(throttler, 'schedule').callsFake(async (work: () => (Promise<unknown>), _?: boolean) => {
+        await work();
+        onScheduled();
+        return Promise.resolve();
+      });
+    });
+
+    afterEach(() => {
+      inspector.detach();
+    });
+
+    it('redners media queries', async () => {
+      inspector = new Emulation.MediaQueryInspector.MediaQueryInspector(
+          () => 42,
+          (_: number) => {},
+          throttler,
+      );
+      inspector.markAsRoot();
+      inspector.show(document.body);
+      assert.strictEqual(inspector.contentElement.querySelectorAll('.media-inspector-marker').length, 0);
+
+      const cssModel = target.model(SDK.CSSModel.CSSModel);
+      assertNotNullOrUndefined(cssModel);
+      const CSS_MEDIA = {
+        text: 'foo',
+        source: Protocol.CSS.CSSMediaSource.MediaRule,
+        mediaList: [{expressions: [{value: 42, computedLength: 42, unit: 'UNIT', feature: 'max-width'}], active: true}],
+      } as unknown as Protocol.CSS.CSSMedia;
+      sinon.stub(cssModel, 'getMediaQueries').resolves([new SDK.CSSMedia.CSSMedia(cssModel, CSS_MEDIA)]);
+      cssModel.dispatchEventToListeners(
+          SDK.CSSModel.Events.StyleSheetAdded, {} as SDK.CSSStyleSheetHeader.CSSStyleSheetHeader);
+      await new Promise<void>(resolve => {
+        onScheduled = resolve;
+      });
+      assert.strictEqual(inspector.contentElement.querySelectorAll('.media-inspector-marker').length, 1);
+    });
+  };
+
+  describe('without tab target', () => tests(createTarget));
+  describe('with tab target', () => tests(() => {
+                                const tabTarget = createTarget({type: SDK.Target.Type.Tab});
+                                createTarget({parentTarget: tabTarget, subtype: 'prerender'});
+                                return createTarget({parentTarget: tabTarget});
+                              }));
+});