chrome-devtools-frontend 1.0.1721762 → 1.0.1726686

package/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css

@@ -4,155 +4,170 @@
  * found in the LICENSE file.
  */
 
-.root {
-  color: var(--sys-color-on-surface);
-  width: 100%;
-}
+@scope to (devtools-widget > *) {
+  /* Host styles can now reach the elements of this form. For example,
+   * the inspector common styles set "box-sizing: border-box" on all
+   * elements, and ListWidget editors set margins on all inputs. Restore
+   * the default box sizing and input margins of the browser. */
+  :scope * {
+    box-sizing: revert;
+  }
 
-.tree-title {
-  font-weight: 700;
-  display: flex;
-  align-items: center;
+  :scope input {
+    margin: revert;
+  }
 
-  & > [aria-controls="form-container"] {
-    margin-left: var(--sys-size-2);
-    padding-right: var(--sys-size-3);
+  .root {
+    color: var(--sys-color-on-surface);
+    width: 100%;
+  }
 
-    & > [name="triangle-right"],
-    & > [name="triangle-down"] {
-      vertical-align: bottom;
-    }
+  .tree-title {
+    font-weight: 700;
+    display: flex;
+    align-items: center;
 
-    &[aria-expanded="true"] > [name="triangle-right"] {
-      display: none;
-    }
+    & > [aria-controls="form-container"] {
+      margin-left: var(--sys-size-2);
+      padding-right: var(--sys-size-3);
+
+      & > [name="triangle-right"],
+      & > [name="triangle-down"] {
+        vertical-align: bottom;
+      }
 
-    &[aria-expanded="false"] > [name="triangle-down"] {
-      display: none;
+      &[aria-expanded="true"] > [name="triangle-right"] {
+        display: none;
+      }
+
+      &[aria-expanded="false"] > [name="triangle-down"] {
+        display: none;
+      }
     }
   }
-}
-
-.form-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr auto;
-  align-items: center;
-  gap: var(--sys-size-5) 10px;
-  padding: 0 10px;
-}
 
-.full-row {
-  grid-column: 1 / 5;
-}
+  .form-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr auto;
+    align-items: center;
+    gap: var(--sys-size-5) 10px;
+    padding: 0 10px;
+  }
 
-.form-factors-checkbox-group {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--sys-size-4) 10px;
-}
+  .full-row {
+    grid-column: 1 / 5;
+  }
 
-.form-factor-checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: var(--sys-size-4);
-  white-space: nowrap;
-}
+  .form-factors-checkbox-group {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--sys-size-4) 10px;
+  }
 
-hr.section-separator {
-  grid-column: 1 / 5; /* Ensures the separator spans all columns */
-  border: none;
-  margin-top: var(--sys-size-1);
-}
+  .form-factor-checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-4);
+    white-space: nowrap;
+  }
 
-.half-row {
-  grid-column: span 2;
-}
+  hr.section-separator {
+    grid-column: 1 / 5; /* Ensures the separator spans all columns */
+    border: none;
+    margin-top: var(--sys-size-1);
+  }
 
-.mobile-checkbox-container {
-  display: flex;
-}
+  .half-row {
+    grid-column: span 2;
+  }
 
-.device-model-input {
-  grid-column: 1 / 4;
-}
+  .mobile-checkbox-container {
+    display: flex;
+  }
 
-.input-field {
-  color: var(--sys-color-on-surface);
-  padding: 3px var(--sys-size-4);
-  border-radius: var(--sys-size-2);
-  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
-  background-color: var(--sys-color-cdt-base-container);
-  font-size: inherit;
-  height: 18px;
-}
+  .device-model-input {
+    grid-column: 1 / 4;
+  }
 
-.input-field::placeholder {
-    color: var(--sys-color-on-surface-subtle);
-}
+  .input-field {
+    color: var(--sys-color-on-surface);
+    padding: 3px var(--sys-size-4);
+    border-radius: var(--sys-size-2);
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+    background-color: var(--sys-color-cdt-base-container);
+    font-family: inherit;
+    font-size: inherit;
+    height: 18px;
+  }
 
