chrome-devtools-frontend 1.0.943986 → 1.0.945579

package/front_end/ui/components/request_link_icon/RequestLinkIcon.ts

@@ -55,73 +55,73 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export class RequestLinkIcon extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-request-link-icon`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private linkToPreflight?: boolean;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #linkToPreflight?: boolean;
   // The value `null` indicates that the request is not available,
   // `undefined` that it is still being resolved.
-  private request?: SDK.NetworkRequest.NetworkRequest|null;
-  private highlightHeader?: {section: NetworkForward.UIRequestLocation.UIHeaderSection, name: string};
-  private requestResolver?: Logs.RequestResolver.RequestResolver;
-  private displayURL: boolean = false;
-  private networkTab?: NetworkForward.UIRequestLocation.UIRequestTabs;
-  private affectedRequest?: {requestId: Protocol.Network.RequestId, url?: string};
-  private additionalOnClickAction?: () => void;
-  private reveal = Common.Revealer.reveal;
-  private requestResolvedPromise = Promise.resolve<void>(undefined);
+  #request?: SDK.NetworkRequest.NetworkRequest|null;
+  #highlightHeader?: {section: NetworkForward.UIRequestLocation.UIHeaderSection, name: string};
+  #requestResolver?: Logs.RequestResolver.RequestResolver;
+  #displayURL: boolean = false;
+  #networkTab?: NetworkForward.UIRequestLocation.UIRequestTabs;
+  #affectedRequest?: {requestId: Protocol.Network.RequestId, url?: string};
+  #additionalOnClickAction?: () => void;
+  #reveal = Common.Revealer.reveal;
+  #requestResolvedPromise = Promise.resolve<void>(undefined);
 
   set data(data: RequestLinkIconData) {
-    this.linkToPreflight = data.linkToPreflight;
-    this.request = data.request;
+    this.#linkToPreflight = data.linkToPreflight;
+    this.#request = data.request;
     if (data.affectedRequest) {
-      this.affectedRequest = {...data.affectedRequest};
+      this.#affectedRequest = {...data.affectedRequest};
     }
-    this.highlightHeader = data.highlightHeader;
-    this.networkTab = data.networkTab;
-    this.requestResolver = data.requestResolver;
-    this.displayURL = data.displayURL ?? false;
-    this.additionalOnClickAction = data.additionalOnClickAction;
+    this.#highlightHeader = data.highlightHeader;
+    this.#networkTab = data.networkTab;
+    this.#requestResolver = data.requestResolver;
+    this.#displayURL = data.displayURL ?? false;
+    this.#additionalOnClickAction = data.additionalOnClickAction;
     if (data.revealOverride) {
-      this.reveal = data.revealOverride;
+      this.#reveal = data.revealOverride;
     }
-    if (!this.request && data.affectedRequest) {
-      this.requestResolvedPromise = this.resolveRequest(data.affectedRequest.requestId);
+    if (!this.#request && data.affectedRequest) {
+      this.#requestResolvedPromise = this.resolveRequest(data.affectedRequest.requestId);
     }
     this.render();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [requestLinkIconStyles];
+    this.#shadow.adoptedStyleSheets = [requestLinkIconStyles];
   }
 
   private resolveRequest(requestId: Protocol.Network.RequestId): Promise<void> {
-    if (!this.requestResolver) {
+    if (!this.#requestResolver) {
       throw new Error('A `RequestResolver` must be provided if an `affectedRequest` is provided.');
     }
-    return this.requestResolver.waitFor(requestId)
+    return this.#requestResolver.waitFor(requestId)
         .then(request => {
-          this.request = request;
+          this.#request = request;
         })
         .catch(() => {
-          this.request = null;
+          this.#request = null;
         });
   }
 
   get data(): RequestLinkIconData {
     return {
-      linkToPreflight: this.linkToPreflight,
-      request: this.request,
-      affectedRequest: this.affectedRequest,
-      highlightHeader: this.highlightHeader,
-      networkTab: this.networkTab,
-      requestResolver: this.requestResolver,
-      displayURL: this.displayURL,
-      additionalOnClickAction: this.additionalOnClickAction,
-      revealOverride: this.reveal !== Common.Revealer.reveal ? this.reveal : undefined,
+      linkToPreflight: this.#linkToPreflight,
+      request: this.#request,
+      affectedRequest: this.#affectedRequest,
+      highlightHeader: this.#highlightHeader,
+      networkTab: this.#networkTab,
+      requestResolver: this.#requestResolver,
+      displayURL: this.#displayURL,
+      additionalOnClickAction: this.#additionalOnClickAction,
+      revealOverride: this.#reveal !== Common.Revealer.reveal ? this.#reveal : undefined,
     };
   }
 
   private iconColor(): string {
-    if (!this.request) {
+    if (!this.#request) {
       return '--issue-color-yellow';
     }
     return '--color-link';
@@ -140,38 +140,38 @@ export class RequestLinkIcon extends HTMLElement {
     if (event.button !== 0) {
       return;  // Only handle left-click for now.
     }
-    const linkedRequest = this.linkToPreflight ? this.request?.preflightRequest() : this.request;
+    const linkedRequest = this.#linkToPreflight ? this.#request?.preflightRequest() : this.#request;
     if (!linkedRequest) {
       return;
     }
-    if (this.highlightHeader) {
+    if (this.#highlightHeader) {
       const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.header(
-          linkedRequest, this.highlightHeader.section, this.highlightHeader.name);
-      this.reveal(requestLocation);
+          linkedRequest, this.#highlightHeader.section, this.#highlightHeader.name);
+      this.#reveal(requestLocation);
     } else {
       const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(
-          linkedRequest, this.networkTab ?? NetworkForward.UIRequestLocation.UIRequestTabs.Headers);
-      this.reveal(requestLocation);
+          linkedRequest, this.#networkTab ?? NetworkForward.UIRequestLocation.UIRequestTabs.Headers);
+      this.#reveal(requestLocation);
     }
-    this.additionalOnClickAction?.();
+    this.#additionalOnClickAction?.();
   }
 
   private getTooltip(): Platform.UIString.LocalizedString {
-    if (this.request) {
-      return i18nString(UIStrings.clickToShowRequestInTheNetwork, {url: this.request.url()});
+    if (this.#request) {
+      return i18nString(UIStrings.clickToShowRequestInTheNetwork, {url: this.#request.url()});
     }
     return i18nString(UIStrings.requestUnavailableInTheNetwork);
   }
 
   private getUrlForDisplaying(): string|undefined {
-    if (!this.request) {
-      return this.affectedRequest?.url;
+    if (!this.#request) {
+      return this.#affectedRequest?.url;
     }
-    return this.request.url();
+    return this.#request.url();
   }
 
   private maybeRenderURL(): LitHtml.TemplateResult|{} {
-    if (!this.displayURL) {
+    if (!this.#displayURL) {
       return LitHtml.nothing;
     }
     const url = this.getUrlForDisplaying();
@@ -186,9 +186,9 @@ export class RequestLinkIcon extends HTMLElement {
     return coordinator.write(() => {
       // clang-format off
       LitHtml.render(LitHtml.html`
