chrome-devtools-frontend 1.0.1040337 → 1.0.1070764

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

@@ -0,0 +1,45 @@
+// Copyright 2022 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 FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+import * as TwoStatesCounter from '../../two_states_counter/two_states_counter.js';
+
+await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
+
+function getGeneralCounterData() {
+  return {
+    active: 3,
+    inactive: 10,
+    width: '18px',
+    height: '18px',
+    activeTitle: 'Num active',
+    inactiveTitle: 'Num inactive',
+  } as TwoStatesCounter.TwoStatesCounter.TwoStatesCounterData;
+}
+
+function appendCounter(counter: TwoStatesCounter.TwoStatesCounter.TwoStatesCounter): void {
+  document.querySelector('#container')?.appendChild(counter);
+}
+
+// Active and inactive counts.
+const counterData = getGeneralCounterData();
+const counter = new TwoStatesCounter.TwoStatesCounter.TwoStatesCounter();
+counter.data = counterData;
+appendCounter(counter);
+
+// Only active count.
+const activeCountData = getGeneralCounterData();
+activeCountData.inactive = 0;
+const activeOnlyCounter = new TwoStatesCounter.TwoStatesCounter.TwoStatesCounter();
+activeOnlyCounter.data = activeCountData;
+appendCounter(activeOnlyCounter);
+
+// Only inactive count.
+const inactiveCountData = getGeneralCounterData();
+inactiveCountData.active = 0;
+const inactiveOnlyCounter = new TwoStatesCounter.TwoStatesCounter.TwoStatesCounter();
+inactiveOnlyCounter.data = inactiveCountData;
+appendCounter(inactiveOnlyCounter);

package/front_end/ui/components/expandable_list/expandableList.css