-.input-field:focus {
-  border: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
-  outline-style: none;
-}
+  .input-field::placeholder {
+      color: var(--sys-color-on-surface-subtle);
+  }
 
-.add-container {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: var(--sys-size-4);
-}
+  .input-field:focus {
+    border: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
+    outline-style: none;
+  }
 
-.add-icon {
-  margin-right: 5px;
-}
+  .add-container {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-4);
+  }
 
-.brand-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  justify-content: space-between;
-}
+  .add-icon {
+    margin-right: 5px;
+  }
 
-.brand-row > input {
-  width: 100%;
-}
+  .brand-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: space-between;
+  }
 
-.info-icon {
-  margin-left: 5px;
-  margin-right: var(--sys-size-1);
-  height: var(--sys-size-8);
-  width: var(--sys-size-8);
-}
+  .brand-row > input {
+    width: 100%;
+  }
 
-.link,
-.devtools-link {
-  color: var(--sys-color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-  outline-offset: var(--sys-size-2);
-  font-weight: 400;
-}
+  .info-icon {
+    margin-left: 5px;
+    margin-right: var(--sys-size-1);
+    height: var(--sys-size-8);
+    width: var(--sys-size-8);
+  }
 
-devtools-icon + .link {
-  margin-inline-start: var(--sys-size-2);
-}
+  .link,
+  .devtools-link {
+    color: var(--sys-color-primary);
+    text-decoration: underline;
+    cursor: pointer;
+    outline-offset: var(--sys-size-2);
+    font-weight: 400;
+  }
 
-.hide-container {
-  display: none;
-}
+  devtools-icon + .link {
+    margin-inline-start: var(--sys-size-2);
+  }
 
-.input-field-label-container {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
+  .hide-container {
+    display: none;
+  }
 
-@media (forced-colors: active) {
-  .input-field {
-    border: var(--sys-size-1) solid;
+  .input-field-label-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
   }
 
-  .tree-title[aria-disabled="true"] {
-    color: GrayText;
+  @media (forced-colors: active) {
+    .input-field {
+      border: var(--sys-size-1) solid;
+    }
+
+    .tree-title[aria-disabled="true"] {
+      color: GrayText;
+    }
   }
 }

package/front_end/panels/sources/NavigatorView.ts

@@ -140,6 +140,20 @@ const UIStrings = {
    *              shows up for disconnected automatic workspace folders.
    */
   connectFolderToWorkspace: 'Connect to workspace',
+  /**
+   * @description A context menu item in the Sources navigator of the Sources panel.
+   */
+  run: 'Run',
+  /**
+   * @description Text to save content as a specific file type.
+   */
+  saveAs: 'Save as…',
+  /**
+   * @description An error message logged to the Console panel when the user uses
+   *              the "Save as…" context menu in the Sources panel and the operation
+   *              fails.
+   */
+  saveAsFailed: 'Failed to save file to disk',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/sources/NavigatorView.ts', UIStrings);
@@ -174,30 +188,22 @@ const TYPE_ORDERS = new Map([
 
 export interface ViewInput {
   treeElement: HTMLElement;
-  placeholder: UI.Widget.Widget|null;
   showTree: boolean;
-  onContextMenu: (event: Event) => void;
 }
 
 export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target): void => {
-  const showPlaceholder = Boolean(input.placeholder && !input.showTree);
+  const showPlaceholder = !input.showTree;
   // clang-format off
   render(
       html`
         <style>${navigatorViewStyles}</style>
         <slot name="header"></slot>
-        <div class="vbox flex-auto" ?hidden=${!showPlaceholder} @contextmenu=${input.onContextMenu}>
-          <slot name="placeholder">
-            ${input.placeholder ? html`
-              <devtools-widget class="vbox flex-auto" ?hidden=${!showPlaceholder}>
-                ${input.placeholder.element}
-              </devtools-widget>
-            ` : Lit.nothing}
-          </slot>
+        <div class="vbox flex-auto" ?hidden=${!showPlaceholder}>
+          <slot name="placeholder"></slot>
         </div>
-        <div class="vbox flex-auto" ?hidden=${showPlaceholder} @contextmenu=${input.onContextMenu}>
+        <div class="vbox flex-auto" ?hidden=${showPlaceholder}>
           ${input.treeElement}
         </div>
       `,
@@ -205,11 +211,28 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
   // clang-format on
 };
 
-export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.Observer {
+export const enum Events {
+  UI_SOURCE_CODE_ADDED = 'ui-source-code-added',
+  SOURCE_SELECTED = 'source-selected',
+}
+
+export interface SourceSelectedEvent {
+  uiSourceCode: Workspace.UISourceCode.UISourceCode;
+  focusSource: boolean;
+}
+
+export interface EventTypes {
+  [Events.UI_SOURCE_CODE_ADDED]: Workspace.UISourceCode.UISourceCode;
+  [Events.SOURCE_SELECTED]: SourceSelectedEvent;
+}
+
+const NavigatorViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(UI.Widget.VBox);
+
+export class NavigatorView extends NavigatorViewBase implements SDK.TargetManager.Observer {
   static override readonly INJECT: readonly[typeof Bindings.NetworkProject.NetworkProjectManager] =
       [Bindings.NetworkProject.NetworkProjectManager] as const;
 
-  private placeholder: UI.Widget.Widget|null;
   scriptsTree: UI.TreeOutline.TreeOutlineInShadow;
   private readonly uiSourceCodeNodes:
       Platform.MapUtilities.Multimap<Workspace.UISourceCode.UISourceCode, NavigatorUISourceCodeTreeNode>;
@@ -223,7 +246,9 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   private navigatorGroupByAuthoredSetting?: Common.Settings.Setting<boolean>;
   #navigatorGroupByAuthoredChangeListener?: () => void;
   #enableAuthoredGrouping = false;
-  #workspace!: Workspace.Workspace.WorkspaceImpl;
+  #projectFilter?: (project: Workspace.Workspace.Project) => boolean;
+  #workspace = Workspace.Workspace.WorkspaceImpl.instance();
+  #initialized = false;
   private groupByFrame?: boolean;
   private groupByAuthored?: boolean;
   private groupByDomain?: boolean;
@@ -235,15 +260,10 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       [networkProjectManager]: UI.Widget.WidgetDependencies<typeof NavigatorView> =
           [Bindings.NetworkProject.NetworkProjectManager.instance()],
       view: View = DEFAULT_VIEW,
-      options?: UI.Widget.WidgetOptions,
   ) {
-    super(element, {
-      ...options,
-      useShadowDom: true,
-    });
+    super(element, {useShadowDom: true});
     this.#view = view;
 
-    this.placeholder = null;
     this.scriptsTree = new UI.TreeOutline.TreeOutlineInShadow(UI.TreeOutline.TreeVariant.NAVIGATION_TREE);
     this.scriptsTree.registerRequiredCSS(navigatorTreeStyles);
 
@@ -286,12 +306,11 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
         SDK.TargetManager.Events.NAME_CHANGED, this.targetNameChanged, this);
 
     SDK.TargetManager.TargetManager.instance().observeTargets(this);
-    this.resetWorkspace(Workspace.Workspace.WorkspaceImpl.instance());
-    this.#workspace.uiSourceCodes().forEach(this.addUISourceCode.bind(this));
     networkProjectManager.addEventListener(Bindings.NetworkProject.Events.FRAME_ATTRIBUTION_ADDED,
                                            this.frameAttributionAdded, this);
     networkProjectManager.addEventListener(Bindings.NetworkProject.Events.FRAME_ATTRIBUTION_REMOVED,
                                            this.frameAttributionRemoved, this);
+    this.requestUpdate();
   }
 
   override wasShown(): void {
@@ -319,7 +338,22 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       this.#navigatorGroupByAuthoredChangeListener = this.groupingChanged.bind(this);
       this.navigatorGroupByAuthoredSetting.addChangeListener(this.#navigatorGroupByAuthoredChangeListener);
     }
-    if (this.#workspace && Boolean(this.groupByAuthored) !== Boolean(this.navigatorGroupByAuthoredSetting?.get())) {
+    if (this.#initialized && Boolean(this.groupByAuthored) !== Boolean(this.navigatorGroupByAuthoredSetting?.get())) {
+      this.groupingChanged();
+    }
+    this.requestUpdate();
+  }
+
+  get projectFilter(): ((project: Workspace.Workspace.Project) => boolean)|undefined {
+    return this.#projectFilter;
+  }
+
+  set projectFilter(projectFilter: ((project: Workspace.Workspace.Project) => boolean)|undefined) {
+    if (this.#projectFilter === projectFilter) {
+      return;
+    }
+    this.#projectFilter = projectFilter;
+    if (this.#initialized) {
       this.groupingChanged();
     }
     this.requestUpdate();
@@ -371,18 +405,16 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     return Platform.StringUtilities.naturalOrderComparator(treeElement1.titleAsText(), treeElement2.titleAsText());
   }
 
-  setPlaceholder(placeholder: UI.Widget.Widget): void {
-    console.assert(!this.placeholder, 'A placeholder widget was already set');
-    this.placeholder = placeholder;
-    this.requestUpdate();
-  }
-
   override performUpdate(): void {
+    if (!this.#initialized) {
+      this.#initialized = true;
+      this.initGrouping();
+      this.resetWorkspace(this.#workspace);
+      this.#workspace.uiSourceCodes().forEach(this.addUISourceCode.bind(this));
+    }
     this.#view({
       treeElement: this.scriptsTree.element,
-      placeholder: this.placeholder,
       showTree: Boolean(this.scriptsTree.firstChild()),
-      onContextMenu: this.handleContextMenu.bind(this),
     },
                undefined, this.contentElement);
   }
@@ -497,11 +529,10 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     }
   }
 
-  workspace(): Workspace.Workspace.WorkspaceImpl {
-    return this.#workspace;
-  }
-
   acceptProject(project: Workspace.Workspace.Project): boolean {
+    if (this.#projectFilter) {
+      return this.#projectFilter(project);
+    }
     return !project.isServiceProject();
   }
 
@@ -558,7 +589,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     } else {
       this.addUISourceCodeNode(uiSourceCode, null);
     }
-    this.uiSourceCodeAdded(uiSourceCode);
+    this.dispatchEventToListeners(Events.UI_SOURCE_CODE_ADDED, uiSourceCode);
   }
 
   private addUISourceCodeNode(
@@ -588,9 +619,6 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     this.selectDefaultTreeNode();
   }
 
-  uiSourceCodeAdded(_uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-  }
-
   private uiSourceCodeAddedCallback(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>):
       void {
     const uiSourceCode = event.data;
@@ -912,11 +940,13 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   }
 
   sourceSelected(uiSourceCode: Workspace.UISourceCode.UISourceCode, focusSource: boolean): void {
+    this.dispatchEventToListeners(Events.SOURCE_SELECTED, {uiSourceCode, focusSource});
     void Common.Revealer.reveal(uiSourceCode, !focusSource);
   }
 
   #isUISourceCodeOrAnyAncestorSelected(node: NavigatorUISourceCodeTreeNode): boolean {
-    const selectedTreeElement = (this.scriptsTree.selectedTreeElement as NavigatorSourceTreeElement | null);
+    const selectedTreeElement =
+        (this.scriptsTree.selectedTreeElement as NavigatorSourceTreeElement | NavigatorFolderTreeElement | null);
     const selectedNode = selectedTreeElement?.node;
     let currentNode: NavigatorTreeNode|null = node;
     while (currentNode) {
@@ -924,7 +954,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
         return true;
       }
       currentNode = currentNode.parent;
-      if (!(node instanceof NavigatorGroupTreeNode || node instanceof NavigatorFolderTreeElement)) {
+      if (!(currentNode instanceof NavigatorGroupTreeNode || currentNode instanceof NavigatorFolderTreeNode)) {
         break;
       }
     }
@@ -1022,9 +1052,6 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     }
   }
 
