chrome-devtools-frontend 1.0.930993 → 1.0.932348

package/front_end/ui/components/diff_view/DiffView.ts

@@ -0,0 +1,288 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Diff from '../../../third_party/diff/diff.js';
+import * as LitHtml from '../../lit-html/lit-html.js';
+import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
+import * as ComponentHelpers from '../helpers/helpers.js';
+
+import diffViewStyles from './diffView.css.js';
+
+const UIStrings = {
+  /**
+  *@description Text prepended to a removed line in a diff in the Changes tool, viewable only by screen reader.
+  */
+  deletions: 'Deletion:',
+  /**
+  *@description Text prepended to a new line in a diff in the Changes tool, viewable only by screen reader.
+  */
+  additions: 'Addition:',
+  /**
+  *@description Screen-reader accessible name for the code editor in the Changes tool showing the user's changes.
+  */
+  changesDiffViewer: 'Changes diff viewer',
+  /**
+  *@description Text in Changes View of the Changes tab
+  *@example {2} PH1
+  */
+  SkippingDMatchingLines: '( … Skipping {PH1} matching lines … )',
+};
+const str_ = i18n.i18n.registerUIStrings('ui/components/diff_view/DiffView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+interface Token {
+  text: string;
+  className: string;
+}
+
+interface Row {
+  originalLineNumber: number;
+  currentLineNumber: number;
+  tokens: Token[];
+  type: RowType;
+}
+
+const enum RowType {
+  Deletion = 'deletion',
+  Addition = 'addition',
+  Equal = 'equal',
+  Spacer = 'spacer',
+}
+
+function buildDiffRows(diff: Diff.Diff.DiffArray): {
+  originalLines: readonly string[],
+  currentLines: readonly string[],
+  rows: readonly Row[],
+} {
+  let currentLineNumber = 0;
+  let originalLineNumber = 0;
+  const paddingLines = 3;
+
+  const originalLines: string[] = [];
+  const currentLines: string[] = [];
+  const rows: Row[] = [];
+
+  for (let i = 0; i < diff.length; ++i) {
+    const token = diff[i];
+    switch (token[0]) {
+      case Diff.Diff.Operation.Equal:
+        rows.push(...createEqualRows(token[1], i === 0, i === diff.length - 1));
+        originalLines.push(...token[1]);
+        currentLines.push(...token[1]);
+        break;
+      case Diff.Diff.Operation.Insert:
+        for (const line of token[1]) {
+          rows.push(createRow(line, RowType.Addition));
+        }
+        currentLines.push(...token[1]);
+        break;
+      case Diff.Diff.Operation.Delete:
+        originalLines.push(...token[1]);
+        if (diff[i + 1] && diff[i + 1][0] === Diff.Diff.Operation.Insert) {
+          i++;
+          rows.push(...createModifyRows(token[1].join('\n'), diff[i][1].join('\n')));
+          currentLines.push(...diff[i][1]);
+        } else {
+          for (const line of token[1]) {
+            rows.push(createRow(line, RowType.Deletion));
+          }
+        }
+        break;
+    }
+  }
+
+  return {originalLines, currentLines, rows};
+
+  function createEqualRows(lines: string[], atStart: boolean, atEnd: boolean): Row[] {
+    const equalRows = [];
+    if (!atStart) {
+      for (let i = 0; i < paddingLines && i < lines.length; i++) {
+        equalRows.push(createRow(lines[i], RowType.Equal));
+      }
+      if (lines.length > paddingLines * 2 + 1 && !atEnd) {
+        equalRows.push(createRow(
+            i18nString(UIStrings.SkippingDMatchingLines, {PH1: (lines.length - paddingLines * 2)}), RowType.Spacer));
+      }
+    }
+    if (!atEnd) {
+      const start = Math.max(lines.length - paddingLines - 1, atStart ? 0 : paddingLines);
+      let skip = lines.length - paddingLines - 1;
+      if (!atStart) {
+        skip -= paddingLines;
+      }
+      if (skip > 0) {
+        originalLineNumber += skip;
+        currentLineNumber += skip;
+      }
+
+      for (let i = start; i < lines.length; i++) {
+        equalRows.push(createRow(lines[i], RowType.Equal));
+      }
+    }
+    return equalRows;
+  }
+
+  function createModifyRows(before: string, after: string): Row[] {
+    const internalDiff = Diff.Diff.DiffWrapper.charDiff(before, after, true /* cleanup diff */);
+    const deletionRows = [createRow('', RowType.Deletion)];
+    const insertionRows = [createRow('', RowType.Addition)];
+
+    for (const token of internalDiff) {
+      const text = token[1];
+      const type = token[0];
+      const className = type === Diff.Diff.Operation.Equal ? '' : 'inner-diff';
+      const lines = text.split('\n');
+      for (let i = 0; i < lines.length; i++) {
+        if (i > 0 && type !== Diff.Diff.Operation.Insert) {
+          deletionRows.push(createRow('', RowType.Deletion));
+        }
+        if (i > 0 && type !== Diff.Diff.Operation.Delete) {
+          insertionRows.push(createRow('', RowType.Addition));
+        }
+        if (!lines[i]) {
+          continue;
+        }
+        if (type !== Diff.Diff.Operation.Insert) {
+          deletionRows[deletionRows.length - 1].tokens.push({text: lines[i], className});
+        }
+        if (type !== Diff.Diff.Operation.Delete) {
+          insertionRows[insertionRows.length - 1].tokens.push({text: lines[i], className});
+        }
+      }
+    }
+    return deletionRows.concat(insertionRows);
+  }
+
+  function createRow(text: string, type: RowType): Row {
+    if (type === RowType.Addition) {
+      currentLineNumber++;
+    }
+    if (type === RowType.Deletion) {
+      originalLineNumber++;
+    }
+    if (type === RowType.Equal) {
+      originalLineNumber++;
+      currentLineNumber++;
+    }
+
+    return {originalLineNumber, currentLineNumber, tokens: text ? [{text, className: 'inner-diff'}] : [], type};
+  }
+}
+
+function documentMap(lines: readonly string[]): Map<number, number> {
+  const map = new Map<number, number>();
+  for (let pos = 0, lineNo = 0; lineNo < lines.length; lineNo++) {
+    map.set(lineNo + 1, pos);
+    pos += lines[lineNo].length + 1;
+  }
+  return map;
+}
+
+class DiffRenderer {
+  private constructor(
+      readonly originalHighlighter: CodeHighlighter.CodeHighlighter.CodeHighlighter,
+      readonly originalMap: Map<number, number>,
+      readonly currentHighlighter: CodeHighlighter.CodeHighlighter.CodeHighlighter,
+      readonly currentMap: Map<number, number>,
+  ) {
+  }
+
+  private render(rows: readonly Row[]): LitHtml.TemplateResult {
+    return LitHtml.html`
+      <div class="diff-listing" aria-label="${i18nString(UIStrings.changesDiffViewer)}">
+        ${rows.map(row => this.renderRow(row))}
+      </div>`;
+  }
+
+  private renderRow(row: Row): LitHtml.TemplateResult {
+    const baseNumber =
+        row.type === RowType.Equal || row.type === RowType.Deletion ? String(row.originalLineNumber) : '';
+    const curNumber = row.type === RowType.Equal || row.type === RowType.Addition ? String(row.currentLineNumber) : '';
+    let marker = '', markerClass = 'diff-line-marker', screenReaderText = null;
+    if (row.type === RowType.Addition) {
+      marker = '+';
+      markerClass += ' diff-line-addition';
+      screenReaderText = LitHtml.html`<span class="diff-hidden-text">${i18nString(UIStrings.additions)}</span>`;
+    } else if (row.type === RowType.Deletion) {
+      marker = '-';
+      markerClass += ' diff-line-deletion';
+      screenReaderText = LitHtml.html`<span class="diff-hidden-text">${i18nString(UIStrings.deletions)}</span>`;
+    }
+    return LitHtml.html`
+      <div class="diff-line-number" aria-hidden="true">${baseNumber}</div>
+      <div class="diff-line-number" aria-hidden="true">${curNumber}</div>
+      <div class="${markerClass}" aria-hidden="true">${marker}</div>
+      <div class="diff-line-content diff-line-${row.type}" data-line-number=${curNumber}>${screenReaderText}${
+        this.renderRowContent(row)}</div>`;
+  }
+
+  private renderRowContent(row: Row): LitHtml.TemplateResult[] {
+    if (row.type === RowType.Spacer) {
+      return row.tokens.map(tok => LitHtml.html`${tok.text}`);
+    }
+    const [doc, startPos] = row.type === RowType.Deletion ?
+        [this.originalHighlighter, this.originalMap.get(row.originalLineNumber) as number] :
+        [this.currentHighlighter, this.currentMap.get(row.currentLineNumber) as number];
+    const content: LitHtml.TemplateResult[] = [];
+    let pos = startPos;
+    for (const token of row.tokens) {
+      const tokenContent: (LitHtml.TemplateResult|string)[] = [];
+      doc.highlightRange(pos, pos + token.text.length, (text, style) => {
+        tokenContent.push(style ? LitHtml.html`<span class="${style}">${text}</span>` : text);
+      });
+      content.push(
+          token.className ? LitHtml.html`<span class="${token.className}">${tokenContent}</span>` :
+                            LitHtml.html`${tokenContent}`);
+      pos += token.text.length;
+    }
+    return content;
+  }
+
+  static async render(diff: Diff.Diff.DiffArray, mimeType: string, parent: HTMLElement|DocumentFragment):
+      Promise<void> {
+    const {originalLines, currentLines, rows} = buildDiffRows(diff);
+    const renderer = new DiffRenderer(
+        await CodeHighlighter.CodeHighlighter.create(originalLines.join('\n'), mimeType),
+        documentMap(originalLines),
+        await CodeHighlighter.CodeHighlighter.create(currentLines.join('\n'), mimeType),
+        documentMap(currentLines),
+    );
+    LitHtml.render(renderer.render(rows), parent, {host: this});
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-diff-view': DiffView;
+  }
+}
+
+export type DiffViewData = {
+  diff: Diff.Diff.DiffArray,
+  mimeType: string,
+};
+
+export class DiffView extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-diff-view`;
+
+  private readonly shadow = this.attachShadow({mode: 'open'});
+  loaded: Promise<void>;
+
+  constructor(data?: DiffViewData) {
+    super();
+    this.shadow.adoptedStyleSheets = [diffViewStyles, CodeHighlighter.Style.default];
+    if (data) {
+      this.loaded = DiffRenderer.render(data.diff, data.mimeType, this.shadow);
+    } else {
+      this.loaded = Promise.resolve();
+    }
+  }
+
+  set data(data: DiffViewData) {
+    this.loaded = DiffRenderer.render(data.diff, data.mimeType, this.shadow);
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-diff-view', DiffView);

package/front_end/ui/components/diff_view/diffView.css

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2021 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.diff-listing {
+  display: grid;
+  grid-template-columns: max-content max-content max-content auto;
+  font-family: var(--source-code-font-family);
+  font-size: var(--source-code-font-size);
+  white-space: pre;
+  line-height: 1.2em;
+}
+
+.diff-line-number {
+  color: var(--color-line-number);
+  padding: 0 3px 0 9px;
+  text-align: right;
+}
+
+.diff-line-marker {
+  border-right: 1px solid var(--color-details-hairline);
+  width: 20px;
+  text-align: center;
+}
+
+.diff-line-content {
+  padding: 0 4px;
+}
+
+.diff-line-marker-addition,
+.diff-line-addition {
+  --override-addition-background-color: hsl(144deg 55% 49% / 20%);
+
+  background-color: var(--override-addition-background-color);
+}
+
+.diff-line-marker-deletion,
+.diff-line-deletion {
+  --override-deletion-background-color: rgb(255 0 0 / 20%);
+
+  background-color: var(--override-deletion-background-color);
+}
+
+.diff-line-addition .inner-diff {
+  --override-addition-inner-diff-background-color: hsl(144deg 55% 49% / 30%);
+
+  background-color: var(--override-addition-inner-diff-background-color);
+}
+
+.diff-line-deletion .inner-diff {
+  --override-deletion-inner-diff-background-color: rgb(255 0 0 / 30%);
+
+  background-color: var(--override-deletion-inner-diff-background-color);
+}
+
+.diff-hidden-text {
+  display: inline-block;
+  width: 0;
+  overflow: hidden;
+}
+
+.diff-line-equal {
+  opacity: 50%;
+}
+
+.diff-line-spacer {
+  --override-spacer-background-color: rgb(0 0 255 / 10%);
+
+  text-align: center;
+  background-color: var(--override-spacer-background-color);
+}

package/front_end/ui/components/diff_view/diff_view.ts

@@ -0,0 +1,5 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export * as DiffView from './DiffView.js';

package/front_end/ui/components/docs/button/basic.html

@@ -19,11 +19,39 @@
       #container > * {
         margin-right: 10px;
       }
+      #toolbar {
+        background-color: var(--color-background);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        border-bottom: 1px solid var(--color-details-hairline);
+        padding: 0px 5px;
+        height: 29px;
+      }
+      #small-toolbar {
+        background-color: var(--color-background);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        border-bottom: 1px solid var(--color-details-hairline);
+        padding: 0px 5px;
+        height: 23px;
+      }
+      .separator {
+        background-color: var(--color-details-hairline);
+        width: 1px;
+        height: 17px;
+        margin: 0px 5px;
+      }
     </style>
   </head>
   <body>
     <div id="container">
     </div>
+    <div id="toolbar">
+    </div>
+    <div id="small-toolbar">
+    </div>
     <script type="module" src="./basic.js"></script>
   </body>
 </html>

package/front_end/ui/components/docs/button/basic.ts

@@ -15,6 +15,14 @@ function appendButton(button: Buttons.Button.Button): void {
   document.querySelector('#container')?.appendChild(button);
 }
 
+function appendToToolbar(element: HTMLElement): void {
+  document.querySelector('#toolbar')?.appendChild(element);
+}
+
+function appendToSmallToolbar(element: HTMLElement): void {
+  document.querySelector('#small-toolbar')?.appendChild(element);
+}
+
 // Primary
 const primaryButton = new Buttons.Button.Button();
 primaryButton.data = {
@@ -62,13 +70,13 @@ primaryIconOnlyButton.data = {
   iconUrl: testIcon,
 };
 primaryIconOnlyButton.onclick = () => alert('clicked');
-primaryIconOnlyButton.style.width = '25px';
+primaryIconOnlyButton.style.width = '24px';
 appendButton(primaryIconOnlyButton);
 
 // Secondary Icon Only
 const secondaryIconOnlyButton = new Buttons.Button.Button();
 secondaryIconOnlyButton.onclick = () => alert('clicked');
-secondaryIconOnlyButton.style.width = '25px';
+secondaryIconOnlyButton.style.width = '24px';
 secondaryIconOnlyButton.data = {
   variant: Buttons.Button.Variant.SECONDARY,
   iconUrl: testIcon,
@@ -96,3 +104,36 @@ smallSecondaryIconOnlyButton.data = {
   size: Buttons.Button.Size.SMALL,
 };
 appendButton(smallSecondaryIconOnlyButton);
+
+for (let i = 0; i < 6; i++) {
+  // Regular Toolbar Button
+  const toolbarButton = new Buttons.Button.Button();
+  toolbarButton.onclick = () => alert('clicked');
+  toolbarButton.data = {
+    variant: Buttons.Button.Variant.TOOLBAR,
+    iconUrl: testIcon,
+  };
+  appendToToolbar(toolbarButton);
+  if (i % 3 === 1) {
+    const sep = document.createElement('div');
+    sep.classList.add('separator');
+    appendToToolbar(sep);
+  }
+}
+
+for (let i = 0; i < 6; i++) {
+  // Small Toolbar Button
+  const smallToolbarButton = new Buttons.Button.Button();
+  smallToolbarButton.onclick = () => alert('clicked');
+  smallToolbarButton.data = {
+    variant: Buttons.Button.Variant.TOOLBAR,
+    size: Buttons.Button.Size.SMALL,
+    iconUrl: testIcon,
+  };
+  appendToSmallToolbar(smallToolbarButton);
+  if (i % 3 === 1) {
+    const sep = document.createElement('div');
+    sep.classList.add('separator');
+    appendToSmallToolbar(sep);
+  }
+}

package/front_end/ui/components/report_view/report.css

@@ -6,6 +6,7 @@
 
 :host {
   display: block;
+  overflow: auto;
 }
 
 .content {

package/front_end/ui/components/text_editor/config.ts

@@ -200,10 +200,43 @@ export function baseConfiguration(text: string): CM.Extension {
     CM.Prec.fallback(CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.codeEditor)})),
     detectLineSeparator(text),
     autocompletion,
-    CM.tooltips({position: 'absolute'}),
+    CM.tooltips({parent: getTooltipHost() as unknown as HTMLElement}),
   ];
 }
 
+// Root editor tooltips at the top of the document, creating a special
+// element with the editor styles mounted in it for them. This is
+// annoying, but necessary because a scrollable parent node clips them
+// otherwise, `position: fixed` doesn't work due to `contain` styles,
+// and appending them diretly to `document.body` doesn't work because
+// the necessary style sheets aren't available there.
+let tooltipHost: ShadowRoot|null = null;
+
+function getTooltipHost(): ShadowRoot {
+  if (!tooltipHost) {
+    const styleModules = CM.EditorState
+                             .create({
+                               extensions: [
+                                 editorTheme,
+                                 themeIsDark() ? dummyDarkTheme : [],
+                                 CodeHighlighter.CodeHighlighter.getHighlightStyle(CM),
+                                 CM.showTooltip.of({
+                                   pos: 0,
+                                   create() {
+                                     return {dom: document.createElement('div')};
+                                   },
+                                 }),
+                               ],
+                             })
+                             .facet(CM.EditorView.styleModule);
+    const host = document.body.appendChild(document.createElement('div'));
+    host.className = 'editor-tooltip-host';
+    tooltipHost = host.attachShadow({mode: 'open'});
+    CM.StyleModule.mount(tooltipHost, styleModules);
+  }
+  return tooltipHost;
+}
+
 class CompletionHint extends CM.WidgetType {
   constructor(readonly text: string) {
     super();

package/front_end/ui/legacy/ForwardedInputEventHandler.ts

@@ -9,14 +9,16 @@ import {Context} from './Context.js';
 import {KeyboardShortcut} from './KeyboardShortcut.js';
 import {ForwardedShortcut, ShortcutRegistry} from './ShortcutRegistry.js';
 
+// This handler only forwards the keystrokes if DevTools front-end is
+// not running in hosted mode.
 export class ForwardedInputEventHandler {
   constructor() {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
         Host.InspectorFrontendHostAPI.Events.KeyEventUnhandled, this.onKeyEventUnhandled, this);
   }
 
-  private onKeyEventUnhandled(
-      event: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.KeyEventUnhandledEvent>): void {
+  private async onKeyEventUnhandled(
+      event: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.KeyEventUnhandledEvent>): Promise<void> {
     const {type, key, keyCode, modifiers} = event.data;
     if (type !== 'keydown') {
       return;
@@ -26,7 +28,7 @@ export class ForwardedInputEventHandler {
     const shortcutRegistry = ShortcutRegistry.instance();
 
     context.setFlavor(ForwardedShortcut, ForwardedShortcut.instance);
-    shortcutRegistry.handleKey(KeyboardShortcut.makeKey(keyCode, modifiers), key);
+    await shortcutRegistry.handleKey(KeyboardShortcut.makeKey(keyCode, modifiers), key);
     context.setFlavor(ForwardedShortcut, null);
   }
 }

package/front_end/ui/legacy/components/color_picker/spectrum.css

@@ -320,14 +320,12 @@
 
 .swatch-overlay:hover,
 .swatch-overlay:focus-visible {
-  background-color: rgb(0 0 0 / 30%); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  background-color: var(--color-background-inverted-opacity-30);
   opacity: 100%;
 }
 
 .swatch-overlay:active {
-  background-color: rgb(0 0 0 / 50%); /* stylelint-disable-line plugin/use_theme_colors */
-  /* See: crbug.com/1152736 for color variable migration. */
+  background-color: var(--color-background-inverted-opacity-50);
 }
 
 [is=ui-icon].icon-mask.copy-color-icon {

package/front_end/ui/legacy/themeColors.css

@@ -15,6 +15,8 @@
   --color-primary-variant: rgb(66 133 244);
   --color-background: rgb(255 255 255);
   --color-background-inverted: rgb(0 0 0);
+  --color-background-inverted-opacity-30: rgb(0 0 0 / 30%);
+  --color-background-inverted-opacity-50: rgb(0 0 0 / 50%);
   --color-background-opacity-50: rgb(255 255 255 / 50%);
   --color-background-opacity-80: rgb(255 255 255 / 80%);
   --color-background-elevation-0: rgb(248 249 249);
@@ -167,6 +169,8 @@
   --color-primary-variant: rgb(102 157 246);
   --color-background: rgb(32 33 36);
   --color-background-inverted: rgb(255 255 255);
+  --color-background-inverted-opacity-30: rgb(255 255 255 / 30%);
+  --color-background-inverted-opacity-50: rgb(255 255 255 / 50%);
   --color-background-opacity-50: rgb(32 33 36 / 50%);
   --color-background-opacity-80: rgb(32 33 36 / 80%);
   --color-background-elevation-0: rgb(32 32 35);

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.930993"
+  "version": "1.0.932348"
 }

package/scripts/build/generate_css_js_files.js

@@ -22,6 +22,7 @@ for (const fileName of filenames) {
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 // IMPORTANT: this file is auto generated. Please do not edit this file.
+/* istanbul ignore file */
 const styles = new CSSStyleSheet();
 styles.replaceSync(
 \`${isDebug ? output : cleanCSS.minify(output).styles}

package/scripts/migration/class-fields/migrate.js

@@ -48,9 +48,7 @@ for (const file of files) {
       const newName = `SOME_STUPID_PREFIX_${name}`;
 
       property.toggleModifier('private', false);
-      property.rename(newName, {
-        renameInComments: true,
-      });
+      property.rename(newName);
       for (const reference of property.findReferencesAsNodes()) {
         // The first ancestor is the property access on `this.`.
         const containingNode = reference.getAncestors()[1];