DevTools: use measured scrollbar widths for GlassPane calculations

The GlassPane relies on an accurate scrollbar width to determine
correct popover dimensions. It used to hard code a number, but due
to overlay scrollbars, platform differences, and OS scrollbar size
settings, it could fail.

Screenshot: https://imgur.com/a/slnDX

Bug: 746861
Change-Id: I8d37ff1842ba201bf26cdf6de6596716c4eab092
Reviewed-on: https://chromium-review.googlesource.com/876656Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#530691}

third_party/WebKit/Source/devtools/front_end/ui/GlassPane.js

@@ -166,7 +166,7 @@ UI.GlassPane = class {
 
     var showArrow = this._marginBehavior === UI.GlassPane.MarginBehavior.Arrow;
     var gutterSize = showArrow ? 8 : (this._marginBehavior === UI.GlassPane.MarginBehavior.NoMargin ? 0 : 3);
-    var scrollbarSize = 15;
+    var scrollbarSize = UI.measuredScrollbarWidth(this.element.ownerDocument);
     var arrowSize = 10;
 
     var container = UI.GlassPane._containers.get(/** @type {!Document} */ (this.element.ownerDocument));

third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js

@@ -674,25 +674,28 @@ UI.installComponentRootStyles = function(element) {
   UI.themeSupport.injectCustomStyleSheets(element);
   element.classList.add('platform-' + Host.platform());
 
-  /**
-   * Detect overlay scrollbar enable by checking clientWidth and offsetWidth of
-   * overflow: scroll div.
-   * @param {?Document=} document
-   * @return {boolean}
-   */
-  function overlayScrollbarEnabled(document) {
-    var scrollDiv = document.createElement('div');
-    scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll;');
-    document.body.appendChild(scrollDiv);
-    var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-    document.body.removeChild(scrollDiv);
-    return scrollbarWidth === 0;
-  }
-
-  if (!Host.isMac() && overlayScrollbarEnabled(element.ownerDocument))
+  // Detect overlay scrollbar enable by checking for nonzero scrollbar width.
+  if (!Host.isMac() && UI.measuredScrollbarWidth(element.ownerDocument) === 0)
     element.classList.add('overlay-scrollbar-enabled');
 };
 
+/**
+ * @param {?Document} document
+ * @return {number}
+ */
+UI.measuredScrollbarWidth = function(document) {
+  if (typeof UI._measuredScrollbarWidth === 'number')
+    return UI._measuredScrollbarWidth;
+  if (!document)
+    return 16;
+  var scrollDiv = document.createElement('div');
+  scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll;');
+  document.body.appendChild(scrollDiv);
+  UI._measuredScrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  document.body.removeChild(scrollDiv);
+  return UI._measuredScrollbarWidth;
+};
+
 /**
  * @param {!Element} element
  * @param {string=} cssFile