[tooltips] Fix property docs tooltip setting

Bug: 409985196
Fixed: 410515701
Change-Id: Ie7d1cd7bd470faf8814689840c9436cdd64ef09f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6450702
Commit-Queue: Philip Pfaffe <pfaffe@chromium.org>
Auto-Submit: Philip Pfaffe <pfaffe@chromium.org>
Reviewed-by: Ergün Erdoğmuş <ergunsh@chromium.org>
Commit-Queue: Ergün Erdoğmuş <ergunsh@chromium.org>
(cherry picked from commit 5378490)
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6461929
Bot-Commit: Rubber Stamper <rubber-stamper@appspot.gserviceaccount.com>

Author: pfaffe

front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -1846,4 +1846,34 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
     await openTooltipPromise2;
     assert.notStrictEqual(tooltip, tooltip2);
   });
+
+  it('shows a property docs tooltip', async () => {
+    const webCustomDataStub = sinon.createStubInstance(Elements.WebCustomData.WebCustomData);
+    webCustomDataStub.findCssProperty.returns({name: 'color', description: 'test color'});
+    sinon.stub(stylesSidebarPane, 'webCustomData').get(() => webCustomDataStub);
+    Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover').set(false);
+    const treeElementWithoutTooltip = getTreeElement('color', 'blue');
+    treeElementWithoutTooltip.treeOutline = new LegacyUI.TreeOutline.TreeOutline();
+    treeElementWithoutTooltip.updateTitle();
+    assert.notExists(treeElementWithoutTooltip.listItemElement.querySelector(
+        'devtools-tooltip[jslogcontext="elements.css-property-doc"]'));
+
+    Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover').set(true);
+    const treeElementWithTooltip = getTreeElement('color', 'blue');
+    treeElementWithTooltip.treeOutline = new LegacyUI.TreeOutline.TreeOutline();
+    treeElementWithTooltip.updateTitle();
+    renderElementIntoDOM(treeElementWithTooltip.listItemElement);
+    const tooltip = treeElementWithTooltip.listItemElement.querySelector(
+        'devtools-tooltip[jslogcontext="elements.css-property-doc"]');
+    assert.instanceOf(tooltip, Tooltips.Tooltip.Tooltip);
+
+    tooltip.showPopover();
+    assert.isTrue(tooltip.open);
+    tooltip.hidePopover();
+    assert.isFalse(tooltip.open);
+
+    Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover').set(false);
+    tooltip.showPopover();
+    assert.isFalse(tooltip.open);
+  });
 });

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1987,7 +1987,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         }
       };
       this.listItemElement.appendChild(tooltip);
-    } else if (Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover')) {
+    } else if (Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover').get()) {
       const cssProperty = this.parentPaneInternal.webCustomData?.findCssProperty(this.name);
 
       if (cssProperty) {
@@ -1999,7 +1999,18 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
           id: tooltipId,
           jslogContext: 'elements.css-property-doc',
         });
-        tooltip.appendChild(new ElementsComponents.CSSPropertyDocsView.CSSPropertyDocsView(cssProperty));
+        tooltip.onbeforetoggle = event => {
+          if ((event as ToggleEvent).newState !== 'open') {
+            return;
+          }
+          if (!Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover').get()) {
+            event.consume(true);
+            return;
+          }
+
+          tooltip.removeChildren();
+          tooltip.appendChild(new ElementsComponents.CSSPropertyDocsView.CSSPropertyDocsView(cssProperty));
+        };
         this.listItemElement.appendChild(tooltip);
       }
     }