chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/sources/components/BreakpointsView.test.ts

@@ -26,7 +26,7 @@ import {
   createFakeScriptMapping,
   setupMockedUISourceCode,
 } from '../../../testing/UISourceCodeHelpers.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 
 import * as SourcesComponents from './components.js';
@@ -50,8 +50,6 @@ const GROUP_DIFFERENTIATOR_SELECTOR = '.group-header-differentiator';
 
 const HELLO_JS_FILE = 'hello.js';
 const TEST_JS_FILE = 'test.js';
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 interface LocationTestData {
   url: Platform.DevToolsPath.UrlString;
   lineNumber: number;
@@ -153,7 +151,7 @@ async function createAndInitializeBreakpointsView(): Promise<SourcesComponents.B
   // Force creation of a new BreakpointsView singleton so that it gets correctly re-wired with
   // the current controller singleton (to pick up the latest breakpoint state).
   const component = SourcesComponents.BreakpointsView.BreakpointsView.instance({forceNew: true});
-  await coordinator.done();  // Wait until the initial rendering finishes.
+  await RenderCoordinator.done();  // Wait until the initial rendering finishes.
   renderElementIntoDOM(component);
   return component;
 }
@@ -171,7 +169,7 @@ async function renderNoBreakpoints(
     independentPauseToggles,
     groups: [],
   };
-  await coordinator.done();
+  await RenderCoordinator.done();
   return component;
 }
 
@@ -212,7 +210,7 @@ async function renderSingleBreakpoint(
   };
 
   component.data = data;
-  await coordinator.done();
+  await RenderCoordinator.done();
   return {component, data};
 }
 
@@ -287,7 +285,7 @@ async function renderMultipleBreakpoints(): Promise<{
     ],
   };
   component.data = data;
-  await coordinator.done();
+  await RenderCoordinator.done();
   return {component, data};
 }
 
