chrome-devtools-frontend 1.0.1536371 → 1.0.1537860

package/front_end/panels/settings/aiSettingsTab.css

@@ -4,185 +4,188 @@
  * found in the LICENSE file.
  */
 
-* {
-  box-sizing: border-box;
-}
-
-:host {
-  container-type: inline-size;
-  container-name: ai-settings;
-}
+@scope to (devtools-widget > *){
+  .ai-settings-container {
+    container-type: inline-size;
+    container-name: ai-settings;
+
+    @container ai-settings (min-width: 480px) {
+      .settings-container-wrapper {
+        align-items: center;
+      }
+    }
+  }
 
-.shared-disclaimer {
-  background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
-  border-radius: var(--sys-size-5);
-  padding: var(--sys-size-9) var(--sys-size-11);
-  max-width: var(--sys-size-35);
-  min-width: var(--sys-size-28);
+  * {
+    box-sizing: border-box;
+    min-height: auto;
+  }
 
-  h2 {
-    font: var(--sys-typescale-headline5);
-    margin: 0 0 var(--sys-size-6);
+  .shared-disclaimer {
+    background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
+    border-radius: var(--sys-size-5);
+    padding: var(--sys-size-9) var(--sys-size-11);
+    max-width: var(--sys-size-35);
+    min-width: var(--sys-size-28);
+
+    h2 {
+      font: var(--sys-typescale-headline5);
+      margin: 0 0 var(--sys-size-6);
+    }
   }
-}
 
-.disclaimer-list-header {
-  font: var(--sys-typescale-body5-medium);
-  margin: 0;
-}
+  .disclaimer-list-header {
+    font: var(--sys-typescale-body5-medium);
+    margin: 0;
+  }
 
-.disclaimer-list {
-  padding: var(--sys-size-6) 0 0;
-  display: grid;
-  grid-template-columns: var(--sys-size-12) auto;
-  gap: var(--sys-size-6) 0;
-  line-height: var(--sys-typescale-body5-line-height);
-}
+  .disclaimer-list {
+    padding: var(--sys-size-6) 0 0;
+    display: grid;
+    grid-template-columns: var(--sys-size-12) auto;
+    gap: var(--sys-size-6) 0;
+    line-height: var(--sys-typescale-body5-line-height);
+  }
 
-.settings-container {
-  display: grid;
-  grid-template-columns: 1fr auto auto;
-  border-radius: var(--sys-size-5);
-  box-shadow: var(--sys-elevation-level2);
-  margin: var(--sys-size-11) 0 var(--sys-size-4);
-  line-height: var(--sys-typescale-body5-line-height);
-  min-width: var(--sys-size-28);
-  max-width: var(--sys-size-35);
-  background-color: var(--app-color-card-background);
-}
+  .settings-container {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    border-radius: var(--sys-size-5);
+    box-shadow: var(--sys-elevation-level2);
+    margin: var(--sys-size-11) 0 var(--sys-size-4);
+    line-height: var(--sys-typescale-body5-line-height);
+    min-width: var(--sys-size-28);
+    max-width: var(--sys-size-35);
+    background-color: var(--app-color-card-background);
+  }
 
-.accordion-header {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
+  .accordion-header {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
 
-  &:hover {
-    background-color: var(--sys-color-state-hover-on-subtle);
+    &:hover {
+      background-color: var(--sys-color-state-hover-on-subtle);
+    }
   }
-}
 
-.icon-container,
-.dropdown {
-  padding: 0 var(--sys-size-8);
-}
+  .icon-container,
+  .dropdown {
+    padding: 0 var(--sys-size-8);
+  }
 
-.toggle-container {
-  padding: 0 var(--sys-size-8) 0 var(--sys-size-9);
+  .toggle-container {
+    padding: 0 var(--sys-size-8) 0 var(--sys-size-9);
 
-  &:hover {
-    background-color: var(--sys-color-state-hover-on-subtle);
+    &:hover {
+      background-color: var(--sys-color-state-hover-on-subtle);
+    }
   }
-}
 
-.expansion-grid {
-  padding: var(--sys-size-4) var(--sys-size-8) var(--sys-size-6);
-  display: grid;
-  grid-template-columns: var(--sys-size-9) auto;
-  gap: var(--sys-size-6) var(--sys-size-8);
-  line-height: var(--sys-typescale-body5-line-height);
-  color: var(--sys-color-on-surface-subtle);
-}
+  .expansion-grid {
+    padding: var(--sys-size-4) var(--sys-size-8) var(--sys-size-6);
+    display: grid;
+    grid-template-columns: var(--sys-size-9) auto;
+    gap: var(--sys-size-6) var(--sys-size-8);
+    line-height: var(--sys-typescale-body5-line-height);
+    color: var(--sys-color-on-surface-subtle);
+  }
 
-.expansion-grid-whole-row {
-  grid-column: span 2;
-  font-weight: var(--ref-typeface-weight-medium);
-  color: var(--sys-color-on-surface);
-  padding-top: var(--sys-size-4);
-  margin: 0;
-  font-size: inherit;
-}
+  .expansion-grid-whole-row {
+    grid-column: span 2;
+    font-weight: var(--ref-typeface-weight-medium);
+    color: var(--sys-color-on-surface);
+    padding-top: var(--sys-size-4);
+    margin: 0;
+    font-size: inherit;
+  }
 
-.setting-description {
-  color: var(--sys-color-on-surface-subtle);
-}
+  .setting-description {
+    color: var(--sys-color-on-surface-subtle);
+  }
 
-.centered {
-  display: grid;
-  place-content: center;
-}
+  .centered {
+    display: grid;
+    place-content: center;
+  }
 
-.setting-card {
-  padding: var(--sys-size-6) 0;
+  .setting-card {
+    padding: var(--sys-size-6) 0;
 
-  h2 {
-    margin: 0;
-    font: inherit;
+    h2 {
+      margin: 0;
+      font: inherit;
+    }
   }
-}
 
-.divider {
-  margin: var(--sys-size-5) 0;
-  border-left: var(--sys-size-1) solid var(--sys-color-divider);
-}
-
-.accordion-header ~ .accordion-header,
-.divider ~ .divider,
-.toggle-container ~ .toggle-container {
-  border-top: var(--sys-size-1) solid var(--sys-color-divider);
-}
+  .divider {
+    margin: var(--sys-size-5) 0;
+    border-left: var(--sys-size-1) solid var(--sys-color-divider);
+  }
 
-.whole-row {
-  grid-column: span 5;
-  overflow: hidden;
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows var(--sys-motion-duration-short4) ease-in;
-}
+  .accordion-header ~ .accordion-header,
+  .divider ~ .divider,
+  .toggle-container ~ .toggle-container {
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
+  }
 
-.whole-row.open {
-  grid-template-rows: 1fr;
-}
+  .whole-row {
+    grid-column: span 5;
+    overflow: hidden;
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows var(--sys-motion-duration-short4) ease-in;
+  }
 
-.overflow-hidden {
-  overflow: hidden;
-}
+  .whole-row.open {
+    grid-template-rows: 1fr;
+  }
 
-.link,
-.devtools-link {
-  color: var(--sys-color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-  outline-offset: var(--sys-size-2);
-  padding: 0;
-  font-weight: var(--ref-typeface-weight-regular);
-}
+  .overflow-hidden {
+    overflow: hidden;
+  }
 
-.padded {
-  padding: var(--sys-size-2) 0;
-}
+  .link,
+  .devtools-link {
+    color: var(--sys-color-primary);
+    text-decoration: underline;
+    cursor: pointer;
+    outline-offset: var(--sys-size-2);
+    padding: 0;
+    font-weight: var(--ref-typeface-weight-regular);
+  }
 
-.settings-container-wrapper {
-  position: absolute;
-  inset: var(--sys-size-8) 0 0;
-  overflow: auto;
-  padding: var(--sys-size-3) var(--sys-size-6) var(--sys-size-6);
-  display: flex;
-  flex-direction: column;
-}
+  .padded {
+    padding: var(--sys-size-2) 0;
+  }
 
-@container ai-settings (min-width: 480px) {
   .settings-container-wrapper {
-    align-items: center;
+    position: absolute;
+    inset: var(--sys-size-8) 0 0;
+    overflow: auto;
+    padding: var(--sys-size-3) var(--sys-size-6) var(--sys-size-6);
+    display: flex;
+    flex-direction: column;
   }
-}
 
-header {
-  font-size: var(--sys-typescale-headline3-size);
-  font-weight: var(--ref-typeface-weight-regular);
-}
+  header {
+    font-size: var(--sys-typescale-headline3-size);
+    font-weight: var(--ref-typeface-weight-regular);
+  }
 
-.disabled-explainer {
-  background-color: var(--sys-color-surface-yellow);
-  border-radius: var(--sys-shape-corner-medium-small);
-  margin-top: var(--sys-size-11);
-  padding: var(--sys-size-6) var(--sys-size-11) var(--sys-size-8);
-  width: 100%;
-  max-width: var(--sys-size-35);
-  min-width: var(--sys-size-28);
-  color: var(--sys-color-yellow);
-}
+  .disabled-explainer {
+    background-color: var(--sys-color-surface-yellow);
+    border-radius: var(--sys-shape-corner-medium-small);
+    margin-top: var(--sys-size-11);
+    padding: var(--sys-size-6) var(--sys-size-11) var(--sys-size-8);
+    width: 100%;
+    max-width: var(--sys-size-35);
+    min-width: var(--sys-size-28);
+    color: var(--sys-color-yellow);
+  }
 
-.disabled-explainer-row {
-  display: flex;
-  gap: var(--sys-size-6);
-  margin-top: var(--sys-size-4);
+  .disabled-explainer-row {
+    display: flex;
+    gap: var(--sys-size-6);
+    margin-top: var(--sys-size-4);
+  }
 }

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

@@ -7,7 +7,6 @@ import './emulation/emulation-meta.js';
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as Settings from './settings.js';
@@ -117,7 +116,7 @@ UI.ViewManager.registerViewExtension({
   order: 2,
   async loadView() {
     const Settings = await loadSettingsModule();
-    return LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.VBox, new Settings.AISettingsTab.AISettingsTab());
+    return new Settings.AISettingsTab.AISettingsTab();
   },
   iconName: 'button-magic',
   settings: ['console-insights-enabled'],

package/front_end/panels/sources/AddSourceMapURLDialog.ts

@@ -6,7 +6,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, render} from '../../ui/lit/lit.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import dialogStyles from './dialog.css.js';
@@ -27,28 +27,29 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/sources/AddSourceMapURLDialog.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {ref} = Directives;
 
 interface ViewInput {
   label: Platform.UIString.LocalizedString;
-  onKeyDown: (event: KeyboardEvent) => void;
+  onEnter: (value: string) => void;
+  onInputChange: (value: string) => void;
   apply: () => void;
 }
 
-interface ViewOutput {
-  input: HTMLInputElement;
-}
-
-type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
-export const DEFAULT_VIEW: View = (input, output, target) => {
+export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format off
   render(html`
     <style>${dialogStyles}</style>
     <label>${input.label}</label>
     <input class="harmony-input add-source-map" spellcheck="false" type="text"
         jslog=${VisualLogging.textField('url').track({keydown: 'Enter', change: true})}
-        @keydown=${input.onKeyDown} ${ref(e => { output.input = e as HTMLInputElement; })}>
+        @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter') {
+          e.consume(true);
+          input.onEnter((e.target as HTMLInputElement).value); }
+        }}
+        @change=${(e: Event) => input.onInputChange((e.target as HTMLInputElement).value)}
+        autofocus>
     <devtools-button @click=${input.apply} .jslogContext=${'add'}
         .variant=${Buttons.Button.Variant.OUTLINED}>${i18nString(UIStrings.add)}</devtools-button>`,
     target);
@@ -56,7 +57,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 };
 
 export class AddDebugInfoURLDialog extends UI.Widget.HBox {
-  private input!: HTMLInputElement;
+  private url = '';
   private readonly dialog: UI.Dialog.Dialog;
   private readonly callback: (arg0: Platform.DevToolsPath.UrlString) => void;
   private constructor(
@@ -66,20 +67,14 @@ export class AddDebugInfoURLDialog extends UI.Widget.HBox {
 
     const viewInput = {
       label,
-      onKeyDown: this.onKeyDown.bind(this),
+      onEnter: this.onEnter.bind(this),
+      onInputChange: this.onInputChange.bind(this),
       apply: this.apply.bind(this),
     };
-    const that = this;
-    const viewOutput = {
-      set input(input: HTMLInputElement) {
-        that.input = input;
-      },
-    };
-    view(viewInput, viewOutput, this.contentElement);
+    view(viewInput, undefined, this.contentElement);
 
     this.dialog = new UI.Dialog.Dialog(jslogContext);
     this.dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
-    this.dialog.setDefaultFocusedElement(this.input);
 
     this.callback = callback;
   }
@@ -103,14 +98,16 @@ export class AddDebugInfoURLDialog extends UI.Widget.HBox {
     this.callback(value);
   }
 
+  private onInputChange(value: string): void {
+    this.url = value;
+  }
+
   private apply(): void {
-    this.done(this.input.value as Platform.DevToolsPath.UrlString);
+    this.done(this.url as Platform.DevToolsPath.UrlString);
   }
 
-  private onKeyDown(event: KeyboardEvent): void {
-    if (event.key === 'Enter') {
-      event.consume(true);
-      this.apply();
-    }
+  private onEnter(value: string): void {
+    this.url = value;
+    this.apply();
   }
 }

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -255,6 +255,7 @@ export class AiCodeCompletionPlugin extends Plugin {
   }
 
   #removeAiCodeCompletionCitationsToolbar(): void {
+    this.#aiCodeCompletionCitationsToolbar?.detach();
     if (this.#editor) {
       this.#editor.dispatch({
         effects: SourceFrame.SourceFrame.removeSourceFrameInfobar.of(
@@ -300,7 +301,7 @@ export class AiCodeCompletionPlugin extends Plugin {
     this.#aiCodeCompletion?.remove();
     this.#aiCodeCompletion = undefined;
     this.#aiCodeCompletionCitations = [];
-    this.#aiCodeCompletionDisclaimerContainer.removeChildren();
+    this.#aiCodeCompletionDisclaimer?.detach();
     this.#aiCodeCompletionDisclaimer = undefined;
     this.#removeAiCodeCompletionCitationsToolbar();
     this.#aiCodeCompletionCitationsToolbar = undefined;

package/front_end/panels/sources/SourcesPanel.ts

@@ -44,6 +44,7 @@ import * as Breakpoints from '../../models/breakpoints/breakpoints.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -921,7 +922,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
 
     const label = i18nString(UIStrings.pauseOnCaughtExceptions);
     const setting = Common.Settings.Settings.instance().moduleSetting('pause-on-caught-exception');
-    debugToolbarDrawer.appendChild(UI.SettingsUI.createSettingCheckbox(label, setting));
+    debugToolbarDrawer.appendChild(SettingsUI.SettingsUI.createSettingCheckbox(label, setting));
 
     return debugToolbarDrawer;
   }

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

@@ -396,7 +396,11 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Sources category in Settings
    */
-  wasmAutoStepping: 'When debugging Wasm with debug information, do not pause on wasm bytecode if possible',
+  wasmAutoStepping: 'Wasm auto-stepping bytecode',
+  /**
+   * @description Tooltip text for a setting that controls Wasm will try to skip wasm bytecode
+   */
+  wasmAutoSteppingInfo: 'When debugging Wasm with debug information, try to skip wasm bytecode',
   /**
    * @description Title of a setting under the Sources category in Settings
    */
@@ -1850,6 +1854,9 @@ Common.Settings.registerSettingExtension({
       title: i18nLazyString(UIStrings.disableWasmAutoStepping),
     },
   ],
+  learnMore: {
+    tooltip: i18nLazyString(UIStrings.wasmAutoSteppingInfo),
+  }
 });
 
 UI.ViewManager.registerLocationResolver({