Remove outside border from Blockly (issue 92).

core/css.js

@@ -134,7 +134,6 @@ Blockly.Css.setCursor = function(cursor) {
 Blockly.Css.CONTENT = [
   '.blocklySvg {',
   '  background-color: #fff;',
-  '  border: 1px solid #ddd;',
   '  overflow: hidden;',  /* IE overflows by default. */
   '}',
 
@@ -315,6 +314,8 @@ Blockly.Css.CONTENT = [
 
   '.blocklyMainBackground {',
   '  fill: url(#blocklyGridPattern);',
+  '  stroke-width: 1;',
+  '  stroke: #c6c6c6;',  /* Equates to #ddd due to border being off-pixel. */
   '}',
 
   '.blocklyMutatorBackground {',

core/scrollbar.js

@@ -44,7 +44,7 @@ Blockly.ScrollbarPair = function(workspace) {
   this.corner_ = Blockly.createSvgElement('rect',
       {'height': Blockly.Scrollbar.scrollbarThickness,
       'width': Blockly.Scrollbar.scrollbarThickness,
-      'style': 'fill: #fff'}, null);
+      'class': 'blocklyScrollbarBackground'}, null);
   Blockly.Scrollbar.insertAfter_(this.corner_, workspace.getBubbleCanvas());
 };
 
@@ -158,14 +158,14 @@ Blockly.Scrollbar = function(workspace, horizontal, opt_pair) {
     this.svgBackground_.setAttribute('height',
         Blockly.Scrollbar.scrollbarThickness);
     this.svgKnob_.setAttribute('height',
-        Blockly.Scrollbar.scrollbarThickness - 6);
-    this.svgKnob_.setAttribute('y', 3);
+        Blockly.Scrollbar.scrollbarThickness - 5);
+    this.svgKnob_.setAttribute('y', 2.5);
   } else {
     this.svgBackground_.setAttribute('width',
         Blockly.Scrollbar.scrollbarThickness);
     this.svgKnob_.setAttribute('width',
-        Blockly.Scrollbar.scrollbarThickness - 6);
-    this.svgKnob_.setAttribute('x', 3);
+        Blockly.Scrollbar.scrollbarThickness - 5);
+    this.svgKnob_.setAttribute('x', 2.5);
   }
   var scrollbar = this;
   this.onMouseDownBarWrapper_ = Blockly.bindEvent_(this.svgBackground_,
@@ -235,7 +235,7 @@ Blockly.Scrollbar.prototype.resize = function(opt_metrics) {
    * .absoluteLeft: Left-edge of view.
    */
   if (this.horizontal_) {
-    var outerLength = hostMetrics.viewWidth;
+    var outerLength = hostMetrics.viewWidth - 1;
     if (this.pair_) {
       // Shorten the scrollbar to make room for the corner square.
       outerLength -= Blockly.Scrollbar.scrollbarThickness;
@@ -254,19 +254,19 @@ Blockly.Scrollbar.prototype.resize = function(opt_metrics) {
     var innerOffset = (hostMetrics.viewLeft - hostMetrics.contentLeft) *
         this.ratio_;
     this.svgKnob_.setAttribute('width', Math.max(0, innerLength));
-    this.xCoordinate = hostMetrics.absoluteLeft;
+    this.xCoordinate = hostMetrics.absoluteLeft + 0.5;
     if (this.pair_ && Blockly.RTL) {
       this.xCoordinate += hostMetrics.absoluteLeft +
           Blockly.Scrollbar.scrollbarThickness;
     }
     this.yCoordinate = hostMetrics.absoluteTop + hostMetrics.viewHeight -
-        Blockly.Scrollbar.scrollbarThickness;
+        Blockly.Scrollbar.scrollbarThickness - 0.5;
     this.svgGroup_.setAttribute('transform',
         'translate(' + this.xCoordinate + ', ' + this.yCoordinate + ')');
     this.svgBackground_.setAttribute('width', Math.max(0, outerLength));
     this.svgKnob_.setAttribute('x', this.constrainKnob_(innerOffset));
   } else {
-    var outerLength = hostMetrics.viewHeight;
+    var outerLength = hostMetrics.viewHeight - 1;
     if (this.pair_) {
       // Shorten the scrollbar to make room for the corner square.
       outerLength -= Blockly.Scrollbar.scrollbarThickness;
@@ -283,12 +283,12 @@ Blockly.Scrollbar.prototype.resize = function(opt_metrics) {
     var innerOffset = (hostMetrics.viewTop - hostMetrics.contentTop) *
         this.ratio_;
     this.svgKnob_.setAttribute('height', Math.max(0, innerLength));
-    this.xCoordinate = hostMetrics.absoluteLeft;
+    this.xCoordinate = hostMetrics.absoluteLeft + 0.5;
     if (!Blockly.RTL) {
       this.xCoordinate += hostMetrics.viewWidth -
-          Blockly.Scrollbar.scrollbarThickness;
+          Blockly.Scrollbar.scrollbarThickness - 1;
     }
-    this.yCoordinate = hostMetrics.absoluteTop;
+    this.yCoordinate = hostMetrics.absoluteTop + 0.5;
     this.svgGroup_.setAttribute('transform',
         'translate(' + this.xCoordinate + ', ' + this.yCoordinate + ')');
     this.svgBackground_.setAttribute('height', Math.max(0, outerLength));
@@ -307,13 +307,13 @@ Blockly.Scrollbar.prototype.createDom_ = function() {
   /* Create the following DOM:
   <g>
     <rect class="blocklyScrollbarBackground" />
-    <rect class="blocklyScrollbarKnob" rx="7" ry="7" />
+    <rect class="blocklyScrollbarKnob" rx="8" ry="8" />
   </g>
   */
   this.svgGroup_ = Blockly.createSvgElement('g', {}, null);
   this.svgBackground_ = Blockly.createSvgElement('rect',
       {'class': 'blocklyScrollbarBackground'}, this.svgGroup_);
-  var radius = Math.floor((Blockly.Scrollbar.scrollbarThickness - 6) / 2);
+  var radius = Math.floor((Blockly.Scrollbar.scrollbarThickness - 5) / 2);
   this.svgKnob_ = Blockly.createSvgElement('rect',
       {'class': 'blocklyScrollbarKnob', 'rx': radius, 'ry': radius},
       this.svgGroup_);

core/toolbox.js

@@ -151,7 +151,7 @@ Blockly.Toolbox.prototype.position_ = function() {
   } else {
     treeDiv.style.marginLeft = svgBox.left;
   }
-  treeDiv.style.height = (svgSize.height + 1) + 'px';
+  treeDiv.style.height = svgSize.height + 'px';
   this.width = treeDiv.offsetWidth;
   if (!Blockly.RTL) {
     // For some reason the LTR toolbox now reports as 1px too wide.

demos/blockfactory/index.html

@@ -39,9 +39,7 @@
       position: fixed;
     }
     #previewFrame {
-      border-style: solid;
-      border-color: #ddd;
-      border-width: 0 1px 1px 0;
+      border: none;
       position: absolute;
     }
     pre {

demos/code/style.css

@@ -68,6 +68,7 @@ h1 {
 /* Tabs */
 #tabRow>td {
   border: 1px solid #ccc;
+  border-bottom: none;
 }
 td.tabon {
   border-bottom-color: #ddd !important;
@@ -117,6 +118,7 @@ td {
   direction: ltr;
 }
 pre.content {
+  border: 1px solid #ccc;
   overflow: scroll;
 }
 #content_blocks {
@@ -128,7 +130,7 @@ pre.content {
 #content_xml {
   resize: none;
   outline: none;
-  border: none;
+  border: 1px solid #ccc;
   font-family: monospace;
   overflow: scroll;
 }

demos/iframe/index.html

@@ -20,9 +20,7 @@
     iframe {
       width: 100%;
       height: 100%;
-      border-style: solid;
-      border-color: #ddd;
-      border-width: 0 1px 1px 0;
+      border: none;
     }
   </style>
 </head>