REGRESSION (r226994): Web Inspector: Styles: Suggestions popover floats in top-left...
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 25 Jan 2018 00:15:39 +0000 (00:15 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 25 Jan 2018 00:15:39 +0000 (00:15 +0000)
https://bugs.webkit.org/show_bug.cgi?id=182027

Reviewed by Matt Baker.

r226994 added a layout of all properties on property removal. Layout caused
a property element to be removed from DOM right before dislaying the suggestion
popover, resulting in the popover being displayed at the top left corner.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyRemoved):
Only update property view indices when a property is removed.

* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty):
(WI.SpreadsheetStyleProperty.prototype.set index):

* UserInterface/Views/SpreadsheetTextField.js:
(WI.SpreadsheetTextField.prototype._updateCompletions):
Checking this._element.parentNode to see if the element is attached to the DOM tree is unreliable,
since the element may have a non-null parent node that is detached from the DOM tree. To fix that,
we could traverse element's ancestors, but I used a concise isConnected property instead.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js

index f6fe38e..8a02d29 100644 (file)
@@ -1,3 +1,29 @@
+2018-01-24  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        REGRESSION (r226994): Web Inspector: Styles: Suggestions popover floats in top-left corner of Web Inspector after tabbing
+        https://bugs.webkit.org/show_bug.cgi?id=182027
+
+        Reviewed by Matt Baker.
+
+        r226994 added a layout of all properties on property removal. Layout caused
+        a property element to be removed from DOM right before dislaying the suggestion
+        popover, resulting in the popover being displayed at the top left corner.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.layout):
+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype.spreadsheetStylePropertyRemoved):
+        Only update property view indices when a property is removed.
+
+        * UserInterface/Views/SpreadsheetStyleProperty.js:
+        (WI.SpreadsheetStyleProperty):
+        (WI.SpreadsheetStyleProperty.prototype.set index):
+
+        * UserInterface/Views/SpreadsheetTextField.js:
+        (WI.SpreadsheetTextField.prototype._updateCompletions):
+        Checking this._element.parentNode to see if the element is attached to the DOM tree is unreliable,
+        since the element may have a non-null parent node that is detached from the DOM tree. To fix that,
+        we could traverse element's ancestors, but I used a concise isConnected property instead.
+
 2018-01-24  Joseph Pecoraro  <pecoraro@apple.com>
 
         ReferenceError:​ Can't find variable:​ DOMAgent (at ScriptSyntaxTree.js:​178:​22)​
index 48bcbfa..4c7e571 100644 (file)
@@ -74,7 +74,8 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
         let propertyViewPendingStartEditing = null;
         for (let index = 0; index < properties.length; index++) {
             let property = properties[index];
-            let propertyView = new WI.SpreadsheetStyleProperty(this, property, index);
+            let propertyView = new WI.SpreadsheetStyleProperty(this, property);
+            propertyView.index = index;
             this.element.append(propertyView.element);
             this._propertyViews.push(propertyView);
 
@@ -256,7 +257,9 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
     spreadsheetStylePropertyRemoved(propertyView)
     {
         this._propertyViews.remove(propertyView);
-        this.updateLayout();
+
+        for (let index = 0; index < this._propertyViews.length; index++)
+            this._propertyViews[index].index = index;
     }
 
     stylePropertyInlineSwatchActivated()
index 09f8c83..a3c5a83 100644 (file)
@@ -25,7 +25,7 @@
 
 WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
 {
-    constructor(delegate, property, index)
+    constructor(delegate, property)
     {
         super();
 
@@ -34,7 +34,6 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
         this._delegate = delegate || null;
         this._property = property;
         this._element = document.createElement("div");
-        this._element.dataset.propertyIndex = index;
 
         this._contentElement = null;
         this._nameElement = null;
@@ -59,6 +58,11 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
     get valueTextField() { return this._valueTextField; }
     get enabled() { return this._property.enabled; }
 
+    set index(index)
+    {
+        this._element.dataset.propertyIndex = index;
+    }
+
     detached()
     {
         this._property.__propertyView = null;
index 74ed775..ea15e10 100644 (file)
@@ -365,8 +365,8 @@ WI.SpreadsheetTextField = class SpreadsheetTextField
             return;
         }
 
-        console.assert(this._element.parentNode, "_updateCompletions got called after SpreadsheetTextField was removed from the DOM");
-        if (!this._element.parentNode) {
+        console.assert(this._element.isConnected, "SpreadsheetTextField already removed from the DOM.");
+        if (!this._element.isConnected) {
             this._suggestionsView.hide();
             return;
         }