chrome-devtools-frontend 1.0.937775 → 1.0.939144

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 {
@@ -287,9 +287,13 @@ input::placeholder {
   --override-input-placeholder-color: rgb(230 230 230 / 54%);
 }
 
+:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
+  accent-color: var(--color-checkbox-accent-color);
+}
+
 .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;
@@ -297,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);
 }
 
@@ -422,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,
@@ -439,7 +443,7 @@ input::placeholder {
   white-space: nowrap;
 }
 
-span[is=dt-icon-label] {
+span[is="dt-icon-label"] {
   flex: none;
 }
 
@@ -465,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);
 }
 
@@ -519,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);
@@ -631,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

@@ -113,7 +113,7 @@
 
 .cm-css-property,
 .webkit-css-property {
-  color: rgb(200 0 0); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--webkit-css-property-color, rgb(200 0 0)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
 }
 
 .cm-xml-meta {
@@ -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/inspectorSyntaxHighlightDark.css

@@ -213,7 +213,7 @@
 }
 
 .webkit-css-property {
-  color: rgb(53 212 199); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
+  color: var(--webkit-css-property-color, rgb(53 212 199)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
 }
 
 .cm-def {

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);
@@ -44,6 +44,12 @@
   white-space: nowrap;
 }
 
+.soft-context-menu-item devtools-icon {
+  --icon-color: var(--color-text-secondary);
+
+  pointer-events: none;
+}
+
 .soft-context-menu-disabled {
   color: var(--color-text-disabled);
   pointer-events: none;
@@ -66,6 +72,10 @@
   color: var(--override-context-menu-hover-text-color);
 }
 
+.soft-context-menu-item-mouse-over devtools-icon {
+  --icon-color: var(--override-context-menu-hover-text-color);
+}
+
 .-theme-with-dark-background .soft-context-menu-item-mouse-over,
 :host-context(.-theme-with-dark-background) .soft-context-menu-item-mouse-over {
   --override-dark-mode-focus-color: #1a73e8;

package/front_end/ui/legacy/tabbedPane.css

@@ -390,6 +390,11 @@
     color: HighlightText;
   }
 
+  .tabbed-pane-header-tab:hover .tabbed-pane-close-button,
+  .tabbed-pane-shadow .tabbed-pane-header-tab:focus-visible .tabbed-pane-close-button {
+    --icon-color: HighlightText;
+  }
+
   .tabbed-pane-header-tabs-drop-down-container {
     opacity: 100%;
   }

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/themeColors.css

@@ -233,6 +233,7 @@
   --color-error-text: hsl(0deg 100% 75%);
   --color-error-border: rgb(92 0 0);
   --color-error-background: hsl(0deg 100% 8%);
+  --color-checkbox-accent-color: rgb(255 165 0);
   /* Colors for styling inputs */
   --color-input-outline: rgb(189 193 198);
   --color-input-outline-active: rgb(138 180 248);

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 */
   }
 
@@ -215,4 +215,20 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * {
     forced-color-adjust: none;
     color: HighlightText;
   }
+
+  .tree-outline:not(.hide-selection-when-blurred) li.selected:focus-visible devtools-adorner,
+  .tree-outline.hide-selection-when-blurred li.selected:focus-visible devtools-adorner {
+    --override-adorner-background-color: Highlight;
+    --override-adorner-border-color: HighlightText;
+  }
+
+  .tree-outline:not(.hide-selection-when-blurred) devtools-icon,
+  .tree-outline.hide-selection-when-blurred devtools-icon {
+    --icon-color: ButtonText;
+  }
+
+  .tree-outline:not(.hide-selection-when-blurred) .selected devtools-icon,
+  .tree-outline.hide-selection-when-blurred .selected:focus-visible devtools-icon {
+    --icon-color: HighlightText;
+  }
 }

package/front_end/ui/legacy/viewContainers.css

@@ -71,7 +71,12 @@
 @media (forced-colors: active) {
   .expandable-view-title:focus-visible {
     forced-color-adjust: none;
-    background: canvas !important; /* stylelint-disable-line declaration-no-important */
+    color: HighlightText;
+    background-color: Highlight;
     box-shadow: 0 0 0 2px Highlight inset;
   }
+
+  .expandable-view-title:focus-visible .title-expand-icon {
+    background-color: HighlightText;
+  }
 }

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.937775"
+  "version": "1.0.939144"
 }

package/scripts/eslint_rules/lib/check_test_definitions.js

@@ -47,7 +47,8 @@ module.exports = {
   create: function(context) {
     return {
       MemberExpression(node) {
-        if (node.object.name === 'it' && (node.property.name === 'skip' || node.property.name === 'skipOnPlatforms') &&
+        if ((node.object.name === 'it' || node.object.name === 'describe') &&
+            (node.property.name === 'skip' || node.property.name === 'skipOnPlatforms') &&
             node.parent.type === 'CallExpression') {
           const testNameNode = node.property.name === 'skip' ? node.parent.arguments[0] : node.parent.arguments[1];
 

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}'`);
             }
           });
         }