-        ${LitHtml.Directives.until(this.requestResolvedPromise.then(() => this.renderComponent()), this.renderComponent())}
+        ${LitHtml.Directives.until(this.#requestResolvedPromise.then(() => this.renderComponent()), this.renderComponent())}
       `,
-      this.shadow, {host: this});
+      this.#shadow, {host: this});
       // clang-format on
     });
   }
@@ -196,7 +196,7 @@ export class RequestLinkIcon extends HTMLElement {
   private renderComponent(): LitHtml.TemplateResult {
     // clang-format off
     return LitHtml.html`
-      <span class=${LitHtml.Directives.classMap({'link': Boolean(this.request)})}
+      <span class=${LitHtml.Directives.classMap({'link': Boolean(this.#request)})}
             tabindex="0"
             @click=${this.handleClick}>
         <${IconButton.Icon.Icon.litTagName} .data=${this.iconData() as IconButton.Icon.IconData}

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -22,32 +22,32 @@ export interface SettingCheckboxData {
  */
 export class SettingCheckbox extends HTMLElement {
   static readonly litTagName = LitHtml.literal`setting-checkbox`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
 
-  private setting?: Common.Settings.Setting<boolean>;
-  private disabled: boolean = false;
-  private changeListenerDescriptor?: Common.EventTarget.EventDescriptor;
+  #setting?: Common.Settings.Setting<boolean>;
+  #disabled: boolean = false;
+  #changeListenerDescriptor?: Common.EventTarget.EventDescriptor;
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [settingCheckboxStyles];
+    this.#shadow.adoptedStyleSheets = [settingCheckboxStyles];
   }
 
   set data(data: SettingCheckboxData) {
-    if (this.changeListenerDescriptor && this.setting) {
-      this.setting.removeChangeListener(this.changeListenerDescriptor.listener);
+    if (this.#changeListenerDescriptor && this.#setting) {
+      this.#setting.removeChangeListener(this.#changeListenerDescriptor.listener);
     }
 
-    this.setting = data.setting;
-    this.disabled = Boolean(data.disabled);
+    this.#setting = data.setting;
+    this.#disabled = Boolean(data.disabled);
 
-    this.changeListenerDescriptor = this.setting.addChangeListener(() => {
+    this.#changeListenerDescriptor = this.#setting.addChangeListener(() => {
       this.render();
     });
     this.render();
   }
 
   private render(): void {
-    if (!this.setting) {
+    if (!this.#setting) {
       throw new Error('No "Setting" object provided for rendering');
     }
 
@@ -55,15 +55,15 @@ export class SettingCheckbox extends HTMLElement {
         LitHtml.html`
       <p>
         <label>
-          <input type="checkbox" ?checked=${this.setting.get()} ?disabled=${this.disabled} @change="${
-            this.checkboxChanged}" aria-label="${this.setting.title()}" /> ${this.setting.title()}
+          <input type="checkbox" ?checked=${this.#setting.get()} ?disabled=${this.#disabled} @change="${
+            this.checkboxChanged}" aria-label="${this.#setting.title()}" /> ${this.#setting.title()}
         </label>
       </p>`,
-        this.shadow, {host: this});
+        this.#shadow, {host: this});
   }
 
   private checkboxChanged(e: Event): void {
-    this.setting?.set((e.target as HTMLInputElement).checked);
+    this.#setting?.set((e.target as HTMLInputElement).checked);
   }
 }
 

package/front_end/ui/components/survey_link/SurveyLink.ts

@@ -51,74 +51,74 @@ const enum State {
 export class SurveyLink extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-survey-link`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private trigger = '';
-  private promptText = Common.UIString.LocalizedEmptyString;
-  private canShowSurvey: (trigger: string, callback: CanShowSurveyCallback) => void = () => {};
-  private showSurvey: (trigger: string, callback: ShowSurveyCallback) => void = () => {};
-  private state: State = State.Checking;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #trigger = '';
+  #promptText = Common.UIString.LocalizedEmptyString;
+  #canShowSurvey: (trigger: string, callback: CanShowSurveyCallback) => void = () => {};
+  #showSurvey: (trigger: string, callback: ShowSurveyCallback) => void = () => {};
+  #state: State = State.Checking;
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [surveyLinkStyles];
+    this.#shadow.adoptedStyleSheets = [surveyLinkStyles];
   }
 
   // Re-setting data will cause the state to go back to 'Checking' which hides the link.
   set data(data: SurveyLinkData) {
-    this.trigger = data.trigger;
-    this.promptText = data.promptText;
-    this.canShowSurvey = data.canShowSurvey;
-    this.showSurvey = data.showSurvey;
+    this.#trigger = data.trigger;
+    this.#promptText = data.promptText;
+    this.#canShowSurvey = data.canShowSurvey;
+    this.#showSurvey = data.showSurvey;
 
     this.checkSurvey();
   }
 
   private checkSurvey(): void {
-    this.state = State.Checking;
-    this.canShowSurvey(this.trigger, ({canShowSurvey}) => {
+    this.#state = State.Checking;
+    this.#canShowSurvey(this.#trigger, ({canShowSurvey}) => {
       if (!canShowSurvey) {
-        this.state = State.DontShowLink;
+        this.#state = State.DontShowLink;
       } else {
-        this.state = State.ShowLink;
+        this.#state = State.ShowLink;
       }
       this.render();
     });
   }
 
   private sendSurvey(): void {
-    this.state = State.Sending;
+    this.#state = State.Sending;
     this.render();
-    this.showSurvey(this.trigger, ({surveyShown}) => {
+    this.#showSurvey(this.#trigger, ({surveyShown}) => {
       if (!surveyShown) {
-        this.state = State.Failed;
+        this.#state = State.Failed;
       } else {
-        this.state = State.SurveyShown;
+        this.#state = State.SurveyShown;
       }
       this.render();
     });
   }
 
   private render(): void {
-    if (this.state === State.Checking || this.state === State.DontShowLink) {
+    if (this.#state === State.Checking || this.#state === State.DontShowLink) {
       return;
     }
 
-    let linkText = this.promptText;
-    if (this.state === State.Sending) {
+    let linkText = this.#promptText;
+    if (this.#state === State.Sending) {
       linkText = i18nString(UIStrings.openingSurvey);
-    } else if (this.state === State.SurveyShown) {
+    } else if (this.#state === State.SurveyShown) {
       linkText = i18nString(UIStrings.thankYouForYourFeedback);
-    } else if (this.state === State.Failed) {
+    } else if (this.#state === State.Failed) {
       linkText = i18nString(UIStrings.anErrorOccurredWithTheSurvey);
     }
 
     let linkState = '';
-    if (this.state === State.Sending) {
+    if (this.#state === State.Sending) {
       linkState = 'pending-link';
-    } else if (this.state === State.Failed || this.state === State.SurveyShown) {
+    } else if (this.#state === State.Failed || this.#state === State.SurveyShown) {
       linkState = 'disabled-link';
     }
 
-    const ariaDisabled = this.state !== State.ShowLink;
+    const ariaDisabled = this.#state !== State.ShowLink;
 
     // clang-format off
     // eslint-disable-next-line rulesdir/ban_style_tags_in_lit_html
@@ -129,7 +129,7 @@ export class SurveyLink extends HTMLElement {
       </button>
     `;
     // clang-format on
-    LitHtml.render(output, this.shadow, {host: this});
+    LitHtml.render(output, this.#shadow, {host: this});
   }
 }
 

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../core/common/common.js';
+import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
@@ -20,23 +21,35 @@ declare global {
 export class TextEditor extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-text-editor`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private activeEditor: CodeMirror.EditorView|undefined = undefined;
-  private dynamicSettings: readonly DynamicSetting<unknown>[] = DynamicSetting.none;
-  private activeSettingListeners: [Common.Settings.Setting<unknown>, (event: {data: unknown}) => void][] = [];
-  private pendingState: CodeMirror.EditorState|undefined;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #activeEditor: CodeMirror.EditorView|undefined = undefined;
+  #dynamicSettings: readonly DynamicSetting<unknown>[] = DynamicSetting.none;
+  #activeSettingListeners: [Common.Settings.Setting<unknown>, (event: {data: unknown}) => void][] = [];
+  #pendingState: CodeMirror.EditorState|undefined;
+  #lastScrollPos = {left: 0, top: 0};
+  #resizeTimeout = -1;
+  #devtoolsResizeObserver = new ResizeObserver(() => {
+    if (this.#resizeTimeout < 0) {
+      this.#resizeTimeout = window.setTimeout(() => {
+        this.#resizeTimeout = -1;
+        if (this.#activeEditor) {
+          CodeMirror.repositionTooltips(this.#activeEditor);
+        }
+      }, 50);
+    }
+  });
 
   constructor(pendingState?: CodeMirror.EditorState) {
     super();
-    this.pendingState = pendingState;
-    this.shadow.adoptedStyleSheets = [CodeHighlighter.Style.default];
+    this.#pendingState = pendingState;
+    this.#shadow.adoptedStyleSheets = [CodeHighlighter.Style.default];
   }
 
   private createEditor(): CodeMirror.EditorView {
-    this.activeEditor = new CodeMirror.EditorView({
+    this.#activeEditor = new CodeMirror.EditorView({
       state: this.state,
-      parent: this.shadow,
-      root: this.shadow,
+      parent: this.#shadow,
+      root: this.#shadow,
       dispatch: (tr: CodeMirror.Transaction): void => {
         this.editor.update([tr]);
         if (tr.reconfigured) {
@@ -44,12 +57,19 @@ 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.ensureSettingListeners();
-    return this.activeEditor;
+    this.startObservingResize();
+    return this.#activeEditor;
   }
 
   get editor(): CodeMirror.EditorView {
-    return this.activeEditor || this.createEditor();
+    return this.#activeEditor || this.createEditor();
   }
 
   dispatch(spec: CodeMirror.TransactionSpec): void {
@@ -57,72 +77,81 @@ export class TextEditor extends HTMLElement {
   }
 
   get state(): CodeMirror.EditorState {
-    if (this.activeEditor) {
-      return this.activeEditor.state;
+    if (this.#activeEditor) {
+      return this.#activeEditor.state;
     }
-    if (!this.pendingState) {
-      this.pendingState = CodeMirror.EditorState.create({extensions: baseConfiguration('')});
+    if (!this.#pendingState) {
+      this.#pendingState = CodeMirror.EditorState.create({extensions: baseConfiguration('')});
     }
-    return this.pendingState;
+    return this.#pendingState;
   }
 
   set state(state: CodeMirror.EditorState) {
-    if (this.activeEditor) {
-      this.activeEditor.setState(state);
+    if (this.#activeEditor) {
+      this.#activeEditor.setState(state);
     } else {
-      this.pendingState = state;
+      this.#pendingState = state;
     }
   }
 
   connectedCallback(): void {
-    if (!this.activeEditor) {
+    if (!this.#activeEditor) {
       this.createEditor();
     }
   }
 
   disconnectedCallback(): void {
-    if (this.activeEditor) {
-      this.pendingState = this.activeEditor.state;
-      this.activeEditor.destroy();
-      this.activeEditor = undefined;
+    if (this.#activeEditor) {
+      this.#pendingState = this.#activeEditor.state;
+      this.#devtoolsResizeObserver.disconnect();
+      this.#activeEditor.destroy();
+      this.#activeEditor = undefined;
       this.ensureSettingListeners();
     }
   }
 
   focus(): void {
-    if (this.activeEditor) {
-      this.activeEditor.focus();
+    if (this.#activeEditor) {
+      this.#activeEditor.focus();
     }
   }
 
   private ensureSettingListeners(): void {
-    const dynamicSettings = this.activeEditor ? this.activeEditor.state.facet(dynamicSetting) : DynamicSetting.none;
-    if (dynamicSettings === this.dynamicSettings) {
+    const dynamicSettings = this.#activeEditor ? this.#activeEditor.state.facet(dynamicSetting) : DynamicSetting.none;
+    if (dynamicSettings === this.#dynamicSettings) {
       return;
     }
-    this.dynamicSettings = dynamicSettings;
+    this.#dynamicSettings = dynamicSettings;
 
-    for (const [setting, listener] of this.activeSettingListeners) {
+    for (const [setting, listener] of this.#activeSettingListeners) {
       setting.removeChangeListener(listener);
     }
-    this.activeSettingListeners = [];
+    this.#activeSettingListeners = [];
 
     const settings = Common.Settings.Settings.instance();
     for (const dynamicSetting of dynamicSettings) {
       const handler = ({data}: {data: unknown}): void => {
         const change = dynamicSetting.sync(this.state, data);
-        if (change && this.activeEditor) {
-          this.activeEditor.dispatch({effects: change});
+        if (change && this.#activeEditor) {
+          this.#activeEditor.dispatch({effects: change});
         }
       };
       const setting = settings.moduleSetting(dynamicSetting.settingName);
       setting.addChangeListener(handler);
-      this.activeSettingListeners.push([setting, handler]);
+      this.#activeSettingListeners.push([setting, handler]);
+    }
+  }
+
+  private startObservingResize(): void {
+    const devtoolsElement =
+        WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
+    if (devtoolsElement) {
+      this.#devtoolsResizeObserver.observe(devtoolsElement);
     }
   }
 
   revealPosition(selection: CodeMirror.EditorSelection, highlight: boolean = true): void {
-    const view = this.activeEditor;
+    const view = this.#activeEditor;
     if (!view) {
       return;
     }

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

@@ -4,6 +4,7 @@
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
 
@@ -68,7 +69,10 @@ export const tabMovesFocus = DynamicSetting.bool('textEditorTabMovesFocus', CM.k
   shift: (view: CM.EditorView): boolean => view.state.doc.length ? CM.indentLess(view) : false,
 }]));
 
-export const autocompletion = CM.autocompletion({icons: false});
+export const autocompletion = CM.autocompletion({
+  icons: false,
+  optionClass: (option: CM.Completion): string => option.type === 'secondary' ? 'cm-secondaryCompletion' : '',
+});
 
 export const sourcesAutocompletion = DynamicSetting.bool('textEditorAutocompletion', autocompletion);
 
@@ -185,7 +189,6 @@ const baseKeymap = CM.keymap.of([
   {key: 'Mod-d', run: CM.selectNextOccurrence},
   {key: 'Alt-ArrowLeft', mac: 'Ctrl-ArrowLeft', run: CM.cursorSubwordBackward, shift: CM.selectSubwordBackward},
   {key: 'Alt-ArrowRight', mac: 'Ctrl-ArrowRight', run: CM.cursorSubwordForward, shift: CM.selectSubwordForward},
-  ...CM.closeBracketsKeymap,
   ...CM.standardKeymap,
   ...CM.historyKeymap,
 ]);
@@ -201,6 +204,16 @@ export function theme(): CM.Extension {
   return [editorTheme, themeIsDark() ? dummyDarkTheme : []];
 }
 
+let sideBarElement: HTMLElement|null = null;
+
+function getTooltipSpace(): DOMRect {
+  if (!sideBarElement) {
+    sideBarElement =
+        WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
+  }
+  return sideBarElement.getBoundingClientRect();
+}
+
 export function baseConfiguration(text: string): CM.Extension {
   return [
     theme(),
@@ -210,7 +223,6 @@ export function baseConfiguration(text: string): CM.Extension {
     CM.EditorState.allowMultipleSelections.of(true),
     CM.indentOnInput(),
     CodeHighlighter.CodeHighlighter.highlightStyle,
-    CM.closeBrackets(),
     baseKeymap,
     tabMovesFocus.instance(),
     bracketMatching.instance(),
@@ -218,10 +230,18 @@ export function baseConfiguration(text: string): CM.Extension {
     CM.Prec.lowest(CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.codeEditor)})),
     detectLineSeparator(text),
     autocompletion,
-    CM.tooltips({parent: getTooltipHost() as unknown as HTMLElement}),
+    CM.tooltips({
+      parent: getTooltipHost() as unknown as HTMLElement,
+      tooltipSpace: getTooltipSpace,
+    }),
   ];
 }
 
+export const closeBrackets: CM.Extension = [
+  CM.closeBrackets(),
+  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
@@ -287,12 +307,16 @@ export const showCompletionHint = CM.ViewPlugin.fromClass(class {
   }
 
   topCompletion(state: CM.EditorState): string|null {
-    const completions = CM.currentCompletions(state);
-    if (!completions.length) {
+    const completion = CM.selectedCompletion(state);
+    if (!completion) {
       return null;
     }
-    const {label} = completions[0];
-    if (label.length > 100 || label.indexOf('\n') > -1) {
+    let {label, apply} = completion;
+    if (typeof apply === 'string') {
+      label = apply;
+      apply = undefined;
+    }
+    if (apply || label.length > 100 || label.indexOf('\n') > -1 || completion.type === 'secondary') {
       return null;
     }
     const pos = state.selection.main.head;
@@ -300,13 +324,11 @@ export const showCompletionHint = CM.ViewPlugin.fromClass(class {
     if (pos !== lineBefore.to) {
       return null;
     }
-    const textBefore = lineBefore.text.slice(0, pos - lineBefore.from);
-    for (let i = label.length - 1; i > 0; i--) {
-      if (textBefore.endsWith(label.slice(0, i)) && !/\w/.test(textBefore.charAt(textBefore.length - i - 1))) {
-        return label.slice(i);
-      }
+    const wordBefore = /[\w$]+$/.exec(lineBefore.text);
+    if (wordBefore && !label.startsWith(wordBefore[0])) {
+      return null;
     }
-    return null;
+    return label.slice(wordBefore ? wordBefore[0].length : 0);
   }
 }, {decorations: p => p.decorations});