chrome-devtools-frontend 1.0.941208 → 1.0.943182

package/front_end/panels/console/ConsolePinPane.ts

@@ -5,11 +5,11 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.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 rulesdir/es_modules_import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
-import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
-import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import consolePinPaneStyles from './consolePinPane.css.js';
@@ -164,23 +164,18 @@ export class ConsolePinPane extends UI.ThrottledWidget.ThrottledWidget {
   }
 }
 
-let consolePinNumber = 0;
-
 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|null;
+  private editor: TextEditor.TextEditor.TextEditor;
   private committedExpression: string;
   private hovered: boolean;
   private lastNode: SDK.RemoteObject.RemoteObject|null;
-  private readonly editorPromise: Promise<TextEditor.TextEditor.TextEditor>;
-  private consolePinNumber: number;
   private deletePinIcon: UI.UIUtils.DevToolsCloseButton;
 
   constructor(expression: string, private readonly pinPane: ConsolePinPane, private readonly focusOut: () => void) {
-    this.consolePinNumber = ++consolePinNumber;
     this.deletePinIcon = document.createElement('div', {is: 'dt-close-button'}) as UI.UIUtils.DevToolsCloseButton;
     this.deletePinIcon.gray = true;
     this.deletePinIcon.classList.add('close-button');
@@ -209,10 +204,10 @@ export class ConsolePin {
 
     this.lastResult = null;
     this.lastExecutionContext = null;
-    this.editor = 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);
@@ -229,22 +224,19 @@ export class ConsolePin {
         event.consume();
       }
     });
-    this.editorPromise = this.createEditor(expression, nameElement);
   }
 
