Vectorize icons.

core/comment.js

@@ -43,12 +43,6 @@ Blockly.Comment = function(block) {
 };
 goog.inherits(Blockly.Comment, Blockly.Icon);
 
-/**
- * Icon in base64 format.
- * @private
- */
-Blockly.Comment.prototype.png_ = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAANyAAADcgBffIlqAAAAAd0SU1FB98DGgAnBf0Xj5sAAAIBSURBVDjLjZO9SxxRFMXPrFkWl2UFYSOIRtF210YtAiH/gGATRNZFgo19IBaB9Ipgk3SiEoKQgI19JIVgGaOIgpWJEAV1kZk3b1ad0V+KRYIzk5ALh1ecc88978tRSgHPg0Bjvq/BbFalMNR5oaBv+bzWHMfZjOudWPOg6+pDva6elRXlt7fVcnYmPX4sDQ3pdmpKQXu7frS16aXjON8T06OIMWOwtRp3jgNSEpkMTE5y5/v4UcSLePxnroutVNKb4xgYANfFAk/vDbLG8Gtk5P8M7jE6CsZwDDwSMLm5iYmLlpbg4ABOTmBjA4aHk0ZbWxigposLvlarScH5OSwvw9oaABwdJTW1GtTrfJHnUe/uTgqKxeZaKEAUgTEQP/CeHvA8LhRFhLlc+r6zWVhfbyaZn0/yuRxEEaGCAK9USjdZWGgarK5CS0uS7+gAa3EzjYaOy2WlludJi4vSzIx0e5vky2Xp6ko/M4WCPleruk4zsVa6vJSur9OHTEzoqljUJwEdQYDf25uMe3jY3E5fX5Lr7wdr8YGSJCkIeL23h9/a+lA4Pg7T039u6h75POzv4wcBrx5Ec11Wd3bwOzv//VK7umB3F991+Zj2/R1reWstdnaWm3L5YXOlAnNz3FiLbTR4Azj6WwFPjOG953EahoT1On4YEnoep8bwDuiO9/wG1sM4kG8A4fUAAAAASUVORK5CYII=';
-
 /**
  * Comment text (if bubble is not visible).
  * @private
@@ -67,6 +61,30 @@ Blockly.Comment.prototype.width_ = 160;
  */
 Blockly.Comment.prototype.height_ = 80;
 
+/**
+ * Draw the comment icon.
+ * @param {!Element} group The icon group.
+ * @private
+ */
+Blockly.Comment.prototype.drawIcon_ = function(group) {
+  // Circle.
+  Blockly.createSvgElement('circle',
+      {'class': 'blocklyIconShape', 'r': '8', 'cx': '8', 'cy': '8'},
+       group);
+  // Can't use a real '?' text character since different browsers and operating
+  // systems render it differently.
+  // Body of question mark.
+  Blockly.createSvgElement('path',
+      {'class': 'blocklyIconSymbol',
+       'd': 'm6.8,10h2c0.003,-0.617 0.271,-0.962 0.633,-1.266 2.875,-2.405 0.607,-5.534 -3.765,-3.874v1.7c3.12,-1.657 3.698,0.118 2.336,1.25 -1.201,0.998 -1.201,1.528 -1.204,2.19z'},
+       group);
+  // Dot of question point.
+  Blockly.createSvgElement('rect',
+      {'class': 'blocklyIconSymbol',
+       'x': '6.8', 'y': '10.78', 'height': '2', 'width': '2'},
+       group);
+};
+
 /**
  * Create the editor for the comment's bubble.
  * @return {!Element} The top-level node of the editor.

core/css.js

@@ -272,6 +272,16 @@ Blockly.Css.CONTENT = [
     'opacity: .6;',
   '}',
 
+  '.blocklyIconShape {',
+    'fill: #00f;',
+    'stroke: #fff;',
+    'stroke-width: 1px;',
+  '}',
+
+  '.blocklyIconSymbol {',
+    'fill: #fff;',
+  '}',
+
   '.blocklyMinimalBody {',
     'margin: 0;',
     'padding: 0;',

core/icon.js

@@ -48,12 +48,6 @@ Blockly.Icon.prototype.collapseHidden = true;
  */
 Blockly.Icon.prototype.SIZE = 17;
 
-/**
- * Icon in base64 format.
- * @private
- */
-Blockly.Icon.prototype.png_ = '';
-
 /**
  * Bubble UI (if visible).
  * @type {Blockly.Bubble}
@@ -83,16 +77,12 @@ Blockly.Icon.prototype.createIcon = function() {
   }
   /* Here's the markup that will be generated:
   <g class="blocklyIconGroup">
-    <image width="17" height="17"
-     xlink:href="data:image/png;base64,iVBOR..."></image>
+    ...
   </g>
   */
   this.iconGroup_ = Blockly.createSvgElement('g',
       {'class': 'blocklyIconGroup'}, null);