-  handleContextMenu(_event: Event): void {
-  }
-
   private async renameShortcut(): Promise<boolean> {
     const selectedTreeElement = (this.scriptsTree.selectedTreeElement as NavigatorSourceTreeElement | null);
     const node = selectedTreeElement?.node;
@@ -1074,6 +1101,22 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
 
   handleFileContextMenu(event: Event, node: NavigatorUISourceCodeTreeNode): void {
     const uiSourceCode = node.uiSourceCode();
+    if (Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(uiSourceCode)) {
+      const contextMenu = new UI.ContextMenu.ContextMenu(event);
+      contextMenu.headerSection().appendItem(i18nString(UIStrings.run),
+                                             () => Snippets.ScriptSnippetFileSystem.evaluateScriptSnippet(uiSourceCode),
+                                             {jslogContext: 'run'});
+      contextMenu.editSection().appendItem(i18nString(UIStrings.rename), () => this.rename(node, false),
+                                           {jslogContext: 'rename'});
+      contextMenu.editSection().appendItem(i18nString(UIStrings.remove),
+                                           () => uiSourceCode.project().deleteFile(uiSourceCode),
+                                           {jslogContext: 'remove'});
+      contextMenu.saveSection().appendItem(i18nString(UIStrings.saveAs), this.handleSaveAs.bind(this, uiSourceCode),
+                                           {jslogContext: 'save-as'});
+      void contextMenu.show();
+      return;
+    }
+
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.appendApplicableItems(uiSourceCode);
 
@@ -1093,6 +1136,23 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     void contextMenu.show();
   }
 
+  private async handleSaveAs(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
+    uiSourceCode.commitWorkingCopy();
+    const contentData = await uiSourceCode.requestContentData();
+    if (TextUtils.ContentData.ContentData.isError(contentData)) {
+      console.error(`Failed to retrieve content for ${uiSourceCode.url()}: ${contentData}`);
+      Common.Console.Console.instance().error(i18nString(UIStrings.saveAsFailed), /* show=*/ false);
+      return;
+    }
+    await Workspace.FileManager.FileManager.instance().save(this.addJSExtension(uiSourceCode.url()), contentData,
+                                                            /* forceSaveAs=*/ true);
+    Workspace.FileManager.FileManager.instance().close(uiSourceCode.url());
+  }
+
+  private addJSExtension(url: Platform.DevToolsPath.UrlString): Platform.DevToolsPath.UrlString {
+    return Common.ParsedURL.ParsedURL.concatenate(url, '.js');
+  }
+
   private async handleDeleteFolder(node: NavigatorTreeNode): Promise<void> {
     const shouldRemove = await UI.UIUtils.ConfirmDialog.show(
         i18nString(UIStrings.actionCannotBeUndone), i18nString(UIStrings.deleteFolder), undefined,

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -75,7 +75,7 @@ interface ViewInput {
     scope: SDK.DebuggerModel.ScopeChainEntry,
     objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree,
   }>|null;
-  onToggle: (objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree, expanded: boolean) => void;
+  onToggle: (objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree, expanded: boolean, recursively?: boolean) => void;
   onContextMenu: (
       objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree,
       contextMenu: UI.ContextMenu.ContextMenu,
@@ -100,9 +100,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               class="scope-chain-sidebar-pane-section"
               aria-label=${title}
               ?open=${objectTree.expanded}
-              @expand=${(e: Event) => {
-                const customEvent = e as UI.TreeOutline.TreeViewElement.ExpandEvent;
-                input.onToggle(objectTree, customEvent.detail.expanded);
+              @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => {
+                input.onToggle(objectTree, e.detail.expanded, e.detail.recursively);
               }}
               @contextmenu=${(e: Event) => {
                 const contextMenu = new UI.ContextMenu.ContextMenu(e);
@@ -232,7 +231,11 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
       linkifier: this.#linkifier,
       isPaused: Boolean(this.#scopeChainModel),
       scopeChain: this.#scopeChain,
-      onToggle: (objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree, expanded: boolean) => {
+      onToggle: (objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree, expanded: boolean, recursively = false) => {
+        if (expanded && recursively) {
+          void objectTree.expandRecursively().then(() => this.requestUpdate());
+          return;
+        }
         objectTree.expanded = expanded;
         this.requestUpdate();
       },