chrome-devtools-frontend 1.0.938678 → 1.0.939066

package/front_end/ui/legacy/inspectorCommon.css

@@ -85,7 +85,7 @@ body {
   overflow: hidden;
   margin: 0;
   cursor: default;
-  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
+  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
   font-size: 12px;
   tab-size: 4;
   user-select: none;
@@ -99,7 +99,7 @@ body {
 }
 
 .platform-mac {
-  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
+  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
 }
 
 .platform-mac,
@@ -110,7 +110,7 @@ body {
 }
 
 .platform-windows {
-  font-family: 'Segoe UI', Tahoma, sans-serif;
+  font-family: "Segoe UI", Tahoma, sans-serif;
 }
 
 :focus {
@@ -292,8 +292,8 @@ input::placeholder {
 }
 
 .harmony-input:not([type]),
-.harmony-input[type=number],
-.harmony-input[type=text] {
+.harmony-input[type="number"],
+.harmony-input[type="text"] {
   padding: 3px 6px;
   height: 24px;
   border: none;
@@ -301,23 +301,23 @@ input::placeholder {
 }
 
 .harmony-input:not([type]).error-input,
-.harmony-input[type=number].error-input,
-.harmony-input[type=text].error-input,
+.harmony-input[type="number"].error-input,
+.harmony-input[type="text"].error-input,
 .harmony-input:not([type]):invalid,
-.harmony-input[type=number]:invalid,
-.harmony-input[type=text]:invalid {
+.harmony-input[type="number"]:invalid,
+.harmony-input[type="text"]:invalid {
   box-shadow: 0 0 0 1px var(--color-red);
 }
 
 .harmony-input:not([type]):not(.error-input):not(:invalid):hover,
-.harmony-input[type=number]:not(.error-input):not(:invalid):hover,
-.harmony-input[type=text]:not(.error-input):not(:invalid):hover {
+.harmony-input[type="number"]:not(.error-input):not(:invalid):hover,
+.harmony-input[type="text"]:not(.error-input):not(:invalid):hover {
   box-shadow: var(--legacy-focus-ring-inactive-shadow);
 }
 
 .harmony-input:not([type]):not(.error-input):not(:invalid):focus,
-.harmony-input[type=number]:not(.error-input):not(:invalid):focus,
-.harmony-input[type=text]:not(.error-input):not(:invalid):focus {
+.harmony-input[type="number"]:not(.error-input):not(:invalid):focus,
+.harmony-input[type="text"]:not(.error-input):not(:invalid):focus {
   box-shadow: var(--legacy-focus-ring-active-shadow);
 }
 
@@ -426,7 +426,7 @@ input::placeholder {
 /* This class is used outside of the settings screen in the "Renderer" and
    "Sensors" panel. As such we need to override their style globally */
 .settings-select {
-  margin: 0 0;
+  margin: 0;
 }
 
 .chrome-select optgroup,
@@ -443,7 +443,7 @@ input::placeholder {
   white-space: nowrap;
 }
 
-span[is=dt-icon-label] {
+span[is="dt-icon-label"] {
   flex: none;
 }
 
@@ -469,29 +469,29 @@ span[is=dt-icon-label] {
   z-index: 500;
 }
 
-[is=ui-icon] {
+[is="ui-icon"] {
   display: inline-block;
   flex-shrink: 0;
 }
 
-.-theme-with-dark-background [is=ui-icon].icon-invert,
-:host-context(.-theme-with-dark-background) [is=ui-icon].icon-invert {
+.-theme-with-dark-background [is="ui-icon"].icon-invert,
+:host-context(.-theme-with-dark-background) [is="ui-icon"].icon-invert {
   filter: invert(80%) hue-rotate(180deg);
 }
 
-[is=ui-icon].icon-mask {
+[is="ui-icon"].icon-mask {
   --override-icon-mask-background-color: rgb(110 110 110);
 
   background-color: var(--override-icon-mask-background-color);
   -webkit-mask-position: var(--spritesheet-position);
 }
 
-.-theme-with-dark-background [is=ui-icon].icon-mask,
-:host-context(.-theme-with-dark-background) [is=ui-icon].icon-mask {
+.-theme-with-dark-background [is="ui-icon"].icon-mask,
+:host-context(.-theme-with-dark-background) [is="ui-icon"].icon-mask {
   --override-icon-mask-background-color: rgb(145 145 145);
 }
 
-[is=ui-icon]:not(.icon-mask) {
+[is="ui-icon"]:not(.icon-mask) {
   background-position: var(--spritesheet-position);
 }
 
@@ -523,27 +523,27 @@ span[is=dt-icon-label] {
   background-image: var(--image-file-popoverArrows);
 }
 
-.force-white-icons [is=ui-icon].spritesheet-smallicons,
-:host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons,
-[is=ui-icon].force-white-icons.spritesheet-smallicons,
+.force-white-icons [is="ui-icon"].spritesheet-smallicons,
+:host-context(.force-white-icons) [is="ui-icon"].spritesheet-smallicons,
+[is="ui-icon"].force-white-icons.spritesheet-smallicons,
 .-theme-preserve {
   -webkit-mask-image: var(--image-file-smallIcons);
   -webkit-mask-position: var(--spritesheet-position);
   background: var(--override-force-white-icons-background) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.force-white-icons [is=ui-icon].spritesheet-largeicons,
-:host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons,
-[is=ui-icon].force-white-icons.spritesheet-largeicons,
+.force-white-icons [is="ui-icon"].spritesheet-largeicons,
+:host-context(.force-white-icons) [is="ui-icon"].spritesheet-largeicons,
+[is="ui-icon"].force-white-icons.spritesheet-largeicons,
 .-theme-preserve {
   -webkit-mask-image: var(--image-file-largeIcons);
   -webkit-mask-position: var(--spritesheet-position);
   background: var(--override-force-white-icons-background) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.force-white-icons [is=ui-icon].spritesheet-mediumicons,
-:host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicons,
-[is=ui-icon].force-white-icons.spritesheet-mediumicons,
+.force-white-icons [is="ui-icon"].spritesheet-mediumicons,
+:host-context(.force-white-icons) [is="ui-icon"].spritesheet-mediumicons,
+[is="ui-icon"].force-white-icons.spritesheet-mediumicons,
 .-theme-preserve {
   -webkit-mask-image: var(--image-file-mediumIcons);
   -webkit-mask-position: var(--spritesheet-position);
@@ -635,30 +635,30 @@ button.link:focus-visible {
     opacity: 100%;
   }
 
-  [is=ui-icon].icon-mask,
-  .force-white-icons [is=ui-icon].spritesheet-smallicons,
-  :host-context(.force-white-icons) [is=ui-icon].spritesheet-smallicons,
-  [is=ui-icon].force-white-icons.spritesheet-smallicons,
-  .force-white-icons [is=ui-icon].spritesheet-largeicons,
-  :host-context(.force-white-icons) [is=ui-icon].spritesheet-largeicons,
-  [is=ui-icon].force-white-icons.spritesheet-largeicons,
-  .force-white-icons [is=ui-icon].spritesheet-mediumicons,
-  :host-context(.force-white-icons) [is=ui-icon].spritesheet-mediumicons,
-  [is=ui-icon].force-white-icons.spritesheet-mediumicons,
+  [is="ui-icon"].icon-mask,
+  .force-white-icons [is="ui-icon"].spritesheet-smallicons,
+  :host-context(.force-white-icons) [is="ui-icon"].spritesheet-smallicons,
+  [is="ui-icon"].force-white-icons.spritesheet-smallicons,
+  .force-white-icons [is="ui-icon"].spritesheet-largeicons,
+  :host-context(.force-white-icons) [is="ui-icon"].spritesheet-largeicons,
+  [is="ui-icon"].force-white-icons.spritesheet-largeicons,
+  .force-white-icons [is="ui-icon"].spritesheet-mediumicons,
+  :host-context(.force-white-icons) [is="ui-icon"].spritesheet-mediumicons,
+  [is="ui-icon"].force-white-icons.spritesheet-mediumicons,
   .-theme-preserve {
     forced-color-adjust: none;
     background-color: ButtonText;
   }
 
   .harmony-input:not([type]),
-  .harmony-input[type=number],
-  .harmony-input[type=text] {
+  .harmony-input[type="number"],
+  .harmony-input[type="text"] {
     border: 1px solid ButtonText;
   }
 
   .harmony-input:not([type]):focus,
-  .harmony-input[type=number]:focus,
-  .harmony-input[type=text]:focus {
+  .harmony-input[type="number"]:focus,
+  .harmony-input[type="text"]:focus {
     border: 1px solid Highlight;
   }
 }

package/front_end/ui/legacy/inspectorSyntaxHighlight.css

@@ -209,15 +209,15 @@
   color: var(--color-link);
 }
 
-.devtools-link [is=ui-icon] {
+.devtools-link [is="ui-icon"] {
   vertical-align: middle;
 }
 
-.devtools-link [is=ui-icon].icon-mask {
+.devtools-link [is="ui-icon"].icon-mask {
   background-color: var(--color-link);
 }
 
-:focus .selected .devtools-link [is=ui-icon].icon-mask {
+:focus .selected .devtools-link [is="ui-icon"].icon-mask {
   background-color: var(--legacy-item-selection-bg-color);
 }
 

package/front_end/ui/legacy/inspectorViewTabbedPane.css

@@ -14,7 +14,7 @@
 }
 
 .tabbed-pane-header-tab.selected {
-  border-width: 0 2px 0 2px;
+  border-width: 0 2px;
 }
 
 .tabbed-pane-header-contents {

package/front_end/ui/legacy/searchableView.css

@@ -35,7 +35,7 @@
 }
 
 .toolbar-search > div {
-  margin: 2px 2px;
+  margin: 2px;
   flex-shrink: 0;
 }
 

package/front_end/ui/legacy/softContextMenu.css

@@ -11,7 +11,7 @@
   overflow-y: auto;
   min-width: 160px !important; /* stylelint-disable-line declaration-no-important */
   /* NOTE: Keep padding in sync with padding adjustment in SoftContextMenu.js */
-  padding: 4px 0 4px 0;
+  padding: 4px 0;
   border: 1px solid var(--color-details-hairline);
   background-color: var(--color-background);
   box-shadow: var(--drop-shadow);

package/front_end/ui/legacy/textPrompt.css

@@ -47,7 +47,7 @@
 }
 
 .text-prompt:not([data-placeholder]):empty::after {
-  content: '\00A0';
+  content: "\00A0";
   width: 0;
   display: block;
 }

package/front_end/ui/legacy/toolbar.css

@@ -307,7 +307,7 @@ select.toolbar-item:focus-visible > * {
 .toolbar-input {
   width: 120px;
   height: 19px;
-  padding: 4px 3px 3px 3px;
+  padding: 4px 3px 3px;
   margin: 1px 3px;
   background-color: var(--color-background);
   border: 1px solid transparent;
@@ -389,18 +389,18 @@ select.toolbar-item:focus-visible > * {
   left: -2px;
 }
 
-input[is=history-input] {
+input[is="history-input"] {
   border: 1px solid transparent;
   line-height: 16px;
   padding: 1px;
 }
 
-input[is=history-input]:hover {
+input[is="history-input"]:hover {
   box-shadow: var(--legacy-focus-ring-inactive-shadow);
 }
 
-input[is=history-input]:focus,
-input[is=history-input]:not(:placeholder-shown) {
+input[is="history-input"]:focus,
+input[is="history-input"]:not(:placeholder-shown) {
   box-shadow: var(--legacy-focus-ring-active-shadow);
 }
 
@@ -470,7 +470,7 @@ devtools-icon.leading-issue-icon {
     color: HighlightText;
   }
 
-  .toolbar-button:disabled [is=ui-icon].icon-mask {
+  .toolbar-button:disabled [is="ui-icon"].icon-mask {
     background-color: GrayText;
     color: GrayText;
   }
@@ -505,8 +505,8 @@ devtools-icon.leading-issue-icon {
   :not(.toolbar-render-as-links) .toolbar-button:enabled:hover .toolbar-glyph,
   :not(.toolbar-render-as-links) .toolbar-button:enabled:focus .toolbar-glyph,
   :not(.toolbar-render-as-links) .toolbar-button:enabled:hover:not(:active) .toolbar-glyph,
-  .toolbar-button:enabled:hover [is=ui-icon].icon-mask,
-  .toolbar-button:enabled:focus [is=ui-icon].icon-mask {
+  .toolbar-button:enabled:hover [is="ui-icon"].icon-mask,
+  .toolbar-button:enabled:focus [is="ui-icon"].icon-mask {
     background-color: HighlightText;
   }
 

package/front_end/ui/legacy/treeoutline.css

@@ -6,7 +6,7 @@
 
 :host {
   flex: 1 1 auto;
-  padding: 2px 0 0 0;
+  padding: 2px 0 0;
 }
 
 .tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) {
@@ -166,7 +166,7 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * {
 @media (forced-colors: active) {
   .tree-outline-disclosure li.parent::before,
   .tree-outline:not(.hide-selection-when-blurred) li.parent:not(.selected)::before,
-  .tree-outline li [is=ui-icon].icon-mask {
+  .tree-outline li [is="ui-icon"].icon-mask {
     forced-color-adjust: none;
     background-color: ButtonText;
   }
@@ -200,8 +200,8 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * {
     background-color: transparent;
   }
 
-  .tree-outline li.selected [is=ui-icon].icon-mask,
-  .tree-outline li.selected:focus [is=ui-icon]:not(.icon-mask) {
+  .tree-outline li.selected [is="ui-icon"].icon-mask,
+  .tree-outline li.selected:focus [is="ui-icon"]:not(.icon-mask) {
     background-color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
   }
 

package/inspector_overlay/common.css

@@ -17,11 +17,11 @@ body.platform-linux {
 
 body.platform-mac {
   color: rgb(48 57 66);
-  font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
+  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
 }
 
 body.platform-windows {
-  font-family: 'Segoe UI', Tahoma, sans-serif;
+  font-family: "Segoe UI", Tahoma, sans-serif;
 }
 
 .fill {

package/inspector_overlay/tool_highlight.css

@@ -157,7 +157,7 @@ body {
   margin-right: 2px;
   width: 10px;
   height: 10px;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
   line-height: 10px;
 }
 

package/inspector_overlay/tool_paused.css

@@ -61,12 +61,12 @@ body {
 }
 
 #resume-button .glyph {
-  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAKCAYAAABv7tTEAAAAAXNSR0IArs4c6QAAAFJJREFUKM+10bEJgGAMBeEPbR3BLRzEVdzEVRzELRzBVohVwEJ+iODBlQfhBeJhsmHU4C0KnFjQV6J0x1SNAhdWDJUoPTB3PvLLeaUhypM3n3sD/qc7lDrdpIEAAAAASUVORK5CYII=);
+  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAKCAYAAABv7tTEAAAAAXNSR0IArs4c6QAAAFJJREFUKM+10bEJgGAMBeEPbR3BLRzEVdzEVRzELRzBVohVwEJ+iODBlQfhBeJhsmHU4C0KnFjQV6J0x1SNAhdWDJUoPTB3PvLLeaUhypM3n3sD/qc7lDrdpIEAAAAASUVORK5CYII=");
   -webkit-mask-size: 13px 10px;
   background-color: rgb(66 129 235);
 }
 
 #step-over-button .glyph {
-  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAAAAXNSR0IArs4c6QAAAOFJREFUKM+N0j8rhXEUB/DPcxW35CqhvIBrtqibkklhV8qkTHe4ZbdblcXgPVhuMdqUTUl5A2KRRCF5LGc4PT1P7qnfcr5/zu/8KdTHLFaxjHnc4RZXKI0QYxjgLQTVd42l/0wmg5iFX3iq5H6w22RS4DyRH7CB8cAXcBTGJT6xUmd0mEwuMdFQcA3fwXvGTAan8BrgPabTL9fRRyfx91PRMwyjGwcJ2EyCfsrfpPw2Pipz24NT/MZciiQYVshzOKnZ5Hturxt3k2MnCpS4SPkeHpPR8Sh3tYgttBoW9II2/AHiaEqvD2Fc0wAAAABJRU5ErkJggg==);
+  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAAAAXNSR0IArs4c6QAAAOFJREFUKM+N0j8rhXEUB/DPcxW35CqhvIBrtqibkklhV8qkTHe4ZbdblcXgPVhuMdqUTUl5A2KRRCF5LGc4PT1P7qnfcr5/zu/8KdTHLFaxjHnc4RZXKI0QYxjgLQTVd42l/0wmg5iFX3iq5H6w22RS4DyRH7CB8cAXcBTGJT6xUmd0mEwuMdFQcA3fwXvGTAan8BrgPabTL9fRRyfx91PRMwyjGwcJ2EyCfsrfpPw2Pipz24NT/MZciiQYVshzOKnZ5Hturxt3k2MnCpS4SPkeHpPR8Sh3tYgttBoW9II2/AHiaEqvD2Fc0wAAAABJRU5ErkJggg==");
   -webkit-mask-size: 18px 10px;
 }

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.938678"
+  "version": "1.0.939066"
 }

package/scripts/eslint_rules/lib/es_modules_import.js

@@ -16,7 +16,7 @@ const INSPECTOR_OVERLAY_DIRECTORY = path.join(__dirname, '..', '..', '..', 'fron
 const COMPONENT_DOCS_DIRECTORY = path.join(FRONT_END_DIRECTORY, 'ui', 'components', 'docs');
 
 const CROSS_NAMESPACE_MESSAGE =
-    'Incorrect cross-namespace import: "{{importPath}}". Use "import * as Namespace from \'../namespace/namespace.js\';" instead.';
+    'Incorrect cross-namespace import: "{{importPathForErrorMessage}}". Use "import * as Namespace from \'../namespace/namespace.js\';" instead.';
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -42,7 +42,7 @@ function computeTopLevelFolder(fileName) {
   return namespaceName.substring(0, namespaceName.indexOf(path.sep));
 }
 
-function checkImportExtension(importPath, context, node) {
+function checkImportExtension(importPath, importPathForErrorMessage, context, node) {
   // import * as fs from 'fs';
   if (!importPath.startsWith('.')) {
     return;
@@ -51,12 +51,12 @@ function checkImportExtension(importPath, context, node) {
   if (!importPath.endsWith('.js') && !importPath.endsWith('.mjs')) {
     context.report({
       node,
-      message: 'Missing file extension for import "{{importPath}}"',
+      message: 'Missing file extension for import "{{importPathForErrorMessage}}"',
       data: {
-        importPath,
+        importPathForErrorMessage,
       },
       fix(fixer) {
-        return fixer.replaceText(node.source, `'${importPath}.js'`);
+        return fixer.replaceText(node.source, `'${importPathForErrorMessage}.js'`);
       }
     });
   }
@@ -67,7 +67,7 @@ function nodeSpecifiersSpecialImportsOnly(specifiers) {
       ['ls', 'assertNotNullOrUndefined'].includes(specifiers[0].imported.name);
 }
 
-function checkStarImport(context, node, importPath, importingFileName, exportingFileName) {
+function checkStarImport(context, node, importPath, importPathForErrorMessage, importingFileName, exportingFileName) {
   if (isModuleEntrypoint(importingFileName)) {
     return;
   }
@@ -93,9 +93,9 @@ function checkStarImport(context, node, importPath, importingFileName, exporting
     context.report({
       node,
       message:
-          'Incorrect same-namespace import: "{{importPath}}". Use "import { Symbol } from \'./relative-file.js\';" instead.',
+          'Incorrect same-namespace import: "{{importPathForErrorMessage}}". Use "import { Symbol } from \'./relative-file.js\';" instead.',
       data: {
-        importPath,
+        importPathForErrorMessage,
       },
     });
   }
@@ -104,9 +104,7 @@ function checkStarImport(context, node, importPath, importingFileName, exporting
     context.report({
       node,
       message: CROSS_NAMESPACE_MESSAGE,
-      data: {
-        importPath,
-      },
+      data: {importPathForErrorMessage},
     });
   }
 }
@@ -135,12 +133,14 @@ module.exports = {
         }
         const importPath = path.normalize(node.source.value);
 
-        checkImportExtension(importPath, context, node);
+        const importPathForErrorMessage = node.source.value.replace(/\\/g, '/');
+        checkImportExtension(importPath, importPathForErrorMessage, context, node);
       },
       ImportDeclaration(node) {
-        checkImportExtension(node.source.value, context, node);
-
         const importPath = path.normalize(node.source.value);
+        const importPathForErrorMessage = node.source.value.replace(/\\/g, '/');
+
+        checkImportExtension(node.source.value, importPathForErrorMessage, context, node);
 
         // Accidental relative URL:
         // import * as Root from 'front_end/root/root.js';
@@ -173,7 +173,8 @@ module.exports = {
 
         const exportingFileName = path.resolve(path.dirname(importingFileName), importPath);
 
-        if (importPath.includes('/front_end/') && !importingFileIsUnitTestFile && !importingFileIsComponentDocsFile) {
+        if (importPath.replace(/\\/g, '/').includes('/front_end/') && !importingFileIsUnitTestFile &&
+            !importingFileIsComponentDocsFile) {
           context.report({
             node,
             message:
@@ -181,14 +182,14 @@ module.exports = {
           });
         }
 
-        if (importPath.endsWith(path.join('platform', 'platform.js')) &&
+        if (importPathForErrorMessage.endsWith('platform/platform.js') &&
             nodeSpecifiersSpecialImportsOnly(node.specifiers)) {
           /* We allow direct importing of the ls and assertNotNull utility as it's so frequently used. */
           return;
         }
 
         if (isStarAsImportSpecifier(node.specifiers)) {
-          checkStarImport(context, node, importPath, importingFileName, exportingFileName);
+          checkStarImport(context, node, importPath, importPathForErrorMessage, importingFileName, exportingFileName);
         } else {
           if (computeTopLevelFolder(importingFileName) !== computeTopLevelFolder(exportingFileName)) {
             let message = CROSS_NAMESPACE_MESSAGE;
@@ -206,7 +207,7 @@ module.exports = {
               node,
               message,
               data: {
-                importPath,
+                importPathForErrorMessage,
               },
             });
           } else if (isModuleEntrypoint(importingFileName)) {
@@ -222,9 +223,9 @@ module.exports = {
             context.report({
               node,
               message:
-                  'Incorrect same-namespace import: "{{importPath}}". Use "import * as File from \'./File.js\';" instead.',
+                  'Incorrect same-namespace import: "{{importPathForErrorMessage}}". Use "import * as File from \'./File.js\';" instead.',
               data: {
-                importPath,
+                importPathForErrorMessage,
               }
             });
           }

package/scripts/eslint_rules/lib/l10n_filename_matches.js

@@ -64,12 +64,13 @@ module.exports = {
         const previousFileLocationArgument = callExpression.arguments[0];
         const actualPath = path.join(FRONT_END_DIRECTORY, previousFileLocationArgument.value);
         if (!allowedPathArguments.includes(actualPath)) {
+          const newFileName = currentFileRelativeToFrontEnd.replace(/\\/g, '/');
           context.report({
             node: callExpression,
-            message: `First argument to 'registerUIStrings' call must be '${
-                currentFileRelativeToFrontEnd}' or the ModuleUIStrings.(js|ts)`,
+            message:
+                `First argument to 'registerUIStrings' call must be '${newFileName}' or the ModuleUIStrings.(js|ts)`,
             fix(fixer) {
-              return fixer.replaceText(previousFileLocationArgument, `'${currentFileRelativeToFrontEnd}'`);
+              return fixer.replaceText(previousFileLocationArgument, `'${newFileName}'`);
             }
           });
         }

package/scripts/eslint_rules/lib/migrate_create_shadow_root_with_styles.js

@@ -57,13 +57,13 @@ module.exports = {
             const propertyNode = lookForCSSFileProperty(options.properties);
 
             if (propertyNode && propertyNode.value.type === 'Literal') {
-              const filenameWithExtension = propertyNode.value.value;
+              const filenameWithExtension = propertyNode.value.value.replace(/\\/g, '/');
               const filename = path.basename(filenameWithExtension, '.css');
               const newFileName = filename + 'Styles';
 
               const importDir = 'front_end/' + path.dirname(filenameWithExtension);
               const fileDir = path.dirname(context.getFilename());
-              const relativeImport = path.relative(fileDir, importDir);
+              const relativeImport = path.relative(fileDir, importDir).replace(/\\/g, '/');
               const importStatement = relativeImport === '' ?
                   `import ${newFileName} from \'./${filename}.css.js\';\n` :
                   `import ${newFileName} from \'${relativeImport}/${filename}.css.js\';\n`;

package/scripts/eslint_rules/lib/migrate_register_required_css.js

@@ -106,7 +106,7 @@ module.exports = {
 
           const importDir = 'front_end/' + path.dirname(filenameWithExtension);
           const fileDir = path.dirname(context.getFilename());
-          const relativeImport = path.relative(fileDir, importDir);
+          const relativeImport = path.relative(fileDir, importDir).replace(/\\/g, '/');
           const importStatement = relativeImport === '' ?
               `import ${newFileName} from \'./${filename}.css.js\';\n` :
               `import ${newFileName} from \'${relativeImport}/${filename}.css.js\';\n`;

package/scripts/eslint_rules/tests/es_modules_import_test.js

@@ -155,7 +155,8 @@ ruleTester.run('es_modules_import', rule, {
       code: 'import { Exporting } from \'./Exporting.js\';',
       filename: 'front_end/common/common.js',
       errors: [{
-        message: 'Incorrect same-namespace import: "Exporting.js". Use "import * as File from \'./File.js\';" instead.'
+        message:
+            'Incorrect same-namespace import: "./Exporting.js". Use "import * as File from \'./File.js\';" instead.'
       }],
     },
     {
@@ -220,7 +221,7 @@ ruleTester.run('es_modules_import', rule, {
       filename: 'front_end/some_folder/nested_entrypoint/nested_entrypoint.js',
       errors: [{
         message:
-            'Incorrect same-namespace import: "append-style.js". Use "import * as File from \'./File.js\';" instead.'
+            'Incorrect same-namespace import: "./append-style.js". Use "import * as File from \'./File.js\';" instead.'
       }]
     },
     {