chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/sources/GoToLineQuickOpen.ts

@@ -12,42 +12,42 @@ import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 const UIStrings = {
   /**
-   *@description Text in Go To Line Quick Open of the Sources panel
+   * @description Text in Go To Line Quick Open of the Sources panel
    */
   noFileSelected: 'No file selected',
   /**
-   *@description Text to show no results have been found
+   * @description Text to show no results have been found
    */
   noResultsFound: 'No results found',
   /**
-   *@description Text in Go To Line Quick Open of the Sources panel
+   * @description Text in Go To Line Quick Open of the Sources panel
    */
   typeANumberToGoToThatLine: 'Type a number to go to that line',
   /**
-   *@description Text in Go To Line Quick Open of the Sources panel
-   *@example {000} PH1
-   *@example {bbb} PH2
+   * @description Text in Go To Line Quick Open of the Sources panel
+   * @example {000} PH1
+   * @example {bbb} PH2
    */
   currentPositionXsTypeAnOffset: 'Type an offset between 0x{PH1} and 0x{PH2} to navigate to',
   /**
-   *@description Text in the GoToLine dialog of the Sources pane that describes the current line number, file line number range, and use of the GoToLine dialog
-   *@example {100} PH1
+   * @description Text in the GoToLine dialog of the Sources pane that describes the current line number, file line number range, and use of the GoToLine dialog
+   * @example {100} PH1
    */
   currentLineSTypeALineNumber: 'Type a line number between 1 and {PH1} to navigate to',
   /**
-   *@description Text in Go To Line Quick Open of the Sources panel
-   *@example {abc} PH1
+   * @description Text in Go To Line Quick Open of the Sources panel
+   * @example {abc} PH1
    */
   goToOffsetXs: 'Go to offset 0x{PH1}',
   /**
-   *@description Text in Go To Line Quick Open of the Sources panel
-   *@example {2} PH1
-   *@example {2} PH2
+   * @description Text in Go To Line Quick Open of the Sources panel
+   * @example {2} PH1
+   * @example {2} PH2
    */
   goToLineSAndColumnS: 'Go to line {PH1} and column {PH2}',
   /**
-   *@description Text in Go To Line Quick Open of the Sources panel
-   *@example {2} PH1
+   * @description Text in Go To Line Quick Open of the Sources panel
+   * @example {2} PH1
    */
   goToLineS: 'Go to line {PH1}',
 } as const;

package/front_end/panels/sources/InplaceFormatterEditorAction.ts

@@ -7,6 +7,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Formatter from '../../models/formatter/formatter.js';
 import * as Persistence from '../../models/persistence/persistence.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -21,12 +22,12 @@ import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 const UIStrings = {
   /**
-   *@description Title of the format button in the Sources panel
-   *@example {file name} PH1
+   * @description Title of the format button in the Sources panel
+   * @example {file name} PH1
    */
   formatS: 'Format {PH1}',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon pretty print button in the Inplace Formatter Editor Action of the Sources panel
+   * @description Tooltip text that appears when hovering over the largeicon pretty print button in the Inplace Formatter Editor Action of the Sources panel
    */
   format: 'Format',
 } as const;
@@ -119,9 +120,11 @@ export class InplaceFormatterEditorAction implements EditorAction {
     if (uiSourceCode.isDirty()) {
       void this.contentLoaded(uiSourceCode, sourceFrame, uiSourceCode.workingCopy());
     } else {
-      void uiSourceCode.requestContent().then(deferredContent => {
-        void this.contentLoaded(uiSourceCode, sourceFrame, deferredContent.content || '');
-      });
+      void uiSourceCode.requestContentData()
+          .then(contentDataOrError => TextUtils.ContentData.ContentData.textOr(contentDataOrError, ''))
+          .then(content => {
+            void this.contentLoaded(uiSourceCode, sourceFrame, content);
+          });
     }
   }
 

package/front_end/panels/sources/NavigatorView.test.ts

