chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

package/front_end/panels/console/ConsolePinPane.ts

@@ -1,23 +1,27 @@
 // Copyright 2018 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import {Directives, html, nothing, render} from '../../third_party/lit/lit.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import type {LitTemplate} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import consolePinPaneStyles from './consolePinPane.css.js';
 
+const {createRef, ref} = Directives;
+
 const UIStrings = {
   /**
    * @description A context menu item in the Console Pin Pane of the Console panel
@@ -56,49 +60,57 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsolePinPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const elementToConsolePin = new WeakMap<Element, ConsolePin>();
+export interface PaneViewInput {
+  pins: ConsolePin[];
+  focusOut: () => void;
+  onRemove: (pin: ConsolePin) => void;
+  onContextMenu: (event: Event) => void;
+}
 
+export const DEFAULT_PANE_VIEW = (input: PaneViewInput, _output: object, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <style>${consolePinPaneStyles}</style>
+    <div class='console-pins monospace' jslog=${VisualLogging.pane('console-pins')} @contextmenu=${input.onContextMenu}>
+    ${input.pins.map(pin => html`
+        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ConsolePinPresenter, {
+          pin,
+          focusOut: input.focusOut,
+          onRemove: () => input.onRemove(pin),
+        })}></devtools-widget>`
+    )}
+    </div>`, target);
+  // clang-format on
+};
 export class ConsolePinPane extends UI.Widget.VBox {
-  private pins: Set<ConsolePin>;
-  private readonly pinsSetting: Common.Settings.Setting<string[]>;
-  private readonly throttler: Common.Throttler.Throttler;
-  constructor(private readonly liveExpressionButton: UI.Toolbar.ToolbarButton, private readonly focusOut: () => void) {
+  readonly #view: typeof DEFAULT_PANE_VIEW;
+  /** When creating a new pin, we'll focus it after rendering the editor */
+  #newPin?: ConsolePin;
+  readonly #pinModel: ConsolePinModel;
+  readonly #focusOut: () => void;
+
+  constructor(focusOut: () => void, view = DEFAULT_PANE_VIEW) {
     super({useShadowDom: true});
-    this.throttler = new Common.Throttler.Throttler(250);
-    this.registerRequiredCSS(consolePinPaneStyles, objectValueStyles);
-    this.contentElement.classList.add('console-pins', 'monospace');
-    this.contentElement.addEventListener('contextmenu', this.contextMenuEventFired.bind(this), false);
-    this.contentElement.setAttribute('jslog', `${VisualLogging.pane('console-pins')}`);
-
-    this.pins = new Set();
-    this.pinsSetting = Common.Settings.Settings.instance().createLocalSetting('console-pins', []);
-    for (const expression of this.pinsSetting.get()) {
-      this.addPin(expression);
-    }
+    this.#focusOut = focusOut;
+    this.#view = view;
+    this.#pinModel = new ConsolePinModel(Common.Settings.Settings.instance());
   }
 
   override willHide(): void {
     super.willHide();
-    for (const pin of this.pins) {
-      pin.setHovered(false);
-    }
-  }
-
-  savePins(): void {
-    const toSave = Array.from(this.pins).map(pin => pin.expression());
-    this.pinsSetting.set(toSave);
+    this.#pinModel.stopPeriodicEvaluate();
   }
 
   private contextMenuEventFired(event: Event): void {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     const target = UI.UIUtils.deepElementFromEvent(event);
     if (target) {
-      const targetPinElement = target.enclosingNodeOrSelfWithClass('console-pin');
+      const targetPinElement = target.enclosingNodeOrSelfWithClass('widget');
       if (targetPinElement) {
-        const targetPin = elementToConsolePin.get(targetPinElement);
-        if (targetPin) {
+        const targetPin = UI.Widget.Widget.get(targetPinElement);
+        if (targetPin instanceof ConsolePinPresenter) {
           contextMenu.editSection().appendItem(
-              i18nString(UIStrings.removeExpression), this.removePin.bind(this, targetPin),
+              i18nString(UIStrings.removeExpression), () => targetPin.pin ? this.removePin(targetPin.pin) : undefined,
               {jslogContext: 'remove-expression'});
           targetPin.appendToContextMenu(contextMenu);
         }
@@ -111,137 +123,200 @@ export class ConsolePinPane extends UI.Widget.VBox {
   }
 
   private removeAllPins(): void {
-    for (const pin of this.pins) {
-      this.removePin(pin);
-    }
+    this.#pinModel.removeAll();
+    this.requestUpdate();
   }
 
   removePin(pin: ConsolePin): void {
-    pin.element().remove();
-    const newFocusedPin = this.focusedPinAfterDeletion(pin);
-    this.pins.delete(pin);
-    this.savePins();
-    if (newFocusedPin) {
-      void newFocusedPin.focus();
-    } else {
-      this.liveExpressionButton.focus();
-    }
+    this.#pinModel.remove(pin);
+    this.requestUpdate();
   }
 
   addPin(expression: string, userGesture?: boolean): void {
-    const pin = new ConsolePin(expression, this, this.focusOut);
-    this.contentElement.appendChild(pin.element());
-    this.pins.add(pin);
-    this.savePins();
+    const pin = this.#pinModel.add(expression);
     if (userGesture) {
-      void pin.focus();
+      this.#newPin = pin;
     }
     this.requestUpdate();
   }
 
-  private focusedPinAfterDeletion(deletedPin: ConsolePin): ConsolePin|null {
-    const pinArray = Array.from(this.pins);
-    for (let i = 0; i < pinArray.length; i++) {
-      if (pinArray[i] === deletedPin) {
-        if (pinArray.length === 1) {
-          return null;
-        }
-        if (i === pinArray.length - 1) {
-          return pinArray[i - 1];
-        }
-        return pinArray[i + 1];
+  override wasShown(): void {
+    super.wasShown();
+    this.#pinModel.startPeriodicEvaluate();
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    this.#view(
+        {
+          pins: [...this.#pinModel.pins],
+          focusOut: this.#focusOut,
+          onRemove: (pin: ConsolePin) => this.removePin(pin),
+          onContextMenu: this.contextMenuEventFired.bind(this),
+        },
+        {}, this.contentElement);
+
+    // Focus the freshly created pin if the user clicked the button.
+    // We need to give it a tick though, so the child can also finish rendering.
+    for (const child of this.children()) {
+      if (child instanceof ConsolePinPresenter && child.pin === this.#newPin) {
+        void child.updateComplete.then(() => child.focus());
       }
     }
-    return null;
+    this.#newPin = undefined;
+  }
+}
+
+export interface ViewInput {
+  expression: string;
+  editorState: CodeMirror.EditorState;
+  result: SDK.RuntimeModel.EvaluationResult|null;
+  isEditing: boolean;
+  onDelete: () => void;
+  onPreviewHoverChange: (hovered: boolean) => void;
+  onPreviewClick: (event: MouseEvent) => void;
+}
+
+export interface ViewOutput {
+  deletePinIcon?: Buttons.Button.Button;
+  editor?: TextEditor.TextEditor.TextEditor;
+}
+
+export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
+  const deleteIconLabel = input.expression ? i18nString(UIStrings.removeExpressionS, {PH1: input.expression}) :
+                                             i18nString(UIStrings.removeBlankExpression);
+  const deleteRef = createRef<Buttons.Button.Button>();
+  const editorRef = createRef<TextEditor.TextEditor.TextEditor>();
+  const isError = input.result && !('error' in input.result) && input.result?.exceptionDetails &&
+      !SDK.RuntimeModel.RuntimeModel.isSideEffectFailure(input.result);
+  // clang-format off
+  render(html`
+    <style>${consolePinPaneStyles}</style>
+    <style>${objectValueStyles}</style>
+    <div class='console-pin ${isError ? 'error-level' : ''}'>
+      <devtools-button class='close-button'
+          .iconName=${'cross'}
+          .variant=${Buttons.Button.Variant.ICON}
+          .size=${Buttons.Button.Size.MICRO}
+          tabindex=0
+          aria-label=${deleteIconLabel}
+          @click=${(event: MouseEvent) => {
+            input.onDelete();
+            event.consume(true);
+          }}
+          @keydown=${(event: KeyboardEvent) => {
+            if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
+              input.onDelete();
+              event.consume(true);
+            }
+          }}
+          ${ref(deleteRef)}
+      ></devtools-button>
+      <div class='console-pin-name'
+          title=${input.expression}
+          jslog=${VisualLogging.textField().track({change: true})}
+          @keydown=${(event: KeyboardEvent) => {
+            // Prevent Esc from toggling the drawer.
+            if (event.key === 'Escape') {
+              event.consume();
+            }
+          }}
+      >
+        <devtools-text-editor .state=${input.editorState} ${ref(editorRef)} tabindex=0
+        ></devtools-text-editor>
+      </div>
+      <div class='console-pin-preview'
+          @mouseenter=${() => input.onPreviewHoverChange(true)}
+          @mouseleave=${() => input.onPreviewHoverChange(false)}
+          @click=${(event: MouseEvent) => input.onPreviewClick(event)}
+      >
+        ${renderResult(input.result, input.isEditing)}
+      </div>
+    </div>
+    `, target);
+  // clang-format on
+  Object.assign(output, {
+    deletePinIcon: deleteRef.value,
+    editor: editorRef.value,
+  });
+};
+
+// RemoteObjectPreviewFormatter is stateless, so we can just keep a global copy around.
+const FORMATTER = new ObjectUI.RemoteObjectPreviewFormatter.RemoteObjectPreviewFormatter();
+
+function renderResult(result: SDK.RuntimeModel.EvaluationResult|null, isEditing: boolean): LitTemplate {
+  if (!result) {
+    return nothing;
+  }
+
+  if (result && SDK.RuntimeModel.RuntimeModel.isSideEffectFailure(result)) {
+    return html`<span class='object-value-calculate-value-button' title=${
+        i18nString(UIStrings.evaluateAllowingSideEffects)}>(…)</span>`;
+  }
+
+  const renderedPreview = FORMATTER.renderEvaluationResultPreview(result, !isEditing);
+  if (renderedPreview === nothing && !isEditing) {
+    return html`${i18nString(UIStrings.notAvailable)}`;
+  }
+  return renderedPreview;
+}
+
+export class ConsolePinPresenter extends UI.Widget.Widget {
+  #pin?: ConsolePin;
+  #focusOut?: () => void;
+  #onRemove?: () => void;
+
+  readonly #view: typeof DEFAULT_VIEW;
+  readonly #pinEditor: ConsolePinEditor;
+  #editor?: TextEditor.TextEditor.TextEditor;
+  #hovered = false;
+  #lastNode: SDK.RemoteObject.RemoteObject|null = null;
+  #deletePinIcon!: Buttons.Button.Button;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+
+    this.#pinEditor = {
+      workingCopy: () => this.#editor?.state.doc.toString() ?? '',
+      workingCopyWithHint: () => this.#editor ? TextEditor.Config.contentIncludingHint(this.#editor.editor) : '',
+      isEditing: () => Boolean(this.#editor?.editor.hasFocus),
+    };
   }
 
   override wasShown(): void {
     super.wasShown();
-    void this.throttler.schedule(this.requestUpdate.bind(this));
+    this.#pin?.addEventListener(ConsolePinEvent.EVALUATE_RESULT_READY, this.requestUpdate, this);
+    this.requestUpdate();
   }
 
-  override async performUpdate(): Promise<void> {
-    if (!this.pins.size || !this.isShowing()) {
-      return;
-    }
-    const updatePromises = Array.from(this.pins, pin => pin.updatePreview());
-    await Promise.all(updatePromises);
-    this.updatedForTest();
-    void this.throttler.schedule(this.requestUpdate.bind(this));
+  override willHide(): void {
+    super.willHide();
+    this.#pin?.removeEventListener(ConsolePinEvent.EVALUATE_RESULT_READY, this.requestUpdate, this);
+    this.setHovered(false);
   }
 
-  private updatedForTest(): void {
+  set pin(pin: ConsolePin) {
+    this.#pin?.removeEventListener(ConsolePinEvent.EVALUATE_RESULT_READY, this.requestUpdate, this);
+    this.#pin = pin;
+    this.#pin.setEditor(this.#pinEditor);
+    this.#pin.addEventListener(ConsolePinEvent.EVALUATE_RESULT_READY, this.requestUpdate, this);
+    this.requestUpdate();
   }
-}
 
-export class ConsolePin {
-  private readonly pinElement: Element;
-  private readonly pinPreview: HTMLElement;
-  private lastResult: SDK.RuntimeModel.EvaluationResult|null;
-  private lastExecutionContext: SDK.RuntimeModel.ExecutionContext|null;
-  private editor: TextEditor.TextEditor.TextEditor;
-  private committedExpression: string;
-  private hovered: boolean;
-  private lastNode: SDK.RemoteObject.RemoteObject|null;
-  private deletePinIcon: Buttons.Button.Button;
-
-  constructor(expression: string, private readonly pinPane: ConsolePinPane, private readonly focusOut: () => void) {
-    this.deletePinIcon = new Buttons.Button.Button();
-    this.deletePinIcon
-        .data = {variant: Buttons.Button.Variant.ICON, iconName: 'cross', size: Buttons.Button.Size.MICRO};
-    this.deletePinIcon.classList.add('close-button');
-    this.deletePinIcon.setAttribute('jslog', `${VisualLogging.close().track({click: true})}`);
-    this.deletePinIcon.tabIndex = 0;
-
-    if (expression.length) {
-      UI.ARIAUtils.setLabel(this.deletePinIcon, i18nString(UIStrings.removeExpressionS, {PH1: expression}));
-    } else {
-      UI.ARIAUtils.setLabel(this.deletePinIcon, i18nString(UIStrings.removeBlankExpression));
-    }
-    self.onInvokeElement(this.deletePinIcon, event => {
-      pinPane.removePin(this);
-      event.consume(true);
-    });
+  get pin(): ConsolePin|undefined {
+    return this.#pin;
+  }
 
-    const fragment = UI.Fragment.Fragment.build`
-  <div class='console-pin'>
-  ${this.deletePinIcon}
-  <div class='console-pin-name' $='name' jslog="${VisualLogging.textField().track({
-      change: true,
-    })}"></div>
-  <div class='console-pin-preview' $='preview'></div>
-  </div>`;
-    this.pinElement = fragment.element();
-    this.pinPreview = (fragment.$('preview') as HTMLElement);
-    const nameElement = (fragment.$('name') as HTMLElement);
-    UI.Tooltip.Tooltip.install(nameElement, expression);
-    elementToConsolePin.set(this.pinElement, this);
-
-    this.lastResult = null;
-    this.lastExecutionContext = null;
-    this.committedExpression = expression;
-    this.hovered = false;
-    this.lastNode = null;
-    this.editor = this.createEditor(expression, nameElement);
-
-    this.pinPreview.addEventListener('mouseenter', this.setHovered.bind(this, true), false);
-    this.pinPreview.addEventListener('mouseleave', this.setHovered.bind(this, false), false);
-    this.pinPreview.addEventListener('click', (event: Event) => {
-      if (this.lastNode) {
-        void Common.Revealer.reveal(this.lastNode);
-        event.consume();
-      }
-    }, false);
+  set focusOut(focusOut: () => void) {
+    this.#focusOut = focusOut;
+  }
 
-    // Prevent Esc from toggling the drawer
-    nameElement.addEventListener('keydown', event => {
-      if (event.key === 'Escape') {
-        event.consume();
-      }
-    });
+  set onRemove(onRemove: () => void) {
+    this.#onRemove = onRemove;
   }
 
-  createEditor(doc: string, parent: HTMLElement): TextEditor.TextEditor.TextEditor {
+  #createInitialEditorState(doc: string): CodeMirror.EditorState {
     const extensions = [
       CodeMirror.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.liveExpressionEditor)}),
       CodeMirror.EditorView.lineWrapping,
@@ -252,52 +327,52 @@ export class ConsolePin {
         {
           key: 'Escape',
           run: (view: CodeMirror.EditorView) => {
-            view.dispatch({changes: {from: 0, to: view.state.doc.length, insert: this.committedExpression}});
-            this.focusOut();
+            view.dispatch({changes: {from: 0, to: view.state.doc.length, insert: this.#pin?.expression ?? ''}});
+            this.#focusOut?.();
             return true;
           },
         },
         {
           key: 'Enter',
           run: () => {
-            this.focusOut();
+            this.#focusOut?.();
             return true;
           },
         },
         {
           key: 'Mod-Enter',
           run: () => {
-            this.focusOut();
+            this.#focusOut?.();
             return true;
           },
         },
         {
           key: 'Tab',
           run: (view: CodeMirror.EditorView) => {
-            if (CodeMirror.completionStatus(this.editor.state) !== null) {
+            if (CodeMirror.completionStatus(view.state) !== null) {
               return false;
             }
             // User should be able to tab out of edit field after auto complete is done
-            view.dispatch({changes: {from: 0, to: view.state.doc.length, insert: this.committedExpression}});
-            this.focusOut();
+            view.dispatch({changes: {from: 0, to: view.state.doc.length, insert: this.#pin?.expression ?? ''}});
+            this.#focusOut?.();
             return true;
           },
         },
         {
           key: 'Shift-Tab',
           run: (view: CodeMirror.EditorView) => {
-            if (CodeMirror.completionStatus(this.editor.state) !== null) {
+            if (CodeMirror.completionStatus(view.state) !== null) {
               return false;
             }
             // User should be able to tab out of edit field after auto complete is done
-            view.dispatch({changes: {from: 0, to: view.state.doc.length, insert: this.committedExpression}});
-            this.editor.blur();
-            this.deletePinIcon.focus();
+            view.dispatch({changes: {from: 0, to: view.state.doc.length, insert: this.#pin?.expression ?? ''}});
+            this.#editor?.blur();
+            this.#deletePinIcon.focus();
             return true;
           },
         },
       ]),
-      CodeMirror.EditorView.domEventHandlers({blur: (_e, view) => this.onBlur(view)}),
+      CodeMirror.EditorView.domEventHandlers({blur: (_e, view) => this.#onBlur(view)}),
       TextEditor.Config.baseConfiguration(doc),
       TextEditor.Config.closeBrackets.instance(),
       TextEditor.Config.autocompletion.instance(),
@@ -305,110 +380,255 @@ export class ConsolePin {
     if (Root.Runtime.Runtime.queryParam('noJavaScriptCompletion') !== 'true') {
       extensions.push(TextEditor.JavaScript.completion());
     }
-    const editor = new TextEditor.TextEditor.TextEditor(CodeMirror.EditorState.create({doc, extensions}));
-    parent.appendChild(editor);
-    return editor;
+    return CodeMirror.EditorState.create({doc, extensions});
   }
 
-  onBlur(editor: CodeMirror.EditorView): void {
-    const text = editor.state.doc.toString();
-    const trimmedText = text.trim();
-    this.committedExpression = trimmedText;
-    this.pinPane.savePins();
-    if (this.committedExpression.length) {
-      UI.ARIAUtils.setLabel(
-          this.deletePinIcon, i18nString(UIStrings.removeExpressionS, {PH1: this.committedExpression}));
-    } else {
-      UI.ARIAUtils.setLabel(this.deletePinIcon, i18nString(UIStrings.removeBlankExpression));
+  #onBlur(editor: CodeMirror.EditorView): void {
+    if (!this.#pin) {
+      return;
     }
+    const commitedAsIs = this.#pin.commit();
     editor.dispatch({
-      selection: {anchor: trimmedText.length},
-      changes: trimmedText !== text ? {from: 0, to: text.length, insert: trimmedText} : undefined,
+      selection: {anchor: this.#pin.expression.length},
+      changes: !commitedAsIs ? {from: 0, to: editor.state.doc.length, insert: this.#pin.expression} : undefined,
     });
+    this.requestUpdate();
   }
 
   setHovered(hovered: boolean): void {
-    if (this.hovered === hovered) {
+    if (this.#hovered === hovered) {
       return;
     }
-    this.hovered = hovered;
-    if (!hovered && this.lastNode) {
+    this.#hovered = hovered;
+    if (!hovered && this.#lastNode) {
       SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
     }
   }
 
-  expression(): string {
-    return this.committedExpression;
-  }
-
-  element(): Element {
-    return this.pinElement;
-  }
-
-  async focus(): Promise<void> {
-    const editor = this.editor;
-    editor.editor.focus();
-    editor.dispatch({selection: {anchor: editor.state.doc.length}});
+  override async focus(): Promise<void> {
+    const editor = this.#editor;
+    if (editor) {
+      editor.editor.focus();
+      editor.dispatch({selection: {anchor: editor.state.doc.length}});
+    }
   }
 
   appendToContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
-    if (this.lastResult && !('error' in this.lastResult) && this.lastResult.object) {
-      contextMenu.appendApplicableItems(this.lastResult.object);
+    if (!this.#pin) {
+      return;
+    }
+    const {lastResult} = this.#pin;
+    if (lastResult && !('error' in lastResult) && lastResult.object) {
+      contextMenu.appendApplicableItems(lastResult.object);
       // Prevent result from being released automatically, since it may be used by
       // the context menu action. It will be released when the console is cleared,
       // where we release the 'live-expression' object group.
-      this.lastResult = null;
+      this.#pin.skipReleaseLastResult();
     }
   }
 
-  async updatePreview(): Promise<void> {
-    if (!this.editor) {
+  override performUpdate(): void {
+    if (!this.#pin) {
       return;
     }
-    const text = TextEditor.Config.contentIncludingHint(this.editor.editor);
-    const isEditing = this.pinElement.hasFocus();
-    const throwOnSideEffect = isEditing && text !== this.committedExpression;
-    const timeout = throwOnSideEffect ? 250 : undefined;
-    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
-    const {preview, result} = await ObjectUI.JavaScriptREPL.JavaScriptREPL.evaluateAndBuildPreview(
-        text, throwOnSideEffect, true /* replMode */, timeout, !isEditing /* allowErrors */, 'live-expression',
-        true /* awaitPromise */, true /* silent */);
-    if (this.lastResult && this.lastExecutionContext) {
-      this.lastExecutionContext.runtimeModel.releaseEvaluationResult(this.lastResult);
-    }
-    this.lastResult = result || null;
-    this.lastExecutionContext = executionContext || null;
-
-    const previewText = preview.deepTextContent();
-    if (!previewText || previewText !== this.pinPreview.deepTextContent()) {
-      this.pinPreview.removeChildren();
-      if (result && SDK.RuntimeModel.RuntimeModel.isSideEffectFailure(result)) {
-        const sideEffectLabel = this.pinPreview.createChild('span', 'object-value-calculate-value-button');
-        sideEffectLabel.textContent = '(…)';
-        UI.Tooltip.Tooltip.install(sideEffectLabel, i18nString(UIStrings.evaluateAllowingSideEffects));
-      } else if (previewText) {
-        this.pinPreview.appendChild(preview);
-      } else if (!isEditing) {
-        UI.UIUtils.createTextChild(this.pinPreview, i18nString(UIStrings.notAvailable));
-      }
-      UI.Tooltip.Tooltip.install(this.pinPreview, previewText);
-    }
 
-    let node: SDK.RemoteObject.RemoteObject|null = null;
-    if (result && !('error' in result) && result.object.type === 'object' && result.object.subtype === 'node') {
-      node = result.object;
+    const output: ViewOutput = {};
+    this.#view(
+        {
+          expression: this.#pin.expression,
+          editorState: this.#editor?.state ?? this.#createInitialEditorState(this.#pin.expression),
+          result: this.#pin.lastResult,
+          isEditing: this.#pinEditor.isEditing(),
+          onDelete: () => this.#onRemove?.(),
+          onPreviewHoverChange: hovered => this.setHovered(hovered),
+          onPreviewClick: event => {
+            if (this.#lastNode) {
+              void Common.Revealer.reveal(this.#lastNode);
+              event.consume();
+            }
+          },
+        },
+        output, this.contentElement);
+
+    const {deletePinIcon, editor} = output;
+    if (!deletePinIcon || !editor) {
+      throw new Error('Broken view function, expected output');
     }
-    if (this.hovered) {
+    this.#deletePinIcon = deletePinIcon;
+    this.#editor = editor;
+
+    const node = this.#pin.lastNode;
+    if (this.#hovered) {
       if (node) {
         SDK.OverlayModel.OverlayModel.highlightObjectAsDOMNode(node);
-      } else if (this.lastNode) {
+      } else if (this.#lastNode) {
         SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
       }
     }
-    this.lastNode = node || null;
+    this.#lastNode = node || null;
+  }
+}
+
+export class ConsolePinModel {
+  readonly #setting: Common.Settings.Setting<string[]>;
+  readonly #pins = new Set<ConsolePin>();
+
+  readonly #throttler = new Common.Throttler.Throttler(250);
+  #active = false;
+
+  constructor(settings: Common.Settings.Settings) {
+    this.#setting = settings.createLocalSetting('console-pins', []);
+    for (const expression of this.#setting.get()) {
+      this.add(expression);
+    }
+  }
 
-    const isError = result && !('error' in result) && result.exceptionDetails &&
-        !SDK.RuntimeModel.RuntimeModel.isSideEffectFailure(result);
-    this.pinElement.classList.toggle('error-level', Boolean(isError));
+  get pins(): ReadonlySet<ConsolePin> {
+    return this.#pins;
   }
+
+  add(expression: string): ConsolePin {
+    const pin = new ConsolePin(expression, () => this.#save());
+    this.#pins.add(pin);
+    this.#save();
+    return pin;
+  }
+
+  remove(pin: ConsolePin): void {
+    this.#pins.delete(pin);
+    this.#save();
+  }
+
+  removeAll(): void {
+    this.#pins.clear();
+    this.#save();
+  }
+
+  startPeriodicEvaluate(): void {
+    this.#active = true;
+    void this.#evaluateAllPins();
+  }
+
+  stopPeriodicEvaluate(): void {
+    this.#active = false;
+  }
+
+  async #evaluateAllPins(): Promise<void> {
+    if (!this.#active) {
+      return;
+    }
+
+    const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
+    if (executionContext) {
+      await Promise.all(this.#pins.values().map(pin => pin.evaluate(executionContext)));
+    }
+    void this.#throttler.schedule(this.#evaluateAllPins.bind(this));
+  }
+
+  #save(): void {
+    const expressions = this.#pins.values().map(pin => pin.expression).toArray();
+    this.#setting.set(expressions);
+  }
+}
+
+/**
+ * Small helper interface to allow `ConsolePin` to retrieve the current working copy.
+ */
+interface ConsolePinEditor {
+  workingCopy(): string;
+  workingCopyWithHint(): string;
+  isEditing(): boolean;
+}
+
+/**
+ * A pinned console expression.
+ */
+export class ConsolePin extends Common.ObjectWrapper.ObjectWrapper<ConsolePinEvents> {
+  #expression: string;
+  readonly #onCommit: () => void;
+
+  #editor?: ConsolePinEditor;
+
+  // We track the last evaluation result for this pin so we can release the RemoteObject.
+  #lastResult: SDK.RuntimeModel.EvaluationResult|null = null;
+  #lastNode: SDK.RemoteObject.RemoteObject|null = null;
+  #lastExecutionContext: SDK.RuntimeModel.ExecutionContext|null = null;
+  #releaseLastResult = true;
+
+  constructor(expression: string, onCommit: () => void) {
+    super();
+    this.#expression = expression;
+    this.#onCommit = onCommit;
+  }
+
+  get expression(): string {
+    return this.#expression;
+  }
+
+  get lastResult(): SDK.RuntimeModel.EvaluationResult|null {
+    return this.#lastResult;
+  }
+
+  /** A short cut in case `lastResult` is a DOM node */
+  get lastNode(): SDK.RemoteObject.RemoteObject|null {
+    return this.#lastNode;
+  }
+
+  skipReleaseLastResult(): void {
+    this.#releaseLastResult = false;
+  }
+
+  setEditor(editor: ConsolePinEditor): void {
+    this.#editor = editor;
+  }
+
+  /**
+   * Commit the current working copy from the editor.
+   * @returns true, iff the working copy was commited as-is.
+   */
+  commit(): boolean {
+    if (!this.#editor) {
+      return false;
+    }
+    const text = this.#editor.workingCopy();
+    const trimmedText = text.trim();
+    this.#expression = trimmedText;
+    this.#onCommit();
+    return this.#expression === text;
+  }
+
+  /** Evaluates the current working copy of the pinned expression. If the result is a DOM node, we return that separately for convenience.  */
+  async evaluate(executionContext: SDK.RuntimeModel.ExecutionContext): Promise<void> {
+    const editorText = this.#editor?.workingCopyWithHint() ?? '';
+    const throwOnSideEffect = Boolean(this.#editor?.isEditing()) && editorText !== this.#expression;
+    const timeout = throwOnSideEffect ? 250 : undefined;
+
+    const result = await ObjectUI.JavaScriptREPL.JavaScriptREPL.evaluate(
+        editorText, executionContext, throwOnSideEffect, /* replMode*/ true, timeout, 'live-expression',
+        /* awaitPromise */ true, /* silent */ true);
+
+    if (this.#lastResult && this.#releaseLastResult) {
+      this.#lastExecutionContext?.runtimeModel.releaseEvaluationResult(this.#lastResult);
+    }
+
+    this.#lastResult = result;
+    this.#lastExecutionContext = executionContext;
+    this.#releaseLastResult = true;
+
+    if (result && !('error' in result) && result.object.type === 'object' && result.object.subtype === 'node') {
+      this.#lastNode = result.object;
+    } else {
+      this.#lastNode = null;
+    }
+
+    this.dispatchEventToListeners(ConsolePinEvent.EVALUATE_RESULT_READY, this);
+  }
+}
+
+export const enum ConsolePinEvent {
+  EVALUATE_RESULT_READY = 'EVALUATE_RESULT_READY',
+}
+
+export interface ConsolePinEvents {
+  [ConsolePinEvent.EVALUATE_RESULT_READY]: ConsolePin;
 }