chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/inspector_overlay/testing/InspectorOverlayHelpers.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {type AreaBounds, type Bounds} from '../common.js';
+import type {AreaBounds, Bounds} from '../common.js';
 import {
   type CanvasSize,
   drawGridAreaNames,

package/inspector_overlay/tool_highlight.ts

@@ -37,31 +37,27 @@ import {
 } from '../front_end/core/common/ColorUtils.js';
 
 import {
+  type Bounds,
   constrainNumber,
   createChild,
   createElement,
   createTextChild,
   ellipsify,
   Overlay,
-  type Bounds,
   type PathCommands,
   type ResetData,
 } from './common.js';
-
 import {drawPath, emptyBounds, formatColor, formatRgba, type PathBounds} from './highlight_common.js';
-
+import {type ContainerQueryHighlight, drawContainerQueryHighlight} from './highlight_container_query.js';
 import {
   drawLayoutFlexContainerHighlight,
   drawLayoutFlexItemHighlight,
   type FlexContainerHighlight,
   type FlexItemHighlight,
 } from './highlight_flex_common.js';
-
 import {drawLayoutGridHighlight, type GridHighlight} from './highlight_grid_common.js';
-import {type ScrollSnapHighlight} from './highlight_scroll_snap.js';
-
-import {drawContainerQueryHighlight, type ContainerQueryHighlight} from './highlight_container_query.js';
-import {type IsolatedElementHighlight} from './highlight_isolated_element.js';
+import type {IsolatedElementHighlight} from './highlight_isolated_element.js';
+import type {ScrollSnapHighlight} from './highlight_scroll_snap.js';
 import {PersistentOverlay} from './tool_persistent.js';
 
 type ColorRgba = [number, number, number, number];

package/package.json

@@ -53,7 +53,7 @@
     "@types/karma-chai-sinon": "0.1.20",
     "@types/marked": "4.0.1",
     "@types/mocha": "9.0.0",
-    "@types/node": "18.11.9",
+    "@types/node": "20.11.0",
     "@types/rimraf": "3.0.2",
     "@types/sinon": "17.0.3",
     "@types/webidl2": "23.13.6",
@@ -83,6 +83,7 @@
     "karma-sourcemap-loader": "0.3.8",
     "karma-spec-reporter": "0.0.32",
     "license-checker": "25.0.1",
+    "lit-analyzer": "2.0.3",
     "mocha": "9.2.2",
     "postcss": "8.4.38",
     "puppeteer-core": "23.0.2",
@@ -97,7 +98,7 @@
     "stylelint-config-standard": "24.0.0",
     "svgo": "2.8.0",
     "terser": "5.19.1",
-    "typescript": "5.5.4",
+    "typescript": "5.6.2",
     "webidl2": "24.2.2",
     "ws": "8.18.0",
     "yargs": "17.3.1"
@@ -105,5 +106,5 @@
   "overrides": {
     "ws": "$ws"
   },
-  "version": "1.0.1362775"
+  "version": "1.0.1367881"
 }

package/scripts/devtools_paths.js

