From 8aa8b1b3ba73c9819b076379aad8879a9cccfcaa Mon Sep 17 00:00:00 2001
From: picklesrus <picklesrus@users.noreply.github.com>
Date: Wed, 18 Jan 2017 13:02:08 -0800
Subject: [PATCH] =?UTF-8?q?Add=20ability=20to=20add=20a=20class=20to=20a?=
 =?UTF-8?q?=20scrollbar=20so=20that=20different=20types=20of=20=E2=80=A6?=
 =?UTF-8?q?=20(#837)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add ability to add a class to a scrollbar so that different types of scrollbars can
be distinguished from each other. You used to be able to do this by looking at the parent
element but now all the scrollbars are siblings in the dom.

Also, use this new class to fix #816 so that layering of the flyout and workspace scrollbars
are done correctly.
---
 core/css.js           |  9 ++++++++-
 core/flyout.js        |  2 +-
 core/scrollbar.js     | 19 +++++++++++++------
 core/workspace_svg.js |  1 -
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/core/css.js b/core/css.js
index c8b69a3eb..95c93bf72 100644
--- a/core/css.js
+++ b/core/css.js
@@ -386,10 +386,17 @@ Blockly.Css.CONTENT = [
     'fill-opacity: .8;',
   '}',
 
+  '.blocklyMainWorkspaceScrollbar {',
+    'z-index: 20;',
+  '}',
+
+  '.blocklyFlyoutScrollbar {',
+    'z-index: 30;',
+  '}',
+  
   '.blocklyScrollbarHorizontal, .blocklyScrollbarVertical {',
     'position: absolute;',
     'outline: none;',
-    'z-index: 30;',
   '}',
 
   '.blocklyScrollbarBackground {',
diff --git a/core/flyout.js b/core/flyout.js
index 9b14fe215..0a17a02c2 100644
--- a/core/flyout.js
+++ b/core/flyout.js
@@ -308,7 +308,7 @@ Blockly.Flyout.prototype.init = function(targetWorkspace) {
   this.workspace_.targetWorkspace = targetWorkspace;
   // Add scrollbar.
   this.scrollbar_ = new Blockly.Scrollbar(this.workspace_,
-      this.horizontalLayout_, false);
+      this.horizontalLayout_, false, 'blocklyFlyoutScrollbar');
 
   this.hide();
 
diff --git a/core/scrollbar.js b/core/scrollbar.js
index fecc42d26..318273bd8 100644
--- a/core/scrollbar.js
+++ b/core/scrollbar.js
@@ -38,8 +38,10 @@ goog.require('goog.events');
  */
 Blockly.ScrollbarPair = function(workspace) {
   this.workspace_ = workspace;
-  this.hScroll = new Blockly.Scrollbar(workspace, true, true);
-  this.vScroll = new Blockly.Scrollbar(workspace, false, true);
+  this.hScroll = new Blockly.Scrollbar(workspace, true, true,
+    'blocklyMainWorkspaceScrollbar');
+  this.vScroll = new Blockly.Scrollbar(workspace, false, true,
+    'blocklyMainWorkspaceScrollbar');
   this.corner_ = Blockly.utils.createSvgElement('rect',
       {'height': Blockly.Scrollbar.scrollbarThickness,
       'width': Blockly.Scrollbar.scrollbarThickness,
@@ -182,15 +184,16 @@ Blockly.ScrollbarPair.prototype.getRatio_ = function(handlePosition, viewSize) {
  * @param {!Blockly.Workspace} workspace Workspace to bind the scrollbar to.
  * @param {boolean} horizontal True if horizontal, false if vertical.
  * @param {boolean=} opt_pair True if scrollbar is part of a horiz/vert pair.
+ * @param {string} opt_class A class to be applied to this scrollbar.
  * @constructor
  */
-Blockly.Scrollbar = function(workspace, horizontal, opt_pair) {
+Blockly.Scrollbar = function(workspace, horizontal, opt_pair, opt_class) {
   this.workspace_ = workspace;
   this.pair_ = opt_pair || false;
   this.horizontal_ = horizontal;
   this.oldHostMetrics_ = null;
 
-  this.createDom_();
+  this.createDom_(opt_class);
 
   /**
    * The upper left corner of the scrollbar's svg group.
@@ -565,11 +568,12 @@ Blockly.Scrollbar.prototype.resizeContentVertical = function(hostMetrics) {
 /**
  * Create all the DOM elements required for a scrollbar.
  * The resulting widget is not sized.
+ * @param {string} opt_class A class to be applied to this scrollbar.
  * @private
  */
-Blockly.Scrollbar.prototype.createDom_ = function() {
+Blockly.Scrollbar.prototype.createDom_ = function(opt_class) {
   /* Create the following DOM:
-  <svg class="blocklyScrollbarHorizontal">
+  <svg class="blocklyScrollbarHorizontal  optionalClass">
     <g>
       <rect class="blocklyScrollbarBackground" />
       <rect class="blocklyScrollbarHandle" rx="8" ry="8" />
@@ -578,6 +582,9 @@ Blockly.Scrollbar.prototype.createDom_ = function() {
   */
   var className = 'blocklyScrollbar' +
       (this.horizontal_ ? 'Horizontal' : 'Vertical');
+  if (opt_class) {
+    className += ' ' + opt_class;
+  }
   this.outerSvg_ = Blockly.utils.createSvgElement('svg', {'class': className},
                                                   null);
   this.svgGroup_ = Blockly.utils.createSvgElement('g', {}, this.outerSvg_);
diff --git a/core/workspace_svg.js b/core/workspace_svg.js
index 0a34139a4..38a7e747d 100644
--- a/core/workspace_svg.js
+++ b/core/workspace_svg.js
@@ -320,7 +320,6 @@ Blockly.WorkspaceSvg.prototype.createDom = function(opt_backgroundClass) {
    *   [Trashcan and/or flyout may go here]
    *   <g class="blocklyBlockCanvas"></g>
    *   <g class="blocklyBubbleCanvas"></g>
-   *   [Scrollbars may go here]
    * </g>
    * @type {SVGElement}
    */