chrome-devtools-frontend 1.0.1572937 → 1.0.1574367

package/front_end/models/ai_assistance/agents/StylingAgent.snapshot.txt

@@ -106,7 +106,7 @@ Content:
             "type": 1,
             "description": "JavaScript code snippet to run on the inspected page. Make sure the code is formatted for readability.\n\n# Instructions\n\n* To return data, define a top-level `data` variable and populate it with data you want to get. Only JSON-serializable objects can be assigned to `data`.\n* If you modify styles on an element, ALWAYS call the pre-defined global `async setElementStyles(el: Element, styles: object)` function. This function is an internal mechanism for you and should never be presented as a command/advice to the user.\n* **CRITICAL** Only get styles that might be relevant to the user request.\n* **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.\n* **CRITICAL** Consider that `data` variable from the previous function calls are not available in a new function call.\n\nFor example, the code to change element styles:\n\n```\nawait setElementStyles($0, {\n  color: 'blue',\n});\n```\n\nFor example, the code to get overlapping elements:\n\n```\nconst data = {\n  overlappingElements: Array.from(document.querySelectorAll('*'))\n    .filter(el => {\n      const rect = el.getBoundingClientRect();\n      const popupRect = $0.getBoundingClientRect();\n      return (\n        el !== $0 &&\n        rect.left < popupRect.right &&\n        rect.right > popupRect.left &&\n        rect.top < popupRect.bottom &&\n        rect.bottom > popupRect.top\n      );\n    })\n    .map(el => ({\n      tagName: el.tagName,\n      id: el.id,\n      className: el.className,\n      zIndex: window.getComputedStyle(el)['z-index']\n    }))\n};\n```\n"
           },
-          "thought": {
+          "explanation": {
             "type": 1,
             "description": "Explain why you want to run this code"
           },
@@ -117,7 +117,7 @@ Content:
         },
         "required": [
           "code",
-          "thought",
+          "explanation",
           "title"
         ]
       }
@@ -155,7 +155,7 @@ Content:
           "name": "executeJavaScript",
           "args": {
             "title": "title2",
-            "thought": "thought2",
+            "explanation": "thought2",
             "code": "action2"
           }
         }
@@ -259,7 +259,7 @@ Content:
             "name": "executeJavaScript",
             "args": {
               "code": "const data = {\"test\": \"observation\"}",
-              "thought": "I am thinking.",
+              "explanation": "I am thinking.",
               "title": "thinking"
             }
           }