@@ -101,7 +101,9 @@ function devToolsThirdPartyPath() {
 
 function nodePath() {
   const paths = {
-    darwin: path.join('mac', process.arch === 'arm64' ? 'node-darwin-arm64' : 'node-darwin-x64', 'bin', 'node'),
+    darwin: path.join(
+        process.arch === 'arm64' ? 'mac_arm64' : 'mac',
+        process.arch === 'arm64' ? 'node-darwin-arm64' : 'node-darwin-x64', 'bin', 'node'),
     linux: path.join('linux', 'node-linux-x64', 'bin', 'node'),
     win32: path.join('win', 'node.exe'),
   };
@@ -123,6 +125,10 @@ function mochaExecutablePath() {
   return path.join(nodeModulesPath(), 'mocha', 'bin', 'mocha');
 }
 
+function litAnalyzerExecutablePath() {
+  return path.join(nodeModulesPath(), 'lit-analyzer', 'cli.js');
+}
+
 function downloadedChromeBinaryPath() {
   const paths = {
     linux: path.join('chrome-linux', 'chrome'),
@@ -139,5 +145,6 @@ module.exports = {
   nodeModulesPath,
   mochaExecutablePath,
   stylelintExecutablePath,
-  downloadedChromeBinaryPath
+  downloadedChromeBinaryPath,
+  litAnalyzerExecutablePath
 };

package/scripts/eslint_rules/lib/avoid_assert_equal.js

@@ -21,18 +21,45 @@ module.exports = {
       category: 'Possible Errors',
     },
     fixable: 'code',
-    schema: []  // no options
+    schema: [], // no options
   },
-  create: function(context) {
+  create: function (context) {
     return {
-      MemberExpression(node) {
-        if (node.object.name === 'assert' && node.property.name === 'equal') {
+      CallExpression(node) {
+        if (
+          node.callee.type === 'MemberExpression' &&
+          node.callee.object.name === 'assert' &&
+          node.callee.property.name === 'equal'
+        ) {
           context.report({
             node,
-            message: 'assert.equal is non-strict. Use assert.strictEqual or assert.deepEqual to compare objects'
+            message:
+              'assert.equal is non-strict. Use assert.strictEqual or assert.deepEqual to compare objects',
+            fix(fixer) {
+              /**
+               * Get the type of the second argument and try to match it to a assert type
+               */
+              const compareToType = node.arguments.at(1)?.type;
+              if (
+                // Match number or string
+                compareToType === 'Literal' ||
+                // Match `` string
+                compareToType === 'TemplateElement'
+              ) {
+                return fixer.replaceText(node.callee.property, 'strictEqual');
+              }
+              if (
+                // Match any object `{...}`
+                compareToType === 'ObjectExpression' ||
+                // Match any array `[...]`
+                compareToType === 'ArrayExpression'
+              ) {
+                return fixer.replaceText(node.callee.property, 'deepEqual');
+              }
+            },
           });
         }
-      }
+      },
     };
-  }
+  },
 };

package/scripts/eslint_rules/lib/html_tagged_template.js

@@ -0,0 +1,55 @@
+// Copyright 2024 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.
+
+module.exports = {
+  meta: {
+    type: 'problem',
+
+    docs: {
+      description: 'Usage of LitHtml.html',
+      category: 'Possible Errors',
+    },
+    fixable: 'code',
+    schema: []  // no options
+  },
+  create: function(context) {
+    let lastImport = null;
+    let shortandDefined = false;
+    return {
+      ImportDeclaration(node) {
+        lastImport = node;
+      },
+      VariableDeclarator(node) {
+        if (context.getScope().type !== 'module') {
+          return;
+        }
+        if (node.id.name === 'html') {
+          shortandDefined = true;
+        }
+        for (const property of node.id.properties || []) {
+          if (property.key.name === 'html') {
+            shortandDefined = true;
+          }
+        }
+      },
+      TaggedTemplateExpression(node) {
+        const tag = node.tag;
+        if (tag.type === 'MemberExpression' && tag.object.name === 'LitHtml' && tag.property.name === 'html') {
+          context.report({
+            node,
+            message: 'Use unqualified html tagged template for compatibility with lit-analyzer',
+            fix(fixer) {
+              const result = [fixer.removeRange([tag.object.range[0], tag.property.range[0]])];
+              if (lastImport && !shortandDefined) {
+                result.push(fixer.insertTextAfter(lastImport, '\n\nconst {html} = LitHtml;'));
+                shortandDefined = true;
+              }
+              return result;
+            }
+          });
+        }
+      }
+    };
+  }
+};

package/scripts/eslint_rules/lib/inline_type_imports.js

@@ -66,21 +66,19 @@ module.exports = {
       ];
     }
 
-    function inlineTypeImportKeyword(fixer, typeImportNode) {
-      // We need to remove the " type" text after "import".
-      const importStart = typeImportNode.range[0];
+    function extractTypeImportKeyword(fixer, valueImportNode) {
+      const importStart = valueImportNode.range[0];
       const typeImportStart = importStart + 6;    // 6 here = length of "import"
-      const typeImportEnd = typeImportStart + 5;  // 5 here = length of "type" + 1 to remove the space after it.
-
-      const addTypeToSpecifiersFixers = typeImportNode.specifiers.map(spec => {
-        const newText = getTextForImportSpecifier(spec);
-
-        return fixer.replaceText(spec, `type ${newText}`);
+      // We need to remove the " type" text after "import".
+      const addTypeToSpecifiersFixers = valueImportNode.specifiers.map(spec => {
+        const typeImportStart = spec.range[0];
+        const typeImportEnd = typeImportStart + 5;  // 5 here = length of "type" + 1 to remove the space after it.
+        return fixer.removeRange([typeImportStart, typeImportEnd]);
       });
 
       return [
         ...addTypeToSpecifiersFixers,
-        fixer.removeRange([typeImportStart, typeImportEnd]),
+        fixer.insertTextAfterRange([importStart, typeImportStart], ' type'),
       ];
     }
 
@@ -138,19 +136,20 @@ module.exports = {
             });
             continue;
           }
-
-          // At this point we have just a type import and no matching file
-          // import, but we still want to convert the import so that each
-          // imported reference uses the type modifier:
-          // BEFORE: import type {A, B} from '...';
-          // AFTER: import {type A, type B} from '...';
-          context.report({
-            node: typeImportNode,
-            messageId: 'convertTypeImport',
-            fix(fixer) {
-              return inlineTypeImportKeyword(fixer, typeImportNode);
-            }
-          });
+        }
+        for (const valueImportNode of valueImports.values()) {
+          const typeOnly = valueImportNode.specifiers.every(s => s.importKind === 'type');
+          if (typeOnly) {
+            // BEFORE: import {type A, type B} from '...';
+            // AFTER: import type {A, B} from '...';
+            context.report({
+              node: valueImportNode,
+              messageId: 'convertTypeImport',
+              fix(fixer) {
+                return extractTypeImportKeyword(fixer, valueImportNode);
+              }
+            });
+          }
         }
       },
     };

