Fix tooltip on variable names

Bug: 401212692
Change-Id: I54a3d974b962f059913a116d6308955dac0e9466
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6357269
Auto-Submit: Philip Pfaffe <[email protected]>
Commit-Queue: Eric Leese <[email protected]>
Reviewed-by: Eric Leese <[email protected]>

Author: pfaffe

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -218,7 +218,7 @@ export class CSSWideKeywordRenderer extends rendererBase(SDK.CSSPropertyParserMa
     UI.UIUtils.createTextChild(swatch, match.text);
     swatch.data = {
       text: match.text,
-      title: resolvedProperty ? undefined : i18nString(UIStrings.sIsNotDefined, {PH1: match.text}),
+      tooltip: resolvedProperty ? undefined : {title: i18nString(UIStrings.sIsNotDefined, {PH1: match.text})},
       isDefined: Boolean(resolvedProperty),
       onLinkActivate: () => resolvedProperty && this.#stylesPane.jumpToDeclaration(resolvedProperty),
       jslogContext: 'css-wide-keyword-link',
@@ -340,11 +340,10 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
           jslog=${VisualLogging.link('css-variable').track({click: true, hover: true})}
           >${varCall}(<devtools-link-swatch
             class=css-var-link
-            aria-details=${tooltipId}
             .data=${{
+              tooltip: {tooltipId},
               text: match.name,
               isDefined: computedValue !== null && !fromFallback,
-              title: undefined,
               onLinkActivate,
             } as InlineEditor.LinkSwatch.LinkSwatchRenderData}
             ></devtools-link-swatch>${
@@ -860,7 +859,7 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
     const {metric, jslogContext, ruleBlock, isDefined} = this.#getLinkData(match);
     swatch.data = {
       text: match.text,
-      title: isDefined ? undefined : i18nString(UIStrings.sIsNotDefined, {PH1: match.text}),
+      tooltip: isDefined ? undefined : {title: i18nString(UIStrings.sIsNotDefined, {PH1: match.text})},
       isDefined,
       onLinkActivate: (): void => {
         metric && Host.userMetrics.swatchActivated(metric);

front_end/panels/elements/components/AnchorFunctionLinkSwatch.test.ts

@@ -45,7 +45,7 @@ describeWithEnvironment('AnchorFunctionLinkSwatch', () => {
       assert.isTrue(linkSwatchDataStub.set.calledWith({
         text: '--identifier',
         isDefined: true,
-        title: undefined,
+        tooltip: undefined,
         jslogContext: 'anchor-link',
         onLinkActivate: sinon.match.func,
       }));
@@ -62,7 +62,7 @@ describeWithEnvironment('AnchorFunctionLinkSwatch', () => {
       assert.isTrue(linkSwatchDataStub.set.calledWith({
         text: '--identifier',
         isDefined: false,
-        title: '--identifier is not defined',
+        tooltip: {title: '--identifier is not defined'},
         jslogContext: 'anchor-link',
         onLinkActivate: sinon.match.func,
       }));

front_end/panels/elements/components/AnchorFunctionLinkSwatch.ts

@@ -95,8 +95,8 @@ export class AnchorFunctionLinkSwatch extends HTMLElement {
                 @mouseleave=${this.#data.onMouseLeave}
                 .data=${{
                   text: this.#data.identifier,
-                  title: this.#data.anchorNode ? undefined :
-                    i18nString(UIStrings.sIsNotDefined, {PH1: this.#data.identifier}),
+                  tooltip: this.#data.anchorNode ? undefined :
+                   {title:  i18nString(UIStrings.sIsNotDefined, {PH1: this.#data.identifier})},
                   isDefined: Boolean(this.#data.anchorNode),
                   jslogContext: 'anchor-link',
                   onLinkActivate: this.#data.onLinkActivate,

front_end/ui/legacy/components/inline_editor/LinkSwatch.test.ts

@@ -33,7 +33,7 @@ describeWithLocale('LinkSwatch', () => {
     const component = new InlineEditor.LinkSwatch.LinkSwatch();
     component.data = {
       text: 'test',
-      title: undefined,
+      tooltip: undefined,
       isDefined: true,
       onLinkActivate: () => {},
       jslogContext: 'test',
@@ -51,7 +51,7 @@ describeWithLocale('LinkSwatch', () => {
     const component = new InlineEditor.LinkSwatch.LinkSwatch();
     component.data = {
       text: 'test',
-      title: 'test is not defined',
+      tooltip: {title: 'test is not defined'},
       isDefined: false,
       onLinkActivate: () => {},
       jslogContext: 'test',
@@ -70,7 +70,7 @@ describeWithLocale('LinkSwatch', () => {
     let callbackCalled = false;
     component.data = {
       text: 'testHandler',
-      title: undefined,
+      tooltip: undefined,
       isDefined: true,
       onLinkActivate: () => {
         callbackCalled = true;

front_end/ui/legacy/components/inline_editor/LinkSwatch.ts

@@ -12,7 +12,7 @@ import linkSwatchStyles from './linkSwatch.css.js';
 const {render, html, nothing, Directives: {ref, ifDefined, classMap}} = Lit;
 
 export interface LinkSwatchRenderData {
-  title: string|undefined;
+  tooltip: {tooltipId: string}|{title: string}|undefined;
   text: string;
   isDefined: boolean;
   jslogContext?: string;
@@ -46,7 +46,7 @@ export class LinkSwatch extends HTMLElement {
   }
 
   private render(data: LinkSwatchRenderData): void {
-    const {isDefined, text, jslogContext, title} = data;
+    const {isDefined, text, jslogContext, tooltip} = data;
     const classes = classMap({
       'link-style': true,
       'text-button': true,
@@ -56,6 +56,9 @@ export class LinkSwatch extends HTMLElement {
     // The linkText's space must be removed, otherwise it cannot be triggered when clicked.
     const onActivate = isDefined ? this.onLinkActivate.bind(this, text.trim()) : null;
 
+    const title = tooltip && 'title' in tooltip && tooltip.title || undefined;
+    const tooltipId = tooltip && 'tooltipId' in tooltip && tooltip.tooltipId || undefined;
+
     render(
         // clang-format off
         html`<style>${Buttons.textButtonStyles.cssContent}</style><style>${linkSwatchStyles.cssContent}</style><button
@@ -64,10 +67,11 @@ export class LinkSwatch extends HTMLElement {
           class=${classes}
           type="button"
           title=${ifDefined(title)}
+          aria-details=${ifDefined(tooltipId)}
           @click=${onActivate}
           @keydown=${onActivate}
           role="link"
-          tabindex="-1"
+          tabindex=${ifDefined(isDefined ? -1 : undefined)}
           ${ref(e => {
             this.#linkElement = e as HTMLElement;
           })}