@@ -451,7 +451,7 @@ Content:
         "functionCall": {
           "name": "executeJavaScript",
           "args": {
-            "thought": "thought 1",
+            "explanation": "thought 1",
             "title": "test",
             "code": "console.log('test')"
           }
@@ -479,7 +479,7 @@ Content:
         "functionCall": {
           "name": "executeJavaScript",
           "args": {
-            "thought": "thought 2",
+            "explanation": "thought 2",
             "title": "test",
             "code": "console.log('test')"
           }
@@ -507,7 +507,7 @@ Content:
         "functionCall": {
           "name": "executeJavaScript",
           "args": {
-            "thought": "thought 3",
+            "explanation": "thought 3",
             "title": "test",
             "code": "console.log('test')"
           }

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -330,7 +330,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
 
     this.declareFunction<{
       title: string,
-      thought: string,
+      explanation: string,
       code: string,
     }>('executeJavaScript', {
       description:
@@ -388,7 +388,7 @@ const data = {
 \`\`\`
 `,
           },
-          thought: {
+          explanation: {
             type: Host.AidaClient.ParametersTypes.STRING,
             description: 'Explain why you want to run this code',
           },
@@ -397,12 +397,12 @@ const data = {
             description: 'Provide a summary of what the code does. For example, "Checking related element styles".',
           },
         },
-        required: ['code', 'thought', 'title']
+        required: ['code', 'explanation', 'title']
       },
       displayInfoFromArgs: params => {
         return {
           title: params.title,
-          thought: params.thought,
+          thought: params.explanation,
           action: params.code,
         };
       },

package/front_end/models/issues_manager/CorsIssue.ts

@@ -44,12 +44,6 @@ export const enum IssueCode {
   PREFLIGHT_INVALID_ALLOW_EXTERNAL = 'CorsIssue::PreflightInvalidAllowExternal',
   NO_CORS_REDIRECT_MODE_NOT_FOLLOW = 'CorsIssue::NoCorsRedirectModeNotFollow',
   INVALID_PRIVATE_NETWORK_ACCESS = 'CorsIssue::InvalidPrivateNetworkAccess',
-  UNEXPECTED_PRIVATE_NETWORK_ACCESS = 'CorsIssue::UnexpectedPrivateNetworkAccess',
-  PREFLIGHT_ALLOW_PRIVATE_NETWORK_ERROR = 'CorsIssue::PreflightAllowPrivateNetworkError',
-  PREFLIGHT_MISSING_PRIVATE_NETWORK_ACCESS_ID = 'CorsIssue::PreflightMissingPrivateNetworkAccessId',
-  PREFLIGHT_MISSING_PRIVATE_NETWORK_ACCESS_NAME = 'CorsIssue::PreflightMissingPrivateNetworkAccessName',
-  PRIVATE_NETWORK_ACCESS_PERMISSION_UNAVAILABLE = 'CorsIssue::PrivateNetworkAccessPermissionUnavailable',
-  PRIVATE_NETWORK_ACCESS_PERMISSION_DENIED = 'CorsIssue::PrivateNetworkAccessPermissionDenied',
   LOCAL_NETWORK_ACCESS_PERMISSION_DENIED = 'CorsIssue::LocalNetworkAccessPermissionDenied',
 }
 
@@ -97,22 +91,12 @@ function getIssueCode(details: Protocol.Audits.CorsIssueDetails): IssueCode {
       return IssueCode.NO_CORS_REDIRECT_MODE_NOT_FOLLOW;
     case Protocol.Network.CorsError.InvalidPrivateNetworkAccess:
       return IssueCode.INVALID_PRIVATE_NETWORK_ACCESS;
-    case Protocol.Network.CorsError.UnexpectedPrivateNetworkAccess:
-      return IssueCode.UNEXPECTED_PRIVATE_NETWORK_ACCESS;
-    case Protocol.Network.CorsError.PreflightMissingAllowPrivateNetwork:
-    case Protocol.Network.CorsError.PreflightInvalidAllowPrivateNetwork:
-      return IssueCode.PREFLIGHT_ALLOW_PRIVATE_NETWORK_ERROR;
-    case Protocol.Network.CorsError.PreflightMissingPrivateNetworkAccessId:
-      return IssueCode.PREFLIGHT_MISSING_PRIVATE_NETWORK_ACCESS_ID;
-    case Protocol.Network.CorsError.PreflightMissingPrivateNetworkAccessName:
-      return IssueCode.PREFLIGHT_MISSING_PRIVATE_NETWORK_ACCESS_NAME;
-    case Protocol.Network.CorsError.PrivateNetworkAccessPermissionUnavailable:
-      return IssueCode.PRIVATE_NETWORK_ACCESS_PERMISSION_UNAVAILABLE;
-    case Protocol.Network.CorsError.PrivateNetworkAccessPermissionDenied:
-      return IssueCode.PRIVATE_NETWORK_ACCESS_PERMISSION_DENIED;
     case Protocol.Network.CorsError.LocalNetworkAccessPermissionDenied:
       return IssueCode.LOCAL_NETWORK_ACCESS_PERMISSION_DENIED;
   }
+  // TODO(b/394636065): Remove this once browser protocol has rolled, as we
+  // will never hit this case.
+  return null as unknown as IssueCode;
 }
 
 export class CorsIssue extends Issue<Protocol.Audits.CorsIssueDetails, IssueCode> {
@@ -136,14 +120,6 @@ export class CorsIssue extends Issue<Protocol.Audits.CorsIssueDetails, IssueCode
             linkTitle: i18nString(UIStrings.corsPrivateNetworkAccess),
           }],
         };
-      case IssueCode.PREFLIGHT_ALLOW_PRIVATE_NETWORK_ERROR:
-        return {
-          file: 'corsPreflightAllowPrivateNetworkError.md',
-          links: [{
-            link: 'https://developer.chrome.com/blog/private-network-access-update',
-            linkTitle: i18nString(UIStrings.corsPrivateNetworkAccess),
-          }],
-        };
       case IssueCode.INVALID_HEADER_VALUES:
         return {
           file: 'corsInvalidHeaderValues.md',
@@ -232,17 +208,6 @@ export class CorsIssue extends Issue<Protocol.Audits.CorsIssueDetails, IssueCode
             linkTitle: i18nString(UIStrings.CORS),
           }],
         };