package/scripts/eslint_rules/tests/avoid_assert_equal_test.js

@@ -22,6 +22,15 @@ ruleTester.run('avoid_assert_equal', rule, {
     {
       code: `import {assert} from 'chai';
 
+      it('normal test', async () => {
+        assert.deepEqual({}, {})
+      });
+      `,
+      filename: 'test/e2e/folder/file.ts',
+    },
+    {
+      code: `import {assert} from 'chai';
+
       it('normal test', async () => {
         assert.deepEqual([], [])
       });
@@ -38,8 +47,58 @@ ruleTester.run('avoid_assert_equal', rule, {
         assert.equal(2, 2)
       });
       `,
+      output: `import {assert} from 'chai';
+
+      it('normal test', async () => {
+        assert.strictEqual(2, 2)
+      });
+      `,
+      filename: 'test/e2e/folder/file.ts',
+      errors: [
+        {
+          message: 'assert.equal is non-strict. Use assert.strictEqual or assert.deepEqual to compare objects',
+        },
+      ],
+    },
+    {
+      code: `import {assert} from 'chai';
+
+      it('normal test', async () => {
+        assert.equal({}, {})
+      });
+      `,
+      output: `import {assert} from 'chai';
+
+      it('normal test', async () => {
+        assert.deepEqual({}, {})
+      });
+      `,
       filename: 'test/e2e/folder/file.ts',
-      errors: [{message: 'assert.equal is non-strict. Use assert.strictEqual or assert.deepEqual to compare objects'}],
+      errors: [
+        {
+          message: 'assert.equal is non-strict. Use assert.strictEqual or assert.deepEqual to compare objects',
+        },
+      ],
     },
-  ]
+    {
+      code: `import {assert} from 'chai';
+
+      it('normal test', async () => {
+        assert.equal([], [])
+      });
+      `,
+      output: `import {assert} from 'chai';
+
+      it('normal test', async () => {
+        assert.deepEqual([], [])
+      });
+      `,
+      filename: 'test/e2e/folder/file.ts',
+      errors: [
+        {
+          message: 'assert.equal is non-strict. Use assert.strictEqual or assert.deepEqual to compare objects',
+        },
+      ],
+    },
+  ],
 });

package/scripts/eslint_rules/tests/html_tagged_template_test.js

