Title: [227585] trunk/Source/WebInspectorUI
Revision
227585
Author
nvasil...@apple.com
Date
2018-01-24 16:15:39 -0800 (Wed, 24 Jan 2018)

Log Message

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.

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (227584 => 227585)


--- trunk/Source/WebInspectorUI/ChangeLog	2018-01-25 00:13:11 UTC (rev 227584)
+++ trunk/Source/WebInspectorUI/ChangeLog	2018-01-25 00:15:39 UTC (rev 227585)
@@ -1,3 +1,29 @@
+2018-01-24  Nikita Vasilyev  <nvasil...@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  <pecor...@apple.com>
 
         ReferenceError:​ Can't find variable:​ DOMAgent (at ScriptSyntaxTree.js:​178:​22)​

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (227584 => 227585)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js	2018-01-25 00:13:11 UTC (rev 227584)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js	2018-01-25 00:15:39 UTC (rev 227585)
@@ -74,7 +74,8 @@
         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 @@
     spreadsheetStylePropertyRemoved(propertyView)
     {
         this._propertyViews.remove(propertyView);
-        this.updateLayout();
+
+        for (let index = 0; index < this._propertyViews.length; index++)
+            this._propertyViews[index].index = index;
     }
 
     stylePropertyInlineSwatchActivated()

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (227584 => 227585)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js	2018-01-25 00:13:11 UTC (rev 227584)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js	2018-01-25 00:15:39 UTC (rev 227585)
@@ -25,7 +25,7 @@
 
 WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
 {
-    constructor(delegate, property, index)
+    constructor(delegate, property)
     {
         super();
 
@@ -34,7 +34,6 @@
         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 @@
     get valueTextField() { return this._valueTextField; }
     get enabled() { return this._property.enabled; }
 
+    set index(index)
+    {
+        this._element.dataset.propertyIndex = index;
+    }
+
     detached()
     {
         this._property.__propertyView = null;

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js (227584 => 227585)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js	2018-01-25 00:13:11 UTC (rev 227584)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js	2018-01-25 00:15:39 UTC (rev 227585)
@@ -365,8 +365,8 @@
             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;
         }
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to