-      // TODO(1462857): Change the link after we have a blog post for PNA
-      // permission prompt.
-      case IssueCode.PREFLIGHT_MISSING_PRIVATE_NETWORK_ACCESS_ID:
-      case IssueCode.PREFLIGHT_MISSING_PRIVATE_NETWORK_ACCESS_NAME:
-        return {
-          file: 'corsPrivateNetworkPermissionDenied.md',
-          links: [{
-            link: 'https://developer.chrome.com/blog/private-network-access-update',
-            linkTitle: i18nString(UIStrings.corsPrivateNetworkAccess),
-          }],
-        };
       case IssueCode.LOCAL_NETWORK_ACCESS_PERMISSION_DENIED:
         return {
           file: 'corsLocalNetworkAccessPermissionDenied.md',
@@ -254,9 +219,6 @@ export class CorsIssue extends Issue<Protocol.Audits.CorsIssueDetails, IssueCode
       case IssueCode.PREFLIGHT_MISSING_ALLOW_EXTERNAL:
       case IssueCode.PREFLIGHT_INVALID_ALLOW_EXTERNAL:
       case IssueCode.INVALID_PRIVATE_NETWORK_ACCESS:
-      case IssueCode.UNEXPECTED_PRIVATE_NETWORK_ACCESS:
-      case IssueCode.PRIVATE_NETWORK_ACCESS_PERMISSION_UNAVAILABLE:
-      case IssueCode.PRIVATE_NETWORK_ACCESS_PERMISSION_DENIED:
         return null;
     }
   }
@@ -267,9 +229,7 @@ export class CorsIssue extends Issue<Protocol.Audits.CorsIssueDetails, IssueCode
 
   getKind(): IssueKind {
     if (this.details().isWarning &&
-        (this.details().corsErrorStatus.corsError === Protocol.Network.CorsError.InsecurePrivateNetwork ||
-         this.details().corsErrorStatus.corsError === Protocol.Network.CorsError.PreflightMissingAllowPrivateNetwork ||
-         this.details().corsErrorStatus.corsError === Protocol.Network.CorsError.PreflightInvalidAllowPrivateNetwork)) {
+        this.details().corsErrorStatus.corsError === Protocol.Network.CorsError.InsecurePrivateNetwork) {
       return IssueKind.BREAKING_CHANGE;
     }
     return IssueKind.PAGE_ERROR;

package/front_end/models/logs/NetworkLog.ts

@@ -469,15 +469,6 @@ export class NetworkLog extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
       return;
     }
 
-    // This is only triggered in an edge case in which Chrome reports 2 preflight requests. The
-    // first preflight gets aborted and should not be shown in DevTools.
-    // (see https://crbug.com/1290390 for details)
-    if (request.isPreflightRequest() &&
-        request.corsErrorStatus()?.corsError === Protocol.Network.CorsError.UnexpectedPrivateNetworkAccess) {
-      this.removeRequest(request);
-      return;
-    }
-
     this.dispatchEventToListeners(Events.RequestUpdated, {request});
   }
 

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -205,7 +205,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
           class="link"
           title="${UIStringsNotTranslate.viewUploadedFiles} ${UIStringsNotTranslate.opensInNewTab}"
           href="data:text/plain;charset=utf-8,${encodeURIComponent(input.sources)}"