@@ -0,0 +1,96 @@
+// Copyright 2024 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 rule = require('../lib/html_tagged_template.js');
+const ruleTester = new (require('eslint').RuleTester)({
+  parserOptions: {ecmaVersion: 9, sourceType: 'module'},
+});
+
+const error = {
+  message: 'Use unqualified html tagged template for compatibility with lit-analyzer'
+};
+
+ruleTester.run('html_tagged_template', rule, {
+  valid: [
+    {
+      code: `import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+
+      const {html} = LitHtml;
+
+      function render() {
+        LitHtml.render(
+            html\`<div></div>\`,
+            this.shadow, {host: this});
+      }
+      `,
+    },
+  ],
+  invalid: [
+    {
+      code: `import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+
+      function render() {
+        LitHtml.render(
+            LitHtml.html\`<div></div>\`,
+            this.shadow, {host: this});
+      }
+
+      function render2() {
+        LitHtml.render(
+            LitHtml.html\`<div></div>\`,
+            this.shadow, {host: this});
+      }`,
+      errors: [error, error],
+      output: `import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+
+const {html} = LitHtml;
+
+      function render() {
+        LitHtml.render(
+            html\`<div></div>\`,
+            this.shadow, {host: this});
+      }
+
+      function render2() {
+        LitHtml.render(
+            html\`<div></div>\`,
+            this.shadow, {host: this});
+      }`,
+    },
+    {
+      code: `import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+
+      const {html} = LitHtml;
+
+      function render() {
+        LitHtml.render(
+            html\`<div></div>\`,
+            this.shadow, {host: this});
+      }
+
+      function render2() {
+        LitHtml.render(
+            LitHtml.html\`<div></div>\`,
+            this.shadow, {host: this});
+      }`,
+      errors: [error],
+      output: `import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+
+      const {html} = LitHtml;
+
+      function render() {
+        LitHtml.render(
+            html\`<div></div>\`,
+            this.shadow, {host: this});
+      }
+
+      function render2() {
+        LitHtml.render(
+            html\`<div></div>\`,
+            this.shadow, {host: this});
+      }`,
+    },
+  ]
+});

package/scripts/eslint_rules/tests/inline_type_imports_test.js

@@ -27,16 +27,16 @@ ruleTester.run('inline_type_imports', rule, {
       code: 'import type Foo from \'./foo.js\'',
     },
     {
-      code: 'import {type Foo} from \'./foo.js\'',
+      code: 'import type {Foo} from \'./foo.js\'',
     },
     {
-      code: 'import {type Foo as Foo2} from \'./foo.js\'',
+      code: 'import type {Foo as Foo2} from \'./foo.js\'',
     },
     {
       code: 'import {SomeValue, type Foo as Foo2} from \'./foo.js\'',
     },
     {
-      code: 'import {type Bar, type Foo as Foo2} from \'./foo.js\'',
+      code: 'import type {Bar, Foo as Foo2} from \'./foo.js\'',
     },
   ],
   invalid: [
@@ -54,9 +54,9 @@ ruleTester.run('inline_type_imports', rule, {
   import type {Foo} from './blah.js'`,
       output: `
   import {AValue, type AType} from './foo.js';
-  import {type Foo} from './blah.js'`,
+  import type {Foo} from './blah.js'`,
       filename: 'front_end/components/test.ts',
-      errors: [{messageId: 'inlineTypeImport'}, {messageId: 'convertTypeImport'}],
+      errors: [{messageId: 'inlineTypeImport'}],
     },
     {
       code: `import type {AType} from './foo.js';
@@ -68,18 +68,6 @@ ruleTester.run('inline_type_imports', rule, {
       filename: 'front_end/components/test.ts',
       errors: [{messageId: 'inlineTypeImport'}],
     },
-    {
-      code: 'import type {AType} from \'./foo.js\';',
-      output: 'import {type AType} from \'./foo.js\';',
-      filename: 'front_end/components/test.ts',
-      errors: [{messageId: 'convertTypeImport'}],
-    },
-    {
-      code: 'import type {Foo as Bar} from \'./foo.js\';',
-      output: 'import {type Foo as Bar} from \'./foo.js\';',
-      filename: 'front_end/components/test.ts',
-      errors: [{messageId: 'convertTypeImport'}],
-    },
     {
       code: `import {SomeValue} from './foo.js';
 import type {Foo as Bar} from './foo.js';`,
@@ -94,13 +82,5 @@ import type {Foo as Bar, Baz} from './foo.js';`,
       filename: 'front_end/components/test.ts',
       errors: [{messageId: 'inlineTypeImport'}],
     },
-    {
-      code: `import type {SomeValue} from './baz.js';
-import type {Foo as Bar, Baz} from './foo.js';`,
-      output: `import {type SomeValue} from './baz.js';
-import {type Foo as Bar, type Baz} from './foo.js';`,
-      filename: 'front_end/components/test.ts',
-      errors: [{messageId: 'convertTypeImport'}, {messageId: 'convertTypeImport'}],
-    },
   ]
 });