@@ -47,12 +47,13 @@ describeWithMockConnection('NavigatorView', () => {
     workspace = Workspace.Workspace.WorkspaceImpl.instance();
     const resourceMapping = new Bindings.ResourceMapping.ResourceMapping(targetManager, workspace);
     Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance({forceNew: true, resourceMapping, targetManager});
+    const ignoreListManager = Workspace.IgnoreListManager.IgnoreListManager.instance({forceNew: true});
     const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance({
       forceNew: true,
       resourceMapping,
       targetManager,
+      ignoreListManager,
     });
-    Bindings.IgnoreListManager.IgnoreListManager.instance({forceNew: true, debuggerWorkspaceBinding});
     const breakpointManager = Breakpoints.BreakpointManager.BreakpointManager.instance(
         {forceNew: true, targetManager, workspace, debuggerWorkspaceBinding});
     Persistence.Persistence.PersistenceImpl.instance({forceNew: true, workspace, breakpointManager});

package/front_end/panels/sources/NavigatorView.ts

@@ -38,6 +38,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
@@ -53,102 +54,102 @@ import {SearchSources} from './SearchSourcesView.js';
 
 const UIStrings = {
   /**
-   *@description Text in Navigator View of the Sources panel
+   * @description Text in Navigator View of the Sources panel
    */
   searchInFolder: 'Search in folder',
   /**
-   *@description Search label in Navigator View of the Sources panel
+   * @description Search label in Navigator View of the Sources panel
    */
   searchInAllFiles: 'Search in all files',
   /**
-   *@description Text in Navigator View of the Sources panel
+   * @description Text in Navigator View of the Sources panel
    */
   noDomain: '(no domain)',
   /**
-   *@description Text in Navigator View of the Sources panel
+   * @description Text in Navigator View of the Sources panel
    */
   authored: 'Authored',
   /**
-   *@description Text in Navigator View of the Sources panel
+   * @description Text in Navigator View of the Sources panel
    */
   authoredTooltip: 'Contains original sources',
   /**
-   *@description Text in Navigator View of the Sources panel
+   * @description Text in Navigator View of the Sources panel
    */
   deployed: 'Deployed',
   /**
-   *@description Text in Navigator View of the Sources panel
+   * @description Text in Navigator View of the Sources panel
    */
   deployedTooltip: 'Contains final sources the browser sees',
   /**
-   *@description Text in Navigator View of the Sources panel
+   * @description Text in Navigator View of the Sources panel
    */
   excludeThisFolder: 'Exclude this folder?',
   /**
-   *@description Text in a dialog which appears when users click on 'Exclude from Workspace' menu item
+   * @description Text in a dialog which appears when users click on 'Exclude from Workspace' menu item
    */
   folderWillNotBeShown: 'This folder and its contents will not be shown in workspace.',
   /**
-   *@description Text in Navigator View of the Sources panel
+   * @description Text in Navigator View of the Sources panel
    */
   deleteThisFile: 'Delete this file?',
   /**
-   *@description A context menu item in the Navigator View of the Sources panel
+   * @description A context menu item in the Navigator View of the Sources panel
    */
   rename: 'Rename…',
   /**
-   *@description A context menu item in the Navigator View of the Sources panel
+   * @description A context menu item in the Navigator View of the Sources panel
    */
   makeACopy: 'Make a copy…',
   /**
-   *@description Text to delete something
+   * @description Text to delete something
    */
   delete: 'Delete',
   /**
-   *@description A button text to confirm an action to remove a folder. This is not the same as delete. It removes the folder from UI but do not delete them.
+   * @description A button text to confirm an action to remove a folder. This is not the same as delete. It removes the folder from UI but do not delete them.
    */
   remove: 'Remove',
   /**
-   *@description Text in Navigator View of the Sources panel
+   * @description Text in Navigator View of the Sources panel
    */
   deleteFolder: 'Delete this folder and its contents?',
   /**
-   *@description Text in Navigator View of the Sources panel. A confirmation message on action to delete a folder or file.
+   * @description Text in Navigator View of the Sources panel. A confirmation message on action to delete a folder or file.
    */
   actionCannotBeUndone: 'This action cannot be undone.',
   /**
-   *@description A context menu item in the Navigator View of the Sources panel
+   * @description A context menu item in the Navigator View of the Sources panel
    */
   openFolder: 'Open folder',
   /**
-   *@description A context menu item in the Navigator View of the Sources panel
+   * @description A context menu item in the Navigator View of the Sources panel
    */
   newFile: 'New file',
   /**
-   *@description A context menu item in the Navigator View of the Sources panel to exclude a folder from workspace
+   * @description A context menu item in the Navigator View of the Sources panel to exclude a folder from workspace
    */
   excludeFolder: 'Exclude from workspace',
   /**
-   *@description A context menu item in the Navigator View of the Sources panel
+   * @description A context menu item in the Navigator View of the Sources panel
    */
   removeFolderFromWorkspace: 'Remove from workspace',
   /**
-   *@description Text in Navigator View of the Sources panel
+   * @description Text in Navigator View of the Sources panel
    * @example {a-folder-name} PH1
    */
   areYouSureYouWantToRemoveThis: 'Remove ‘{PH1}’ from Workspace?',
   /**
-   *@description Text in Navigator View of the Sources panel. Warning message when user remove a folder.
+   * @description Text in Navigator View of the Sources panel. Warning message when user remove a folder.
    */
   workspaceStopSyncing: 'This will stop syncing changes from DevTools to your sources.',
   /**
-   *@description Name of an item from source map
-   *@example {compile.html} PH1
+   * @description Name of an item from source map
+   * @example {compile.html} PH1
    */
   sFromSourceMap: '{PH1} (from source map)',
   /**
-   *@description Name of an item that is on the ignore list
-   *@example {compile.html} PH1
+   * @description Name of an item that is on the ignore list
+   * @example {compile.html} PH1
    */
   sIgnoreListed: '{PH1} (ignore listed)',
   /**
@@ -211,17 +212,19 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   private groupByDomain?: boolean;
   private groupByFolder?: boolean;
   constructor(jslogContext: string, enableAuthoredGrouping?: boolean) {
-    super(true);
+    super({
+      jslog: `${VisualLogging.pane(jslogContext).track({resize: true})}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(navigatorViewStyles);
 
     this.placeholder = null;
     this.scriptsTree = new UI.TreeOutline.TreeOutlineInShadow(UI.TreeOutline.TreeVariant.NAVIGATION_TREE);
     this.scriptsTree.registerRequiredCSS(navigatorTreeStyles);
 
-    this.scriptsTree.hideOverflow();
+    this.scriptsTree.setHideOverflow(true);
     this.scriptsTree.setComparator(NavigatorView.treeElementsCompare);
     this.scriptsTree.setFocusable(false);
-    this.contentElement.setAttribute('jslog', `${VisualLogging.pane(jslogContext).track({resize: true})}`);
     this.contentElement.appendChild(this.scriptsTree.element);
     this.setDefaultFocusedElement(this.scriptsTree.element);
 
@@ -243,7 +246,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       this.navigatorGroupByAuthoredExperiment = Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING;
     }
 
-    Bindings.IgnoreListManager.IgnoreListManager.instance().addChangeListener(this.ignoreListChanged.bind(this));
+    Workspace.IgnoreListManager.IgnoreListManager.instance().addChangeListener(this.ignoreListChanged.bind(this));
 
     this.initGrouping();
 
@@ -484,7 +487,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
 
   private addUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.JUST_MY_CODE) &&
-        Bindings.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
+        Workspace.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
             uiSourceCode)) {
       return;
     }
@@ -1121,7 +1124,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
         isKnownThirdParty: node.recursiveProperties.exclusivelyThirdParty || false,
         isCurrentlyIgnoreListed: node.recursiveProperties.exclusivelyIgnored || false,
       };
-      for (const {text, callback, jslogContext} of Bindings.IgnoreListManager.IgnoreListManager.instance()
+      for (const {text, callback, jslogContext} of Workspace.IgnoreListManager.IgnoreListManager.instance()
                .getIgnoreListFolderContextMenuItems(url, options)) {
         contextMenu.defaultSection().appendItem(text, callback, {jslogContext});
       }
@@ -1191,7 +1194,8 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       uiSourceCodeToCopy?: Workspace.UISourceCode.UISourceCode): Promise<void> {
     let content = '';
     if (uiSourceCodeToCopy) {
-      content = (await uiSourceCodeToCopy.requestContent()).content || '';
+      const contentDataOrError = await uiSourceCodeToCopy.requestContentData();
+      content = TextUtils.ContentData.ContentData.textOr(contentDataOrError, '');
     }
     const uiSourceCode = await project.createFile(path, null, content);
     if (!uiSourceCode) {
@@ -1451,7 +1455,7 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
     const action = UI.ActionRegistry.ActionRegistry.instance().getAction('drjones.sources-floating-button');
     if (!this.aiButtonContainer) {
       this.aiButtonContainer = this.listItemElement.createChild('span', 'ai-button-container');
-      const floatingButton = Buttons.FloatingButton.create('smart-assistant', action.title());
+      const floatingButton = Buttons.FloatingButton.create('smart-assistant', action.title(), 'ask-ai');
       floatingButton.addEventListener('click', ev => {
         ev.stopPropagation();
         this.navigatorView.sourceSelected(this.uiSourceCode, false);
@@ -1756,7 +1760,7 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
 
   override updateTitle(ignoreIsDirty?: boolean): void {
     const isIgnoreListed =
-        Bindings.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
+        Workspace.IgnoreListManager.IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(
             this.uiSourceCodeInternal);
     if (this.uiSourceCodeInternal.contentType().isScript() || isIgnoreListed) {
       this.recursiveProperties.exclusivelyIgnored = isIgnoreListed;

package/front_end/panels/sources/OpenFileQuickOpen.ts

@@ -44,12 +44,12 @@ export class OpenFileQuickOpen extends FilteredUISourceCodeListProvider {
     super.renderItem(itemIndex, query, titleElement, subtitleElement);
 
     const iconElement = new IconButton.Icon.Icon();
-    const iconData = PanelUtils.iconDataForResourceType(this.itemContentTypeAt(itemIndex));
-    iconElement.data = {
-      ...iconData,
-      width: '18px',
-      height: '18px',
-    };
+    const {iconName, color} = PanelUtils.iconDataForResourceType(this.itemContentTypeAt(itemIndex));
+    iconElement.name = iconName;
+    if (color) {
+      iconElement.style.color = color;
+    }
+    iconElement.classList.add('large');
     titleElement.parentElement?.parentElement?.insertBefore(iconElement, titleElement.parentElement);
   }
 

package/front_end/panels/sources/OutlineQuickOpen.ts

@@ -13,15 +13,15 @@ import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 const UIStrings = {
   /**
-   *@description Text in Go To Line Quick Open of the Sources panel
+   * @description Text in Go To Line Quick Open of the Sources panel
    */
   noFileSelected: 'No file selected.',
   /**
-   *@description Text in Outline Quick Open of the Sources panel
+   * @description Text in Outline Quick Open of the Sources panel
    */
   openAJavascriptOrCssFileToSee: 'Open a JavaScript or CSS file to see symbols',
   /**
-   *@description Text to show no results have been found
+   * @description Text to show no results have been found
    */
   noResultsFound: 'No results found',
 } as const;

package/front_end/panels/sources/ProfilePlugin.ts

@@ -17,15 +17,15 @@ import {Plugin} from './Plugin.js';
 
 const UIStrings = {
   /**
-   *@description The milisecond unit
+   * @description The milisecond unit
    */
   ms: 'ms',
   /**
-   *@description Unit for data size in DevTools
+   * @description Unit for data size in DevTools
    */
   mb: 'MB',
   /**
-   *@description A unit
+   * @description A unit
    */
   kb: 'kB',
 } as const;

package/front_end/panels/sources/ResourceOriginPlugin.ts

@@ -67,7 +67,7 @@ export class ResourceOriginPlugin extends Plugin {
 
     // Handle anonymous scripts with an originStackTrace.
     for (const script of debuggerWorkspaceBinding.scriptsForUISourceCode(this.uiSourceCode)) {
-      if (script.originStackTrace) {
+      if (script.originStackTrace?.callFrames.length) {
         const link = linkifier.linkifyStackTraceTopFrame(script.debuggerModel.target(), script.originStackTrace);
         return [new UI.Toolbar.ToolbarItem(i18n.i18n.getFormatLocalizedString(str_, UIStrings.fromS, {PH1: link}))];
       }

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -43,24 +43,24 @@ import scopeChainSidebarPaneStyles from './scopeChainSidebarPane.css.js';
 
 const UIStrings = {
   /**
-   *@description Loading indicator in Scope Sidebar Pane of the Sources panel
+   * @description Loading indicator in Scope Sidebar Pane of the Sources panel
    */
   loading: 'Loading…',
   /**
-   *@description Not paused message element text content in Call Stack Sidebar Pane of the Sources panel
+   * @description Not paused message element text content in Call Stack Sidebar Pane of the Sources panel
    */
   notPaused: 'Not paused',
   /**
-   *@description Empty placeholder in Scope Chain Sidebar Pane of the Sources panel
+   * @description Empty placeholder in Scope Chain Sidebar Pane of the Sources panel
    */
   noVariables: 'No variables',
   /**
-   *@description Text in the Sources panel Scope pane describing a closure scope.
-   *@example {func} PH1
+   * @description Text in the Sources panel Scope pane describing a closure scope.
+   * @example {func} PH1
    */
   closureS: 'Closure ({PH1})',
   /**
-   *@description Text that refers to closure as a programming term
+   * @description Text that refers to closure as a programming term
    */
   closure: 'Closure',
 } as const;
@@ -76,13 +76,15 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
   #scopeChainModel: SourceMapScopes.ScopeChainModel.ScopeChainModel|null = null;
 
   private constructor() {
-    super(true);
+    super({
+      jslog: `${VisualLogging.section('sources.scope-chain')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(scopeChainSidebarPaneStyles);
 
-    this.contentElement.setAttribute('jslog', `${VisualLogging.section('sources.scope-chain')}`);
     this.treeOutline = new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline();
     this.treeOutline.registerRequiredCSS(scopeChainSidebarPaneStyles);
-    this.treeOutline.hideOverflow();
+    this.treeOutline.setHideOverflow(true);
 
     this.treeOutline.setShowSelectionOnKeyboardFocus(/* show */ true);
     this.expandController =

package/front_end/panels/sources/SnippetsPlugin.ts

@@ -14,11 +14,11 @@ import {Plugin} from './Plugin.js';
 
 const UIStrings = {
   /**
-   *@description Text in Snippets Plugin of the Sources panel
+   * @description Text in Snippets Plugin of the Sources panel
    */
   enter: '⌘+Enter',
   /**
-   *@description Text in Snippets Plugin of the Sources panel
+   * @description Text in Snippets Plugin of the Sources panel
    */
   ctrlenter: 'Ctrl+Enter',
 } as const;

package/front_end/panels/sources/SourcesNavigator.test.ts

@@ -36,12 +36,13 @@ describeWithMockConnection('NetworkNavigatorView', () => {
     workspace = Workspace.Workspace.WorkspaceImpl.instance();
     const targetManager = SDK.TargetManager.TargetManager.instance();
     const resourceMapping = new Bindings.ResourceMapping.ResourceMapping(targetManager, workspace);
+    const ignoreListManager = Workspace.IgnoreListManager.IgnoreListManager.instance({forceNew: true});
     const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance({
       forceNew: true,
       resourceMapping,
       targetManager,
+      ignoreListManager,
     });
-    Bindings.IgnoreListManager.IgnoreListManager.instance({forceNew: true, debuggerWorkspaceBinding});
     const breakpointManager = Breakpoints.BreakpointManager.BreakpointManager.instance(
         {forceNew: true, targetManager, workspace, debuggerWorkspaceBinding});
     Persistence.Persistence.PersistenceImpl.instance({forceNew: true, workspace, breakpointManager});
@@ -454,7 +455,7 @@ describeWithMockConnection('NetworkNavigatorView', () => {
 
     beforeEach(() => {
       target = createTarget();
-      Bindings.IgnoreListManager.IgnoreListManager.instance().addChangeListener(() => {
+      Workspace.IgnoreListManager.IgnoreListManager.instance().addChangeListener(() => {
         if (resolveFn) {
           resolveFn();
           resolveFn = null;

package/front_end/panels/sources/SourcesNavigator.ts

@@ -39,6 +39,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Snippets from '../snippets/snippets.js';
@@ -48,69 +49,75 @@ import sourcesNavigatorStyles from './sourcesNavigator.css.js';
 
 const UIStrings = {
   /**
-   *@description Text to show if no workspaces are set up. https://goo.gle/devtools-workspace
+   * @description Text to show if no workspaces are set up. https://goo.gle/devtools-workspace
    */
   noWorkspace: 'No workspaces set up',
   /**
-   *@description Text to explain the Workspace feature in the Sources panel. https://goo.gle/devtools-workspace
+   * @description Text to explain the Workspace feature in the Sources panel. https://goo.gle/devtools-workspace
    */
   explainWorkspace: 'Set up workspaces to sync edits directly to the sources you develop.',
   /**
-   *@description Text to show if no local overrides are set up. https://goo.gle/devtools-overrides
+   * @description Text to show if no local overrides are set up. https://goo.gle/devtools-overrides
    */
   noLocalOverrides: 'No local overrides set up',
   /**
-   *@description Text to explain the Local Overrides feature. https://goo.gle/devtools-overrides
+   * @description Text to explain the Local Overrides feature. https://goo.gle/devtools-overrides
    */
   explainLocalOverrides: 'Override network requests and web content locally to mock remote resources.',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon clear button in the Sources Navigator of the Sources panel
+   * @description Tooltip text that appears when hovering over the largeicon clear button in the Sources Navigator of the Sources panel
    */
   clearConfiguration: 'Clear configuration',
   /**
-   *@description Text in Sources Navigator of the Sources panel
+   * @description Text in Sources Navigator of the Sources panel
    */
   selectFolderForOverrides: 'Select folder for overrides',
   /**
-   *@description Text to show if no content scripts can be found in the Sources panel. https://developer.chrome.com/extensions/content_scripts
+   * @description Text to show if no content scripts can be found in the Sources panel. https://developer.chrome.com/extensions/content_scripts
    */
   noContentScripts: 'No content scripts detected',
   /**
-   *@description Text to explain the content scripts pane in the Sources panel
+   * @description Text to explain the content scripts pane in the Sources panel
    */
   explainContentScripts: 'View content scripts served by extensions.',
   /**
-   *@description Text to show if no snippets were created and saved in the Sources panel https://goo.gle/devtools-snippets
+   * @description Text to show if no snippets were created and saved in the Sources panel https://goo.gle/devtools-snippets
    */
   noSnippets: 'No snippets saved',
   /**
-   *@description Text to explain the Snippets feature in the Sources panel https://goo.gle/devtools-snippets
+   * @description Text to explain the Snippets feature in the Sources panel https://goo.gle/devtools-snippets
    */
   explainSnippets: 'Save the JavaScript code you run often in a snippet to run it again anytime.',
   /**
-   *@description Text in Sources Navigator of the Sources panel
+   * @description Text in Sources Navigator of the Sources panel
    */
   newSnippet: 'New snippet',
   /**
-   *@description Title of an action in the sources tool to create snippet
+   * @description Title of an action in the sources tool to create snippet
    */
   createNewSnippet: 'Create new snippet',
   /**
-   *@description A context menu item in the Sources Navigator of the Sources panel
+   * @description A context menu item in the Sources Navigator of the Sources panel
    */
   run: 'Run',
   /**
-   *@description A context menu item in the Navigator View of the Sources panel
+   * @description A context menu item in the Navigator View of the Sources panel
    */
   rename: 'Rename…',
   /**
-   *@description Label for an item to remove something
+   * @description Label for an item to remove something
    */
   remove: 'Remove',
   /**
-   *@description Text to save content as a specific file type
+   * @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.',
   /**
    * @description Message shown in the Workspace tab of the Sources panel to nudge
    *              developers into utilizing the Automatic Workspace Folders feature
@@ -170,7 +177,7 @@ export class NetworkNavigatorView extends NavigatorView {
     if (event.data !== mainTarget) {
       return;
     }
-    const inspectedURL = mainTarget && mainTarget.inspectedURL();
+    const inspectedURL = mainTarget?.inspectedURL();
     if (!inspectedURL) {
       return;
     }
@@ -183,7 +190,7 @@ export class NetworkNavigatorView extends NavigatorView {
 
   override uiSourceCodeAdded(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
     const mainTarget = SDK.TargetManager.TargetManager.instance().scopeTarget();
-    const inspectedURL = mainTarget && mainTarget.inspectedURL();
+    const inspectedURL = mainTarget?.inspectedURL();
     if (!inspectedURL) {
       return;
     }
@@ -438,9 +445,14 @@ export class SnippetsNavigatorView extends NavigatorView {
 
   private async handleSaveAs(uiSourceCode: Workspace.UISourceCode.UISourceCode): Promise<void> {
     uiSourceCode.commitWorkingCopy();
-    const {content} = await uiSourceCode.requestContent();
+    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()), content || '', true, false /* isBase64 */);
+        this.addJSExtension(uiSourceCode.url()), contentData, /* forceSaveAs=*/ true);
     Workspace.FileManager.FileManager.instance().close(uiSourceCode.url());
   }