Web Inspector: Improve auto completion typing performance by avoiding global forced...
authorjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 14 Sep 2019 00:50:27 +0000 (00:50 +0000)
committerjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 14 Sep 2019 00:50:27 +0000 (00:50 +0000)
https://bugs.webkit.org/show_bug.cgi?id=201735

Reviewed by Devin Rousso.

* UserInterface/Views/Main.css:
(#layout-measurement-container):
* UserInterface/Base/Main.js:
(WI.measureElement):
Provide a helper for measuring an element in a hidden container
that helps avoid more global layout.

* UserInterface/Views/CompletionSuggestionsView.js:
(WI.CompletionSuggestionsView.prototype.show):
Use measure element to avoid a global forced layout.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Base/Main.js
Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js
Source/WebInspectorUI/UserInterface/Views/Main.css

index 6e35efd..11ab158 100644 (file)
@@ -1,5 +1,23 @@
 2019-09-13  Joseph Pecoraro  <pecoraro@apple.com>
 
+        Web Inspector: Improve auto completion typing performance by avoiding global forced layouts
+        https://bugs.webkit.org/show_bug.cgi?id=201735
+
+        Reviewed by Devin Rousso.
+
+        * UserInterface/Views/Main.css:
+        (#layout-measurement-container):
+        * UserInterface/Base/Main.js:
+        (WI.measureElement):
+        Provide a helper for measuring an element in a hidden container
+        that helps avoid more global layout.
+
+        * UserInterface/Views/CompletionSuggestionsView.js:
+        (WI.CompletionSuggestionsView.prototype.show):
+        Use measure element to avoid a global forced layout.
+
+2019-09-13  Joseph Pecoraro  <pecoraro@apple.com>
+
         Web Inspector: Tighter autocomplete bubbles
         https://bugs.webkit.org/show_bug.cgi?id=201742
 
index f95c9cf..ee2c41c 100644 (file)
@@ -297,6 +297,9 @@ WI.contentLoaded = function()
     document.body.classList.add(WI.sharedApp.debuggableType);
     document.body.setAttribute("dir", WI.resolvedLayoutDirection());
 
+    WI.layoutMeasurementContainer = document.body.appendChild(document.createElement("div"));
+    WI.layoutMeasurementContainer.id = "layout-measurement-container";
+
     WI.settings.showJavaScriptTypeInformation.addEventListener(WI.Setting.Event.Changed, WI._showJavaScriptTypeInformationSettingChanged);
     WI.settings.enableControlFlowProfiler.addEventListener(WI.Setting.Event.Changed, WI._enableControlFlowProfilerSettingChanged);
     WI.settings.resourceCachingDisabled.addEventListener(WI.Setting.Event.Changed, WI._resourceCachingDisabledSettingChanged);
@@ -2783,6 +2786,14 @@ WI._resourceCachingDisabledSettingChanged = function(event)
     NetworkAgent.setResourceCachingDisabled(WI.settings.resourceCachingDisabled.value);
 };
 
+WI.measureElement = function(element)
+{
+    WI.layoutMeasurementContainer.appendChild(element.cloneNode(true));
+    let rect = WI.layoutMeasurementContainer.getBoundingClientRect();
+    WI.layoutMeasurementContainer.removeChildren();
+    return rect;
+};
+
 WI.elementDragStart = function(element, dividerDrag, elementDragEnd, event, cursor, eventTarget)
 {
     if (WI._elementDraggingEventListener || WI._elementEndDraggingEventListener)
index 1c3f1c2..8368329 100644 (file)
@@ -113,19 +113,11 @@ WI.CompletionSuggestionsView = class CompletionSuggestionsView extends WI.Object
 
     show(anchorBounds)
     {
-        let scrollTop = this._containerElement.scrollTop;
-
         // Measure the container so we can know the intrinsic size of the items.
-        this._containerElement.style.position = "absolute";
-        document.body.appendChild(this._containerElement);
-
-        let intrinsicSize = this._containerElement.getBoundingClientRect();
+        let intrinsicSize = WI.measureElement(this._containerElement);
         let containerWidth = Math.ceil(intrinsicSize.width);
         let containerHeight = Math.ceil(intrinsicSize.height);
 
-        this._containerElement.removeAttribute("style");
-        this._element.appendChild(this._containerElement);
-
         // Lay out the suggest-box relative to the anchorBounds.
         let margin = 10;
         let absoluteMaximumHeight = 160;
@@ -157,10 +149,8 @@ WI.CompletionSuggestionsView = class CompletionSuggestionsView extends WI.Object
         this._element.style.width = width + "px";
         this._element.style.height = height + "px";
 
-        document.body.appendChild(this._element);
-
-        if (scrollTop)
-            this._containerElement.scrollTop = scrollTop;
+        if (!this._element.parentNode)
+            document.body.appendChild(this._element);
     }
 
     hide()
index c6021e8..9f105f1 100644 (file)
@@ -175,6 +175,12 @@ body.docked:matches(.right, .left) #navigation-sidebar.collapsed > .resizer {
     height: 100%;
 }
 
+#layout-measurement-container {
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+}
+
 .message-text-view {
     display: flex;
     flex-direction: column;