-          .jslogContext=${'files-used-in-patching'}>
+          jslogcontext="files-used-in-patching">
           ${UIStringsNotTranslate.viewUploadedFiles}
         </devtools-link>`;
   }
@@ -296,8 +296,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       return html`
           <div class="footer">
             <div class="left-side">
-              <devtools-link class="link disclaimer-link" href="https://support.google.com/legal/answer/13505487" .jslogContext=${
-                 'code-disclaimer'}>
+              <devtools-link class="link disclaimer-link" href="https://support.google.com/legal/answer/13505487" jslogcontext="code-disclaimer">
                 ${lockedString(UIStringsNotTranslate.codeDisclaimer)}
               </devtools-link>
               ${renderSourcesLink()}
@@ -557,8 +556,9 @@ export class PatchWidget extends UI.Widget.Widget {
       return true;
     }
 
+    const iconName = AiAssistanceModel.AiUtils.getIconName();
     const result = await PanelCommon.FreDialog.show({
-      header: {iconName: 'smart-assistant', text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
+      header: {iconName, text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
       reminderItems: [
         {
           iconName: 'psychiatry',
@@ -575,7 +575,7 @@ export class PatchWidget extends UI.Widget.Widget {
           content: html`<devtools-link
             href=${CODE_SNIPPET_WARNING_URL}
             class="link devtools-link"
-            .jslogContext=${'code-snippets-explainer.patch-widget'}
+            jslogcontext="code-snippets-explainer.patch-widget"
           >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</devtools-link>`,
           // clang-format on
         }

package/front_end/panels/ai_assistance/SelectWorkspaceDialog.ts

@@ -93,7 +93,7 @@ export const SELECT_WORKSPACE_DIALOG_DEFAULT_VIEW: View = (input, _output, targe
             <devtools-link
               class="devtools-link"
               href="https://goo.gle/devtools-automatic-workspace-folders"
-              .jslogContext=${'automatic-workspaces-documentation'}
+              jslogcontext="automatic-workspaces-documentation"
             >com.chrome.devtools.json</devtools-link>
             file to automatically connect your project to DevTools.
           </div>

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

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import type * as Root from '../../core/root/root.js';
+import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as AiAssistance from './ai_assistance.js';
@@ -34,6 +34,22 @@ const UIStrings = {
    * the current context
    */
   debugWithAi: 'Debug with AI',
+  /**
+   * @description The title of the Gemini panel.
+   */
+  gemini: 'Gemini',
+  /**
+   * @description The title of the command menu action for showing the Gemini panel.
+   */
+  showGemini: 'Show Gemini',
+  /**
+   * @description The setting title to enable the Gemini via the settings tab.
+   */
+  enableGemini: 'Enable Gemini',
+  /**
+   * @description Text of a context menu item to redirect to the Gemini panel with the current context
+   */
+  debugWithGemini: 'Debug with Gemini',
   /**
    * @description Message shown to the user if the DevTools locale is not
    * supported.
@@ -53,7 +69,12 @@ const UIStrings = {
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/ai_assistance-meta.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
+// Host config is initialized after this module executes, so need to lazily select the string.
+function i18nAiBrandedString(gemini: string, assistance: string) {
+  // eslint-disable-next-line @devtools/l10n-i18nString-call-only-with-uistrings
+  return () => Root.Runtime.hostConfig.devToolsGeminiRebranding?.enabled ? i18nString(gemini) : i18nString(assistance);
+}
 
 const setting = 'ai-assistance-enabled';
 
@@ -102,8 +123,8 @@ function isAnyFeatureAvailable(config?: Root.Runtime.HostConfig): boolean {
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.DRAWER_VIEW,
   id: 'freestyler',
-  commandPrompt: i18nLazyString(UIStrings.showAiAssistance),
-  title: i18nLazyString(UIStrings.aiAssistance),
+  commandPrompt: i18nAiBrandedString(UIStrings.showGemini, UIStrings.showAiAssistance),
+  title: i18nAiBrandedString(UIStrings.gemini, UIStrings.aiAssistance),
   order: 10,
   persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
   hasToolbar: false,
@@ -118,7 +139,7 @@ Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.AI,
   settingName: setting,
   settingType: Common.Settings.SettingType.BOOLEAN,
-  title: i18nLazyString(UIStrings.enableAiAssistance),
+  title: i18nAiBrandedString(UIStrings.enableGemini, UIStrings.enableAiAssistance),
   defaultValue: false,
   reloadRequired: false,
   condition: isAnyFeatureAvailable,
@@ -146,7 +167,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.debugWithAi),
+  title: i18nAiBrandedString(UIStrings.debugWithGemini, UIStrings.debugWithAi),
   configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
@@ -161,7 +182,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.debugWithAi),
+  title: i18nAiBrandedString(UIStrings.debugWithGemini, UIStrings.debugWithAi),
   configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
@@ -177,7 +198,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.debugWithAi),
+  title: i18nAiBrandedString(UIStrings.debugWithGemini, UIStrings.debugWithAi),
   configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
@@ -193,7 +214,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.debugWithAi),
+  title: i18nAiBrandedString(UIStrings.debugWithGemini, UIStrings.debugWithAi),
   configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
@@ -209,7 +230,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.debugWithAi),
+  title: i18nAiBrandedString(UIStrings.debugWithGemini, UIStrings.debugWithAi),
   configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
@@ -225,7 +246,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.debugWithAi),
+  title: i18nAiBrandedString(UIStrings.debugWithGemini, UIStrings.debugWithAi),
   configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
@@ -241,7 +262,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.debugWithAi),
+  title: i18nAiBrandedString(UIStrings.debugWithGemini, UIStrings.debugWithAi),
   configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
@@ -256,7 +277,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.debugWithAi),
+  title: i18nAiBrandedString(UIStrings.debugWithGemini, UIStrings.debugWithAi),
   configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -292,6 +292,8 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
     return;
   }
 
+  const icon = AiAssistanceModel.AiUtils.getIconName();
+
   // clang-format off
   Lit.render(html`
     <style>${Input.textInputStyles}</style>
@@ -301,7 +303,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
       jslog=${VisualLogging.section('answer')}
     >
       <div class="message-info">
-        <devtools-icon name="smart-assistant"></devtools-icon>
+        <devtools-icon name=${icon}></devtools-icon>
         <div class="message-name">
           <h2>${lockedString(UIStringsNotTranslate.ai)}</h2>
         </div>

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -7,7 +7,7 @@ import '../../../ui/components/spinners/spinners.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
-import type * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
+import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
 import * as UI from '../../../ui/legacy/legacy.js';
@@ -30,6 +30,10 @@ const UIStringsNotTranslate = {
    * @description Text for the empty state of the AI assistance panel.
    */
   emptyStateText: 'How can I help you?',
+  /**
+   * @description Text for the empty state of the Gemini panel.
+   */
+  emptyStateTextGemini: 'Where should we start?',
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
@@ -74,12 +78,18 @@ export interface Props {
 }
 
 interface ChatWidgetInput extends Props {
+  accountName: string;
   handleScroll: (ev: Event) => void;
   handleSuggestionClick: (title: string) => void;
   handleMessageContainerRef: (el: Element|undefined) => void;
 }
 
 const DEFAULT_VIEW: View = (input, output, target) => {
+  const chatUiClasses = classMap({
+    'chat-ui': true,
+    gemini: AiAssistanceModel.AiUtils.isGeminiBranding(),
+  });
+
   const inputWidgetClasses = classMap({
     'chat-input-widget': true,
     sticky: !input.isReadOnly,
@@ -88,7 +98,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
   // clang-format off
     render(html`
       <style>${chatViewStyles}</style>
-      <div class="chat-ui">
+      <div class=${chatUiClasses}>
         <main @scroll=${input.handleScroll} ${ref(element => { output.mainElement = element as HTMLElement; } )}>
           ${input.messages.length > 0 ? html`
             <div class="messages-container" ${ref(input.handleMessageContainerRef)}>
@@ -121,7 +131,12 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                     name="smart-assistant"
                   ></devtools-icon>
                 </div>
-                <h1>${lockedString(UIStringsNotTranslate.emptyStateText)}</h1>
+                ${AiAssistanceModel.AiUtils.isGeminiBranding() ?
+                  html`
+                    <h1 class='greeting'>Hello, ${input.accountName}</h1>
+                    <h1>${lockedString(UIStringsNotTranslate.emptyStateTextGemini)}</h1>
+                  ` : html`<h1>${lockedString(UIStringsNotTranslate.emptyStateText)}</h1>`
+                }
               </div>
               <div class="empty-state-content">
                 ${input.emptyStateSuggestions.map(({title, jslogContext}) => {
@@ -308,6 +323,8 @@ export class ChatView extends HTMLElement {
     this.#view(
         {
           ...this.#props,
+          // TODO(b/468206227): This needs to be a first name.
+          accountName: this.#props.userInfo.accountFullName ?? '',
           handleScroll: this.#handleScroll,
           handleSuggestionClick: this.#handleSuggestionClick,
           handleMessageContainerRef: this.#handleMessageContainerRef,

package/front_end/panels/ai_assistance/components/chatView.css

@@ -165,7 +165,27 @@ main {
   }
 }
 
+.gemini {
+  .empty-state-container .icon {
+    display: none;
+  }
+
+  .empty-state-container .header {
+    align-items: flex-start;
+  }
+
+  .empty-state-content {
+    align-items: flex-start
+  }
+
+  .empty-state-container .greeting {
+    color: var(--sys-color-primary);
+  }
 
+  main {
+    align-items: flex-start;
+  }
+}
 
 .change-summary {
   background-color: var(--sys-color-surface3);

package/front_end/panels/application/AppManifestView.ts

@@ -644,7 +644,7 @@ function renderIdentity(identityData: IdentitySectionData, onCopy: () => void, o
             jslog=${VisualLogging.action('help').track({hover: true})}>
         </devtools-icon>
         <devtools-link href="https://developer.chrome.com/blog/pwa-manifest-id/"
-                      .jslogContext=${'learn-more'}
+                      jslogcontext="learn-more"
                       ${ref(setFocusOnSection(i18nString(UIStrings.identity), output))}>
           ${i18nString(UIStrings.learnMore)}
         </devtools-link>
@@ -766,7 +766,7 @@ function renderIcons(
       <div class="report-row">
         ${i18nTemplate(str_, UIStrings.needHelpReadOurS, {
           PH1: html`
-            <devtools-link href="https://web.dev/maskable-icon/" .jslogContext=${'learn-more'}>
+            <devtools-link href="https://web.dev/maskable-icon/" jslogcontext="learn-more">
               ${i18nString(UIStrings.documentationOnMaskableIcons)}
             </devtools-link>`,
         })}
@@ -866,7 +866,7 @@ function renderWindowControlsSection(
             PH2: html`<code>
               <devtools-link
                 href="https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override"
-                .jslogContext=${'display-override'}
+                jslogcontext="display-override"
                 ${ref(setFocusOnSection(i18nString(UIStrings.windowControlsOverlay), output))}>
                 display-override
               </devtools-link>
@@ -882,7 +882,7 @@ function renderWindowControlsSection(
             ${i18nTemplate(str_, UIStrings.wcoNotFound, {PH1: html`<code>
                 <devtools-link
                     href="https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override"
-                    .jslogContext=${'display-override'}
+                    jslogcontext="display-override"
                     ${ref(setFocusOnSection(i18nString(UIStrings.windowControlsOverlay), output))}>
                   display-override
                 </devtools-link>
@@ -891,7 +891,7 @@ function renderWindowControlsSection(
         <div class="report-row">
           ${i18nTemplate(str_, UIStrings.wcoNeedHelpReadMore, {PH1: html`<devtools-link
               href="https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay"
-              .jslogContext=${'customize-pwa-tittle-bar'}>
+              jslogcontext="customize-pwa-tittle-bar">
             ${i18nString(UIStrings.customizePwaTitleBar)}
           </devtools-link>`})}
         </div>

package/front_end/panels/application/DeviceBoundSessionsModel.ts

@@ -13,6 +13,7 @@ interface EventWithTimestamp {
 export interface SessionAndEvents {
   session?: Protocol.Network.DeviceBoundSession;
   isSessionTerminated: boolean;
+  hasErrors: boolean;
   eventsById: Map<string, EventWithTimestamp>;
 }
 type SessionIdToSessionMap = Map<string|undefined, SessionAndEvents>;
@@ -61,11 +62,21 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
       return;
     }
     const emptySessions = new Map<string, Array<string|undefined>>();
+    const noLongerFailedSessions = new Map<string, Array<string|undefined>>();
     const emptySites = new Set<string>();
     for (const [site, sessionIdToSessionMap] of [...this.#siteSessions]) {
       let emptySessionsSiteEntry = emptySessions.get(site);
+      let noLongerFailedSessionsSiteEntry = noLongerFailedSessions.get(site);
       for (const [sessionId, sessionAndEvents] of sessionIdToSessionMap) {
         sessionAndEvents.eventsById.clear();
+        if (sessionAndEvents.hasErrors) {
+          sessionAndEvents.hasErrors = false;
+          if (!noLongerFailedSessionsSiteEntry) {
+            noLongerFailedSessionsSiteEntry = [];
+            noLongerFailedSessions.set(site, noLongerFailedSessionsSiteEntry);
+          }
+          noLongerFailedSessionsSiteEntry.push(sessionId);
+        }
         if (sessionAndEvents.session) {
           continue;
         }
@@ -85,7 +96,8 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
       }
     }
 
-    this.dispatchEventToListeners(DeviceBoundSessionModelEvents.CLEAR_EVENTS, {emptySessions, emptySites});
+    this.dispatchEventToListeners(
+        DeviceBoundSessionModelEvents.CLEAR_EVENTS, {emptySessions, emptySites, noLongerFailedSessions});
   }
 
   isSiteVisible(site: string): boolean {
@@ -100,6 +112,14 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
     return session.isSessionTerminated;
   }
 
+  sessionHasErrors(site: string, sessionId?: string): boolean {
+    const session = this.getSession(site, sessionId);
+    if (session === undefined) {
+      return false;
+    }
+    return session.hasErrors;
+  }
+
   getSession(site: string, sessionId?: string): SessionAndEvents|undefined {
     return this.#siteSessions.get(site)?.get(sessionId);
   }
@@ -128,6 +148,7 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
       sessionAndEvent = {
         session: undefined,
         isSessionTerminated: false,
+        hasErrors: false,
         eventsById: new Map<string, EventWithTimestamp>()
       };
       sessionIdToSessionMap.set(sessionId, sessionAndEvent);
@@ -167,6 +188,11 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
       }
     }
 
+    // Set that the session has errors if the latest event failed.
+    if (!event.succeeded) {
+      sessionAndEvent.hasErrors = true;
+    }
+
     this.dispatchEventToListeners(
         DeviceBoundSessionModelEvents.EVENT_OCCURRED,
         {site: eventWithTimestamp.event.site, sessionId: eventWithTimestamp.event.sessionId});
@@ -186,6 +212,9 @@ export interface DeviceBoundSessionModelEventTypes {
   [DeviceBoundSessionModelEvents.ADD_VISIBLE_SITE]: {site: string};
   [DeviceBoundSessionModelEvents.CLEAR_VISIBLE_SITES]: void;
   [DeviceBoundSessionModelEvents.EVENT_OCCURRED]: {site: string, sessionId?: string};
-  [DeviceBoundSessionModelEvents.CLEAR_EVENTS]:
-      {emptySessions: Map<string, Array<string|undefined>>, emptySites: Set<string>};
+  [DeviceBoundSessionModelEvents.CLEAR_EVENTS]: {
+    emptySessions: Map<string, Array<string|undefined>>,
+    emptySites: Set<string>,
+    noLongerFailedSessions: Map<string, Array<string|undefined>>,
+  };
 }