chrome-devtools-frontend 1.0.1573331 → 1.0.1574367

package/front_end/third_party/puppeteer/package/src/revisions.ts

@@ -8,7 +8,7 @@
  * @internal
  */
 export const PUPPETEER_REVISIONS = Object.freeze({
-  chrome: '143.0.7499.192',
-  'chrome-headless-shell': '143.0.7499.192',
-  firefox: 'stable_146.0.1',
+  chrome: '144.0.7559.96',
+  'chrome-headless-shell': '144.0.7559.96',
+  firefox: 'stable_147.0.1',
 });

package/front_end/third_party/puppeteer/package/src/util/version.ts

@@ -6,5 +6,5 @@
 
 // If moved update release-please config
 // x-release-please-start-version
-export const packageVersion = '24.35.0';
+export const packageVersion = '24.36.0';
 // x-release-please-end

package/front_end/ui/components/buttons/Button.ts

@@ -56,17 +56,12 @@ interface ButtonState {
   spinner?: boolean;
   type: ButtonType;
   value?: string;
-  title?: string;
   iconName?: string;
   toggledIconName?: string;
   toggleType?: ToggleType;
   jslogContext?: string;
   longClickable?: boolean;
   inverseColorTheme?: boolean;
-  /**
-   * Sets aria-label on the internal <button> element.
-   */
-  accessibleLabel?: string;
 }
 
 interface CommonButtonData {
@@ -151,9 +146,6 @@ export class Button extends HTMLElement {
     if ('size' in data && data.size) {
       this.#props.size = data.size;
     }
-    if (data.accessibleLabel) {
-      this.#props.accessibleLabel = data.accessibleLabel;
-    }
 
     this.#props.active = Boolean(data.active);
     this.#props.spinner = Boolean('spinner' in data ? data.spinner : false);
@@ -166,7 +158,14 @@ export class Button extends HTMLElement {
     this.#props.toggleType = data.toggleType;
     this.#props.checked = data.checked;
     this.#props.disabled = Boolean(data.disabled);
-    this.#props.title = data.title;
+    if (data.title) {
+      this.title = data.title;
+    }
+
+    if (data.accessibleLabel) {
+      this.accessibleLabel = data.accessibleLabel;
+    }
+
     this.#props.jslogContext = data.jslogContext;
     this.#props.longClickable = data.longClickable;
     this.#props.inverseColorTheme = data.inverseColorTheme;
@@ -198,11 +197,20 @@ export class Button extends HTMLElement {
     this.#render();
   }
 
-  set accessibleLabel(label: string) {
-    this.#props.accessibleLabel = label;
+  set accessibleLabel(label: string|undefined) {
+    if (label) {
+      this.setAttribute('accessibleLabel', label);
+    } else {
+      this.removeAttribute('accessibleLabel');
+    }
+
     this.#render();
   }
 
+  get accessibleLabel(): string|undefined {
+    return this.getAttribute('accessibleLabel') || undefined;
+  }
+
   set reducedFocusRing(reducedFocusRing: boolean) {
     this.#props.reducedFocusRing = reducedFocusRing;
     this.#render();
@@ -213,8 +221,12 @@ export class Button extends HTMLElement {
     this.#render();
   }
 
+  override get title(): string {
+    return super.title;
+  }
+
   override set title(title: string) {
-    this.#props.title = title;
+    super.title = title;
     this.#render();
   }
 
@@ -369,11 +381,11 @@ export class Button extends HTMLElement {
     Lit.render(
       html`
         <style>${buttonStyles}</style>
-        <button title=${ifDefined(this.#props.title)}
+        <button title=${ifDefined(this.title || undefined)}
                 ?disabled=${this.#props.disabled}
                 class=${classMap(classes)}
                 aria-pressed=${ifDefined(this.#props.toggled)}
-                aria-label=${ifDefined(this.#props.accessibleLabel)}
+                aria-label=${ifDefined(this.accessibleLabel || this.title || undefined)}
                 jslog=${ifDefined(jslog)}>
           ${hasIcon ? html`
             <devtools-icon name=${ifDefined(this.#props.toggled ? this.#props.toggledIconName : this.#props.iconName)}>

package/front_end/ui/components/buttons/FloatingButton.ts

@@ -9,7 +9,7 @@ import * as Lit from '../../lit/lit.js';
 
 import floatingButtonStyles from './floatingButton.css.js';
 
-const {html} = Lit;
+const {html, Directives: {classMap}} = Lit;
 
 /**
  * A simple floating button component, primarily used to display the 'Ask AI!'
@@ -19,7 +19,7 @@ const {html} = Lit;
  *
  * ```js
  * // Instantiate programmatically via the `create()` helper:
- * const button = Buttons.FloatingButton.create('smart-assistant', 'Ask AI!');
+ * const button = Buttons.FloatingButton.create(AiAssistance.AiUtils.getIconName(), 'Ask AI!');
  *
  * // Use within a template:
  * html`
@@ -96,10 +96,14 @@ export class FloatingButton extends HTMLElement {
   }
 
   #render(): void {
+    const classes = classMap({
+      gemini: this.iconName === 'spark',
+    });
+
     // clang-format off
     Lit.render(html`
         <style>${floatingButtonStyles}</style>
-        <button><devtools-icon .name=${this.iconName}></devtools-icon></button>`,
+        <button class=${classes}><devtools-icon .name=${this.iconName}></devtools-icon></button>`,
         this.#shadow, {host: this});
     // clang-format on
   }

package/front_end/ui/components/buttons/floatingButton.css

@@ -72,3 +72,47 @@ button {
     color: var(--sys-color-state-disabled);
   }
 }
+
+.gemini {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--sys-size-9);
+  height: var(--sys-size-9);
+  border-radius: var(--sys-shape-corner-full);
+  background-image: var(--app-gradient-google-ai);
+  font: var(--sys-typescale-body4-medium);
+  color: var(--ref-palette-neutral100);
+  transition: width 1s, padding 1s;
+  margin-left: auto;
+  overflow: hidden;
+  position: relative;
+  border: 0;
+
+  &:focus-visible {
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  }
+
+  &:hover::after,
+  &:active::after {
+    content: "";
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:hover::after {
+    background-color: var(--sys-color-state-hover-on-prominent);
+  }
+
+  &:active::after {
+    background-color: var(--sys-color-state-ripple-primary);
+  }
+
+  devtools-icon {
+    color: var(--ref-palette-neutral100) !important; /* stylelint-disable-line declaration-no-important */
+  }
+}

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -4201,6 +4201,7 @@ export const knownContextValues = new Set([
   'view-transition-class',
   'view-transition-group',
   'view-transition-name',
+  'view-transition-scope',
   'views-location-override',
   'virtual-authenticators',
   'visibility',

package/package.json

@@ -93,7 +93,8 @@
     "typescript-eslint": "8.47.0",
     "uuid": "13.0.0",
     "webidl2": "24.5.0",
-    "yargs": "17.7.2"
+    "yargs": "17.7.2",
+    "js-rouge": "3.2.0"
   },
   "overrides": {
     "@typescript-eslint/types": "8.47.0",
@@ -104,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1573331"
+  "version": "1.0.1574367"
 }