@@ -48,7 +48,7 @@ div {
   color: var(--color-link);
   text-decoration: underline;
   cursor: pointer;
-  padding: 2px 0; /* adjust focus ring size */
+  outline-offset: 2px;
 }
 
 button.link {

package/front_end/ui/components/helpers/scheduled-render.ts

@@ -31,8 +31,11 @@ export async function scheduleRender(component: HTMLElement, callback: () => voi
     wrappedCallback = async(): Promise<void> => {
       pendingRenders.delete(component);
       activeRenders.add(component);
-      await callback.call(component);
-      activeRenders.delete(component);
+      try {
+        await callback.call(component);
+      } finally {
+        activeRenders.delete(component);
+      }
     };
 
     // Store it for next time so we aren't creating wrappers unnecessarily.

package/front_end/ui/components/icon_button/iconButton.css

@@ -64,5 +64,7 @@
   .icon-button.with-click-handler:hover {
     background-color: Highlight;
     color: HighlightText;
+
+    --icon-color: HighlightText;
   }
 }

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -217,7 +217,10 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
       Promise<{obj: SDK.RemoteObject.RemoteObject, address: number}|undefined> {
     if (obj instanceof Bindings.DebuggerLanguagePlugins.ExtensionRemoteObject) {
       const valueNode = obj;
-      const address = valueNode.linearMemoryAddress || 0;
+      const address = obj.linearMemoryAddress;
+      if (address === undefined) {
+        return undefined;
+      }
       const callFrame = valueNode.callFrame;
       const response = await obj.debuggerModel().agent.invoke_evaluateOnCallFrame({
         callFrameId: callFrame.id,
@@ -232,7 +235,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
       return {obj: runtimeModel.createRemoteObject(response.result), address};
     }
     if (!(obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode)) {
-      return;
+      return undefined;
     }
 
     const valueNode = obj;
@@ -252,18 +255,20 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     return {obj, address};
   }
 
-  // This function returns the size of the source language value represented
-  // by the ValueNode. If the value is a pointer, the function returns the size of
-  // the pointed-to value. If the pointed-to value is also a pointer, it returns
-  // the size of the pointer (usually 4 bytes). This is the convention taken
-  // by the DWARF extension.
+  // This function returns the size of the source language value represented by the ValueNode or ExtensionRemoteObject.
+  // If the value is a pointer, the function returns the size of the pointed-to value. If the pointed-to value is also a
+  // pointer, it returns the size of the pointer (usually 4 bytes). This is the convention taken by the DWARF extension.
   // > double x = 42.0;
   // > double *ptr = &x;
   // > double **dblptr = &ptr;
   //
   // retrieveObjectSize(ptr_ValueNode) -> 8, the size of a double
   // retrieveObjectSize(dblptr_ValueNode) -> 4, the size of a pointer
-  static extractObjectSize(obj: Bindings.DebuggerLanguagePlugins.ValueNode): number {
+  static extractObjectSize(obj: Bindings.DebuggerLanguagePlugins.ValueNode|
+                           Bindings.DebuggerLanguagePlugins.ExtensionRemoteObject): number {
+    if (obj instanceof Bindings.DebuggerLanguagePlugins.ExtensionRemoteObject) {
+      return obj.linearMemorySize ?? 0;
+    }
     let typeInfo = obj.sourceType.typeInfo;
     const pointerMembers = typeInfo.members.filter(member => member.name === '*');
     if (pointerMembers.length === 1) {
@@ -287,7 +292,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
   // -> The memory inspector will jump to the address where 3 is stored.
   // -> The memory inspector will highlight the bytes that represent the 3.
   // -> The object type description of what we show will thus be `int` and not `int *`.
-  static extractObjectTypeDescription(obj: Bindings.DebuggerLanguagePlugins.ValueNode): string {
+  static extractObjectTypeDescription(obj: SDK.RemoteObject.RemoteObject): string {
     const objType = obj.description;
     if (!objType) {
       return '';
@@ -314,7 +319,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
   // Examples:
   // (int *) myNumber -> (int) *myNumber
   // (int[]) numbers -> (int[]) numbers
-  static extractObjectName(obj: Bindings.DebuggerLanguagePlugins.ValueNode, expression: string): string {
+  static extractObjectName(obj: SDK.RemoteObject.RemoteObject, expression: string): string {
     const lastChar = obj.description?.charAt(obj.description.length - 1);
     const isPointerType = lastChar === '*';
     if (isPointerType) {
@@ -375,14 +380,20 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
   }
 
   static extractHighlightInfo(obj: SDK.RemoteObject.RemoteObject, expression?: string): HighlightInfo|undefined {
-    if (!(obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode)) {
+    if (!(obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode) &&
+        !(obj instanceof Bindings.DebuggerLanguagePlugins.ExtensionRemoteObject)) {
       return undefined;
     }
 
+    const startAddress =
+        (obj instanceof Bindings.DebuggerLanguagePlugins.ExtensionRemoteObject ? obj.linearMemoryAddress :
+                                                                                 obj.inspectableAddress) ??
+        0;
+
     let highlightInfo;
     try {
       highlightInfo = {
-        startAddress: obj.inspectableAddress || 0,
+        startAddress,
         size: LinearMemoryInspectorController.extractObjectSize(obj),
         name: expression ? LinearMemoryInspectorController.extractObjectName(obj, expression) : expression,
         type: LinearMemoryInspectorController.extractObjectTypeDescription(obj),

package/front_end/ui/components/linkifier/linkifierImpl.css

@@ -9,4 +9,5 @@
   color: var(--color-link);
   text-decoration: underline;
   cursor: pointer;
+  outline-offset: 2px;
 }

package/front_end/ui/components/markdown_view/MarkdownImage.ts

@@ -26,10 +26,6 @@ export class MarkdownImage extends HTMLElement {
   #imageData?: ImageData;
   #imageTitle?: string;
 
-  constructor() {
-    super();
-  }
-
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [markdownImageStyles];
   }

package/front_end/ui/components/markdown_view/MarkdownLinksMap.ts

@@ -41,6 +41,10 @@ export const markdownLinks = new Map<string, string>([
     'https://developer.chrome.com/blog/immutable-document-domain/',
     'https://developer.chrome.com/blog/immutable-document-domain/',
   ],
+  [
+    'https://github.com/WICG/shared-element-transitions/blob/main/debugging_overflow_on_images.md',
+    'https://github.com/WICG/shared-element-transitions/blob/main/debugging_overflow_on_images.md',
+  ],
 ]);
 
 export const getMarkdownLink = (key: string): string => {

package/front_end/ui/components/markdown_view/MarkdownView.ts

@@ -21,8 +21,7 @@ export class MarkdownView extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-markdown-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
-  // TODO(crbug.com/1108699): Replace with `Marked.Marked.Token[]` once AST types are fixed upstream.
-  #tokenData: readonly Object[] = [];
+  #tokenData: readonly Marked.Marked.Token[] = [];
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [markdownViewStyles];
@@ -58,10 +57,11 @@ declare global {
   }
 }
 
-// TODO(crbug.com/1108699): Fix types when they are available.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const renderChildTokens = (token: any): string => {
-  return token.tokens.map(renderToken);
+const renderChildTokens = (token: Marked.Marked.Token): LitHtml.TemplateResult[] => {
+  if ('tokens' in token && token.tokens) {
+    return token.tokens.map(renderToken);
+  }
+  throw new Error('Tokens not found');
 };
 
 const unescape = (text: string): string => {
@@ -79,45 +79,46 @@ const unescape = (text: string): string => {
     return replacement ? replacement : matchedString;
   });
 };
-// TODO(crbug.com/1108699): Fix types when they are available.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const renderText = (token: any): LitHtml.TemplateResult => {
-  if (token.tokens && token.tokens.length > 0) {
+
+const renderText = (token: Marked.Marked.Token): LitHtml.TemplateResult => {
+  if ('tokens' in token && token.tokens) {
     return html`${renderChildTokens(token)}`;
   }
   // Due to unescaping, unescaped html entities (see escapeReplacements' keys) will be rendered
   // as their corresponding symbol while the rest will be rendered as verbatim.
   // Marked's escape function can be found in front_end/third_party/marked/package/src/helpers.js
-  return html`${unescape(token.text)}`;
+  return html`${unescape('text' in token ? token.text : '')}`;
 };
 
-// TODO(crbug.com/1108699): Fix types when they are available.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const tokenRenderers = new Map<string, (token: any) => LitHtml.TemplateResult>([
-  ['paragraph', (token): LitHtml.TemplateResult => html`<p>${renderChildTokens(token)}`],
-  ['list', (token): LitHtml.TemplateResult => html`<ul>${token.items.map(renderToken)}</ul>`],
-  ['list_item', (token): LitHtml.TemplateResult => html`<li>${renderChildTokens(token)}`],
-  ['text', renderText],
-  ['codespan', (token): LitHtml.TemplateResult => html`<code>${unescape(token.text)}</code>`],
-  ['space', (): LitHtml.TemplateResult => html``],
-  [
-    'link',
-    (token): LitHtml.TemplateResult => html`<${MarkdownLink.litTagName} .data=${
-        {key: token.href, title: token.text} as MarkdownLinkData}></${MarkdownLink.litTagName}>`,
-  ],
-  [
-    'image',
-    (token): LitHtml.TemplateResult => html`<${MarkdownImage.litTagName} .data=${
-        {key: token.href, title: token.text} as MarkdownImageData}></${MarkdownImage.litTagName}>`,
-  ],
-]);
-
-// TODO(crbug.com/1108699): Fix types when they are available.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const renderToken = (token: any): LitHtml.TemplateResult => {
-  const renderFn = tokenRenderers.get(token.type);
-  if (!renderFn) {
+function templateForToken(token: Marked.Marked.Token): LitHtml.TemplateResult|null {
+  switch (token.type) {
+    case 'paragraph':
+      return html`<p>${renderChildTokens(token)}`;
+    case 'list':
+      return html`<ul>${token.items.map(renderToken)}</ul>`;
+    case 'list_item':
+      return html`<li>${renderChildTokens(token)}`;
+    case 'text':
+      return renderText(token);
+    case 'codespan':
+      return html`<code>${unescape(token.text)}</code>`;
+    case 'space':
+      return html``;
+    case 'link':
+      return html`<${MarkdownLink.litTagName} .data=${{key: token.href, title: token.text} as MarkdownLinkData}></${
+          MarkdownLink.litTagName}>`;
+    case 'image':
+      return html`<${MarkdownImage.litTagName} .data=${{key: token.href, title: token.text} as MarkdownImageData}></${
+          MarkdownImage.litTagName}>`;
+    default:
+      return null;
+  }
+}
+
+export const renderToken = (token: Marked.Marked.Token): LitHtml.TemplateResult => {
+  const template = templateForToken(token);
+  if (template === null) {
     throw new Error(`Markdown token type '${token.type}' not supported.`);
   }
-  return renderFn(token);
+  return template;
 };

package/front_end/ui/components/markdown_view/markdownLink.css

@@ -6,6 +6,7 @@
 
 .devtools-link {
   color: var(--color-link);
+  outline-offset: 2px;
   text-decoration: none;
 }
 

package/front_end/ui/components/render_coordinator/RenderCoordinator.ts

@@ -203,11 +203,17 @@ export class RenderCoordinator extends EventTarget {
 
   async #handleWork(handler: CoordinatorCallback): Promise<void> {
     const resolver = this.#resolvers.get(handler);
+    const rejector = this.#rejectors.get(handler);
     this.#resolvers.delete(handler);
     this.#rejectors.delete(handler);
-    const data = await handler.call(undefined);
-    if (!resolver) {
-      throw new Error('Unable to locate resolver');
+    if (!resolver || !rejector) {
+      throw new Error('Unable to locate resolver or rejector');
+    }
+    let data;
+    try {
+      data = await handler.call(undefined);
+    } catch (error) {
+      rejector.call(undefined, error);
     }
 
     resolver.call(undefined, data);
@@ -262,7 +268,7 @@ export class RenderCoordinator extends EventTarget {
           }),
         ]);
       } catch (err) {
-        this.#rejectAll(frame.readers, err);
+        this.rejectAll(frame.readers, err);
       }
 
       // Next do all the writers as a block.
@@ -283,7 +289,7 @@ export class RenderCoordinator extends EventTarget {
           }),
         ]);
       } catch (err) {
-        this.#rejectAll(frame.writers, err);
+        this.rejectAll(frame.writers, err);
       }
 
       // Since there may have been more work requested in
@@ -294,7 +300,7 @@ export class RenderCoordinator extends EventTarget {
     });
   }
 
-  #rejectAll(handlers: CoordinatorCallback[], error: Error): void {
+  rejectAll(handlers: CoordinatorCallback[], error: Error): void {
     for (const handler of handlers) {
       const rejector = this.#rejectors.get(handler);
       if (!rejector) {

package/front_end/ui/components/survey_link/surveyLink.css

@@ -15,6 +15,7 @@
   cursor: pointer;
   font-size: var(--issue-link-font-size, 14px);
   color: var(--color-link);
+  outline-offset: 2px;
   border: none;
   background: none;
   font-family: inherit;

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

@@ -27,7 +27,7 @@ export class TextEditor extends HTMLElement {
   #dynamicSettings: readonly DynamicSetting<unknown>[] = DynamicSetting.none;
   #activeSettingListeners: [Common.Settings.Setting<unknown>, (event: {data: unknown}) => void][] = [];
   #pendingState: CodeMirror.EditorState|undefined;
-  #lastScrollPos = {left: 0, top: 0};
+  #lastScrollPos = {left: 0, top: 0, changed: false};
   #resizeTimeout = -1;
   #resizeListener = (): void => {
     if (this.#resizeTimeout < 0) {
@@ -59,12 +59,21 @@ export class TextEditor extends HTMLElement {
         }
       },
     });
-    this.#activeEditor.scrollDOM.scrollTop = this.#lastScrollPos.top;
-    this.#activeEditor.scrollDOM.scrollLeft = this.#lastScrollPos.left;
-    this.#activeEditor.scrollDOM.addEventListener('scroll', (event): void => {
-      this.#lastScrollPos.left = (event.target as HTMLElement).scrollLeft;
-      this.#lastScrollPos.top = (event.target as HTMLElement).scrollTop;
+
+    this.#restoreScrollPosition(this.#activeEditor);
+    this.#activeEditor.scrollDOM.addEventListener('scroll', event => {
+      if (!this.#activeEditor) {
+        return;
+      }
+
+      this.#saveScrollPosition(this.#activeEditor, {
+        scrollLeft: (event.target as HTMLElement).scrollLeft,
+        scrollTop: (event.target as HTMLElement).scrollTop,
+      });
+
+      this.scrollEventHandledToSaveScrollPositionForTest();
     });
+
     this.#ensureSettingListeners();
     this.#startObservingResize();
     ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
@@ -102,12 +111,69 @@ export class TextEditor extends HTMLElement {
     }
   }
 
+  #restoreScrollPosition(editor: CodeMirror.EditorView): void {
+    // Only restore scroll position if the scroll position
+    // has already changed. This check is needed because
+    // we only want to restore scroll for the text editors
+    // that are itself scrollable which, when scrolled,
+    // triggers 'scroll' event from `scrollDOM` meaning that
+    // it contains a scrollable `scrollDOM` that is scrolled.
+    if (!this.#lastScrollPos.changed) {
+      return;
+    }
+
+    // Instead of reaching to the internal DOM node
+    // of CodeMirror `scrollDOM` and setting the scroll
+    // position directly via `scrollLeft` and `scrollTop`
+    // we're using the public `scrollIntoView` effect.
+    // However, this effect doesn't provide a way to
+    // scroll to the given rectangle position.
+    // So, as a "workaround", we're instructing it to scroll to
+    // the start of the page with last scroll position margins
+    // from the sides.
+    editor.dispatch({
+      effects: CodeMirror.EditorView.scrollIntoView(0, {
+        x: 'start',
+        xMargin: -this.#lastScrollPos.left,
+        y: 'start',
+        yMargin: -this.#lastScrollPos.top,
+      }),
+    });
+  }
+
+  // `scrollIntoView` starts the scrolling from the start of the `line`
+  // not the content area and there is a padding between the
+  // sides and initial character of the line. So, we're saving
+  // the last scroll position with this margin taken into account.
+  #saveScrollPosition(editor: CodeMirror.EditorView, {scrollLeft, scrollTop}: {scrollLeft: number, scrollTop: number}):
+      void {
+    const contentRect = editor.contentDOM.getBoundingClientRect();
+
+    // In some cases `editor.coordsAtPos(0)` can return `null`
+    // (maybe, somehow, the editor is not visible yet).
+    // So, in that case, we don't take margins from the sides
+    // into account by setting `coordsAtZero` rectangle
+    // to be the same with `contentRect`.
+    const coordsAtZero = editor.coordsAtPos(0) ?? {
+      top: contentRect.top,
+      left: contentRect.left,
+      bottom: contentRect.bottom,
+      right: contentRect.right,
+    };
+
+    this.#lastScrollPos.left = scrollLeft + (contentRect.left - coordsAtZero.left);
+    this.#lastScrollPos.top = scrollTop + (contentRect.top - coordsAtZero.top);
+    this.#lastScrollPos.changed = true;
+  }
+
+  scrollEventHandledToSaveScrollPositionForTest(): void {
+  }
+
   connectedCallback(): void {
     if (!this.#activeEditor) {
       this.#createEditor();
     } else {
-      this.#activeEditor.scrollDOM.scrollTop = this.#lastScrollPos.top;
-      this.#activeEditor.scrollDOM.scrollLeft = this.#lastScrollPos.left;
+      this.#restoreScrollPosition(this.#activeEditor);
     }
   }
 
