chrome-devtools-frontend 1.0.1632065 → 1.0.1635876

package/front_end/ui/legacy/ViewManager.ts

@@ -9,7 +9,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import type * as Root from '../../core/root/root.js';
+import * as Root from '../../core/root/root.js';
 import type * as Foundation from '../../foundation/foundation.js';
 import {createIcon, type Icon} from '../kit/kit.js';
 import {render, type TemplateResult} from '../lit/lit.js';
@@ -17,6 +17,7 @@ import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import type {ContextMenu} from './ContextMenu.js';
+import * as PlusButton from './PlusButton.js';
 import {type EventData, Events as TabbedPaneEvents, TabbedPane} from './TabbedPane.js';
 import {type ItemsProvider, type ToolbarItem, ToolbarMenuButton} from './Toolbar.js';
 import {createTextChild} from './UIUtils.js';
@@ -397,11 +398,8 @@ export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
   createTabbedLocation(
       revealCallback: (() => void), location: string, restoreSelection?: boolean, allowReorder?: boolean,
-      defaultTab?: string|null, isLocationVisible?: (() => boolean),
-      tabbedPaneFactory?: TabbedPaneFactory): TabbedViewLocation {
-    return new TabbedLocation(
-        this, revealCallback, location, restoreSelection, allowReorder, defaultTab, isLocationVisible,
-        tabbedPaneFactory);
+      options?: TabbedLocationOptions): TabbedViewLocation {
+    return new TabbedLocation(this, revealCallback, location, restoreSelection, allowReorder, options);
   }
 
   createStackLocation(revealCallback?: (() => void), location?: string, jslogContext?: string): ViewLocation {
@@ -648,6 +646,17 @@ type CloseableTabSetting = Record<string, boolean>;
 
 type TabOrderSetting = Record<string, number>;
 
+export interface TabbedLocationOptions {
+  defaultTab?: string|null;
+  isLocationVisible?: () => boolean;
+  tabbedPaneFactory?: TabbedPaneFactory;
+  /**
+   * Installed into the `TabbedPane`'s `trailing-button` slot before any
+   * tabs are appended, so the very first layout pass reserves width for it.
+   */
+  plusButton?: PlusButton.PlusButtonOptions;
+}
+
 class TabbedLocation extends Location implements TabbedViewLocation {
   #tabbedPane: TabbedPane;
   private readonly location: string;
@@ -661,9 +670,8 @@ class TabbedLocation extends Location implements TabbedViewLocation {
 
   constructor(
       manager: ViewManager, revealCallback: (() => void), location: string, restoreSelection?: boolean,
-      allowReorder?: boolean, defaultTab?: string|null, isLocationVisible?: (() => boolean),
-      tabbedPaneFactory?: TabbedPaneFactory) {
-    const tabbedPane = tabbedPaneFactory ? tabbedPaneFactory() : new TabbedPane();
+      allowReorder?: boolean, options?: TabbedLocationOptions) {
+    const tabbedPane = options?.tabbedPaneFactory ? options.tabbedPaneFactory() : new TabbedPane();
     if (allowReorder) {
       tabbedPane.setAllowTabReorder(true);
     }
@@ -687,8 +695,27 @@ class TabbedLocation extends Location implements TabbedViewLocation {
     if (restoreSelection) {
       this.lastSelectedTabSetting = Common.Settings.Settings.instance().createSetting(location + '-selected-tab', '');
     }
-    this.defaultTab = defaultTab;
-    this.isLocationVisible = isLocationVisible;
+    this.defaultTab = options?.defaultTab;
+    this.isLocationVisible = options?.isLocationVisible;
+
+    // Install before `appendApplicableItems` so the very first layout pass
+    // reserves width for the button and we avoid a reflow that snaps the
+    // last tab into the overflow menu.
+    if (options?.plusButton && Root.Runtime.hostConfig.devToolsPlusButton?.enabled) {
+      PlusButton.installPlusButton(
+          {
+            tabbedPane: this.#tabbedPane,
+            location: this.location,
+            // Use the local `views` map (not `manager.viewsForLocation`) so
+            // cross-location moves added via `appendView` are reflected.
+            views: () => this.views.values(),
+            manager: this.manager,
+            showView: view => {
+              this.showView(view, undefined, /* userGesture */ true).catch(err => console.error(err));
+            },
+          },
+          options.plusButton);
+    }
 
     if (location) {
       this.appendApplicableItems(location);

package/front_end/ui/legacy/components/source_frame/FontView.ts

@@ -31,7 +31,7 @@
  */
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import * as Platform from '../../../../core/platform/platform.js';
+import type * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import {Directives, html, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
@@ -133,8 +133,16 @@ export class FontView extends UI.View.SimpleView {
     this.#fontFamily = `WebInspectorFontPreview${++fontId}`;
     void this.contentProvider.requestContentData().then(contentData => {
       const url = TextUtils.ContentData.ContentData.isError(contentData) ? this.url : contentData.asDataUrl();
-      this.#fontFaceRule =
-          Platform.StringUtilities.sprintf('@font-face { font-family: "%s"; src: url(%s); }', this.#fontFamily, url);
+      if (url) {
+        const sheet = new CSSStyleSheet();
+        sheet.insertRule('@font-face {}');
+        const rule = sheet.cssRules[0] as CSSFontFaceRule;
+        rule.style.setProperty('font-family', this.#fontFamily);
+        rule.style.setProperty('src', `url(${JSON.stringify(url)})`);
+        this.#fontFaceRule = rule.cssText;
+      } else {
+        this.#fontFaceRule = '';
+      }
       this.#previewVisible = true;
       this.requestUpdate();
     });

package/front_end/ui/legacy/components/source_frame/ImageView.ts

@@ -37,6 +37,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
+import {createIcon} from '../../../kit/kit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -82,6 +83,10 @@ const UIStrings = {
    * @description The default file name when downloading a file
    */
   download: 'download',
+  /**
+   * @description Text indicating an image is too large to display and offering to open it in a new tab
+   */
+  thisImageIsTooBig: 'This image is too big to display in DevTools. Click here to open it in a new tab.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/source_frame/ImageView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -97,6 +102,7 @@ export class ImageView extends UI.View.SimpleView {
   private readonly mimeTypeLabel: UI.Toolbar.ToolbarText;
   private readonly container: HTMLElement;
   private imagePreviewElement: HTMLImageElement;
+  private imageUnavailableElement: HTMLElement;
   private cachedContent?: TextUtils.ContentData.ContentData;
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
     super({
@@ -125,6 +131,14 @@ export class ImageView extends UI.View.SimpleView {
     this.container = this.element.createChild('div', 'image');
     this.imagePreviewElement = this.container.createChild('img', 'resource-image-view');
     this.imagePreviewElement.addEventListener('contextmenu', this.contextMenu.bind(this), true);
+
+    const link = document.createElement('devtools-link');
+    link.setAttribute('href', this.url);
+    link.classList.add('resource-image-unavailable', 'hidden');
+    link.appendChild(createIcon('open-externally'));
+    link.appendChild(document.createTextNode(i18nString(UIStrings.thisImageIsTooBig)));
+    this.container.appendChild(link);
+    this.imageUnavailableElement = link;
   }
 
   override async toolbarItems(): Promise<UI.Toolbar.ToolbarItem[]> {
@@ -165,8 +179,10 @@ export class ImageView extends UI.View.SimpleView {
     this.cachedContent = content;
     const imageSrc = content.asImagePreviewUrl();
     if (imageSrc === null) {
+      this.imageUnavailableElement.classList.remove('hidden');
       return;
     }
+    this.imageUnavailableElement.classList.add('hidden');
     const loadPromise = new Promise(x => {
       this.imagePreviewElement.onload = x;
     });

package/front_end/ui/legacy/components/source_frame/imageView.css

@@ -21,3 +21,16 @@
   user-select: text;
   -webkit-user-drag: auto;
 }
+
+.resource-image-unavailable {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sys-size-4);
+}
+
+.resource-image-unavailable devtools-icon {
+  color: var(--sys-color-primary);
+  width: var(--sys-size-7);
+  height: var(--sys-size-7);
+}

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -1112,7 +1112,7 @@ export class ContentProviderContextMenuProvider implements
     if (!Common.ParsedURL.schemeIs(contentUrl, 'file:')) {
       contextMenu.revealSection().appendItem(
           UI.UIUtils.openLinkExternallyLabel(),
-          () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+          () => UIHelpers.openInNewTab(
               contentUrl.endsWith(':formatted') ?
                   Common.ParsedURL.ParsedURL.slice(contentUrl, 0, contentUrl.lastIndexOf(':')) :
                   contentUrl),

package/front_end/ui/legacy/legacy.ts

@@ -29,6 +29,7 @@ import * as ListControl from './ListControl.js';
 import * as ListModel from './ListModel.js';
 import * as ListWidget from './ListWidget.js';
 import * as Panel from './Panel.js';
+import * as PlusButton from './PlusButton.js';
 import * as PopoverHelper from './PopoverHelper.js';
 import * as ProgressIndicator from './ProgressIndicator.js';
 import * as RemoteDebuggingTerminatedScreen from './RemoteDebuggingTerminatedScreen.js';
@@ -82,6 +83,7 @@ export {
   ListModel,
   ListWidget,
   Panel,
+  PlusButton,
   PopoverHelper,
   ProgressIndicator,
   RemoteDebuggingTerminatedScreen,

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -1074,21 +1074,37 @@ export const knownContextValues = new Set([
   'copy-xpath',
   'core-web-vitals',
   'corner',
+  'corner-block-end',
   'corner-block-end-shape',
+  'corner-block-start',
   'corner-block-start-shape',
+  'corner-bottom',
+  'corner-bottom-left',
   'corner-bottom-left-shape',
+  'corner-bottom-right',
   'corner-bottom-right-shape',
   'corner-bottom-shape',
+  'corner-end-end',
   'corner-end-end-shape',
+  'corner-end-start',
   'corner-end-start-shape',
+  'corner-inline-end',
   'corner-inline-end-shape',
+  'corner-inline-start',
   'corner-inline-start-shape',
+  'corner-left',
   'corner-left-shape',
+  'corner-right',
   'corner-right-shape',
   'corner-shape',
+  'corner-start-end',
   'corner-start-end-shape',
+  'corner-start-start',
   'corner-start-start-shape',
+  'corner-top',
+  'corner-top-left',
   'corner-top-left-shape',
+  'corner-top-right',
   'corner-top-right-shape',
   'corner-top-shape',
   'corners',
@@ -1850,7 +1866,9 @@ export const knownContextValues = new Set([
   'greendev',
   'greendev-ai-annotations-enabled',
   'greendev-artifact-viewer-enabled',
+  'greendev-beyond-styling-antigravity-enabled',
   'greendev-beyond-styling-enabled',
+  'greendev-beyond-styling-gemini-enabled',
   'greendev-breakpoint-debugger-agent-enabled',
   'greendev-copy-to-gemini-enabled',
   'greendev-emulation-capabilities-enabled',
@@ -2316,6 +2334,7 @@ export const knownContextValues = new Set([
   'lighthouse',
   'lighthouse-report-widget',
   'lighthouse-show-settings-toolbar',
+  'lighthouse-snapshot-report-widget',
   'lighthouse.audit-summary.average',
   'lighthouse.audit-summary.fail',
   'lighthouse.audit-summary.informative',
@@ -3053,6 +3072,7 @@ export const knownContextValues = new Set([
   'play-recording',
   'player',
   'playing',
+  'plus-button',
   'pointer',
   'pointer-32-bit',
   'pointer-64-bit',
@@ -3441,6 +3461,7 @@ export const knownContextValues = new Set([
   'script-text-node',
   'scripting',
   'scroll',
+  'scroll-axis-lock',
   'scroll-behavior',
   'scroll-initial-target',
   'scroll-into-view',

package/mcp/mcp.ts

@@ -38,7 +38,7 @@ export {
 } from '../front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.js';
 export {AgentFocus} from '../front_end/models/ai_assistance/performance/AIContext.js';
 export {DebuggerWorkspaceBinding} from '../front_end/models/bindings/DebuggerWorkspaceBinding.js';
-export {CrUXManager} from '../front_end/models/crux-manager/CrUXManager.js';
+export * as CrUXManager from '../front_end/models/crux-manager/CrUXManager.js';
 export * as Formatter from '../front_end/models/formatter/formatter.js';
 export * as HeapSnapshotModel from '../front_end/models/heap_snapshot/heap_snapshot.js';
 export {Issue} from '../front_end/models/issues_manager/Issue.js';

package/package.json

@@ -96,14 +96,5 @@
     "yargs": "17.7.2",
     "js-rouge": "3.2.0"
   },
-  "overrides": {
-    "electron-to-chromium": "1.5.335",
-    "bare-os": "3.9.0",
-    "bare-stream": "2.13.0",
-    "tar-stream": "3.1.5",
-    "socks": "2.8.7",
-    "ip-address": "10.1.0",
-    "basic-ftp": "5.2.2"
-  },
-  "version": "1.0.1632065"
+  "version": "1.0.1635876"
 }