@@ -334,7 +332,7 @@ function hover(component: SourcesComponents.BreakpointsView.BreakpointsView, sel
   // Dispatch a mouse over.
   component.shadowRoot.querySelector(selector)?.dispatchEvent(new Event('mouseover'));
   // Wait until the re-rendering has happened.
-  return coordinator.done();
+  return RenderCoordinator.done();
 }
 
 describeWithMockConnection('targetSupportsIndependentPauseOnExceptionToggles', () => {
@@ -478,10 +476,10 @@ describeWithEnvironment('BreakpointsSidebarController', () => {
           {forceNew: true, breakpointManager, settings});
       settings.moduleSetting('breakpoints-active').set(true);
       let data = await controller.getUpdatedBreakpointViewData();
-      assert.strictEqual(data.breakpointsActive, true);
+      assert.isTrue(data.breakpointsActive);
       settings.moduleSetting('breakpoints-active').set(false);
       data = await controller.getUpdatedBreakpointViewData();
-      assert.strictEqual(data.breakpointsActive, false);
+      assert.isFalse(data.breakpointsActive);
     });
 
     it('marks groups as editable based on conditional breakpoint support', async () => {
@@ -1050,7 +1048,7 @@ describeWithMockConnection('BreakpointsView', () => {
       ],
     };
     component.data = data;
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     assert.isNotNull(component.shadowRoot);
     const groupSummaries = Array.from(component.shadowRoot.querySelectorAll(SUMMARY_SELECTOR));
@@ -1226,7 +1224,7 @@ describeWithMockConnection('BreakpointsView', () => {
       // Make sure that at least one breakpoint is enabled.
       data.groups[0].breakpointItems[0].status = SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED;
       component.data = data;
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       await hover(component, SUMMARY_SELECTOR);
 
@@ -1249,7 +1247,7 @@ describeWithMockConnection('BreakpointsView', () => {
       }
 
       component.data = data;
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       await hover(component, SUMMARY_SELECTOR);
 
@@ -1273,7 +1271,7 @@ describeWithMockConnection('BreakpointsView', () => {
         data.groups[0].breakpointItems[i].status = SourcesComponents.BreakpointsView.BreakpointStatus.ENABLED;
       }
       component.data = data;
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       await hover(component, SUMMARY_SELECTOR);
 
@@ -1302,7 +1300,7 @@ describeWithMockConnection('BreakpointsView', () => {
         data.groups[0].breakpointItems[i].status = SourcesComponents.BreakpointsView.BreakpointStatus.DISABLED;
       }
       component.data = data;
-      await coordinator.done();
+      await RenderCoordinator.done();
 
       await hover(component, SUMMARY_SELECTOR);
 
@@ -1350,7 +1348,7 @@ describeWithMockConnection('BreakpointsView', () => {
     };
 
     component.data = data;
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isNotNull(component.shadowRoot);
 
     await hover(component, BREAKPOINT_ITEM_SELECTOR);
@@ -1555,7 +1553,7 @@ describeWithMockConnection('BreakpointsView', () => {
            const pauseOnUncaughtExceptionsCheckbox = pauseOnUncaughtExceptionsItem.querySelector('input');
            assert.instanceOf(pauseOnUncaughtExceptionsCheckbox, HTMLInputElement);
            dispatchClickEvent(pauseOnUncaughtExceptionsCheckbox);
-           await coordinator.done();
+           await RenderCoordinator.done();
          }
          {
            // Check that clicking on it actually unchecked.
@@ -1700,7 +1698,7 @@ describeWithMockConnection('BreakpointsView', () => {
         ],
       };
       component.data = data;
-      await coordinator.done();
+      await RenderCoordinator.done();
       return {component, data};
     }
 
@@ -1727,7 +1725,7 @@ describeWithMockConnection('BreakpointsView', () => {
         // Focus on second group by clicking on it, then press Home button.
         dispatchClickEvent(secondGroupsSummary);
         dispatchKeyDownEvent(secondGroupsSummary, {key: 'Home', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
 
         const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);
@@ -1747,7 +1745,7 @@ describeWithMockConnection('BreakpointsView', () => {
         // Focus on the pause-on-exceptions line by clicking on it, then press End key.
         dispatchClickEvent(pauseOnUncaughtExceptions);
         dispatchKeyDownEvent(pauseOnUncaughtExceptions, {key: 'End', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
 
         const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);
@@ -1763,7 +1761,7 @@ describeWithMockConnection('BreakpointsView', () => {
         // Expand the last group.
         data.groups[1].expanded = true;
         component.data = data;
-        await coordinator.done();
+        await RenderCoordinator.done();
 
         assert.isNotNull(component.shadowRoot);
         const firstGroupSummary = component.shadowRoot.querySelector(SUMMARY_SELECTOR);
@@ -1772,7 +1770,7 @@ describeWithMockConnection('BreakpointsView', () => {
         // First focus on the first group by clicking on it, then press the End button.
         dispatchClickEvent(firstGroupSummary);
         dispatchKeyDownEvent(firstGroupSummary, {key: 'End', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
 
         const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);
@@ -1797,7 +1795,7 @@ describeWithMockConnection('BreakpointsView', () => {
            // Focus on the pause on exception, and navigate one down.
            dispatchClickEvent(pauseOnCaughtException);
            dispatchKeyDownEvent(pauseOnCaughtException, {key: 'ArrowDown', bubbles: true});
-           await coordinator.done();
+           await RenderCoordinator.done();
 
            const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
            const firstSummary = component.shadowRoot.querySelector(`${DETAILS_SELECTOR} > ${SUMMARY_SELECTOR}`);
@@ -1818,7 +1816,7 @@ describeWithMockConnection('BreakpointsView', () => {
            // Focus on the collapsed group and collapse it by clicking on it. Then navigate down.
            dispatchClickEvent(collapsedGroupSummary);
            dispatchKeyDownEvent(collapsedGroupSummary, {key: 'ArrowDown', bubbles: true});
-           await coordinator.done();
+           await RenderCoordinator.done();
 
            const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
            assert.instanceOf(selected, HTMLElement);
@@ -1840,7 +1838,7 @@ describeWithMockConnection('BreakpointsView', () => {
         // Focus on the expanded group and collapse it by clicking on it. Then navigate down.
         dispatchClickEvent(firstGroupSummary);
         dispatchKeyDownEvent(firstGroupSummary, {key: 'ArrowDown', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
 
         const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);
@@ -1863,7 +1861,7 @@ describeWithMockConnection('BreakpointsView', () => {
         // Focus on the first breakpoint item. Then navigate up.
         dispatchClickEvent(firstBreakpointItem);
         dispatchKeyDownEvent(firstBreakpointItem, {key: 'ArrowDown', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
 
         const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);
@@ -1885,7 +1883,7 @@ describeWithMockConnection('BreakpointsView', () => {
         // Focus on the summary element.
         dispatchClickEvent(firstSummary);
         dispatchKeyDownEvent(firstSummary, {key: 'ArrowUp', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
 
         const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
         const pauseOnUncaughtExceptions = component.shadowRoot.querySelector(PAUSE_ON_CAUGHT_EXCEPTIONS_SELECTOR);
@@ -1906,7 +1904,7 @@ describeWithMockConnection('BreakpointsView', () => {
         // Focus on first breakpoint item. Then navigate up.
         dispatchClickEvent(firstBreakpointItem);
         dispatchKeyDownEvent(firstBreakpointItem, {key: 'ArrowUp', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
 
         const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);
@@ -1930,7 +1928,7 @@ describeWithMockConnection('BreakpointsView', () => {
         // Focus on last breakpoint item. Then navigate up.
         dispatchClickEvent(lastBreakpointItem);
         dispatchKeyDownEvent(lastBreakpointItem, {key: 'ArrowUp', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
 
         const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);
@@ -1950,7 +1948,7 @@ describeWithMockConnection('BreakpointsView', () => {
         // Focus on the group. Then navigate up.
         dispatchClickEvent(secondGroupSummary);
         dispatchKeyDownEvent(secondGroupSummary, {key: 'ArrowUp', bubbles: true});
-        await coordinator.done();
+        await RenderCoordinator.done();
 
         const selected = component.shadowRoot.querySelector(TABBABLE_SELECTOR);
         assert.instanceOf(selected, HTMLElement);

package/front_end/panels/sources/components/BreakpointsView.ts

@@ -16,7 +16,7 @@ import * as TextUtils from '../../../models/text_utils/text_utils.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -109,8 +109,6 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/components/BreakpointsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 const MAX_SNIPPET_LENGTH = 200;
 
 export interface BreakpointsViewData {
@@ -568,7 +566,7 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   }
 
   override async render(): Promise<void> {
-    await coordinator.write('BreakpointsView render', () => {
+    await RenderCoordinator.write('BreakpointsView render', () => {
       const clickHandler = async(event: Event): Promise<void> => {
         const currentTarget = event.currentTarget as HTMLElement;
         await this.#setSelected(currentTarget);
@@ -616,7 +614,7 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
     // If no element is tabbable, set the pause-on-exceptions to be tabbable. This can happen
     // if the previously focused element was removed.
-    await coordinator.write('BreakpointsView make pause-on-exceptions focusable', () => {
+    await RenderCoordinator.write('BreakpointsView make pause-on-exceptions focusable', () => {
       if (this.#shadow.querySelector('[tabindex="0"]') === null) {
         const element = this.#shadow.querySelector<HTMLElement>('[data-first-pause]');
         element?.setAttribute('tabindex', '0');
@@ -653,7 +651,7 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     if (!element) {
       return;
     }
-    void coordinator.write('BreakpointsView focus on selected element', () => {
+    void RenderCoordinator.write('BreakpointsView focus on selected element', () => {
       const prevSelected = this.#shadow.querySelector('[tabindex="0"]');
       prevSelected?.setAttribute('tabindex', '-1');
       element.setAttribute('tabindex', '0');
@@ -664,11 +662,11 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   async #handleArrowKey(key: Platform.KeyboardUtilities.ArrowKey, target: HTMLElement): Promise<void> {
     const setGroupExpandedState = (detailsElement: HTMLDetailsElement, expanded: boolean): Promise<void> => {
       if (expanded) {
-        return coordinator.write('BreakpointsView expand', () => {
+        return RenderCoordinator.write('BreakpointsView expand', () => {
           detailsElement.setAttribute('open', '');
         });
       }
-      return coordinator.write('BreakpointsView expand', () => {
+      return RenderCoordinator.write('BreakpointsView expand', () => {
         detailsElement.removeAttribute('open');
       });
     };
@@ -1004,7 +1002,7 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         pauseOnCaughtCheckbox.click();
       }
 
-      void coordinator.write('BreakpointsView update pause-on-uncaught-exception', () => {
+      void RenderCoordinator.write('BreakpointsView update pause-on-uncaught-exception', () => {
         // Disable/enable the pause on caught exception checkbox depending on whether
         // or not we are pausing on uncaught exceptions.
         if (checked) {

package/front_end/panels/sources/components/HeadersView.test.ts

@@ -25,12 +25,10 @@ import {
   recordedMetricsContain,
   resetRecordedMetrics,
 } from '../../../testing/UserMetricsHelpers.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as SourcesComponents from './components.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 describe('HeadersView', () => {
   const commitWorkingCopySpy = sinon.spy();
 
@@ -83,7 +81,7 @@ describe('HeadersView', () => {
     };
     renderElementIntoDOM(editor);
     assert.isNotNull(editor.shadowRoot);
-    await coordinator.done();
+    await RenderCoordinator.done();
     return editor;
   }
 
@@ -121,11 +119,11 @@ describe('HeadersView', () => {
 
     const editorWrapper = new SourcesComponents.HeadersView.HeadersView(uiSourceCode);
     await uiSourceCode.requestContentData();
-    await coordinator.done();
+    await RenderCoordinator.done();
     const editor = editorWrapper.getComponent();
     renderElementIntoDOM(editor);
     assert.isNotNull(editor.shadowRoot);
-    await coordinator.done();
+    await RenderCoordinator.done();
     workspace.removeProject(project);
     return editor;
   }
@@ -135,7 +133,7 @@ describe('HeadersView', () => {
     editable.innerText = value;
     dispatchInputEvent(editable, {inputType: 'insertText', data: value, bubbles: true, composed: true});
     dispatchFocusOutEvent(editable, {bubbles: true});
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isTrue(recordedMetricsContain(
         Host.InspectorFrontendHostAPI.EnumeratedHistogram.ActionTaken,
         Host.UserMetrics.Action.HeaderOverrideHeadersFileEdited));
@@ -146,7 +144,7 @@ describe('HeadersView', () => {
     const button = rowElements[rowIndex].querySelector(selector);
     assert.instanceOf(button, HTMLElement);
     button.click();
-    await coordinator.done();
+    await RenderCoordinator.done();
   }
 
   function getRowContent(shadowRoot: ShadowRoot): string[] {
@@ -193,7 +191,7 @@ describe('HeadersView', () => {
     };
     renderElementIntoDOM(editor);
     assert.isNotNull(editor.shadowRoot);
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const errorHeader = editor.shadowRoot.querySelector('.error-header');
     assert.strictEqual(errorHeader?.textContent, 'Error when parsing \'.headers\'.');
@@ -243,7 +241,7 @@ describe('HeadersView', () => {
     assert.deepEqual(getSingleRowContent(editor.shadowRoot, 1), 'server:DevTools Unit Test Server');
 
     const editables = editor.shadowRoot.querySelectorAll('.editable');
-    assert.strictEqual(editables.length, 8);
+    assert.lengthOf(editables, 8);
     const headerValue = editables[2] as HTMLElement;
     headerValue.focus();
     headerValue.innerText = 'discard_me';
@@ -253,7 +251,7 @@ describe('HeadersView', () => {
       key: 'Escape',
       bubbles: true,
     });
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.deepEqual(getSingleRowContent(editor.shadowRoot, 1), 'server:DevTools Unit Test Server');
 
     const headerName = editables[1] as HTMLElement;
@@ -265,7 +263,7 @@ describe('HeadersView', () => {
       key: 'Escape',
       bubbles: true,
     });
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.deepEqual(getSingleRowContent(editor.shadowRoot, 1), 'server:DevTools Unit Test Server');
   });
 
@@ -303,7 +301,7 @@ describe('HeadersView', () => {
     const editor = await renderEditor();
     assert.isNotNull(editor.shadowRoot);
     const editables = editor.shadowRoot.querySelectorAll('.editable');
-    assert.strictEqual(editables.length, 8);
+    assert.lengthOf(editables, 8);
 
     const lastHeaderName = editables[6] as HTMLSpanElement;
     const lastHeaderValue = editables[7] as HTMLSpanElement;
@@ -328,7 +326,7 @@ describe('HeadersView', () => {
     const editor = await renderEditor();
     assert.isNotNull(editor.shadowRoot);
     const editables = editor.shadowRoot.querySelectorAll('.editable');
-    assert.strictEqual(editables.length, 8);
+    assert.lengthOf(editables, 8);
 
     const applyTo = editables[5] as HTMLSpanElement;
     assert.strictEqual(applyTo.innerHTML, '*.jpg');
@@ -355,7 +353,7 @@ describe('HeadersView', () => {
     ]);
 
     const editables = editor.shadowRoot.querySelectorAll('.editable');
-    assert.strictEqual(editables.length, 8);
+    assert.lengthOf(editables, 8);
 
     const headerName = editables[1] as HTMLSpanElement;
     assert.strictEqual(headerName.innerHTML, 'server');
@@ -365,7 +363,7 @@ describe('HeadersView', () => {
     assert.strictEqual(headerName.innerHTML, '');
 
     dispatchFocusOutEvent(headerName, {bubbles: true});
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     rows = getRowContent(editor.shadowRoot);
     assert.deepEqual(rows, [
@@ -382,7 +380,7 @@ describe('HeadersView', () => {
 
   it('allows adding headers', async () => {
     const editor = await renderEditorWithinWrapper();
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isNotNull(editor.shadowRoot);
 
     let rows = getRowContent(editor.shadowRoot);
@@ -426,7 +424,7 @@ describe('HeadersView', () => {
 
   it('allows adding "ApplyTo"-blocks', async () => {
     const editor = await renderEditorWithinWrapper();
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isNotNull(editor.shadowRoot);
 
     let rows = getRowContent(editor.shadowRoot);
@@ -441,7 +439,7 @@ describe('HeadersView', () => {
     const button = editor.shadowRoot.querySelector('.add-block');
     assert.instanceOf(button, HTMLElement);
     button.click();
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     rows = getRowContent(editor.shadowRoot);
     assert.deepEqual(rows, [
@@ -476,7 +474,7 @@ describe('HeadersView', () => {
 
   it('allows removing headers', async () => {
     const editor = await renderEditorWithinWrapper();
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isNotNull(editor.shadowRoot);
 
     let rows = getRowContent(editor.shadowRoot);
@@ -520,7 +518,7 @@ describe('HeadersView', () => {
 
   it('allows removing "ApplyTo"-blocks', async () => {
     const editor = await renderEditorWithinWrapper();
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.isNotNull(editor.shadowRoot);
 
     let rows = getRowContent(editor.shadowRoot);
@@ -548,7 +546,7 @@ describe('HeadersView', () => {
     const editor = await renderEditor();
     assert.isNotNull(editor.shadowRoot);
     const editables = editor.shadowRoot.querySelectorAll('.editable');
-    assert.strictEqual(editables.length, 8);
+    assert.lengthOf(editables, 8);
     assert.deepEqual(getSingleRowContent(editor.shadowRoot, 2), 'access-control-allow-origin:*');
 
     const headerValue = editables[4] as HTMLSpanElement;
@@ -557,7 +555,7 @@ describe('HeadersView', () => {
     dt.setData('text/plain', 'foo\nbar');
     dt.setData('text/html', 'This is <b>bold</b>');
     dispatchPasteEvent(headerValue, {clipboardData: dt, bubbles: true});
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.deepEqual(getSingleRowContent(editor.shadowRoot, 2), 'access-control-allow-origin:foo bar');
     assert.isTrue(recordedMetricsContain(
         Host.InspectorFrontendHostAPI.EnumeratedHistogram.ActionTaken,

package/front_end/panels/sources/navigatorTree.css

@@ -105,8 +105,8 @@
   color: var(--icon-folder-authored);
 }
 
-.navigator-fs-tree-item:not(.has-mapped-files):not(.selected) > :not(.selection),
-.navigator-fs-folder-tree-item:not(.has-mapped-files):not(.selected) > :not(.selection) {
+.navigator-fs-tree-item:not(.has-mapped-files, .selected) > :not(.selection),
+.navigator-fs-folder-tree-item:not(.has-mapped-files, .selected) > :not(.selection) {
   color: var(--sys-color-on-surface-subtle);
   opacity: 40%;
 
@@ -127,7 +127,7 @@
   }
 
   .tree-outline li:hover:not(.selected) .selection,
-  .tree-outline li:hover:not(:has(span[is="dt-checkbox"])) .selection {
+  .tree-outline li:hover:not(:has(dt-checkbox)) .selection {
     forced-color-adjust: none;
     background-color: Highlight;
   }
@@ -142,8 +142,8 @@
     color: HighlightText;
   }
 
-  .navigator-fs-tree-item:not(.has-mapped-files):not(.selected) > :not(.selection),
-  .navigator-fs-folder-tree-item:not(.has-mapped-files):not(.selected) > :not(.selection),
+  .navigator-fs-tree-item:not(.has-mapped-files, .selected) > :not(.selection),
+  .navigator-fs-folder-tree-item:not(.has-mapped-files, .selected) > :not(.selection),
   .is-ignore-listed {
     filter: none;
     opacity: 100%;

package/front_end/panels/sources/sources-meta.ts

@@ -143,7 +143,7 @@ const UIStrings = {
   /**
    *@description Title of an action in the sources tool to close all
    */
-  closeAll: 'Close All',
+  closeAll: 'Close all',
   /**
    *@description Text in the Shortcuts page to explain a keyboard shortcut (jump to previous editing location in text editor)
    */
@@ -909,6 +909,22 @@ UI.ActionRegistration.registerActionExtension({
     return new Sources.SourcesView.ActionDelegate();
   },
   title: i18nLazyString(UIStrings.closeAll),
+  bindings: [
+    {
+      platform: UI.ActionRegistration.Platforms.WINDOWS_LINUX,
+      shortcut: 'Ctrl+K W',
+      keybindSets: [
+        UI.ActionRegistration.KeybindSet.VS_CODE,
+      ],
+    },
+    {
+      platform: UI.ActionRegistration.Platforms.MAC,
+      shortcut: 'Meta+K W',
+      keybindSets: [
+        UI.ActionRegistration.KeybindSet.VS_CODE,
+      ],
+    },
+  ],
 });
 
 UI.ActionRegistration.registerActionExtension({

package/front_end/panels/sources/sourcesPanel.css

@@ -56,13 +56,13 @@
   margin-top: 0;
 }
 
-.scripts-debug-toolbar-drawer > [is="dt-checkbox"] {
+.scripts-debug-toolbar-drawer > dt-checkbox {
   display: none;
   padding-left: 3px;
   height: 28px;
 }
 
-.scripts-debug-toolbar-drawer.expanded > [is="dt-checkbox"] {
+.scripts-debug-toolbar-drawer.expanded > dt-checkbox {
   display: flex;
 }
 

package/front_end/panels/timeline/AnimationsTrackAppender.ts

@@ -7,10 +7,9 @@ import * as Trace from '../../models/trace/trace.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
-import {addDecorationToEvent, buildGroupStyle, buildTrackHeader, getFormattedTime} from './AppenderUtils.js';
+import {addDecorationToEvent, buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
-  type HighlightedEntryInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -75,9 +74,4 @@ export class AnimationsTrackAppender implements TrackAppender {
     const {displayName} = event.args.data.beginEvent.args.data;
     return displayName || event.name;
   }
-
-  highlightedEntryInfo(event: Trace.Types.Events.SyntheticAnimationPair): HighlightedEntryInfo {
-    const title = this.titleForEvent(event);
-    return {title, formattedTime: getFormattedTime(event.dur)};
-  }
 }

package/front_end/panels/timeline/AppenderUtils.ts

@@ -81,7 +81,7 @@ export function buildTrackHeader(
  * Returns the time info shown when an event is hovered in the timeline.
  * @param totalTime the total time of the hovered event.
  * @param selfTime the self time of the hovered event.
- * @returns the formatted time string for highlightedEntryInfo
+ * @returns the formatted time string for popoverInfo
  */
 export function getFormattedTime(
     totalTime?: Trace.Types.Timing.MicroSeconds, selfTime?: Trace.Types.Timing.MicroSeconds): string {
@@ -106,6 +106,8 @@ export function getFormattedTime(
 
 /**
  * Returns the first level that is available for an event.
+ * Important: if you are walking through an array of events and calling this,
+ * the events MUST be sorted.
  */
 export function getEventLevel(event: Trace.Types.Events.Event, lastTimestampByLevel: LastTimestampByLevel): number {
   let level = 0;