-  var img = Blockly.createSvgElement('image',
-      {'width': this.SIZE, 'height': this.SIZE},
-      this.iconGroup_);
-  img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', this.png_);
+  this.drawIcon_(this.iconGroup_);
 
   this.block_.getSvgRoot().appendChild(this.iconGroup_);
   Blockly.bindEvent_(this.iconGroup_, 'mouseup', this, this.iconClick_);

core/mutator.js

@@ -46,12 +46,6 @@ Blockly.Mutator = function(quarkNames) {
 };
 goog.inherits(Blockly.Mutator, Blockly.Icon);
 
-/**
- * Icon in base64 format.
- * @private
- */
-Blockly.Mutator.prototype.png_ = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAANyAAADcgBffIlqAAAAAd0SU1FB98DGhULOIajyb8AAAHMSURBVDjLnZS9SiRBFIXP/CQ9iIHgPoGBTo8vIAaivoKaKJr6DLuxYqKYKIqRgSCMrblmIxqsICgOmAriziIiRXWjYPdnUDvT2+PMsOyBoop7qk71vedWS5KAkrWsGUMjSYjpgSQhNoZGFLEKeGoKGMNttUpULkOhAFL3USiA70MQEBnDDeDJWtaqVaJeB7uNICAKQ1ZkDI1yufOm+XnY2YHl5c6874MxPClJiDulkMvBxYWrw/095POdU0sS4hxALqcWtreloSGpVJLGxtL49bX0+Ci9vUkzM2kcXGFbypUKxHHLBXZ3YW4ONjfh4yN1aGIiPQOQEenrg6MjR+zvZz99Y8PFT09hYCArktdfsFY6PHTr83NlUKu5+eREennJchmR/n5pYcGtJyezG6em3Dw7Kw0OZrlMOr6f1gTg4ACWlmBvz9WoifHxbDpf3Flfd+54njQ9ncYvL6WHB+n9XVpcbHOnW59IUKu5m+p11zftfLHo+qRorZ6Hh/Xt7k5fsLUl1evS1dWfG9swMiJZq9+KIlaD4P/eztkZNgz5LsAzhpvjY6JK5d9e8eioE3h95SdQbDrkhSErxvArjkl6/U/imMQYnsKQH02BT7vbZZfVOiWhAAAAAElFTkSuQmCC';
-
 /**
  * Width of workspace.
  * @private
@@ -64,6 +58,29 @@ Blockly.Mutator.prototype.workspaceWidth_ = 0;
  */
 Blockly.Mutator.prototype.workspaceHeight_ = 0;
 
+/**
+ * Draw the mutator icon.
+ * @param {!Element} group The icon group.
+ * @private
+ */
+Blockly.Mutator.prototype.drawIcon_ = function(group) {
+  // Square with rounded corners.
+  Blockly.createSvgElement('rect',
+      {'class': 'blocklyIconShape',
+       'rx': '4', 'ry': '4',
+       'height': '16', 'width': '16'},
+       group);
+  // Gear.
+  Blockly.createSvgElement('path',
+      {'class': 'blocklyIconSymbol',
+       'd': 'm4.203,7.296c-0.039,0.2226 -0.063,0.45 -0.063,0.684 0,0.234 0.024,0.462 0.063,0.684l-0.9204,0.6774 -0.1098,0.4098 0.9,1.5588 0.4104,0.1104 1.0428,-0.4572c0.3486,0.294 0.75,0.525 1.1874,0.6828l0.1266,1.134 0.3,0.3h1.8l0.3,-0.2994 0.1266,-1.1376c0.4362,-0.1584 0.8364,-0.3888 1.185,-0.6822l1.0464,0.4584 0.4092,-0.1104 0.9,-1.5588 -0.1104,-0.4104 -0.9204,-0.6774c0.0396,-0.2208 0.0636,-0.4488 0.0636,-0.6822 0,-0.2334 -0.024,-0.4614 -0.0636,-0.6834l0.9204,-0.6774 0.1104,-0.4104 -0.9,-1.5588 -0.4092,-0.1092 -1.0464,0.4584c-0.348,-0.2928 -0.7488,-0.5238 -1.185,-0.6822l-0.1266,-1.1376 -0.3,-0.2994h-1.8l-0.3,0.3 -0.126,1.1352c-0.4374,0.1572 -0.8388,0.3888 -1.1874,0.6822l-1.0434,-0.4566 -0.4098,0.1098 -0.8994,1.5588 0.108,0.4092z'},
+       group);
+  // Axel hole.
+  Blockly.createSvgElement('circle',
+      {'class': 'blocklyIconShape', 'r': '2.7', 'cx': '8', 'cy': '8'},
+       group);
+};
+
 /**
  * Clicking on the icon toggles if the mutator bubble is visible.
  * Disable if block is uneditable.

core/warning.js

@@ -50,10 +50,29 @@ goog.inherits(Blockly.Warning, Blockly.Icon);
 Blockly.Warning.prototype.collapseHidden = false;
 
 /**
- * Icon in base64 format.
+ * Draw the warning icon.
+ * @param {!Element} group The icon group.
  * @private
  */
