chrome-devtools-frontend 1.0.1029795 → 1.0.1030946

package/front_end/third_party/codemirror.next/codemirror.next.js

@@ -1,2 +1 @@
-export{$ as cursorMatchingBracket,_ as closeBracketsKeymap,A as cpp,a$ as gutters,a0 as cursorSubwordBackward,a1 as cursorSubwordForward,a2 as indentLess,a3 as indentMore,a4 as insertNewlineAndIndent,a5 as selectMatchingBracket,a6 as selectSubwordBackward,a7 as selectSubwordForward,a8 as standardKeymap,a9 as toggleComment,a_ as GutterMarker,aA as Compartment,aa as history,aB as EditorState,ab as historyKeymap,aC as Facet,ac as redo,aD as MapMode,ad as redoSelection,aE as SelectionRange,ae as undo,aF as StateEffect,af as undoSelection,aG as StateEffectType,ag as css,aH as StateField,ah as html,aI as Transaction,ai as javascript,aJ as Range,aj as ensureSyntaxTree,aK as RangeSet,ak as indentOnInput,aL as RangeSetBuilder,al as indentUnit,aM as Line,am as codeFolding,aN as Text,an as foldGutter,aO as Decoration,ao as foldKeymap,ap as HighlightStyle,aP as drawSelection,aQ as EditorView,aq as syntaxHighlighting,ar as bracketMatching,aR as highlightSpecialChars,aS as MatchDecorator,as as StreamLanguage,at as StringStream,aT as placeholder,au as highlightSelectionMatches,aU as scrollPastEnd,aV as ViewPlugin,av as selectNextOccurrence,aw as Annotation,aW as ViewUpdate,ax as AnnotationType,aX as WidgetType,ay as ChangeDesc,aY as showPanel,az as ChangeSet,aZ as gutter,B as java,b0 as lineNumberMarkers,b1 as lineNumbers,b2 as repositionTooltips,b3 as showTooltip,b4 as tooltips,b5 as TreeCursor,b6 as highlightTree,b7 as StyleModule,D as json,e as LanguageSupport,F as markdown,g as NodeProp,G as php,h as NodeSet,H as python,I as shell,j as Tree,J as cssStreamParser,k as Language,K as wast,L as LRParser,l as syntaxTree,m as EditorSelection,M as xml,N as NodeType,n as Prec,O as acceptCompletion,o as keymap,P as Parser,Q as autocompletion,R as closeCompletion,S as completeAnyWord,T as Tag,t as tags,U as CompletionContext,V as currentCompletions,W as ifNotIn,X as selectedCompletion,y as clojure,Y as startCompletion,Z as closeBrackets,z as coffeescript}from"./chunk/codemirror.js";
-
+export{aw as Annotation,ax as AnnotationType,ay as ChangeDesc,az as ChangeSet,aA as Compartment,W as CompletionContext,aO as Decoration,m as EditorSelection,aB as EditorState,aQ as EditorView,aC as Facet,aS as GutterMarker,ao as HighlightStyle,L as LRParser,k as Language,e as LanguageSupport,aD as Line,aE as MapMode,aX as MatchDecorator,g as NodeProp,h as NodeSet,N as NodeType,P as Parser,n as Prec,aF as Range,aG as RangeSet,aH as RangeSetBuilder,aI as SelectionRange,aJ as StateEffect,aK as StateEffectType,aL as StateField,ar as StreamLanguage,as as StringStream,b7 as StyleModule,T as Tag,aM as Text,aN as Transaction,j as Tree,b5 as TreeCursor,b2 as ViewPlugin,b3 as ViewUpdate,b4 as WidgetType,O as acceptCompletion,Q as autocompletion,aj as bracketMatching,y as clojure,R as closeBrackets,S as closeBracketsKeymap,U as closeCompletion,ak as codeFolding,z as coffeescript,V as completeAnyWord,A as cpp,ag as css,J as cssStreamParser,X as currentCompletions,$ as cursorMatchingBracket,a0 as cursorSubwordBackward,a1 as cursorSubwordForward,aP as drawSelection,al as ensureSyntaxTree,am as foldGutter,an as foldKeymap,aR as gutter,aT as gutters,au as highlightSelectionMatches,aU as highlightSpecialChars,b6 as highlightTree,a2 as history,a3 as historyKeymap,ah as html,Y as ifNotIn,a4 as indentLess,a5 as indentMore,ap as indentOnInput,aq as indentUnit,a6 as insertNewlineAndIndent,B as java,ai as javascript,D as json,o as keymap,aV as lineNumberMarkers,aW as lineNumbers,F as markdown,G as php,aY as placeholder,H as python,a7 as redo,a8 as redoSelection,aZ as repositionTooltips,a_ as scrollPastEnd,a9 as selectMatchingBracket,av as selectNextOccurrence,aa as selectSubwordBackward,ab as selectSubwordForward,Z as selectedCompletion,I as shell,a$ as showPanel,b0 as showTooltip,ac as standardKeymap,_ as startCompletion,at as syntaxHighlighting,l as syntaxTree,t as tags,ad as toggleComment,b1 as tooltips,ae as undo,af as undoSelection,K as wast,M as xml}from"./chunk/codemirror.js";

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -58,6 +58,7 @@ export interface DataGridData {
   activeSort: SortState|null;
   contextMenus?: DataGridContextMenusConfiguration;
   label?: string;
+  paddingRowsCount?: number;
 }
 
 const enum UserScrollState {
@@ -69,7 +70,6 @@ const enum UserScrollState {
 const KEYS_TREATED_AS_CLICKS = new Set([' ', 'Enter']);
 
 const ROW_HEIGHT_PIXELS = 18;
-const PADDING_ROWS_COUNT = 10;
 
 export class DataGrid extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-data-grid`;
@@ -82,6 +82,7 @@ export class DataGrid extends HTMLElement {
   #userScrollState: UserScrollState = UserScrollState.NOT_SCROLLED;
   #contextMenus?: DataGridContextMenusConfiguration = undefined;
   #label?: string = undefined;
+  #paddingRowsCount = 10;
   #currentResize: {
     rightCellCol: HTMLTableColElement,
     leftCellCol: HTMLTableColElement,
@@ -139,6 +140,7 @@ export class DataGrid extends HTMLElement {
       activeSort: this.#sortState,
       contextMenus: this.#contextMenus,
       label: this.#label,
+      paddingRowsCount: this.#paddingRowsCount,
     };
   }
 
@@ -171,6 +173,10 @@ export class DataGrid extends HTMLElement {
       this.#cellToFocusIfUserTabsIn = calculateFirstFocusableCell({columns: this.#columns, rows: this.#rows});
     }
 
+    if (data.paddingRowsCount !== undefined) {
+      this.#paddingRowsCount = data.paddingRowsCount;
+    }
+
     if (this.#hasRenderedAtLeastOnce && this.#userHasCellFocused()) {
       const [selectedColIndex, selectedRowIndex] = this.#tabbableCell();
       const columnOutOfBounds = selectedColIndex > this.#columns.length;
@@ -220,15 +226,14 @@ export class DataGrid extends HTMLElement {
       return;
     }
 
-    void coordinator.read(() => {
-      const wrapper = this.#shadow.querySelector('.wrapping-container');
-      if (!wrapper) {
-        return;
-      }
+    const wrapper = this.#shadow.querySelector('.wrapping-container');
+    if (!wrapper) {
+      return;
+    }
+
+    void coordinator.scroll(() => {
       const scrollHeight = wrapper.scrollHeight;
-      void coordinator.scroll(() => {
-        wrapper.scrollTo(0, scrollHeight);
-      });
+      wrapper.scrollTo(0, scrollHeight);
     });
   }
 
@@ -643,7 +648,7 @@ export class DataGrid extends HTMLElement {
         scrollTop = wrapper.scrollTop;
         clientHeight = wrapper.clientHeight;
       }
-      const padding = ROW_HEIGHT_PIXELS * PADDING_ROWS_COUNT;
+      const padding = ROW_HEIGHT_PIXELS * this.#paddingRowsCount;
       let topVisibleRow = Math.floor((scrollTop - padding) / ROW_HEIGHT_PIXELS);
       let bottomVisibleRow = Math.ceil((scrollTop + clientHeight + padding) / ROW_HEIGHT_PIXELS);
 

package/front_end/ui/components/data_grid/DataGridController.ts

@@ -31,6 +31,7 @@ export interface DataGridControllerData {
   initialSort?: SortState;
   contextMenus?: DataGridContextMenusConfiguration;
   label?: string;
+  paddingRowsCount?: number;
 }
 
 export class DataGridController extends HTMLElement {
@@ -55,6 +56,8 @@ export class DataGridController extends HTMLElement {
   #sortState: Readonly<SortState>|null = null;
   #filters: readonly TextUtils.TextUtils.ParsedFilter[] = [];
 
+  #paddingRowsCount?: number;
+
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [dataGridControllerStyles];
   }
@@ -66,6 +69,7 @@ export class DataGridController extends HTMLElement {
       filters: this.#filters,
       contextMenus: this.#contextMenus,
       label: this.#label,
+      paddingRowsCount: this.#paddingRowsCount,
     };
   }
 
@@ -88,6 +92,8 @@ export class DataGridController extends HTMLElement {
       this.#sortRows(this.#sortState);
     }
 
+    this.#paddingRowsCount = data.paddingRowsCount;
+
     this.#render();
   }
 
@@ -222,6 +228,7 @@ export class DataGridController extends HTMLElement {
           activeSort: this.#sortState,
           contextMenus: this.#contextMenus,
           label: this.#label,
+          paddingRowsCount: this.#paddingRowsCount,
         } as DataGridData}
         @columnheaderclick=${this.#onColumnHeaderClick}
         @contextmenucolumnsortclick=${this.#onContextMenuColumnSortClick}

package/front_end/ui/components/docs/building-ui-documentation/StylingComponents.md

@@ -0,0 +1,64 @@
+# Styling Components
+
+Components are styled by a CSS file that is co-located next to the TypeScript source file. The only difference in file name is the extension and that for CSS files, the first letter is lowercase:
+
+```
+- ElementsBreadcrumbs.ts
+- elementsBreadcrumbs.css
+```
+
+To import this file you use a regular `import` statement, and import the filename with `.js` appended:
+
+```ts
+import elementsBreadcrumbsStyles from './elementsBreadcrumbs.css.js';
+```
+
+As part of the build tool step, each CSS file is converted into a JS file that exports a `CSSStyleSheet` instance. This is done by Rollup in [`generate_css_js_files`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/scripts/build/generate_css_js_files.js;l=1;drc=28af9fbe783d82aa64bfa5f9b9509572dc2b3efe).
+
+## `BUILD.gn` changes
+
+Use the `generate_css` action (`scripts/build/ninja/generate_css.gni`) to declare stylesheets:
+
+```gn
+import("scripts/build/ninja/generate_css.gni") // Edit path correctly: this must be relative
+
+generate_css("css_files") {
+  sources = [ "elementsBreadcrumbs.css"]
+}
+```
+
+And then add `:css_files` as a dependency to the `devtools_entrypoint`:
+
+```gn
+devtools_entrypoint("bundle") {
+  deps = [  ":css_files" ,  "..."]
+}
+```
+
+## Adopting the stylesheet
+
+Importing the stylesheet is not enough to have it apply to the component's ShadowDOM, it must be adopted. The `connectedCallback` method is the best place for this:
+
+```ts
+connectedCallback() {
+  this.#shadow.adoptedStyleSheets = [elementsBreadcrumbs];
+}
+```
+
+## Tips for writing CSS.
+
+Use `:host` to style the component itself. By default elements are `display: inline`. Often it can be useful to set `display: block`.
+
+Remember to use theme colors (`var(--color-text-primary)`) when styling elements to ensure consistency across DevTools.
+
+If you want your component to have its colors configurable by users, consider defining `--override` variables. In your component's CSS, you would have something like:
+
+```css
+:host {
+  color: var(--override-custom-color, var(--color-text-primary));
+}
+```
+
+This allows someone to define that `--override-custom-color` variable, but also ensures if it isn't defined that the default `color-text-primary` will be used. **Be careful with this!** We try to ensure consistent colors across DevTools; so most of the time you shouldn't allow configurable colors and should use the correct theme variables.
+
+

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

@@ -95,7 +95,7 @@ export class ImageView extends UI.View.SimpleView {
   private readonly mimeTypeLabel: UI.Toolbar.ToolbarText;
   private readonly container: HTMLElement;
   private imagePreviewElement: HTMLImageElement;
-  private cachedContent?: string|null;
+  private cachedContent?: TextUtils.ContentProvider.DeferredContent;
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
     super(i18nString(UIStrings.image));
     this.registerRequiredCSS(imageViewStyles);
@@ -153,20 +153,21 @@ export class ImageView extends UI.View.SimpleView {
   }
 
   private async updateContentIfNeeded(): Promise<void> {
-    const {content} = await this.contentProvider.requestContent();
-    if (this.cachedContent === content) {
+    const content = await this.contentProvider.requestContent();
+    if (this.cachedContent?.content === content.content) {
       return;
     }
 
-    const contentEncoded = await this.contentProvider.contentEncoded();
     this.cachedContent = content;
-    const imageSrc = TextUtils.ContentProvider.contentAsDataURL(content, this.mimeType, contentEncoded) || this.url;
+    const imageSrc =
+        TextUtils.ContentProvider.contentAsDataURL(content.content, this.mimeType, content.isEncoded) || this.url;
     const loadPromise = new Promise(x => {
       this.imagePreviewElement.onload = x;
     });
     this.imagePreviewElement.src = imageSrc;
     this.imagePreviewElement.alt = i18nString(UIStrings.imageFromS, {PH1: this.url});
-    const size = content && !contentEncoded ? content.length : Platform.StringUtilities.base64ToSize(content);
+    const size = content.content && !content.isEncoded ? content.content.length :
+                                                         Platform.StringUtilities.base64ToSize(content.content);
     this.sizeLabel.setText(Platform.NumberUtilities.bytesToString(size));
     await loadPromise;
     this.dimensionsLabel.setText(i18nString(
@@ -203,13 +204,11 @@ export class ImageView extends UI.View.SimpleView {
   }
 
   private async saveImage(): Promise<void> {
-    const contentEncoded = await this.contentProvider.contentEncoded();
-    if (!this.cachedContent) {
+    if (!this.cachedContent || !this.cachedContent.content) {
       return;
     }
-    const cachedContent = this.cachedContent;
-    const imageDataURL =
-        TextUtils.ContentProvider.contentAsDataURL(cachedContent, this.mimeType, contentEncoded, '', false);
+    const imageDataURL = TextUtils.ContentProvider.contentAsDataURL(
+        this.cachedContent.content, this.mimeType, this.cachedContent.isEncoded, '', false);
 
     if (!imageDataURL) {
       return;

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

@@ -45,7 +45,7 @@ export class PreviewFactory {
     }
 
     let content: string = deferredContent.content;
-    if (await provider.contentEncoded()) {
+    if (deferredContent.isEncoded) {
       content = window.atob(content);
     }
 

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

@@ -460,6 +460,55 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
         }
       }
 
+      // If the input is wasm but v8-based wasm disassembly failed, fall back to wasmparser for backwards compatibility.
+      if (content && this.contentType === 'application/wasm' && !this.wasmDisassemblyInternal) {
+        const worker = Common.Worker.WorkerWrapper.fromURL(
+            new URL('../../../../entrypoints/wasmparser_worker/wasmparser_worker-entrypoint.js', import.meta.url));
+        const promise = new Promise<{
+          lines: string[],
+          offsets: number[],
+          functionBodyOffsets: {
+            start: number,
+            end: number,
+          }[],
+        }>((resolve, reject) => {
+          worker.onmessage =
+              // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              ({data}: MessageEvent<any>): void => {
+                if ('event' in data) {
+                  switch (data.event) {
+                    case 'progress':
+                      progressIndicator.setWorked(data.params.percentage);
+                      break;
+                  }
+                } else if ('method' in data) {
+                  switch (data.method) {
+                    case 'disassemble':
+                      if ('error' in data) {
+                        reject(data.error);
+                      } else if ('result' in data) {
+                        resolve(data.result);
+                      }
+                      break;
+                  }
+                }
+              };
+          worker.onerror = reject;
+        });
+        worker.postMessage({method: 'disassemble', params: {content}});
+        try {
+          const {lines, offsets, functionBodyOffsets} = await promise;
+          this.rawContent = content = CodeMirror.Text.of(lines);
+          this.wasmDisassemblyInternal =
+              new Common.WasmDisassembly.WasmDisassembly(lines, offsets, functionBodyOffsets);
+        } catch (e) {
+          this.rawContent = content = error = e.message;
+        } finally {
+          worker.terminate();
+        }
+      }
+
       progressIndicator.setWorked(100);
       progressIndicator.done();
 

package/package.json

@@ -19,12 +19,13 @@
     "url": "git+https://github.com/ChromeDevTools/devtools-frontend.git"
   },
   "scripts": {
-    "auto-debug-e2etest": "autoninja -C out/Default && npm run debug-e2etest --",
-    "auto-debug-interactionstest": "autoninja -C out/Default && npm run debug-interactionstest --",
+    "auto-debug-e2etest": "npm run build && npm run debug-e2etest --",
+    "auto-debug-interactionstest": "npm run build && npm run debug-interactionstest --",
     "auto-debug-unittest": "DEBUG_TEST=1 npm run auto-unittest --",
-    "auto-e2etest": "autoninja -C out/Default && npm run e2etest --",
-    "auto-interactionstest": "autoninja -C out/Default && npm run interactionstest --",
+    "auto-e2etest": "npm run build && npm run e2etest --",
+    "auto-interactionstest": "npm run build && npm run interactionstest --",
     "auto-unittest": "scripts/test/run_auto_unittests.py --no-text-coverage",
+    "prebuild": "gn gen out/Default",
     "build": "autoninja -C out/Default",
     "build-release": "autoninja -C out/Release",
     "check": "npm run check-lint && npm run check-loc",
@@ -55,5 +56,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1029795"
+  "version": "1.0.1030946"
 }