Web Inspector: Styles: completion popover doesn't hide when switching panels
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 7 Feb 2018 19:01:16 +0000 (19:01 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 7 Feb 2018 19:01:16 +0000 (19:01 +0000)
https://bugs.webkit.org/show_bug.cgi?id=182464
<rdar://problem/37202763>

Reviewed by Timothy Hatcher.

Hide completion popover by triggering blur event on the focused text field.
Removing text fields from the DOM tree would hide the completion popovers as well,
but switching sidebar panels doesn't remove them from the DOM.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.hidden):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.hidden):
* UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.hidden):
* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype.hidden):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@228232 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

index 8ee8224..a24cd06 100644 (file)
@@ -1,3 +1,24 @@
+2018-02-07  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles: completion popover doesn't hide when switching panels
+        https://bugs.webkit.org/show_bug.cgi?id=182464
+        <rdar://problem/37202763>
+
+        Reviewed by Timothy Hatcher.
+
+        Hide completion popover by triggering blur event on the focused text field.
+        Removing text fields from the DOM tree would hide the completion popovers as well,
+        but switching sidebar panels doesn't remove them from the DOM.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.hidden):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.hidden):
+        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
+        (WI.SpreadsheetRulesStyleDetailsPanel.prototype.hidden):
+        * UserInterface/Views/SpreadsheetStyleProperty.js:
+        (WI.SpreadsheetStyleProperty.prototype.hidden):
+
 2018-02-06  Devin Rousso  <webkit@devinrousso.com>
 
         Web Inspector: Replace isAncestor and isDescendant with native DOM contains method
index 57256d7..b5c7f0f 100644 (file)
@@ -105,6 +105,12 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
             propertyView.detached();
     }
 
+    hidden()
+    {
+        for (let propertyView of this._propertyViews)
+            propertyView.hidden();
+    }
+
     get style()
     {
         return this._style;
index 660c33c..623ac23 100644 (file)
@@ -119,6 +119,11 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
             this.startEditingRuleSelector();
     }
 
+    hidden()
+    {
+        this._propertiesEditor.hidden();
+    }
+
     startEditingRuleSelector()
     {
         if (!this._selectorElement) {
index 43c69c7..f62f3cb 100644 (file)
@@ -147,6 +147,14 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
         super.refresh(significantChange);
     }
 
+    hidden()
+    {
+        for (let section of this._sections)
+            section.hidden();
+
+        super.hidden();
+    }
+
     scrollToSectionAndHighlightProperty(property)
     {
         if (!this._visible) {
index 9b745f9..0e90f1b 100644 (file)
@@ -74,6 +74,14 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
             this._valueTextField.detached();
     }
 
+    hidden()
+    {
+        if (this._nameTextField && this._nameTextField.editing)
+            this._nameTextField.element.blur();
+        else if (this._valueTextField && this._valueTextField.editing)
+            this._valueTextField.element.blur();
+    }
+
     highlight()
     {
         this._element.classList.add("highlighted");