[AiAssistance] increase visibility of the floating button

Fixed: 396059754
Change-Id: I680c13c883553ab3db127c9431452c096efd994f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6257992
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Yang Guo <[email protected]>
Commit-Queue: Yang Guo <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>

Author: hashseed

front_end/panels/console/ConsoleViewMessage.test.ts

@@ -135,7 +135,7 @@ describeWithMockConnection('ConsoleViewMessage', () => {
       const {message} = createConsoleViewMessageWithStubDeps(rawMessage);
       const messageElement = message.toMessageElement();  // Trigger rendering.
       const button = messageElement.querySelector('[aria-label=\'Understand this error. Powered by AI.\']');
-      assert.strictEqual(button?.textContent, 'Understand this errorAI');
+      assert.strictEqual(button?.textContent, 'Understand this error');
     });
 
     it('does not show a hover button if the console message text is empty', () => {

front_end/panels/console/ConsoleViewMessage.ts

@@ -1458,7 +1458,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     const icon = new IconButton.Icon.Icon();
     icon.data = {
       iconName: 'lightbulb-spark',
-      color: 'var(--sys-color-on-surface-subtle)',
+      color: 'var(--devtools-icon-color)',
       width: '16px',
       height: '16px',
     };
@@ -1475,10 +1475,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     const text = document.createElement('div');
     text.innerText = this.getExplainLabel();
     label.append(text);
-    const badge = document.createElement('div');
-    badge.classList.add('badge');
-    badge.innerText = i18n.i18n.lockedString('AI');
-    label.append(badge);
     button.append(label);
     button.classList.add('hover-button');
     button.ariaLabel = this.#getExplainAriaLabel();

front_end/panels/console/consoleView.css

@@ -469,11 +469,6 @@
   margin-bottom: -5px;
 }
 
-.console-message-badge {
-  float: right;
-  margin-left: 4px;
-}
-
 .console-message-nowrap-below,
 .console-message-nowrap-below div,
 .console-message-nowrap-below span {
@@ -530,13 +525,13 @@ devtools-console-insight {
   --width: 24px;
 
   align-items: center;
-  background-color: var(--sys-color-cdt-base-container);
   border-radius: 50%;
   border: none;
   /* todo: extract to global styles and make it work with dark mode. */
   box-shadow: 0 1px 3px 1px rgb(0 0 0 / 15%), 0 1px 2px 0 rgb(0 0 0 / 30%); /* stylelint-disable-line plugin/use_theme_colors */
   box-sizing: border-box;
-  color: var(--sys-color-on-surface);
+  background-color: var(--sys-color-tonal-container);
+  color: var(--sys-color-on-tonal-container);
   font: var(--sys-typescale-body4-medium);
   height: var(--width);
   justify-content: center;
@@ -551,6 +546,28 @@ devtools-console-insight {
   right: 6px;
   display: none;
   width: var(--width);
+  z-index: 1;
+
+  .theme-with-dark-background & {
+    border: 1px solid var(--sys-color-neutral-outline);
+    background-color: var(--sys-color-primary);
+    color: var(--sys-color-on-primary);
+  }
+
+  & devtools-icon {
+    box-sizing: border-box;
+    flex-shrink: 0;
+    height: var(--sys-size-8);
+    min-height: var(--sys-size-8);
+    min-width: var(--sys-size-8);
+    width: var(--sys-size-8);
+
+    --devtools-icon-color: var(--sys-color-on-tonal-container);
+  }
+
+  .theme-with-dark-background & devtools-icon {
+    --devtools-icon-color: var(--sys-color-on-primary);
+  }
 }
 
 .hover-button:focus,
@@ -569,15 +586,6 @@ devtools-console-insight {
   outline-offset: 2px;
 }
 
-.hover-button devtools-icon {
-  box-sizing: border-box;
-  flex-shrink: 0;
-  height: 16px;
-  min-height: 16px;
-  min-width: 16px;
-  width: 16px;
-}
-
 .button-label {
   display: block;
   overflow: hidden;
@@ -589,17 +597,6 @@ devtools-console-insight {
   }
 }
 
-.button-label .badge {
-  background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
-  border-radius: var(--sys-size-3);
-  font-size: 9px;
-  font-weight: var(--ref-typeface-weight-bold);
-  line-height: 9px;
-  padding: var(--sys-size-3);
-  margin-left: var(--sys-size-4);
-  vertical-align: 0;
-}
-
 .console-message-wrapper:not(.has-insight) {
   &:hover,
   &:focus,

front_end/ui/components/floating_button/floatingButton.css

@@ -17,22 +17,33 @@
   position: relative;
   width: var(--sys-size-8);
   height: var(--sys-size-8);
-  background-color: var(--sys-color-surface);
   box-shadow: var(--sys-elevation-level2);
   border-radius: var(--sys-shape-corner-extra-small);
   display: flex;
   justify-content: center;
   align-items: center;
 
+  :host-context(:not(.theme-with-dark-background)) & {
+    background-color: var(--sys-color-tonal-container);
+  }
+
   :host-context(.theme-with-dark-background) & {
-    border: 1px solid var(--sys-color-neutral-outline);
+    background-color: var(--sys-color-primary);
   }
 
   & .icon {
     width: var(--sys-size-7);
     height: var(--sys-size-7);
   }
 
+  :host-context(:not(.theme-with-dark-background)) & .icon {
+    color: var(--sys-color-on-tonal-container);
+  }
+
+  :host-context(.theme-with-dark-background) & .icon {
+    color: var(--sys-color-on-primary);
+  }
+
   &:not(:disabled):hover::after,
   &:not(:disabled):hover::before {
     content: "";