Force non overlay scrollbar in Devtools/Performance for Aura Overlay Scrollbar

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

Index: third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js b/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
index d952835790792d5407b3e3abc269ce4a9fd56e7b..0b9c84ba9825209c03a5e1469e7d58bd941b6ff9 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
@@ -663,15 +663,37 @@ UI.asyncStackTraceLabel = function(description) {
 };
 
 /**
+ * @param {!Document} document
  * @param {!Element} element
  */
-UI.installComponentRootStyles = function(element) {
+UI.installComponentRootStyles = function(document, element) {
   UI.appendStyle(element, 'ui/inspectorCommon.css');
   UI.themeSupport.injectHighlightStyleSheets(element);
   element.classList.add('platform-' + Host.platform());
+
+  if (!Host.isMac() && overlayScrollbarEnabled(document))

[alph, 2017/05/22 18:50:08]

Can we do it for Mac as well, because on it is possible to get non-overlay
scrollbars there as well.

[chaopeng, 2017/05/23 17:26:40]

No, for aura-overlay-scrollbar, we must restart chrome to apply the style
change. For mac, we can just change the scrollbar style on system settings then
refresh the page to apply. The scrollbar will disappear when user already open
devtools then change setting. It need reopen devtools to show the scrollbar.

+    element.classList.add('overlay-scrollbar-enabled');
 };
 
 /**
+ * Detect overlay scrollbar enable by checking clientWidth and offsetWidth of
+ * overflow: scroll div.
+ * @param {!Document} document
+ * @return {boolean}
+ */
+function overlayScrollbarEnabled(document) {

[alph, 2017/05/22 18:50:08]

Please move the function inside the UI.installComponentRootStyles to not pollute
the global namespace.

+  let scrollDiv = document.createElement('div');

[alph, 2017/05/22 18:50:08]

We do not use 'let' in DevTools yet.

+  scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll;');
+  document.body.appendChild(scrollDiv);
+
+  let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+

[alph, 2017/05/22 18:50:09]

please remove extra empty lines.

+  document.body.removeChild(scrollDiv);
+
+  return scrollbarWidth === 0;
+}
+
+/**
  * @param {!Element} element
  * @param {string=} cssFile
  * @return {!DocumentFragment}