-  async createEditor(expression: string, parent: HTMLElement): Promise<TextEditor.TextEditor.TextEditor> {
-    const CM = await import('../../third_party/codemirror.next/codemirror.next.js');
-    const TE = await import('../../ui/components/text_editor/text_editor.js');
-    this.editor = new TE.TextEditor.TextEditor(CM.EditorState.create({
+  createEditor(expression: string, parent: HTMLElement): TextEditor.TextEditor.TextEditor {
+    const editor = new TextEditor.TextEditor.TextEditor(CodeMirror.EditorState.create({
       doc: expression,
       extensions: [
-        CM.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.liveExpressionEditor)}),
-        CM.EditorView.lineWrapping,
-        (await CM.javascript()).javascriptLanguage,
-        await TE.JavaScript.completion(),
-        TE.Config.showCompletionHint,
-        CM.placeholder(i18nString(UIStrings.expression)),
-        CM.keymap.of([
+        CodeMirror.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.liveExpressionEditor)}),
+        CodeMirror.EditorView.lineWrapping,
+        CodeMirror.javascript.javascriptLanguage,
+        TextEditor.JavaScript.completion(),
+        TextEditor.Config.showCompletionHint,
+        CodeMirror.placeholder(i18nString(UIStrings.expression)),
+        CodeMirror.keymap.of([
           {
             key: 'Escape',
             run: (view: CodeMirror.EditorView): boolean => {
@@ -261,13 +253,13 @@ export class ConsolePin {
             },
           },
         ]),
-        CM.EditorView.domEventHandlers({blur: (_e, view) => this.onBlur(view)}),
-        TE.Config.baseConfiguration(expression),
-        TE.Config.autocompletion,
+        CodeMirror.EditorView.domEventHandlers({blur: (_e, view) => this.onBlur(view)}),
+        TextEditor.Config.baseConfiguration(expression),
+        TextEditor.Config.autocompletion,
       ],
     }));
-    parent.appendChild(this.editor);
-    return this.editor;
+    parent.appendChild(editor);
+    return editor;
   }
 
   onBlur(editor: CodeMirror.EditorView): void {
@@ -305,9 +297,9 @@ export class ConsolePin {
   }
 
   async focus(): Promise<void> {
-    const editor = this.editor || await this.editorPromise;
+    const editor = this.editor;
     editor.editor.focus();
-    editor.editor.dispatch({selection: {anchor: editor.state.doc.length}});
+    editor.dispatch({selection: {anchor: editor.state.doc.length}});
   }
 
   appendToContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
@@ -322,16 +314,15 @@ export class ConsolePin {
     if (!this.editor) {
       return;
     }
-    const TE = await import('../../ui/components/text_editor/text_editor.js');
-    const text = TE.Config.contentIncludingHint(this.editor.editor);
+    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 preprocessedExpression = ObjectUI.JavaScriptREPL.JavaScriptREPL.preprocessExpression(text);
     const {preview, result} = await ObjectUI.JavaScriptREPL.JavaScriptREPL.evaluateAndBuildPreview(
-        `${preprocessedExpression}\n//# sourceURL=watch-expression-${this.consolePinNumber}.devtools`,
-        throwOnSideEffect, false /* replMode */, timeout, !isEditing /* allowErrors */, 'console');
+        preprocessedExpression, throwOnSideEffect, false /* replMode */, timeout, !isEditing /* allowErrors */,
+        'console', true /* awaitPromise */);
     if (this.lastResult && this.lastExecutionContext) {
       this.lastExecutionContext.runtimeModel.releaseEvaluationResult(this.lastResult);
     }

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -50,9 +50,12 @@ import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
+// eslint-disable-next-line rulesdir/es_modules_import
+import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import type {Chrome} from '../../../extension-api/ExtensionAPI.js'; // eslint-disable-line rulesdir/es_modules_import
 
 import type {ConsoleViewportElement} from './ConsoleViewport.js';
+import consoleViewStyles from './consoleView.css.js';
 
 const UIStrings = {
   /**
@@ -2067,7 +2070,11 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
         const tableElement = formattedResult.createChild('div', 'console-message-formatted-table');
         const dataGridContainer = tableElement.createChild('span');
         tableElement.appendChild(this.formatParameter(actualTable, true, false));
-        dataGridContainer.appendChild(this.dataGrid.element);
+        const shadowRoot = dataGridContainer.attachShadow({mode: 'open'});
+        const dataGridWidget = this.dataGrid.asWidget();
+        dataGridWidget.markAsRoot();
+        dataGridWidget.show(shadowRoot as unknown as Element);
+        dataGridWidget.registerCSSFiles([consoleViewStyles, objectValueStyles]);
         formattedMessage.appendChild(formattedResult);
         this.dataGrid.renderInline();
       }

package/front_end/panels/console/console-meta.ts

@@ -5,7 +5,6 @@
 import * as Common from '../../core/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as Console from './console.js';
 
 import * as i18n from '../../core/i18n/i18n.js';

package/front_end/panels/console_counters/console_counters-meta.ts

@@ -4,7 +4,6 @@
 
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as ConsoleCounters from './console_counters.js';
 
 let loadedConsoleCountersModule: (typeof ConsoleCounters|undefined);

package/front_end/panels/coverage/CoverageDecorationManager.ts

@@ -24,7 +24,7 @@ export class CoverageDecorationManager {
     this.uiSourceCodeByContentProvider = new Platform.MapUtilities.Multimap();
 
     for (const uiSourceCode of Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodes()) {
-      uiSourceCode.addLineDecoration(0, decoratorType, this);
+      uiSourceCode.setDecorationData(decoratorType, this);
     }
     Workspace.Workspace.WorkspaceImpl.instance().addEventListener(
         Workspace.Workspace.Events.UISourceCodeAdded, this.onUISourceCodeAdded, this);
@@ -32,7 +32,7 @@ export class CoverageDecorationManager {
 
   reset(): void {
     for (const uiSourceCode of Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodes()) {
-      uiSourceCode.removeDecorationsForType(decoratorType);
+      uiSourceCode.setDecorationData(decoratorType, undefined);
     }
   }
 
@@ -45,8 +45,7 @@ export class CoverageDecorationManager {
   update(updatedEntries: CoverageInfo[]): void {
     for (const entry of updatedEntries) {
       for (const uiSourceCode of this.uiSourceCodeByContentProvider.get(entry.getContentProvider())) {
-        uiSourceCode.removeDecorationsForType(decoratorType);
-        uiSourceCode.addLineDecoration(0, decoratorType, this);
+        uiSourceCode.setDecorationData(decoratorType, this);
       }
     }
   }
@@ -185,7 +184,7 @@ export class CoverageDecorationManager {
 
   private onUISourceCodeAdded(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
     const uiSourceCode = event.data;
-    uiSourceCode.addLineDecoration(0, decoratorType, this);
+    uiSourceCode.setDecorationData(decoratorType, this);
   }
 }
 export interface RawLocation {

package/front_end/panels/coverage/CoverageView.ts

@@ -8,15 +8,12 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
-import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import {CoverageDecorationManager} from './CoverageDecorationManager.js';
+import {CoverageListView} from './CoverageListView.js';
 import coverageViewStyles from './coverageView.css.js';
 
-import type * as Workspace from '../../models/workspace/workspace.js';
-
-import {CoverageDecorationManager, decoratorType} from './CoverageDecorationManager.js';
-import {CoverageListView} from './CoverageListView.js';
 import type {CoverageInfo, URLCoverageInfo} from './CoverageModel.js';
 import {CoverageModel, Events, CoverageType} from './CoverageModel.js';
 
@@ -564,103 +561,3 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     }
   }
 }
-let lineDecoratorInstance: LineDecorator;
-export class LineDecorator implements SourceFrame.SourceFrame.LineDecorator {
-  static instance({forceNew}: {forceNew: boolean} = {forceNew: false}): LineDecorator {
-    if (!lineDecoratorInstance || forceNew) {
-      lineDecoratorInstance = new LineDecorator();
-    }
-
-    return lineDecoratorInstance;
-  }
-
-  private readonly listeners: WeakMap<
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      SourceFrame.SourcesTextEditor.SourcesTextEditor, (arg0: Common.EventTarget.EventTargetEvent<any>) => void>;
-  constructor() {
-    this.listeners = new WeakMap();
-  }
-
-  decorate(
-      uiSourceCode: Workspace.UISourceCode.UISourceCode,
-      textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor): void {
-    const decorations = uiSourceCode.decorationsForType(decoratorType);
-    if (!decorations || !decorations.size) {
-      this.uninstallGutter(textEditor);
-      return;
-    }
-    const decorationManager = decorations.values().next().value.data() as CoverageDecorationManager;
-    decorationManager.usageByLine(uiSourceCode).then(lineUsage => {
-      textEditor.operation(() => this.innerDecorate(uiSourceCode, textEditor, lineUsage));
-    });
-  }
-
-  private innerDecorate(
-      uiSourceCode: Workspace.UISourceCode.UISourceCode, textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor,
-      lineUsage: (boolean|undefined)[]): void {
-    const gutterType = LineDecorator.GUTTER_TYPE;
-    this.uninstallGutter(textEditor);
-    if (lineUsage.length) {
-      this.installGutter(textEditor, uiSourceCode.url());
-    }
-    for (let line = 0; line < lineUsage.length; ++line) {
-      // Do not decorate the line if we don't have data.
-      if (typeof lineUsage[line] !== 'boolean') {
-        continue;
-      }
-      const className = lineUsage[line] ? 'text-editor-coverage-used-marker' : 'text-editor-coverage-unused-marker';
-      const gutterElement = document.createElement('div');
-      gutterElement.classList.add(className);
-      textEditor.setGutterDecoration(line, gutterType, gutterElement);
-    }
-  }
-
-  makeGutterClickHandler(url: string):
-      (arg0: Common.EventTarget.EventTargetEvent<SourceFrame.SourcesTextEditor.GutterClickEventData>) => void {
-    function handleGutterClick(
-        event: Common.EventTarget.EventTargetEvent<SourceFrame.SourcesTextEditor.GutterClickEventData>): void {
-      if (event.data.gutterType !== LineDecorator.GUTTER_TYPE) {
-        return;
-      }
-      const coverageViewId = 'coverage';
-      UI.ViewManager.ViewManager.instance()
-          .showView(coverageViewId)
-          .then(() => {
-            const view = UI.ViewManager.ViewManager.instance().view(coverageViewId);
-            return view && view.widget();
-          })
-          .then(widget => {
-            const matchFormattedSuffix = url.match(/(.*):formatted$/);
-            const urlWithoutFormattedSuffix = (matchFormattedSuffix && matchFormattedSuffix[1]) || url;
-            (widget as CoverageView).selectCoverageItemByUrl(urlWithoutFormattedSuffix);
-          });
-    }
-    return handleGutterClick;
-  }
-
-  private installGutter(textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor, url: string): void {
-    let listener = this.listeners.get(textEditor);
-    if (!listener) {
-      listener = this.makeGutterClickHandler(url);
-      this.listeners.set(textEditor, listener);
-    }
-    textEditor.installGutter(LineDecorator.GUTTER_TYPE, false);
-    textEditor.addEventListener(SourceFrame.SourcesTextEditor.Events.GutterClick, listener, this);
-  }
-
-  private uninstallGutter(textEditor: SourceFrame.SourcesTextEditor.SourcesTextEditor): void {
-    textEditor.uninstallGutter(LineDecorator.GUTTER_TYPE);
-    const listener = this.listeners.get(textEditor);
-    if (listener) {
-      textEditor.removeEventListener(SourceFrame.SourcesTextEditor.Events.GutterClick, listener, this);
-      this.listeners.delete(textEditor);
-    }
-  }
-
-  static readonly GUTTER_TYPE = 'CodeMirror-gutter-coverage';
-}
-
-SourceFrame.SourceFrame.registerLineDecorator({
-  lineDecorator: LineDecorator.instance,
-  decoratorType: SourceFrame.SourceFrame.DecoratorType.COVERAGE,
-});

package/front_end/panels/coverage/coverage-meta.ts

@@ -5,7 +5,6 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as Coverage from './coverage.js';
 
 const UIStrings = {

package/front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -5,8 +5,7 @@
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import * as Legacy from '../../../ui/legacy/legacy.js';
+import * as PanelFeedback from '../../../ui/components/panel_feedback/panel_feedback.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import cssOverviewStartViewStyles from './cssOverviewStartView.css.js';
@@ -34,30 +33,9 @@ const UIStrings = {
   */
   locateAffectedElements: 'Locate the affected elements in the Elements panel',
   /**
-  *@description Title of the "Preview feature" reminder box
-  */
-  previewFeature: 'Preview feature',
-  /**
-  *@description Sentence to convey the feature is being actively worked on and we are looking for feedback
-  *@example {https://goo.gle/css-overview-feedback} PH1
-  */
-  activelyWorkingAndLookingForS: 'Our team is actively working on this feature and we are looking for your {PH1}!',
-  /**
-  *@description Link text of the inline anchor to navigate to a feedback page
-  */
-  feedbackInline: 'feedback',
-  /**
-  *@description Title of the section to the quick start video and documentation to CSS Overview panel
-  */
-  videoAndDocumentation: 'Video and documentation',
-  /**
   *@description Title of the link to the quick start video and documentation to CSS Overview panel
   */
   quickStartWithCSSOverview: 'Quick start: get started with the new CSS Overview panel',
-  /**
-  *@description Link text of the standalone button to navigate to a feedback page
-  */
-  feedbackStandalone: 'Feedback',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/css_overview/components/CSSOverviewStartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -77,13 +55,6 @@ export class OverviewStartRequestedEvent extends Event {
 export class CSSOverviewStartView extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-css-overview-start-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
-  #feedbackLink: HTMLElement;
-
-  constructor() {
-    super();
-    this.#feedbackLink =
-        Legacy.XLink.XLink.create(FEEDBACK_LINK, i18nString(UIStrings.feedbackInline), 'devtools-link');
-  }
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [cssOverviewStartViewStyles];
@@ -121,32 +92,16 @@ export class CSSOverviewStartView extends HTMLElement {
             ${i18nString(UIStrings.captureOverview)}
           </${Buttons.Button.Button.litTagName}>
         </div>
-        <section class="preview-feature">
-          <h1 class="preview-header">
-            <${IconButton.Icon.Icon.litTagName} class="preview-icon" .data=${{
-                iconName: 'ic_preview_feature',
-                width: '24px',
-                height: '24px',
-                color: 'var(--color-primary)',
-              } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
-              ${i18nString(UIStrings.previewFeature)}
-          </h1>
-          <div class="feedback-prompt">${i18n.i18n.getFormatLocalizedString(str_, UIStrings.activelyWorkingAndLookingForS, {PH1: this.#feedbackLink})}</div>
-          <div class="resources">
-            <div class="thumbnail-wrapper">
-              <${IconButton.Icon.Icon.litTagName} .data=${{
-                iconName: 'preview_feature_video_thumbnail',
-                width: '144px',
-                height: '92px',
-              } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
-            </div>
-            <div>
-              <h1 class="video-doc-header">${i18nString(UIStrings.videoAndDocumentation)}</h1>
-              <x-link class="devtools-link" href=${DOC_LINK}>${i18nString(UIStrings.quickStartWithCSSOverview)}</x-link>
-            </div>
-          </div>
-        </section>
-        <x-link class="feedback-standalone" href=${FEEDBACK_LINK}>${i18nString(UIStrings.feedbackStandalone)}</x-link>
+        <${PanelFeedback.PanelFeedback.PanelFeedback.litTagName} .data=${{
+            feedbackUrl: FEEDBACK_LINK,
+            quickStartUrl: DOC_LINK,
+            quickStartLinkText: i18nString(UIStrings.quickStartWithCSSOverview),
+          } as PanelFeedback.PanelFeedback.PanelFeedbackData}>
+        </${PanelFeedback.PanelFeedback.PanelFeedback.litTagName}>
+        <${PanelFeedback.FeedbackButton.FeedbackButton.litTagName} .data=${{
+          feedbackUrl: FEEDBACK_LINK,
+          } as PanelFeedback.FeedbackButton.FeedbackButtonData}>
+        </${PanelFeedback.FeedbackButton.FeedbackButton.litTagName}>
       </div>
     `, this.#shadow, {
       host: this,

package/front_end/panels/css_overview/components/cssOverviewStartView.css

@@ -120,15 +120,8 @@ h1 {
   margin-bottom: 2px;
 }
 
-.feedback-standalone {
-  width: fit-content;
-  padding: 0.5em;
+devtools-feedback-button {
   align-self: flex-end;
-  color: var(--color-primary);
-  border: 1px solid var(--color-details-hairline);
-  border-radius: 2px;
-  text-decoration: none;
-  font-weight: bold;
 }
 
 .resources .devtools-link {

package/front_end/panels/css_overview/css_overview-meta.ts

@@ -5,7 +5,6 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as CSSOverview from './css_overview.js';
 
 const UIStrings = {

package/front_end/panels/developer_resources/developer_resources-meta.ts

@@ -6,7 +6,6 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as DeveloperResources from './developer_resources.js';
 
 const UIStrings = {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -38,10 +38,10 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
-
-import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Emulation from '../emulation/emulation.js';
@@ -679,8 +679,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     const isEditable = this.hasEditableNode();
     // clang-format off
     if (isEditable && !this.editing) {
-      // Eagerly load CodeMirror to avoid a delay when opening the "Edit as HTML" editor when the user actually clicks on it
-      import('../../ui/components/text_editor/text_editor.js');
       contextMenu.editSection().appendItem(i18nString(UIStrings.editAsHtml), this.editAsHTML.bind(this));
     }
     // clang-format on
@@ -1026,9 +1024,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       }
     });
 
-    const TextEditor = await import('../../ui/components/text_editor/text_editor.js');
-    const CodeMirror = await import('../../third_party/codemirror.next/codemirror.next.js');
-    const {html} = await CodeMirror.html();
     const editor = new TextEditor.TextEditor.TextEditor(CodeMirror.EditorState.create({
       doc: initialValue,
       extensions: [
@@ -1050,8 +1045,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         ]),
         TextEditor.Config.baseConfiguration(initialValue),
         TextEditor.Config.autocompletion,
-        html(),
-        TextEditor.Config.domWordWrap,
+        CodeMirror.html.html(),
+        TextEditor.Config.domWordWrap.instance(),
         CodeMirror.EditorView.theme({
           '&.cm-editor': {maxHeight: '300px'},
           '.cm-scroller': {overflowY: 'auto'},

package/front_end/panels/elements/components/StylePropertyEditor.ts

@@ -197,6 +197,8 @@ export const FlexboxEditableProperties = [
     propertyValues: [
       'row',
       'column',
+      'row-reverse',
+      'column-reverse',
     ],
   },
   {

package/front_end/panels/elements/components/adornerSettingsPane.css

@@ -65,7 +65,3 @@
 .close::after {
   transform: rotate(-45deg);
 }
-
-:host-context(.-theme-with-dark-background) input[type="checkbox"] {
-  filter: invert(80%);
-}

package/front_end/panels/elements/elements-meta.ts

@@ -7,7 +7,6 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-// eslint-disable-next-line rulesdir/es_modules_import
 import type * as Elements from './elements.js';
 
 import * as i18n from '../../core/i18n/i18n.js';

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -11,6 +11,8 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 import * as EmulationComponents from './components/components.js';
 
+import deviceModeToolbarStyles from './deviceModeToolbar.css.legacy.js';
+
 const UIStrings = {
   /**
   * @description Title of the device dimensions selection iteam in the Device Mode Toolbar.
@@ -518,7 +520,7 @@ export class DeviceModeToolbar {
   private wrapToolbarItem(element: Element): UI.Toolbar.ToolbarItem {
     const container = document.createElement('div');
     const shadowRoot = UI.Utils.createShadowRootWithCoreStyles(
-        container, {cssFile: 'panels/emulation/deviceModeToolbar.css', delegatesFocus: undefined});
+        container, {cssFile: deviceModeToolbarStyles, delegatesFocus: undefined});
     shadowRoot.appendChild(element);
     return new UI.Toolbar.ToolbarItem(container);
   }

package/front_end/panels/emulation/DeviceModeView.ts

@@ -12,6 +12,7 @@ import * as EmulationModel from '../../models/emulation/emulation.js';
 
 import {DeviceModeToolbar} from './DeviceModeToolbar.js';
 import {MediaQueryInspector} from './MediaQueryInspector.js';
+import deviceModeViewStyles from './deviceModeView.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -98,7 +99,7 @@ export class DeviceModeView extends UI.Widget.VBox {
 
     this.setMinimumSize(150, 150);
     this.element.classList.add('device-mode-view');
-    this.registerRequiredCSS('panels/emulation/deviceModeView.css');
+    this.registerRequiredCSS(deviceModeViewStyles);
 
     this.model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
     this.model.addEventListener(EmulationModel.DeviceModeModel.Events.Updated, this.updateUI, this);

package/front_end/panels/emulation/InspectedPagePlaceholder.ts

@@ -5,6 +5,8 @@
 import * as Common from '../../core/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import inspectedPagePlaceholderStyles from './inspectedPagePlaceholder.css.legacy.js';
+
 let inspectedPagePlaceholderInstance: InspectedPagePlaceholder;
 
 export class InspectedPagePlaceholder extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
@@ -12,7 +14,7 @@ export class InspectedPagePlaceholder extends Common.ObjectWrapper.eventMixin<Ev
   private updateId?: number;
   constructor() {
     super(true);
-    this.registerRequiredCSS('panels/emulation/inspectedPagePlaceholder.css');
+    this.registerRequiredCSS(inspectedPagePlaceholderStyles);
     UI.ZoomManager.ZoomManager.instance().addEventListener(UI.ZoomManager.Events.ZoomChanged, this.onResize, this);
     this.restoreMinimumSize();
   }

package/front_end/panels/emulation/MediaQueryInspector.ts

@@ -10,6 +10,8 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import mediaQueryInspectorStyles from './mediaQueryInspector.css.legacy.js';
+
 const UIStrings = {
   /**
   * @description A context menu item/command in the Media Query Inspector of the Device Toolbar.
@@ -32,7 +34,7 @@ export class MediaQueryInspector extends UI.Widget.Widget implements
 
   constructor(getWidthCallback: () => number, setWidthCallback: (arg0: number) => void) {
     super(true);
-    this.registerRequiredCSS('panels/emulation/mediaQueryInspector.css');
+    this.registerRequiredCSS(mediaQueryInspectorStyles);
     this.contentElement.classList.add('media-inspector-view');
     this.contentElement.addEventListener('click', this.onMediaQueryClicked.bind(this), false);
     this.contentElement.addEventListener('contextmenu', this.onContextMenu.bind(this), false);