@@ -193,7 +259,7 @@ export class TextEditor extends HTMLElement {
       // Reset the highlight state if, after 2 seconds (the animation
       // duration) it is still showing this highlight.
       window.setTimeout(() => {
-        if (view.state.field(highlightState).id === id) {
+        if (view === this.#activeEditor && view.state.field(highlightState).id === id) {
           view.dispatch({effects: setHighlightLine.of(null)});
         }
       }, 2000);

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

@@ -76,7 +76,26 @@ export const autocompletion: CM.Extension = [
     icons: false,
     optionClass: (option: CM.Completion): string => option.type === 'secondary' ? 'cm-secondaryCompletion' : '',
   }),
-  CM.Prec.highest(CM.keymap.of([{key: 'ArrowRight', run: CM.acceptCompletion}])),
+  CM.Prec.highest(CM.keymap.of([
+    {
+      key: 'ArrowRight',
+      run: (editorView: CM.EditorView): boolean => {
+        const cursorPosition = editorView.state.selection.main.head;
+        const line = editorView.state.doc.lineAt(cursorPosition);
+        const column = cursorPosition - line.from;
+        const isCursorAtEndOfLine = column >= line.length;
+        if (isCursorAtEndOfLine) {
+          return CM.acceptCompletion(editorView);
+        }
+
+        // We didn't handle this key press
+        // so it will be handled by default behavior.
+        return false;
+      },
+    },
+    {mac: 'Ctrl-n', run: CM.moveCompletionSelection(true)},
+    {mac: 'Ctrl-p', run: CM.moveCompletionSelection(false)},
+  ])),
 ];
 
 export const sourcesAutocompletion = DynamicSetting.bool('textEditorAutocompletion', autocompletion);
