Made trashcan image black by adding new image and changing opacity

* Added cursor pointer abilities to the zoom buttons.
* Blacked out zoom buttons.
* Changed the opacity of the trashcan to make it black.
* Shifted positioning of zoom elements to eliminate small mishaps.

core/css.js

@@ -535,15 +535,15 @@ Blockly.Css.CONTENT = [
   '}',
 
   '.blocklyZoom>image {',
-    'opacity: .4;',
+    'opacity: 0.9;',
   '}',
 
   '.blocklyZoom>image:hover {',
-    'opacity: .6;',
+    'opacity: 1;',
   '}',
 
   '.blocklyZoom>image:active {',
-    'opacity: .8;',
+    'opacity: 1;',
   '}',
 
   /* Darken flyout scrollbars due to being on a grey background. */

core/trashcan.js

@@ -304,7 +304,7 @@ Blockly.Trashcan.prototype.animateLid_ = function() {
       (this.workspace_.RTL ? -lidAngle : lidAngle) + ',' +
       (this.workspace_.RTL ? 4 : this.WIDTH_ - 4) + ',' +
       (this.LID_HEIGHT_ - 2) + ')');
-  var opacity = goog.math.lerp(0.4, 0.8, this.lidOpen_);
+  var opacity = goog.math.lerp(0.9, 1.0, this.lidOpen_);
   this.svgGroup_.style.opacity = opacity;
   if (this.lidOpen_ > 0 && this.lidOpen_ < 1) {
     this.lidTask_ = goog.Timer.callOnce(this.animateLid_, 20, this);

core/zoom_controls.js

@@ -131,6 +131,7 @@ Blockly.ZoomControls.prototype.createDom = function() {
       this.svgGroup_);
   zoomoutSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
       workspace.options.pathToMedia + Blockly.SPRITE.url);
+  zoomoutSvg.setAttribute('class', 'blocklyZoomButton');
 
   var clip = Blockly.utils.createSvgElement('clipPath',
       {'id': 'blocklyZoominClipPath' + rnd},
@@ -142,11 +143,12 @@ Blockly.ZoomControls.prototype.createDom = function() {
       {'width': Blockly.SPRITE.width,
        'height': Blockly.SPRITE.height,
        'x': -32,
-       'y': -49,
+       'y': -49.5,
        'clip-path': 'url(#blocklyZoominClipPath' + rnd + ')'},
       this.svgGroup_);
   zoominSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
       workspace.options.pathToMedia + Blockly.SPRITE.url);
+  zoominSvg.setAttribute('class', 'blocklyZoomButton');
 
   var clip = Blockly.utils.createSvgElement('clipPath',
       {'id': 'blocklyZoomresetClipPath' + rnd},
@@ -156,11 +158,12 @@ Blockly.ZoomControls.prototype.createDom = function() {
       clip);
   var zoomresetSvg = Blockly.utils.createSvgElement('image',
       {'width': Blockly.SPRITE.width,
-       'height': Blockly.SPRITE.height, 'y': -92,
+       'height': Blockly.SPRITE.height, 'x': 1, 'y': -93,
        'clip-path': 'url(#blocklyZoomresetClipPath' + rnd + ')'},
       this.svgGroup_);
   zoomresetSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
       workspace.options.pathToMedia + Blockly.SPRITE.url);
+  zoomresetSvg.setAttribute('class', 'blocklyZoomButton');
 
   // Attach event listeners.
   Blockly.bindEventWithChecks_(zoomresetSvg, 'mousedown', null, function(e) {