chrome-devtools-frontend 1.0.1667564 → 1.0.1668390

package/front_end/panels/sensors/LocationsSettingsTab.ts

@@ -9,10 +9,12 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, type LitTemplate, render} from '../../ui/lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import locationsSettingsTabStyles from './locationsSettingsTab.css.js';
+const {createRef, ref} = Directives;
+export {locationsSettingsTabStyles};
 
 const UIStrings = {
   /**
@@ -110,6 +112,22 @@ const UIStrings = {
    * @description Text of add locations button in the Locations settings tab of the Device toolbar.
    */
   addLocation: 'Add location',
+  /**
+   * @description Title for the dialog when editing an existing location in the Locations settings tab.
+   */
+  editLocation: 'Edit location',
+  /**
+   * @description Label for button to save location changes.
+   */
+  save: 'Save',
+  /**
+   * @description Label for button to cancel location edits.
+   */
+  cancel: 'Cancel',
+  /**
+   * @description Label for button to close the location dialog.
+   */
+  close: 'Close',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/sensors/LocationsSettingsTab.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -136,44 +154,236 @@ function renderItemView(location: LocationDescription): LitTemplate {
   // clang-format on
 }
 
-interface EditorInputControls {
-  titleInput: Element;
-  latInput: Element;
-  longInput: Element;
-  timezoneIdInput: Element;
-  localeInput: Element;
-  accuracyInput: Element;
+export interface EditorInputControls {
+  titleInput: LitTemplate|Element;
+  latInput: LitTemplate|Element;
+  longInput: LitTemplate|Element;
+  timezoneIdInput: LitTemplate|Element;
+  localeInput: LitTemplate|Element;
+  accuracyInput: LitTemplate|Element;
 }
 
-function renderEditorView(controls: EditorInputControls): LitTemplate {
+export interface LocationDialogInput {
+  location: LocationDescription;
+  isNew: boolean;
+  errors?: {
+    title?: string|null,
+    lat?: string|null,
+    long?: string|null,
+    timezoneId?: string|null,
+    locale?: string|null,
+    accuracy?: string|null,
+  };
+  onSave: (location: LocationDescription) => void;
+  onCancel: () => void;
+  onValidateErrors: (errors: {
+    title?: string|null,
+    lat?: string|null,
+    long?: string|null,
+    timezoneId?: string|null,
+    locale?: string|null,
+    accuracy?: string|null,
+  }) => void;
+}
+
+export function renderEditorView(controls: EditorInputControls, errors?: LocationDialogInput['errors'],
+                                 isDialog = false): LitTemplate {
+  if (!isDialog) {
+    // clang-format off
+    return html`
+      <div class="locations-edit-row">
+        <div class="locations-list-text locations-list-title">${i18nString(UIStrings.locationName)}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text">${i18nString(UIStrings.lat)}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text">${i18nString(UIStrings.long)}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text">${i18nString(UIStrings.timezoneId)}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text">${i18nString(UIStrings.locale)}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text">${i18nString(UIStrings.accuracy)}</div>
+      </div>
+      <div class="locations-edit-row">
+        <div class="locations-list-text locations-list-title locations-input-container">${controls.titleInput}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text locations-input-container">${controls.latInput}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text locations-list-text-longitude locations-input-container">${controls.longInput}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text locations-input-container">${controls.timezoneIdInput}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text locations-input-container">${controls.localeInput}</div>
+        <div class="locations-list-separator locations-list-separator-invisible"></div>
+        <div class="locations-list-text locations-input-container">${controls.accuracyInput}</div>
+      </div>
+      ${errors ? html`
+        <div class="locations-edit-row locations-error-row" role="alert">
+          <div class="locations-list-text locations-list-title locations-error-cell">${errors.title ?? nothing}</div>
+          <div class="locations-list-separator locations-list-separator-invisible"></div>
+          <div class="locations-list-text locations-error-cell">${errors.lat ?? nothing}</div>
+          <div class="locations-list-separator locations-list-separator-invisible"></div>
+          <div class="locations-list-text locations-list-text-longitude locations-error-cell">${errors.long ?? nothing}</div>
+          <div class="locations-list-separator locations-list-separator-invisible"></div>
+          <div class="locations-list-text locations-error-cell">${errors.timezoneId ?? nothing}</div>
+          <div class="locations-list-separator locations-list-separator-invisible"></div>
+          <div class="locations-list-text locations-error-cell">${errors.locale ?? nothing}</div>
+          <div class="locations-list-separator locations-list-separator-invisible"></div>
+          <div class="locations-list-text locations-error-cell">${errors.accuracy ?? nothing}</div>
+        </div>
+      ` : nothing}`;
+    // clang-format on
+  }
+
   // clang-format off
   return html`
-    <div class="locations-edit-row">
-      <div class="locations-list-text locations-list-title">${i18nString(UIStrings.locationName)}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text">${i18nString(UIStrings.lat)}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text">${i18nString(UIStrings.long)}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text">${i18nString(UIStrings.timezoneId)}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text">${i18nString(UIStrings.locale)}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text">${i18nString(UIStrings.accuracy)}</div>
+    <div class="editor-grid">
+      <div class="editor-field editor-field-full-width ${errors?.title ? 'has-error' : ''}">
+        <label class="editor-field-label" for="location-title">${i18nString(UIStrings.locationName)}</label>
+        ${controls.titleInput}
+        ${errors?.title ? html`<div class="editor-field-error" role="alert">${errors.title}</div>` : nothing}
+      </div>
+      <div class="editor-field ${errors?.lat ? 'has-error' : ''}">
+        <label class="editor-field-label" for="location-lat">${i18nString(UIStrings.lat)}</label>
+        ${controls.latInput}
+        ${errors?.lat ? html`<div class="editor-field-error" role="alert">${errors.lat}</div>` : nothing}
+      </div>
+      <div class="editor-field ${errors?.long ? 'has-error' : ''}">
+        <label class="editor-field-label" for="location-long">${i18nString(UIStrings.long)}</label>
+        ${controls.longInput}
+        ${errors?.long ? html`<div class="editor-field-error" role="alert">${errors.long}</div>` : nothing}
+      </div>
+      <div class="editor-field ${errors?.timezoneId ? 'has-error' : ''}">
+        <label class="editor-field-label" for="location-timezone">${i18nString(UIStrings.timezoneId)}</label>
+        ${controls.timezoneIdInput}
+        ${errors?.timezoneId ? html`<div class="editor-field-error" role="alert">${errors.timezoneId}</div>` : nothing}
+      </div>
+      <div class="editor-field ${errors?.locale ? 'has-error' : ''}">
+        <label class="editor-field-label" for="location-locale">${i18nString(UIStrings.locale)}</label>
+        ${controls.localeInput}
+        ${errors?.locale ? html`<div class="editor-field-error" role="alert">${errors.locale}</div>` : nothing}
+      </div>
+      <div class="editor-field editor-field-full-width ${errors?.accuracy ? 'has-error' : ''}">
+        <label class="editor-field-label" for="location-accuracy">${i18nString(UIStrings.accuracy)}</label>
+        ${controls.accuracyInput}
+        ${errors?.accuracy ? html`<div class="editor-field-error" role="alert">${errors.accuracy}</div>` : nothing}
+      </div>
     </div>
-    <div class="locations-edit-row">
-      <div class="locations-list-text locations-list-title locations-input-container">${controls.titleInput}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text locations-input-container">${controls.latInput}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text locations-list-text-longitude locations-input-container">${controls.longInput}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text locations-input-container">${controls.timezoneIdInput}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text locations-input-container">${controls.localeInput}</div>
-      <div class="locations-list-separator locations-list-separator-invisible"></div>
-      <div class="locations-list-text locations-input-container">${controls.accuracyInput}</div>
-    </div>`;
+  `;
+  // clang-format on
+}
+
+export function renderLocationDialog(input: LocationDialogInput, target: HTMLElement): void {
+  const titleInputRef = createRef<HTMLInputElement>();
+  const latInputRef = createRef<HTMLInputElement>();
+  const longInputRef = createRef<HTMLInputElement>();
+  const timezoneIdInputRef = createRef<HTMLInputElement>();
+  const localeInputRef = createRef<HTMLInputElement>();
+  const accuracyInputRef = createRef<HTMLInputElement>();
+
+  const handleSave = (): void => {
+    const title = titleInputRef.value?.value.trim() ?? '';
+    const latStr = latInputRef.value?.value.trim() ?? '';
+    const longStr = longInputRef.value?.value.trim() ?? '';
+    const timezoneId = timezoneIdInputRef.value?.value.trim() ?? '';
+    const locale = localeInputRef.value?.value.trim() ?? '';
+    const accuracyStr = accuracyInputRef.value?.value.trim() ?? '';
+
+    const titleError = validateTitle(title);
+    const latError = validateLatitude(latStr);
+    const longError = validateLongitude(longStr);
+    const tzError = validateTimezoneId(timezoneId);
+    const localeError = validateLocale(locale);
+    const accuracyError = validateAccuracy(accuracyStr);
+
+    if (titleError || latError || longError || tzError || localeError || accuracyError) {
+      input.onValidateErrors({
+        title: titleError,
+        lat: latError,
+        long: longError,
+        timezoneId: tzError,
+        locale: localeError,
+        accuracy: accuracyError,
+      });
+      return;
+    }
+
+    input.onSave({
+      title,
+      lat: latStr ? parseFloat(latStr) : 0,
+      long: longStr ? parseFloat(longStr) : 0,
+      timezoneId,
+      locale,
+      accuracy: accuracyStr ? parseFloat(accuracyStr) : SDK.EmulationModel.Location.DEFAULT_ACCURACY,
+    });
+  };
+
+  const editorControls: EditorInputControls = {
+    titleInput:
+        html`<input id="location-title" aria-label=${i18nString(UIStrings.locationName)} type="text" placeholder=${
+            i18nString(UIStrings.locationName)} .value=${input.location.title} ${ref(titleInputRef)}>`,
+    latInput: html`<input id="location-lat" aria-label=${i18nString(UIStrings.lat)} type="text" placeholder=${
+        i18nString(UIStrings.latitude)} .value=${String(input.location.lat)} ${ref(latInputRef)}>`,
+    longInput: html`<input id="location-long" aria-label=${i18nString(UIStrings.long)} type="text" placeholder=${
+        i18nString(UIStrings.longitude)} .value=${String(input.location.long)} ${ref(longInputRef)}>`,
+    timezoneIdInput:
+        html`<input id="location-timezone" aria-label=${i18nString(UIStrings.timezoneId)} type="text" placeholder=${
+            i18nString(UIStrings.timezoneId)} .value=${input.location.timezoneId} ${ref(timezoneIdInputRef)}>`,
+    localeInput: html`<input id="location-locale" aria-label=${i18nString(UIStrings.locale)} type="text" placeholder=${
+        i18nString(UIStrings.locale)} .value=${input.location.locale} ${ref(localeInputRef)}>`,
+    accuracyInput: html`<input id="location-accuracy" aria-label=${
+        i18nString(UIStrings.accuracy)} type="text" placeholder=${i18nString(UIStrings.accuracy)} .value=${
+        String(input.location.accuracy || SDK.EmulationModel.Location.DEFAULT_ACCURACY)} ${ref(accuracyInputRef)}>`,
+  };
+
+  // clang-format off
+
+  const dialogContent = html`
+    <style>${locationsSettingsTabStyles}</style>
+      <div class="location-dialog-content">
+      <div class="dialog-header">
+        <span class="dialog-title">${input.isNew ? i18nString(UIStrings.addLocation) : i18nString(UIStrings.editLocation)}</span>
+        <devtools-button
+          class="dialog-close-button"
+          .iconName=${'cross'}
+          .variant=${Buttons.Button.Variant.ICON}
+          .title=${i18nString(UIStrings.close)}
+          .jslogContext=${'dialog-close'}
+          @click=${input.onCancel}
+          aria-label=${i18nString(UIStrings.close)}>
+        </devtools-button>
+      </div>
+        ${renderEditorView(editorControls, input.errors, true)}
+        <div class="dialog-buttons">
+          <devtools-button
+            class="save-button"
+            .variant=${Buttons.Button.Variant.PRIMARY}
+            @click=${handleSave}>
+            ${i18nString(UIStrings.save)}
+          </devtools-button>
+          <devtools-button
+            class="cancel-button"
+            .variant=${Buttons.Button.Variant.OUTLINED}
+            @click=${input.onCancel}>
+            ${i18nString(UIStrings.cancel)}
+          </devtools-button>
+        </div>
+      </div>
+  `;
+
+  // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+  render(html`
+    <style>${locationsSettingsTabStyles}</style>
+    <devtools-widget
+      class="location-dialog-widget"
+      ${UI.Widget.widget(UI.Dialog.DialogWidget, {
+        open: true,
+        jslogContext: 'location-dialog',
+        content: dialogContent,
+      })}
+      @hidden=${input.onCancel}>
+    </devtools-widget>
+  `, target);
   // clang-format on
 }
 

package/front_end/panels/sensors/locationsSettingsTab.css

@@ -89,3 +89,77 @@
   align-items: center;
   gap: var(--sys-size-9);
 }
+
+.location-dialog-content {
+  padding: var(--sys-size-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sys-size-6);
+  width: var(--sys-size-33);
+  min-width: var(--sys-size-33);
+}
+
+.editor-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--sys-size-5) var(--sys-size-6);
+}
+
+.editor-field-full-width {
+  grid-column: 1 / -1;
+}
+
+.editor-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sys-size-2);
+}
+
+.editor-field-label {
+  color: var(--sys-color-on-surface);
+  font-size: var(--sys-size-6);
+  font-weight: var(--ref-typeface-weight-medium);
+}
+
+.editor-field input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--sys-size-3) var(--sys-size-4);
+  height: var(--sys-size-11);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  border-radius: var(--sys-size-2);
+  outline: none;
+}
+
+.editor-field.has-error input {
+  border-color: var(--sys-color-error);
+}
+
+.editor-field-error {
+  color: var(--sys-color-error);
+  font-size: var(--sys-size-6);
+  overflow-wrap: break-word;
+}
+
+.dialog-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--sys-size-3);
+  margin-top: var(--sys-size-3);
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dialog-title {
+  font-size: var(--sys-size-7);
+  font-weight: var(--ref-typeface-weight-medium);
+  color: var(--sys-color-on-surface);
+}
+
+.dialog-close-button {
+  flex-shrink: 0;
+}

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -566,7 +566,7 @@ export class DebuggerPlugin extends Plugin {
     }
 
     if (this.uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Network &&
-        Common.Settings.Settings.instance().moduleSetting('js-source-maps-enabled').get() &&
+        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.jsSourceMapsEnabledSettingDescriptor).get() &&
         !Workspace.IgnoreListManager.IgnoreListManager.instance().isUserIgnoreListedURL(this.uiSourceCode.url())) {
       if (this.scriptFileForDebuggerModel.size) {
         const scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile =
@@ -1519,7 +1519,7 @@ export class DebuggerPlugin extends Plugin {
     if (this.sourceMapInfobar) {
       return;
     }
-    if (!Common.Settings.Settings.instance().moduleSetting('js-source-maps-enabled').get()) {
+    if (!Common.Settings.Settings.instance().resolve(SDK.SDKSettings.jsSourceMapsEnabledSettingDescriptor).get()) {
       return;
     }
     if (!this.scriptHasSourceMap()) {

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

@@ -13,6 +13,7 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as SettingsUI from '../../ui/settings/settings.js';
 
 import type * as Sources from './sources.js';
 
@@ -463,6 +464,30 @@ const UIStrings = {
    *              wrap' setting.
    */
   toggleWordWrap: 'Toggle word wrap',
+  /**
+   * @description Setting under the Sources category to toggle usage of JavaScript source maps.
+   */
+  javaScriptSourceMaps: 'JavaScript source maps',
+  /**
+   * @description Title of an option under the Sources category that can be invoked through the Command Menu.
+   */
+  enableJavaScriptSourceMaps: 'Enable JavaScript source maps',
+  /**
+   * @description Title of an option under the Sources category that can be invoked through the Command Menu.
+   */
+  disableJavaScriptSourceMaps: 'Disable JavaScript source maps',
+  /**
+   * @description Setting under the Sources category to toggle usage of CSS source maps.
+   */
+  cssSourceMaps: 'CSS source maps',
+  /**
+   * @description Title of an option under the Sources category that can be invoked through the Command Menu.
+   */
+  enableCssSourceMaps: 'Enable CSS source maps',
+  /**
+   * @description Title of an option under the Sources category that can be invoked through the Command Menu.
+   */
+  disableCssSourceMaps: 'Disable CSS source maps',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/sources/sources-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -1512,6 +1537,36 @@ Common.Settings.registerSettingExtension({
   defaultValue: false,
 });
 
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.jsSourceMapsEnabledSettingDescriptor, {
+  category: Common.Settings.SettingCategory.SOURCES,
+  title: i18nLazyString(UIStrings.javaScriptSourceMaps),
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.enableJavaScriptSourceMaps),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.disableJavaScriptSourceMaps),
+    },
+  ],
+});
+
+SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.cssSourceMapsEnabledSettingDescriptor, {
+  category: Common.Settings.SettingCategory.SOURCES,
+  title: i18nLazyString(UIStrings.cssSourceMaps),
+  options: [
+    {
+      value: true,
+      title: i18nLazyString(UIStrings.enableCssSourceMaps),
+    },
+    {
+      value: false,
+      title: i18nLazyString(UIStrings.disableCssSourceMaps),
+    },
+  ],
+});
+
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
   storageType: Common.Settings.SettingStorageType.SYNCED,

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: e5e53aeb8a8dee88dadf13158fd44662113307d2
+Revision: c15d009df51d794d8a37df41cdc89d4056e7e0cd
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/legacy/Dialog.ts

@@ -6,16 +6,17 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import {type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as Buttons from '../components/buttons/buttons.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import dialogStyles from './dialog.css.js';
-import {GlassPane, PointerEventsBehavior} from './GlassPane.js';
+import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
 import {InspectorView} from './InspectorView.js';
 import {KeyboardShortcut, Keys} from './KeyboardShortcut.js';
 import type {SplitWidget} from './SplitWidget.js';
-import {WidgetFocusRestorer} from './Widget.js';
+import {Widget, WidgetFocusRestorer} from './Widget.js';
 
 const UIStrings = {
   /**
@@ -41,8 +42,7 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
     this.contentElement.tabIndex = 0;
     this.contentElement.addEventListener('focus', () => this.widget().focus(), false);
     if (jslogContext) {
-      this.contentElement.setAttribute(
-          'jslog', `${VisualLogging.dialog(jslogContext).track({resize: true, keydown: 'Escape'})}`);
+      this.jslogContext = jslogContext;
     }
     this.setPointerEventsBehavior(PointerEventsBehavior.BLOCKED_BY_GLASS_PANE);
     this.setOutsideClickCallback(event => {
@@ -59,6 +59,15 @@ export class Dialog extends Common.ObjectWrapper.eventMixin<EventTypes, typeof G
     this.targetDocumentKeyDownHandler = this.onKeyDown.bind(this);
   }
 
+  set jslogContext(jslogContext: string) {
+    if (jslogContext) {
+      this.contentElement.setAttribute(
+          'jslog', `${VisualLogging.dialog(jslogContext).track({resize: true, keydown: 'Escape'})}`);
+    } else {
+      this.contentElement.removeAttribute('jslog');
+    }
+  }
+
   static hasInstance(): boolean {
     return Dialog.dialogs.length > 0;
   }
@@ -243,3 +252,83 @@ export const enum OutsideTabIndexBehavior {
   PRESERVE_MAIN_VIEW_TAB_INDEX = 'PreserveMainViewTabIndex',
   PRESERVE_TAB_INDEX = 'PreserveTabIndex',
 }
+
+export class DialogWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typeof Widget>(Widget) {
+  #open = false;
+  #content: LitTemplate = nothing;
+  readonly #dialog = new Dialog();
+
+  constructor(element?: HTMLElement) {
+    super(element);
+    this.#dialog.setSizeBehavior(SizeBehavior.MEASURE_CONTENT);
+    this.#dialog.contentElement.tabIndex = -1;
+    this.#dialog.addEventListener(Events.HIDDEN, () => {
+      this.#open = false;
+      this.dispatchEventToListeners(Events.HIDDEN);
+    });
+  }
+
+  get open(): boolean {
+    return this.#open;
+  }
+
+  set open(open: boolean) {
+    if (this.#open !== open) {
+      this.#open = open;
+      this.requestUpdate();
+    }
+  }
+
+  #jslogContext = '';
+
+  get content(): LitTemplate {
+    return this.#content;
+  }
+
+  set content(content: LitTemplate) {
+    this.#content = content;
+    this.requestUpdate();
+  }
+
+  get jslogContext(): string {
+    return this.#jslogContext;
+  }
+
+  set jslogContext(jslogContext: string) {
+    if (this.#jslogContext !== jslogContext) {
+      this.#jslogContext = jslogContext;
+      this.#dialog.jslogContext = jslogContext;
+      this.requestUpdate();
+    }
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  override willHide(): void {
+    super.willHide();
+    this.#dialog.hide();
+  }
+
+  override onDetach(): void {
+    super.onDetach();
+    this.#dialog.hide();
+  }
+
+  override performUpdate(): void {
+    if (this.open) {
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(this.#content ?? nothing, this.#dialog.contentElement);
+      if (!this.#dialog.isShowing()) {
+        this.#dialog.show(this.contentElement.ownerDocument);
+        this.#dialog.contentElement.focus();
+      } else {
+        this.#dialog.positionContent();
+      }
+    } else if (this.#dialog.isShowing()) {
+      this.#dialog.hide();
+    }
+  }
+}

package/front_end/ui/legacy/InspectorView.ts

@@ -316,10 +316,6 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   }
 
   #applyDrawerOrientationForDockSide(): void {
-    if (!this.drawerVisible()) {
-      this.applyDrawerOrientationForDockSideForTest();
-      return;
-    }
     const newOrientation = this.#getOrientationForDockMode();
     this.#applyDrawerOrientation(newOrientation);
     this.applyDrawerOrientationForDockSideForTest();
@@ -504,6 +500,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
       }
       return;
     }
+    this.#applyDrawerOrientationForDockSide();
     this.#drawerView.show(hasTargetDrawer);
     if (focus) {
       this.focusRestorer = new WidgetFocusRestorer(this.drawerTabbedPane);
@@ -512,7 +509,6 @@ export class InspectorView extends VBox implements ViewLocationResolver {
       this.focusRestorer = null;
       this.#mainPanelAtDrawerFocus = null;
     }
-    this.#applyDrawerOrientationForDockSide();
     ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.drawerShown));
   }