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

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

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
@@ skipping 645 matching lines @@
     if (description === 'Promise.resolve')
       description = Common.UIString('Promise resolved');
     else if (description === 'Promise.reject')
       description = Common.UIString('Promise rejected');
     return description + ' ' + Common.UIString('(async)');
   }
   return Common.UIString('Async Call');
 };
 
 /**
+ * @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}
  */
 UI.createShadowRootWithCoreStyles = function(element, cssFile) {
   var shadowRoot = element.createShadowRoot();
   UI.appendStyle(shadowRoot, 'ui/inspectorCommon.css');
   UI.themeSupport.injectHighlightStyleSheets(shadowRoot);
   if (cssFile)
     UI.appendStyle(shadowRoot, cssFile);
@@ skipping 1336 matching lines @@
  */
 UI.createInlineButton = function(toolbarButton) {
   var element = createElement('span');
   var shadowRoot = UI.createShadowRootWithCoreStyles(element, 'ui/inlineButton.css');
   element.classList.add('inline-button');
   var toolbar = new UI.Toolbar('');
   toolbar.appendToolbarItem(toolbarButton);
   shadowRoot.appendChild(toolbar.element);
   return element;
 };