Flyout Shape

.stylelintrc

@@ -51,7 +51,7 @@
     "property-case"                                    : "lower",
     "plugin/no-unsupported-browser-features"           : [true, {
       "severity": "warning",
-      "ignore": ["calc", "user-select-none", "multicolumn", "css-appearance", "border-radius", "pointer"]
+      "ignore": ["calc", "user-select-none", "multicolumn", "css-appearance", "border-radius", "pointer", "css-filters"]
     }],
     "rule-empty-line-before"                           : ["always", { "ignore": ["after-comment"], "except": ["inside-block-and-after-rule", "first-nested"] }],
     "selector-attribute-brackets-space-inside"         : "never",

src/assets/sass/base/mixins.scss

@@ -0,0 +1,7 @@
+@mixin vendor($property, $value) {
+    $prefixes: ('moz', 'webkit', 'ms', 'o');
+    @each $prefix in $prefixes {
+        -#{$prefix}-#{$property}: #{$value};
+    }
+    #{$property}: #{$value};
+}

src/assets/sass/scratch/_flyout.scss

@@ -1,7 +1,11 @@
+@import '../base/mixins';
+
+.blocklyFlyout {
+    @include vendor(filter, drop-shadow(0 10px 5px #999));
+}
+
 .blocklyFlyoutBackground {
     height: calc(100% - 60px) !important;
     fill: #fff !important;
     fill-opacity: 0.95 !important;
-    stroke: #ebebeb;
-    stroke-width: 5px;
-}
+}

src/assets/sass/scratch/_toolbox.scss

@@ -1,3 +1,5 @@
+@import '../base/mixins';
+
 $category-colours: (
     trade-definition: #303f9f,
     before-purchase : #00897b,
@@ -30,7 +32,7 @@ $category-colours: (
     display: flex;
     flex-direction: column;
     margin-top: 20px;
-    max-height: calc(100% - 40px) !important;
+    max-height: calc(100vh - 100px);
     overflow: hidden;
     position: absolute;
     user-select: none;
@@ -63,8 +65,8 @@ $category-colours: (
         position: absolute;
         top: 0.6em;
         right: 0.6em;
-        transform: rotate(90deg);
-        transition: transform 0.25s ease;
+        @include vendor(transform, rotate(90deg));
+        @include vendor(transition, transform 0.25s ease);
     }
     &__item {
         position: relative;
@@ -90,7 +92,7 @@ $category-colours: (
         }
         #{$toolbox}__arrow {
             position: relative;
-            transform: rotate(270deg);
+            @include vendor(transform, rotate(270deg));
             margin-top: -2px;
             top: 0;
             right: -2px;

src/assets/sass/scratch/_workspace.scss

@@ -12,4 +12,8 @@
 
 .blocklyText {
     fill: #000 !important;
+}
+
+.blocklyMainWorkspaceScrollbar {
+    display: none;
 }

src/scratch/hooks/block_svg.js

@@ -1,6 +1,10 @@
-/* eslint-disable func-names, no-underscore-dangle */
 import { translate } from '../../utils/lang/i18n';
 
+/* eslint-disable func-names, no-underscore-dangle */
+
+// deriv-bot: Blockly value, Scratch resets this to 0, req for correct spacing in flyout.
+Blockly.BlockSvg.TAB_WIDTH = 8;
+
 /**
  * Set whether the block is disabled or not.
  * @param {boolean} disabled True if disabled.

src/scratch/hooks/flyout_base.js

@@ -1,10 +1,34 @@
 /* eslint-disable func-names, no-underscore-dangle */
+
+/**
+ * Corner radius of the flyout background.
+ * @type {number}
+ * @const
+ */
+Blockly.Flyout.prototype.CORNER_RADIUS = 10;
+
 /**
  * Margin around the edges of the blocks in the flyout.
  * @type {number}
  * @const
  */
-Blockly.Flyout.prototype.MARGIN = 24;
+Blockly.Flyout.prototype.MARGIN = 30;
+
+/**
+ * Top/bottom padding between scrollbar and edge of flyout background.
+ * deriv-bot: Should be equal to CORNER_RADIUS
+ * @type {number}
+ * @const
+ */
+Blockly.Flyout.prototype.SCROLLBAR_PADDING = 20;
+
+/**
+ * The fraction of the distance to the scroll target to move the flyout on
+ * each animation frame, when auto-scrolling. Values closer to 1.0 will make
+ * the scroll animation complete faster. Use 1.0 for no animation.
+ * @type {number}
+ */
+Blockly.Flyout.prototype.scrollAnimationFraction = 1.0;
 
 /**
  * Update the view based on coordinates calculated in position().
@@ -13,26 +37,31 @@ Blockly.Flyout.prototype.MARGIN = 24;
  * @param {number} x The computed x origin of the flyout's SVG group.
  * @param {number} y The computed y origin of the flyout's SVG group.
  * @protected
- * deriv-bot: Imported from Blockly, used in flyout_vertical.js
  */
 Blockly.Flyout.prototype.positionAt_ = function(width, height, x, y) {
     this.svgGroup_.setAttribute('width', width);
     this.svgGroup_.setAttribute('height', height);
+
     if (this.svgGroup_.tagName === 'svg') {
         const transform = `translate(${x}px,${y}px)`;
+
         Blockly.utils.setCssTransform(this.svgGroup_, transform);
     } else {
         // IE and Edge don't support CSS transforms on SVG elements so
         // it's important to set the transform on the SVG element itself
         const transform = `translate(${x},${y})`;
+
         this.svgGroup_.setAttribute('transform', transform);
     }
 
     // Update the scrollbar (if one exists).
     if (this.scrollbar_) {
+        const newX = x - this.ARROW_SIZE;
+
         // Set the scrollbars origin to be the top left of the flyout.
-        this.scrollbar_.setOrigin(x, y);
+        this.scrollbar_.setOrigin(newX, y);
         this.scrollbar_.resize();
+
         // Set the position again so that if the metrics were the same (and the
         // resize failed) our position is still updated.
         this.scrollbar_.setPosition_(this.scrollbar_.position_.x, this.scrollbar_.position_.y);