-Blockly.Warning.prototype.png_ = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAANyAAADcgBffIlqAAAAAd0SU1FB98DGgApDBpIGrEAAAGfSURBVDjLnZM9S2NREIbfc2P8AF27BXshpIzK5g9ssUj8C2tnYyUoiBGSyk4sbCLs1vkRgoW1jYWFICwsMV2Se3JPboLe+FhcNCZcjXFgOMzHeec9M2ekDwTIAEUgo68IsOQczdNTIudoAksTg/g+5+UyDxKUyzz4PueTsvhZr+NmZkCC6Wmo1QiAX58FmLKWf4VCDPCiGxtgLf+B9FiQXo+9y0ucBIUCnJ3B+noMdHGBC0P2xrH4HoYEmUx8qVQCgMPD2F5ehjDEjTbZe2s4p5NKRenb2+Qid3dSpaK0tTp+j8VKq0VncXHQh2IxZrK/P/AtLECjQQf4McQEMNbq786O5qwdANfr8Xl/P/AFgbS7qzlr9Qcwr4EoYvPmBud5wxPJ5+HqCtbWhv3GwPU1Lor4/fKMeedo5vPDiRKsrsLWFuRyybFOhxbwTd0upWqVcDQpaTqjWq0SdruU5PvUkiol/ZNRzeXA96mp3aaRzSYnjdNsFtptGiYI2PY8HaVSmu33xWf3K5WS6ffVe3rSgXnzT+YlpSfY00djjJOkZ/wpr41bQMIsAAAAAElFTkSuQmCC';
+Blockly.Warning.prototype.drawIcon_ = function(group) {
+  // Triangle with rounded corners.
+  Blockly.createSvgElement('path',
+      {'class': 'blocklyIconShape',
+       'd': 'M2,15Q-1,15 0.5,12L6.5,1.7Q8,-1 9.5,1.7L15.5,12Q17,15 14,15z'},
+       group);
+  // Can't use a real '!' text character since different browsers and operating
+  // systems render it differently.
+  // Body of exclamation point.
+  Blockly.createSvgElement('path',
+      {'class': 'blocklyIconSymbol',
+       'd': 'm7,4.8v3.16l0.27,2.27h1.46l0.27,-2.27v-3.16z'},
+       group);
+  // Dot of exclamation point.
+  Blockly.createSvgElement('rect',
+      {'class': 'blocklyIconSymbol',
+       'x': '7', 'y': '11', 'height': '2', 'width': '2'},
+       group);
+};
 
 /**
  * Create the text for the warning's bubble.

media/icons.svg

-<?xml version="1.0" encoding="utf-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="57px" height="17px">
-  <style type="text/css">
-#background {
-  fill: none;
-}
-.shield {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-.mark {
-  fill: #fff;
-  font-family: sans-serif;
-  font-size: 9pt;
-  font-weight: bold;
-  text-anchor: middle;
-}
-#gear {
-  fill:#fff;
-}
-  </style>
-  <rect id="background" width="57" height="17" x="0" y="0" />
-
-  <g transform="translate(0.5, 0.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="mutator" transform="translate(20, 0)">
-      <rect class="shield" width="16" height="16" rx="4" ry="4" />
-      <path id="gear" transform="scale(.6, .6) translate(2.9, 2.8)"
-        d="M4.105,9.36C4.04,9.731,4,10.11,4,10.5s0.04,0.77,0.105,1.14l-1.534,1.129l-0.183,0.683l1.5,2.598
-        l0.684,0.184l1.738-0.762c0.581,0.49,1.25,0.875,1.979,1.138L8.5,18.5L9,19h3l0.5-0.499l0.211-1.896
-        c0.727-0.264,1.394-0.648,1.975-1.137l1.744,0.764l0.682-0.184l1.5-2.598l-0.184-0.684l-1.534-1.129C16.96,11.269,17,10.889,17,10.5
-        s-0.04-0.769-0.106-1.139l1.534-1.129l0.184-0.684l-1.5-2.598L16.43,4.768l-1.744,0.764c-0.58-0.488-1.248-0.873-1.975-1.137
-        L12.5,2.499L12,2H9L8.5,2.5L8.29,4.392C7.561,4.654,6.892,5.04,6.311,5.529L4.572,4.768L3.889,4.951L2.39,7.549L2.57,8.231
-        L4.105,9.36z M6.85,10.5c0-2.016,1.635-3.65,3.65-3.65s3.65,1.635,3.65,3.65s-1.635,3.65-3.65,3.65S6.85,12.516,6.85,10.5z"/>
-    </g>
-    <g class="warning" transform="translate(40, 0)">
-      <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>
-</svg>