chrome-devtools-frontend 1.0.981537 → 1.0.995491

package/front_end/ui/legacy/components/perf_ui/LineLevelProfile.ts

@@ -6,8 +6,11 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Bindings from '../../../../models/bindings/bindings.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
 import * as SourceFrame from '../source_frame/source_frame.js';
+import type * as Platform from '../../../../core/platform/platform.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 
+// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
+
 let performanceInstance: Performance;
 
 export class Performance {
@@ -78,7 +81,7 @@ export class Performance {
       if (!node) {
         continue;
       }
-      const scriptIdOrUrl = node.scriptId || node.url;
+      const scriptIdOrUrl = Number(node.scriptId) || node.url;
       if (!scriptIdOrUrl) {
         continue;
       }
@@ -122,7 +125,7 @@ export class Memory {
       if (!node.selfSize) {
         return;
       }
-      const script = Number(node.callFrame.scriptId) || node.callFrame.url;
+      const script = Number(node.callFrame.scriptId) || node.callFrame.url as Platform.DevToolsPath.UrlString;
       if (!script) {
         return;
       }
@@ -136,7 +139,7 @@ export class Helper {
   private readonly type: string;
   private readonly locationPool: Bindings.LiveLocation.LiveLocationPool;
   private updateTimer: number|null;
-  private lineData!: Map<SDK.Target.Target|null, Map<string|number, Map<number, number>>>;
+  private lineData!: Map<SDK.Target.Target|null, Map<Platform.DevToolsPath.UrlString|number, Map<number, number>>>;
 
   constructor(type: string) {
     this.type = type;
@@ -151,7 +154,9 @@ export class Helper {
     this.scheduleUpdate();
   }
 
-  addLineData(target: SDK.Target.Target|null, scriptIdOrUrl: string|number, line: number, data: number): void {
+  addLineData(
+      target: SDK.Target.Target|null, scriptIdOrUrl: Platform.DevToolsPath.UrlString|number, line: number,
+      data: number): void {
     let targetData = this.lineData.get(target);
     if (!targetData) {
       targetData = new Map();
@@ -181,13 +186,9 @@ export class Helper {
     const decorationsBySource = new Map<Workspace.UISourceCode.UISourceCode, Map<number, number>>();
     const pending: Promise<void>[] = [];
 
-    for (const targetToScript of this.lineData) {
-      const target = (targetToScript[0] as SDK.Target.Target | null);
+    for (const [target, scriptToLineMap] of this.lineData) {
       const debuggerModel = target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
-      const scriptToLineMap = (targetToScript[1] as Map<string|number, Map<number, number>>);
-      for (const scriptToLine of scriptToLineMap) {
-        const scriptIdOrUrl = (scriptToLine[0] as string | number);
-        const lineToDataMap = (scriptToLine[1] as Map<number, number>);
+      for (const [scriptIdOrUrl, lineToDataMap] of scriptToLineMap) {
         // debuggerModel is null when the profile is loaded from file.
         // Try to get UISourceCode by the URL in this case.
         const workspace = Workspace.Workspace.WorkspaceImpl.instance();

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -444,7 +444,13 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
         this.rawContent = deferredContent.error;
       } else {
         content = deferredContent.content;
-        this.rawContent = deferredContent.isEncoded ? window.atob(deferredContent.content) : deferredContent.content;
+        if (deferredContent.isEncoded) {
+          const view = new DataView(Common.Base64.decode(deferredContent.content));
+          const decoder = new TextDecoder();
+          this.rawContent = decoder.decode(view, {stream: true});
+        } else {
+          this.rawContent = deferredContent.content;
+        }
       }
 
       progressIndicator.setWorked(1);

package/front_end/ui/legacy/components/utils/ImagePreview.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
+
 import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
@@ -52,7 +54,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export interface PrecomputedFeatures {
   renderedWidth: number;
   renderedHeight: number;
-  currentSrc?: string;
+  currentSrc?: Platform.DevToolsPath.UrlString;
 }
 
 function isImageResource(resource: SDK.Resource.Resource|null): boolean {
@@ -60,17 +62,18 @@ function isImageResource(resource: SDK.Resource.Resource|null): boolean {
 }
 
 export class ImagePreview {
-  static async build(target: SDK.Target.Target, originalImageURL: string, showDimensions: boolean, options: {
-    precomputedFeatures: (PrecomputedFeatures|undefined),
-    imageAltText: (string|undefined),
-  }|undefined = {precomputedFeatures: undefined, imageAltText: undefined}): Promise<Element|null> {
+  static async build(
+      target: SDK.Target.Target, originalImageURL: Platform.DevToolsPath.UrlString, showDimensions: boolean, options: {
+        precomputedFeatures: (PrecomputedFeatures|undefined),
+        imageAltText: (string|undefined),
+      }|undefined = {precomputedFeatures: undefined, imageAltText: undefined}): Promise<Element|null> {
     const {precomputedFeatures, imageAltText} = options;
     const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
     if (!resourceTreeModel) {
       return null;
     }
     let resource = resourceTreeModel.resourceForURL(originalImageURL);
-    let imageURL: string = originalImageURL;
+    let imageURL = originalImageURL;
     if (!isImageResource(resource) && precomputedFeatures && precomputedFeatures.currentSrc) {
       imageURL = precomputedFeatures.currentSrc;
       resource = resourceTreeModel.resourceForURL(imageURL);
@@ -113,7 +116,8 @@ export class ImagePreview {
 
         // Open image in new tab.
         link.addEventListener('click', () => {
-          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(imageURL);
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+              imageURL as Platform.DevToolsPath.UrlString);
         });
 
         const intrinsicWidth = imageElement.naturalWidth;
@@ -158,7 +162,8 @@ export class ImagePreview {
              HTMLLinkElement);
         sourceLink.textContent = sourceText;
         sourceLink.addEventListener('click', () => {
-          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(imageURL);
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+              imageURL as Platform.DevToolsPath.UrlString);
         });
         resolve(shadowBoundary);
       }
@@ -183,7 +188,11 @@ export class ImagePreview {
     return featuresObject;
 
     function features(this: HTMLImageElement): PrecomputedFeatures {
-      return {renderedWidth: this.width, renderedHeight: this.height, currentSrc: this.currentSrc};
+      return {
+        renderedWidth: this.width,
+        renderedHeight: this.height,
+        currentSrc: this.currentSrc as Platform.DevToolsPath.UrlString,
+      };
     }
   }
 

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -28,9 +28,12 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+// TODO(crbug.com/1253323): Casts to UrlString will be removed from this file when migration to branded types is complete.
+
 import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
+import type * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Bindings from '../../../../models/bindings/bindings.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
@@ -497,7 +500,7 @@ export class Linkifier implements SDK.TargetManager.Observer {
       return element;
     }
 
-    let linkText = text || Bindings.ResourceUtils.displayNameForURL(url);
+    let linkText = text || Bindings.ResourceUtils.displayNameForURL(url as Platform.DevToolsPath.UrlString);
     if (typeof lineNumber === 'number' && !text) {
       linkText += ':' + (lineNumber + 1);
       if (showColumnNumber && typeof columnNumber === 'number') {
@@ -712,12 +715,13 @@ export class Linkifier implements SDK.TargetManager.Observer {
       url = uiLocation.uiSourceCode.contentURL();
     } else if (info.url) {
       url = info.url;
-      const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url) ||
+      const uiSourceCode =
+          Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url as Platform.DevToolsPath.UrlString) ||
           Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(
-              Common.ParsedURL.ParsedURL.urlWithoutHash(url));
+              Common.ParsedURL.ParsedURL.urlWithoutHash(url) as Platform.DevToolsPath.UrlString);
       uiLocation = uiSourceCode ? uiSourceCode.uiLocation(info.lineNumber || 0, info.columnNumber || 0) : null;
     }
-    const resource = url ? Bindings.ResourceUtils.resourceForURL(url) : null;
+    const resource = url ? Bindings.ResourceUtils.resourceForURL(url as Platform.DevToolsPath.UrlString) : null;
     const contentProvider = uiLocation ? uiLocation.uiSourceCode : resource;
 
     const revealable = info.revealable || uiLocation || resource;
@@ -752,7 +756,8 @@ export class Linkifier implements SDK.TargetManager.Observer {
       result.push({
         section: 'reveal',
         title: UI.UIUtils.openLinkExternallyLabel(),
-        handler: (): void => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url),
+        handler: (): void => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+            url as Platform.DevToolsPath.UrlString),
       });
       result.push({
         section: 'clipboard',
@@ -916,7 +921,9 @@ export class ContentProviderContextMenuProvider implements UI.ContextMenu.Provid
     contextMenu.revealSection().appendItem(
         UI.UIUtils.openLinkExternallyLabel(),
         () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-            contentUrl.endsWith(':formatted') ? contentUrl.slice(0, contentUrl.lastIndexOf(':')) : contentUrl));
+            contentUrl.endsWith(':formatted') ?
+                Common.ParsedURL.ParsedURL.slice(contentUrl, 0, contentUrl.lastIndexOf(':')) :
+                contentUrl));
     for (const title of linkHandlers.keys()) {
       const handler = linkHandlers.get(title);
       if (!handler) {

package/front_end/ui/legacy/reportView.css

@@ -33,6 +33,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  user-select: text;
 }
 
 .report-url,

package/front_end/ui/legacy/splitWidget.css

@@ -35,7 +35,7 @@
   display: flex;
   position: relative;
   flex-direction: column;
-  contain: layout size style;
+  contain: size style;
 }
 
 .shadow-split-widget-sidebar {

package/front_end/ui/legacy/tabbedPane.css

@@ -98,6 +98,7 @@
   pointer-events: none;
   margin-left: 0;
   position: relative;
+  cursor: default;
 }
 
 .tabbed-pane-header-contents > * {
@@ -334,6 +335,7 @@
   align-items: center;
   justify-content: center;
   margin-left: 3px;
+  flex-shrink: 0;
 }
 
 .-theme-with-dark-background .preview-icon,

package/front_end/ui/legacy/themeColors.css

@@ -269,7 +269,7 @@
   --color-input-text-disabled: rgba(128 134 139 / 70%);
   /* Colors for styling buttons */
   --color-button-outline-focus: rgb(138 180 248 / 75%);
-  --color-button-primary-background-hovering: rgb(128 167 229 / 100%);
+  --color-button-primary-background-hovering: rgb(174 203 250 / 100%);
   --color-button-primary-background-pressed: rgb(210 227 252 / 100%);
   --color-button-primary-text: rgb(0 0 0);
   --color-button-secondary-background-hovering: rgb(138 180 248 / 15%);

package/front_end/ui/legacy/toolbar.css

@@ -167,7 +167,7 @@ be fixed to the right so it never goes out of the viewport even if other items
 push it. And the main menu button next to it that needs to make some space for
 it. */
 .toolbar-button.close-devtools {
-  position: fixed;
+  position: absolute;
   right: 0;
 }
 
@@ -208,6 +208,22 @@ it. */
   --icon-color: var(--color-primary);
 }
 
+.toolbar-state-on.toolbar-toggle-with-dot .toolbar-icon::after,
+.toolbar-state-on.toolbar-toggle-with-dot .toolbar-text::after {
+  content: "";
+  position: absolute;
+  bottom: 2px;
+  background-color: var(--color-primary);
+  width: 4.5px;
+  height: 4.5px;
+  border: 2px solid var(--override-toolbar-background-color, --color-background);
+  border-radius: 50%;
+}
+
+.toolbar-state-on.toolbar-toggle-with-dot .toolbar-text::after {
+  right: 0;
+}
+
 .toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph,
 .toolbar-button.toolbar-state-off.toolbar-default-with-red-color .toolbar-glyph {
   background-color: var(--color-accent-red) !important; /* stylelint-disable-line declaration-no-important */

package/front_end/ui/legacy/utils/focus-changed.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Platform from '../../../core/platform/platform.js';
+
 // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function WidgetfocusWidgetForNode(node: Node|null): void {
@@ -50,7 +52,7 @@ function XWidgetfocusWidgetForNode(node: Node|null): void {
 export function focusChanged(event: Event): void {
   const target = event.target as HTMLElement;
   const document = target ? target.ownerDocument : null;
-  const element = document ? document.deepActiveElement() : null;
+  const element = document ? Platform.DOMUtilities.deepActiveElement(document) : null;
   WidgetfocusWidgetForNode(element);
   XWidgetfocusWidgetForNode(element);
 }

package/inspector_overlay/.eslintrc.js

@@ -38,6 +38,15 @@ module.exports = {
           'selector': 'parameter',
           'format': ['camelCase'],
           'leadingUnderscore': 'allow',
+        },
+        {
+          // Ignore type properties that require quotes
+          'selector': [
+            'typeProperty',
+            'enumMember'
+          ],
+          'format': null,
+          'modifiers': ['requiresQuotes']
         }
       ]
     }

package/package.json

@@ -28,31 +28,31 @@
     "build": "autoninja -C out/Default",
     "build-release": "autoninja -C out/Release",
     "check": "npm run check-lint && npm run check-loc",
-    "check-external-links": "third_party/node/node.py --output scripts/check_external_links.js",
-    "check-lint": "third_party/node/node.py --output scripts/test/run_lint_check_js.mjs && third_party/node/node.py --output scripts/test/run_lint_check_css.js",
-    "check-lint-css": "third_party/node/node.py --output scripts/test/run_lint_check_css.js",
-    "collect-strings": "third_party/node/node.py --output third_party/i18n/collect-strings.js front_end",
-    "components-server": "third_party/node/node.py --output scripts/component_server/server.js",
+    "check-external-links": "vpython third_party/node/node.py --output scripts/check_external_links.js",
+    "check-lint": "vpython third_party/node/node.py --output scripts/test/run_lint_check_js.mjs && vpython third_party/node/node.py --output scripts/test/run_lint_check_css.js",
+    "check-lint-css": "vpython third_party/node/node.py --output scripts/test/run_lint_check_css.js",
+    "collect-strings": "vpython third_party/node/node.py --output third_party/i18n/collect-strings.js front_end",
+    "components-server": "vpython third_party/node/node.py --output scripts/component_server/server.js",
     "debug-e2etest": "DEBUG_TEST=1 npm run e2etest",
     "debug-interactionstest": "DEBUG_TEST=1 npm run interactionstest",
-    "debug-test": "third_party/node/node.py --output scripts/npm_test.js --debug-devtools",
+    "debug-test": "vpython third_party/node/node.py --output scripts/npm_test.js --debug-devtools",
     "debug-unittest": "DEBUG_TEST=1 npm run unittest",
-    "e2etest": "third_party/node/node.py --output scripts/test/run_test_suite.js --config=test/e2e/test-runner-config.json",
-    "eslint-test": "third_party/node/node.py --output node_modules/mocha/bin/mocha \"./scripts/eslint_rules/tests/*_test.js\"",
-    "build-test": "third_party/node/node.py --output node_modules/mocha/bin/mocha \"./scripts/build/tests/*_test.js\"",
-    "generate-dark-mode-styles": "third_party/node/node.py --output scripts/dark_mode/generate_dark_theme_sheet.js",
+    "e2etest": "vpython third_party/node/node.py --output scripts/test/run_test_suite.js --config=test/e2e/test-runner-config.json",
+    "eslint-test": "vpython third_party/node/node.py --output node_modules/mocha/bin/mocha \"./scripts/eslint_rules/tests/*_test.js\"",
+    "build-test": "vpython third_party/node/node.py --output node_modules/mocha/bin/mocha \"./scripts/build/tests/*_test.js\"",
+    "generate-dark-mode-styles": "vpython third_party/node/node.py --output scripts/dark_mode/generate_dark_theme_sheet.js",
     "generate-protocol-resources": "scripts/deps/generate_protocol_resources.py && git cl format --js",
     "install-deps": "scripts/deps/manage_node_deps.py",
-    "interactionstest": "third_party/node/node.py --output scripts/test/run_test_suite.js --config=test/interactions/test-runner-config.json",
-    "perf": "third_party/node/node.py --output scripts/test/run_test_suite.js --config=test/perf/test-runner-config.json",
+    "interactionstest": "vpython third_party/node/node.py --output scripts/test/run_test_suite.js --config=test/interactions/test-runner-config.json",
+    "perf": "vpython third_party/node/node.py --output scripts/test/run_test_suite.js --config=test/perf/test-runner-config.json",
     "setup-dtrun": "cd scripts/devtools_run && npm link",
     "start": "node -e 'console.log(`This script has been removed in favor of --custom-devtools-frontend. For more information, see https://docs.google.com/document/d/1COgCBWWuTh2o-Zbp6h_z0h0LtlJaimaEDsION4RZPxc/edit?usp=sharing`);'",
-    "stylelint-test": "third_party/node/node.py --output ./node_modules/.bin/mocha \"./scripts/stylelint_rules/tests/*_test.js\"",
-    "test": "third_party/node/node.py --output scripts/npm_test.js",
-    "test-local": "third_party/node/node.py --output scripts/npm_test.js --layout-tests-directory=test/webtests/",
+    "stylelint-test": "vpython third_party/node/node.py --output ./node_modules/.bin/mocha \"./scripts/stylelint_rules/tests/*_test.js\"",
+    "test": "vpython third_party/node/node.py --output scripts/npm_test.js",
+    "test-local": "vpython third_party/node/node.py --output scripts/npm_test.js --layout-tests-directory=test/webtests/",
     "ts_library-test": "./third_party/typescript/tests/verify_ts_libary.sh",
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
-    "watch": "third_party/node/node.py --output scripts/watch_build.js"
+    "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.981537"
+  "version": "1.0.995491"
 }

package/scripts/eslint_rules/lib/check_component_naming.js

@@ -54,6 +54,10 @@ module.exports = {
           return false;
         }
 
+        if (!node.expression.callee) {
+          return false;
+        }
+
         if (node.expression.callee.property) {
           // matches ComponentHelpers.CustomElements.defineComponent()
           return node.expression.callee.property.name === 'defineComponent';

package/scripts/eslint_rules/lib/es_modules_import.js

@@ -94,6 +94,7 @@ function checkStarImport(context, node, importPath, importPathForErrorMessage, i
     // Therefore, they are allowed to import using a same-namespace star-import.
     const importingFileIsEntrypoint =
         importingFileName.endsWith('-entrypoint.ts') || importingFileName.endsWith('-meta.ts');
+
     if (!importingFileIsEntrypoint) {
       context.report({
         node,
@@ -211,6 +212,11 @@ module.exports = {
                */
               return;
             }
+
+            if (importPath.endsWith('.css.js')) {
+              // We allow files to import CSS files within the same module.
+              return;
+            }
             context.report({
               node,
               message:

package/scripts/eslint_rules/lib/inject_checkbox_styles.js

@@ -0,0 +1,121 @@
+// Copyright 2020 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.
+'use strict';
+
+const {isLitHtmlTemplateCall} = require('./utils.js');
+const path = require('path');
+
+const FRONT_END_DIRECTORY = path.join(__dirname, '..', '..', '..', 'front_end');
+
+// NOTE: the actual file is input.ts, but for the sake of importing we want
+// input.js as that's what the import statement would reference.
+const COMMON_INPUT_STYLES = path.join(FRONT_END_DIRECTORY, 'ui', 'components', 'input', 'input.js');
+
+module.exports = {
+  meta: {
+    type: 'problem',
+
+    docs: {
+      description: 'Ensure common checkbox styles are imported in Lit components',
+      category: 'Possible Errors',
+    },
+    fixable: 'code',
+    messages: {
+      missingCheckboxStylesImport:
+          'When rendering a checkbox, ensure the common checkbox styles are imported from components/input/input.ts.',
+      missingCheckboxStylesAdoption:
+          'When rendering a checkbox, ensure the common checkbox styles are adopted into the component shadow root.',
+    },
+    schema: []  // no options
+  },
+  create: function(context) {
+    let foundInputStylesImport = false;
+    let inputStylesImportedName = null;
+    let adoptedStyleSheetsCallNode = null;
+    const litCheckboxElements = new Set();
+    return {
+      TaggedTemplateExpression(node) {
+        if (!isLitHtmlTemplateCall(node)) {
+          return;
+        }
+
+        const litNodesContainingCheckbox = node.quasi.quasis.filter(element => {
+          return element.value.raw.includes('type="checkbox"');
+        });
+        for (const node of litNodesContainingCheckbox) {
+          // We store the node so we can use it as the basis for the ESLint error later.
+          litCheckboxElements.add(node);
+        }
+      },
+
+      ImportDeclaration(node) {
+        if (foundInputStylesImport) {
+          return;
+        }
+
+        // Get the absolute path , so we can compare it to COMMON_INPUT_STYLES;
+        const fullImportPath = path.resolve(context.getFilename(), node.source.value);
+        foundInputStylesImport = fullImportPath === COMMON_INPUT_STYLES;
+        if (foundInputStylesImport) {
+          inputStylesImportedName = node.specifiers[0].local.name;
+        }
+      },
+
+      'AssignmentExpression[left.type="MemberExpression"][left.property.name="adoptedStyleSheets"]'(node) {
+        adoptedStyleSheetsCallNode = node;
+      },
+
+      'Program:exit'() {
+        if (litCheckboxElements.size === 0) {
+          // No checkboxes to check, so we are done.
+          return;
+        }
+        if (!foundInputStylesImport) {
+          for (const checkbox of litCheckboxElements) {
+            context.report({
+              node: checkbox,
+              messageId: 'missingCheckboxStylesImport',
+            });
+          }
+          return;
+        }
+
+        if (!adoptedStyleSheetsCallNode) {
+          for (const checkbox of litCheckboxElements) {
+            context.report({
+              node: checkbox,
+              messageId: 'missingCheckboxStylesAdoption',
+            });
+          }
+          return;
+        }
+
+        const inputCheckboxStylesAdoptionReference = adoptedStyleSheetsCallNode.right.elements.find(elem => {
+          // Ensure we find [Input.checkboxStyles] in the adopted stylesheets.
+          if (elem.type !== 'MemberExpression') {
+            return false;
+          }
+
+          // Check that if we imported the styles as `Input`, that the reference here matches.
+          if (elem.object.name !== inputStylesImportedName) {
+            return false;
+          }
+
+          if (elem.property.name !== 'checkboxStyles') {
+            return false;
+          }
+
+          return true;
+        });
+
+        if (!inputCheckboxStylesAdoptionReference) {
+          context.report({
+            node: adoptedStyleSheetsCallNode,
+            messageId: 'missingCheckboxStylesAdoption',
+          });
+        }
+      }
+    };
+  }
+};

package/scripts/eslint_rules/tests/es_modules_import_test.js

@@ -124,6 +124,10 @@ ruleTester.run('es_modules_import', rule, {
       code: 'import * as FrontendHelpers from \'../../../test/unittests/front_end/helpers/EnvironmentHelpers.js\'',
       filename: 'front_end/ui/components/docs/data_grid/basic.ts',
     },
+    {
+      code: 'import checkboxStyles from \'./checkbox.css.js\';',
+      filename: 'front_end/ui/components/input/input.ts',
+    }
   ],
 
   invalid: [
@@ -248,5 +252,13 @@ ruleTester.run('es_modules_import', rule, {
             'Incorrect cross-namespace import: "../third_party/marked/package/lib/marked.esm.js". Use "import * as Namespace from \'../namespace/namespace.js\';" instead. If the third_party dependency does not expose a single entrypoint, update es_modules_import.js to make it exempt.'
       }],
     },
+    {
+      code: 'import checkboxStyles from \'../../../input/checkbox.css.js\';',
+      filename: 'front_end/ui/panels/foo/FooPanel.ts',
+      errors: [{
+        message:
+            'Incorrect cross-namespace import: "../../../input/checkbox.css.js". Use "import * as Namespace from \'../namespace/namespace.js\';" instead.'
+      }],
+    }
   ]
 });