Add ability to add a class to a scrollbar so that different types of … (#837)

* 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

@@ -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 {',

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();
 

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_);

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}
    */