Exclude hover button labels from console copy

Console messages use a custom DOM traversal to extract text for copying.
By using CSS pseudo-elements for the button labels instead of actual
text nodes, we ensure they are not picked up by this traversal.

Fixed: 496425912
Change-Id: Id710241850279ba4e4a18d85185fbe409ec4eba7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7766591
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Kim-Anh Tran <kimanh@chromium.org>
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>

Author: jackfranklin

front_end/panels/console/ConsoleViewMessage.test.ts

@@ -170,7 +170,8 @@ describeWithMockConnection('ConsoleViewMessage', () => {
       const messageElement =
           createMessage(Common.Console.FrontendMessageSource.ConsoleAPI, Protocol.Log.LogEntryLevel.Error, 'got here');
       const button = messageElement.querySelector('[aria-label=\'Understand this error. Powered by AI.\']');
-      assert.strictEqual(button?.textContent, 'Understand this error');
+      assert.strictEqual(
+          button?.querySelector('.button-label div')?.getAttribute('data-text'), 'Understand this error');
     });
 
     it('creates teaser on hover', () => {

front_end/panels/console/ConsoleViewMessage.ts

@@ -1592,7 +1592,10 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     const label = document.createElement('div');
     label.classList.add('button-label');
     const text = document.createElement('div');
-    text.innerText = this.getExplainLabel();
+    // We use a data attribute and a CSS pseudo-element for the button label
+    // to prevent the text from being picked up by the console's custom
+    // copy-to-clipboard traversal, which only collects actual text nodes.
+    text.setAttribute('data-text', this.getExplainLabel());
     label.append(text);
     button.append(label);
     button.classList.add('hover-button');
@@ -1615,7 +1618,10 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     const label = document.createElement('div');
     label.classList.add('button-label');
     const text = document.createElement('div');
-    text.innerText = 'Debug with breakpoint AI';
+    // We use a data attribute and a CSS pseudo-element for the button label
+    // to prevent the text from being picked up by the console's custom
+    // copy-to-clipboard traversal, which only collects actual text nodes.
+    text.setAttribute('data-text', 'Debug with breakpoint AI');
     label.append(text);
     button.append(label);
     button.classList.add('hover-button');

front_end/panels/console/consoleView.css

@@ -615,6 +615,10 @@
   & div {
     display: inline-block;
     vertical-align: -1px;
+
+    &::after {
+      content: attr(data-text);
+    }
   }
 }