@@ -88,6 +107,7 @@ export const codeFolding = DynamicSetting.bool('textEditorCodeFolding', [
     markerDOM(open: boolean): HTMLElement {
       const iconName = open ? 'triangle-expanded' : 'triangle-collapsed';
       const icon = new Icon.Icon.Icon();
+      icon.setAttribute('class', open ? 'cm-foldGutterElement' : 'cm-foldGutterElement cm-foldGutterElement-folded');
       icon.data = {
         iconName,
         color: 'var(--color-text-secondary)',
@@ -254,6 +274,7 @@ export function baseConfiguration(text: string|CM.Text): CM.Extension {
     CM.Prec.lowest(CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.codeEditor)})),
     text instanceof CM.Text ? [] : detectLineSeparator(text),
     CM.tooltips({
+      parent: getTooltipHost() as unknown as HTMLElement,
       tooltipSpace: getTooltipSpace,
     }),
   ];
@@ -264,6 +285,39 @@ export const closeBrackets: CM.Extension = [
   CM.keymap.of(CM.closeBracketsKeymap),
 ];
 
+// 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 directly 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 : [],
+                                 CM.syntaxHighlighting(CodeHighlighter.CodeHighlighter.highlightStyle),
+                                 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();
@@ -313,7 +367,9 @@ export const showCompletionHint = CM.ViewPlugin.fromClass(class {
     if (pos !== lineBefore.to) {
       return null;
     }
-    const partBefore = (label[0] === '\'' ? /'(\\.|[^'\\])*$/ : label[0] === '"' ? /"(\\.|[^"\\])*$/ : /#?[\w$]+$/)
+    const partBefore = (label[0] === '\''    ? /'(\\.|[^'\\])*$/ :
+                            label[0] === '"' ? /"(\\.|[^"\\])*$/ :
+                                               /#?[\w$]+$/)
                            .exec(lineBefore.text);
     if (partBefore && !label.startsWith(partBefore[0])) {
       return null;

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

@@ -6,6 +6,8 @@ import type * as CodeMirror from '../../../third_party/codemirror.next/codemirro
 
 export function toOffset(
     doc: CodeMirror.Text, {lineNumber, columnNumber}: {lineNumber: number, columnNumber: number}): number {
+  // DevTools history items are 0-based, but CodeMirror is 1-based, so we have to increment the
+  // line we want to scroll to by 1.
   const line = doc.line(Math.max(1, Math.min(doc.lines, lineNumber + 1)));
   return Math.max(line.from, Math.min(line.to, line.from + columnNumber));
 }

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

@@ -53,6 +53,16 @@ export const editorTheme = CM.EditorView.theme({
     backgroundColor: 'var(--color-background)',
   },
 
+  '.cm-gutters .cm-foldGutterElement': {
+    cursor: 'pointer',
+    opacity: '0%',
+    transition: 'opacity 0.2s',
+  },
+
+  '.cm-gutters .cm-foldGutterElement-folded, .cm-gutters:hover .cm-foldGutterElement': {
+    opacity: '100%',
+  },
+
   '.cm-lineNumbers': {
     overflow: 'visible',
     minWidth: '40px',

package/front_end/ui/components/text_prompt/textPrompt.css

@@ -10,6 +10,10 @@
   display: flex;
 }
 
+input {
+  font-size: 14px;
+}
+
 .prefix {
   flex: none;
   color: var(--color-primary);

package/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -258,13 +258,6 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     this.#setNodeExpandedState(treeNode, false);
   }
 
-  #getSelectedTreeNode(): TreeNode<TreeNodeDataType> {
-    if (!this.#selectedTreeNode) {
-      throw new Error('getSelectedNode was called but selectedTreeNode is null');
-    }
-    return this.#selectedTreeNode;
-  }
-
   async #flattenSubtree(node: TreeNodeWithChildren<TreeNodeDataType>, filter: (node: TreeNodeDataType) => FilterOption):
       Promise<TreeNode<TreeNodeDataType>[]> {
     const children = await getNodeChildren(node);
@@ -452,7 +445,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
       // clang-format on
     }
 
-    const nodeIsFocusable = this.#getSelectedTreeNode() === node;
+    const nodeIsFocusable = this.#isSelectedNode(node);
     const tabIndex = nodeIsFocusable ? 0 : -1;
     const listItemClasses = LitHtml.Directives.classMap({
       expanded: isExpandableNode(node) && nodeIsExpanded,