Render sprites from vectors. Remove blurry shadow from trash.

core/blockly.js

@@ -86,7 +86,7 @@ Blockly.HSV_VALUE = 0.65;
  * Sprited icons and images.
  */
 Blockly.SPRITE = {
-  width: 64,
+  width: 84,
   height: 92,
   url: 'sprites.png'
 };

core/inject.js

@@ -243,25 +243,6 @@ Blockly.createDom_ = function(container) {
   Blockly.createSvgElement('feComposite',
       {'in': 'SourceGraphic', 'in2': 'specOut', 'operator': 'arithmetic',
       'k1': 0, 'k2': 1, 'k3': 1, 'k4': 0}, filter);
-  /*
-    <filter id="blocklyTrashcanShadowFilter">
-      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
-      <feOffset in="blur" dx="1" dy="1" result="offsetBlur"/>
-      <feMerge>
-        <feMergeNode in="offsetBlur"/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
-    </filter>
-  */
-  filter = Blockly.createSvgElement('filter',
-      {'id': 'blocklyTrashcanShadowFilter'}, defs);
-  Blockly.createSvgElement('feGaussianBlur',
-      {'in': 'SourceAlpha', 'stdDeviation': 2, 'result': 'blur'}, filter);
-  Blockly.createSvgElement('feOffset',
-      {'in': 'blur', 'dx': 1, 'dy': 1, 'result': 'offsetBlur'}, filter);
-  feMerge = Blockly.createSvgElement('feMerge', {}, filter);
-  Blockly.createSvgElement('feMergeNode', {'in': 'offsetBlur'}, feMerge);
-  Blockly.createSvgElement('feMergeNode', {'in': 'SourceGraphic'}, feMerge);
   /*
     <filter id="blocklyShadowFilter">
       <feGaussianBlur stdDeviation="2"/>

core/trashcan.js

@@ -151,7 +151,7 @@ Blockly.Trashcan.prototype.top_ = 0;
  */
 Blockly.Trashcan.prototype.createDom = function() {
   /*
-  <g filter="url(#blocklyTrashcanShadowFilter)">
+  <g>
     <clippath id="blocklyTrashBodyClipPath">
       <rect width="47" height="45" y="15"></rect>
     </clippath>
@@ -160,8 +160,7 @@ Blockly.Trashcan.prototype.createDom = function() {
     <image width="47" height="15" href="media/trashlid.png"></image>
   </g>
   */
-  this.svgGroup_ = Blockly.createSvgElement('g',
-      {'filter': 'url(#blocklyTrashcanShadowFilter)'}, null);
+  this.svgGroup_ = Blockly.createSvgElement('g', {}, null);
 
   var clip = Blockly.createSvgElement('clipPath',
       {'id': 'blocklyTrashBodyClipPath'},
@@ -278,7 +277,7 @@ Blockly.Trashcan.prototype.animateLid_ = function() {
       (Blockly.RTL ? -lidAngle : lidAngle) + ', ' +
       (Blockly.RTL ? 4 : this.WIDTH_ - 4) + ', ' +
       (this.LID_HEIGHT_ - 2) + ')');
-  var opacity = goog.math.lerp(0.2, 0.4, this.lidOpen_);
+  var opacity = goog.math.lerp(0.4, 0.8, this.lidOpen_);
   this.svgGroup_.style.opacity = opacity;
   if (this.lidOpen_ > 0 && this.lidOpen_ < 1) {
     this.lidTask_ = goog.Timer.callOnce(this.animateLid_, 20, this);

media/sprites.svg

@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="utf-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="84px" height="92px">
+  <style type="text/css">
+#background {
+  fill: none;
+}
+.shield {
+  fill: #00c;
+  stroke: #ccc;
+  stroke-width: 1px;
+}
+.mark {
+  fill: #ccc;
+  font-family: sans-serif;
+  font-size: 9pt;
+  font-weight: bold;
+  text-anchor: middle;
+}
+.hovered .shield {
+  fill: #00f;
+  stroke: #fff;
+}
+.hovered .mark {
+  fill: #fff;
+}
+.mutator .mark {
+  font-size: 14pt;
+}
+.arrows {
+  fill: #000;
+  stroke: none;
+}
+.selected .arrows {
+  fill: #fff;
+}
+.checkmark {
+  fill: #000;
+  font-family: sans-serif;
+  font-size: 10pt;
+  text-anchor: middle;
+}
+.trash {
+  fill: #888;
+}
+  </style>
+  <rect id="background" width="84" height="92" x="0" y="0" />
+
+  <g transform="translate(47.5, 35.5)">
+    <g class="comment" transform="translate(0, 0)">
+      <circle class="shield" r="8" cx="8" cy="8" />
+      <text class="mark" x="8" y="12.75">?</text>
+    </g>
+    <g class="comment hovered" transform="translate(20, 0)">
+      <circle class="shield" r="8" cx="8" cy="8" />
+      <text class="mark" x="8" y="12.75">?</text>
+    </g>
+    <g class="warning" transform="translate(0, 20)">
+      <path class="shield" d="M 2,15 Q -1,15 0.5,12 L 6.5,1.7 Q 8,-1 9.5,1.7 L 15.5,12 Q 17,15 14,15 z" />
+      <text class="mark" x="8" y="13">!</text>
+    </g>
+    <g class="warning hovered" transform="translate(20, 20)">
+      <path class="shield" d="M 2,15 Q -1,15 0.5,12 L 6.5,1.7 Q 8,-1 9.5,1.7 L 15.5,12 Q 17,15 14,15 z" />
+      <text class="mark" x="8" y="13">!</text>
+    </g>
+    <g class="mutator" transform="translate(0, 40)">
+      <rect class="shield" width="16" height="16" rx="4" ry="4" />
+      <text class="mark" x="8" y="13.5">&#9881;</text>
+    </g>
+    <g class="mutator hovered" transform="translate(20, 40)">
+      <rect class="shield" width="16" height="16" rx="4" ry="4" />
+      <text class="mark" x="8" y="13.5">&#9881;</text>
+    </g>
+  </g>
+
+  <g>
+    <path class="arrows" d="M 13,1.5 13,14.5 1.74,8 z" />
+    <path class="arrows" d="M 17.5,3 30.5,3 24,14.26 z" />
+    <path class="arrows" d="M 35,1.5 35,14.5 46.26,8 z" />
+  </g>
+  <g class="selected" transform="translate(0, 16)">
+    <path class="arrows" d="M 13,1.5 13,14.5 1.74,8 z" />
+    <path class="arrows" d="M 17.5,3 30.5,3 24,14.26 z" />
+    <path class="arrows" d="M 35,1.5 35,14.5 46.26,8 z" />
+  </g>
+
+  <text class="checkmark" x="55.5" y="28">&#10003;</text>
+
+  <g class="trash">
+    <path d="M 2,41 v 6 h 42 v -6 h -10.5 l -3,-3 h -15 l -3,3 z" />
+    <rect width="36" height="20" x="5" y="50" />
+    <rect width="36" height="42" x="5" y="50" rx="4" ry="4" />
+  </g>
+</svg>