From 3e12c1ea5e53a6b7dbc7e1ec2c15cfc84f0c16e8 Mon Sep 17 00:00:00 2001
From: Neil Fraser <fraser@google.com>
Date: Mon, 23 Mar 2015 23:55:13 -0700
Subject: [PATCH] Render sprites from vectors.  Remove blurry shadow from
 trash.

---
 core/blockly.js   |   2 +-
 core/inject.js    |  19 ----------
 core/trashcan.js  |   7 ++--
 media/sprites.png | Bin 1044 -> 4498 bytes
 media/sprites.svg |  93 ++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 97 insertions(+), 24 deletions(-)
 create mode 100644 media/sprites.svg

diff --git a/core/blockly.js b/core/blockly.js
index 3d5e89d64..e31fed091 100644
--- a/core/blockly.js
+++ b/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'
 };
diff --git a/core/inject.js b/core/inject.js
index c201ad0d6..ee3afebb8 100644
--- a/core/inject.js
+++ b/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"/>
diff --git a/core/trashcan.js b/core/trashcan.js
index dbc3f46c3..4b88fedfa 100644
--- a/core/trashcan.js
+++ b/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);
diff --git a/media/sprites.png b/media/sprites.png
index 6e1f4d2b96ddfb31d73f56bc8ed6a6354f6666f5..bb5ceeed0ff3d3cf5658df6c32634530c25004a0 100644
GIT binary patch
literal 4498
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

literal 1044
zcmeAS@N?(olHy`uVBq!ia0vp^4nQ2k!3HGn)o!)}Qfx`y?k)`fL2$v|<&%LToCO|{
z#S9GG!XV7ZFl&wkP>{XE)7O>#9=8}XCyUW){Ur<x%nLnT978H@y`6o&OUhB;*#3(X
z6n1tlf1z0MMQvZh_q{(Ew0|(zwe4%H@Z#gF5c~E{xuwOnGD@W>!LLo=P|MGvm96J4
zT)zC)>YPqA>)}(kOk=;k{&o4T!U7=`!3M|1_wP^2Or0#%px404AZEeOc!puiYL-RJ
z30w*KY{#Y<GC$t^#rd&k&-uMP3@jU14Hz$IUH)j*5X~@qig2M@mQK*)9KXvEskgb7
zAHT;aG4<gefdf(pPCoLOv+%O%B9+318(tlU1sRw96Fk7>@L#IWoKc5SMn+r0`qhyu
z%3NxFfBat0sIq1#X6RkibtfXs;3VgLi{)`SI=earFRh)UG{fS7s*t1kbgfCI$&ch2
z>MBEChWEYS&-{bq!E%Wo85Jt;|0~pQezLwjIiEF2F?Nw+;<n-zCEKp&w}dRU`+vs9
zK2~^nbB~+ui|&KRd6H|oUMNo8|CfQ`S&TZPmCj=69+mvds~;(QD_1?6XZ4cfhKKgL
z={w~!JfGfUb2*UgezQAHS>QmNmDh5w^oDIY2~OJ%C9k}p82zyIjb>J;Ezeh`-98>$
z<wCw1ELp_Vkm6Dl@Zfi~%3>|6IOUtFI~7hcJy$#_d9p0kVZxgUb0*#CZrqr9=D|nn
z)5%^*HSbax6i(`%<UAQRv+ug+y-9bL%;_)=N_O0>GVTA_9PJ#*YWJd$w$IL!vL~r`
zD;Ku;UGJE5gfYo`(_4?mE&nDy>3S0Up83V&ipftVJvq3sY2#u)AKOI<lcwGmlMT*y
zFY?<|xa{*8?V{w!gDUDZkLOfv-1tJx&0~8}SHh!)=^iY1ExJ@>r|TTO$L<n1rCMIV
z^`hxJ=8Q(cpGzE^59K`PaIF$Kzg4v;Oz!jUUB?_RZGI{FZr^wDFy~)E6@6yOHr>#G
zT=p0kkT%NCe_qKmn6&3_eyC09bhj^OY)dZ*ZkQMrqrc=;wba!~r}lpBWmvrUjq7?r
zjs$(#rBdG+H(ks;&DO?Pl|0Fu@v)}#D!r4h?y_@q#2xq%bz)xJwkuWgA13wR4xhjI
z+ogrt46F+l6|LLD{$WDlj}Mh{Ph|Bk{Y>Y57<4Y2$*JVy<;$hH*Yp-Jh%_(-FlcFM
ziQf<TF!RPr*8oNhphk!=mjel$0<i{r(M=!AB^lmnvpm?x!!RF61xrre$M}JF`tQ&a
rJI{+VtUs-EpY6lel;`(F-#)STT_(n?w{#aMn=^R2`njxgN@xNA(}BXJ

diff --git a/media/sprites.svg b/media/sprites.svg
new file mode 100644
index 000000000..63e55bab8
--- /dev/null
+++ b/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>