"Flat" GUI design preference

in the IDE's settings menu

blocks.js

@@ -153,7 +153,7 @@ DialogBoxMorph, BlockInputFragmentMorph, PrototypeHatBlockMorph*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.blocks = '2013-May-14';
+modules.blocks = '2013-May-16';
 
 var SyntaxElementMorph;
 var BlockMorph;
@@ -2201,10 +2201,11 @@ BlockMorph.prototype.toggleHighlight = function () {
 BlockMorph.prototype.highlight = function (color, blur, border) {
     var highlight = new BlockHighlightMorph(),
         fb = this.fullBounds(),
-        edge = useBlurredShadows ? blur : border;
+        edge = useBlurredShadows && !MorphicPreferences.isFlat ?
+                blur : border;
     highlight.setExtent(fb.extent().add(edge * 2));
     highlight.color = color;
-    highlight.image = useBlurredShadows ?
+    highlight.image = useBlurredShadows && !MorphicPreferences.isFlat ?
             this.highlightImageBlurred(color, blur)
                 : this.highlightImage(color, border);
     highlight.setPosition(fb.origin.subtract(new Point(edge, edge)));
@@ -2434,7 +2435,8 @@ BlockMorph.prototype.thumbnail = function (scale, clipWidth, noShadow) {
     if (!noShadow) {block.addShadow(); }
     ext = block.fullBounds().extent();
     if (!noShadow) {
-        ext = ext.subtract(this.shadowBlur * (useBlurredShadows ? 1 : 2));
+        ext = ext.subtract(this.shadowBlur *
+            (useBlurredShadows && !MorphicPreferences.isFlat ? 1 : 2));
     }
     trgt = newCanvas(new Point(
         Math.min(ext.x * scale, clipWidth || ext.x),

byob.js

@@ -101,11 +101,11 @@ Context, StringMorph, nop, newCanvas, radians, BoxMorph,
 ArrowMorph, PushButtonMorph, contains, InputSlotMorph, ShadowMorph,
 ToggleButtonMorph, IDE_Morph, MenuMorph, copy, ToggleElementMorph,
 Morph, fontHeight, StageMorph, SyntaxElementMorph, SnapSerializer,
-CommentMorph, localize, CSlotMorph, SpeechBubbleMorph*/
+CommentMorph, localize, CSlotMorph, SpeechBubbleMorph, MorphicPreferences*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.byob = '2013-April-24';
+modules.byob = '2013-May-16';
 
 // Declarations
 
@@ -1156,7 +1156,7 @@ BlockDialogMorph.prototype.addCategoryButton = function (category) {
     button.padding = 0;
     button.labelShadowOffset = new Point(-1, -1);
     button.labelShadowColor = colors[1];
-    button.labelColor = new Color(255, 255, 255);
+    button.labelColor = IDE_Morph.prototype.buttonLabelColor;
     button.contrast = this.buttonContrast;
     button.fixLayout();
     button.refresh();
@@ -1190,6 +1190,11 @@ BlockDialogMorph.prototype.fixCategoriesLayout = function () {
         ));
     });
 
+    if (MorphicPreferences.isFlat) {
+        this.categories.corner = 0;
+        this.categories.border = 0;
+        this.categories.edge = 0;
+    }
     this.categories.setExtent(new Point(
         3 * xPadding + 2 * buttonWidth,
         (rows + 1) * yPadding + rows * buttonHeight + 2 * border
@@ -1487,8 +1492,8 @@ BlockEditorMorph.prototype.init = function (definition, target) {
     // create scripting area
     scripts = new ScriptsMorph(target);
     scripts.isDraggable = false;
-    scripts.color = new Color(71, 71, 71);
+    scripts.color = IDE_Morph.prototype.groupColor;
-    scripts.texture = 'scriptsPaneTexture.gif';
+    scripts.texture = IDE_Morph.prototype.scriptsPaneTexture;
     scripts.cleanUpMargin = 10;
 
     proto = new PrototypeHatBlockMorph(this.definition);
@@ -1666,7 +1671,7 @@ BlockEditorMorph.prototype.updateDefinition = function () {
 BlockEditorMorph.prototype.context = function (prototypeHat) {
     // answer my script reified for deferred execution
     // if no prototypeHat is given, my body is scanned
-    var head, topBlock, proto, stackFrame;
+    var head, topBlock, stackFrame;
 
     head = prototypeHat || detect(
         this.body.contents.children,
@@ -1676,7 +1681,6 @@ BlockEditorMorph.prototype.context = function (prototypeHat) {
     if (topBlock === null) {
         return null;
     }
-    proto = head.parts()[0];
     stackFrame = Process.prototype.reify.call(
         null,
         topBlock,

gui.js

@@ -68,7 +68,7 @@ sb, CommentMorph, CommandBlockMorph*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.gui = '2013-May-14';
+modules.gui = '2013-May-16';
 
 // Declarations
 
@@ -91,14 +91,87 @@ IDE_Morph.prototype = new Morph();
 IDE_Morph.prototype.constructor = IDE_Morph;
 IDE_Morph.uber = Morph.prototype;
 
-// IDE_Morph preferences settings
+// IDE_Morph preferences settings and skins
 
-IDE_Morph.prototype.buttonContrast = 30;
+IDE_Morph.prototype.setDefaultDesign = function () {
-IDE_Morph.prototype.backgroundColor = new Color(40, 40, 40);
+    MorphicPreferences.isFlat = false;
-IDE_Morph.prototype.frameColor = SpriteMorph.prototype.paletteColor;
+    SpriteMorph.prototype.paletteColor = new Color(55, 55, 55);
-IDE_Morph.prototype.groupColor
+    SpriteMorph.prototype.paletteTextColor = new Color(230, 230, 230);
-    = SpriteMorph.prototype.paletteColor.lighter(8);
+    StageMorph.prototype.paletteTextColor
-IDE_Morph.prototype.sliderColor = SpriteMorph.prototype.sliderColor;
+        = SpriteMorph.prototype.paletteTextColor;
+    StageMorph.prototype.paletteColor = SpriteMorph.prototype.paletteColor;
+    SpriteMorph.prototype.sliderColor
+        = SpriteMorph.prototype.paletteColor.lighter(30);
+
+    IDE_Morph.prototype.buttonContrast = 30;
+    IDE_Morph.prototype.backgroundColor = new Color(40, 40, 40);
+    IDE_Morph.prototype.frameColor = SpriteMorph.prototype.paletteColor;
+
+    IDE_Morph.prototype.groupColor
+        = SpriteMorph.prototype.paletteColor.lighter(8);
+    IDE_Morph.prototype.sliderColor = SpriteMorph.prototype.sliderColor;
+    IDE_Morph.prototype.buttonLabelColor = new Color(255, 255, 255);
+    IDE_Morph.prototype.tabColors = [
+        IDE_Morph.prototype.groupColor.darker(40),
+        IDE_Morph.prototype.groupColor.darker(60),
+        IDE_Morph.prototype.groupColor
+    ];
+    IDE_Morph.prototype.rotationStyleColors = IDE_Morph.prototype.tabColors;
+    IDE_Morph.prototype.appModeColor = new Color();
+    IDE_Morph.prototype.scriptsPaneTexture = 'scriptsPaneTexture.gif';
+    IDE_Morph.prototype.padding = 5;
+
+    SpriteIconMorph.prototype.labelColor
+        = IDE_Morph.prototype.buttonLabelColor;
+    CostumeIconMorph.prototype.labelColor
+        = IDE_Morph.prototype.buttonLabelColor;
+    SoundIconMorph.prototype.labelColor
+        = IDE_Morph.prototype.buttonLabelColor;
+    TurtleIconMorph.prototype.labelColor
+        = IDE_Morph.prototype.buttonLabelColor;
+};
+
+IDE_Morph.prototype.setFlatDesign = function () {
+    MorphicPreferences.isFlat = true;
+    SpriteMorph.prototype.paletteColor = new Color(255, 255, 255);
+    SpriteMorph.prototype.paletteTextColor = new Color(70, 70, 70);
+    StageMorph.prototype.paletteTextColor
+        = SpriteMorph.prototype.paletteTextColor;
+    StageMorph.prototype.paletteColor = SpriteMorph.prototype.paletteColor;
+    SpriteMorph.prototype.sliderColor = SpriteMorph.prototype.paletteColor;
+
+    IDE_Morph.prototype.buttonContrast = 30;
+    IDE_Morph.prototype.backgroundColor = new Color(200, 200, 200);
+    IDE_Morph.prototype.frameColor = new Color(255, 255, 255);
+
+    IDE_Morph.prototype.groupColor = new Color(230, 230, 230);
+    IDE_Morph.prototype.sliderColor = SpriteMorph.prototype.sliderColor;
+    IDE_Morph.prototype.buttonLabelColor = new Color(70, 70, 70);
+    IDE_Morph.prototype.tabColors = [
+        IDE_Morph.prototype.groupColor.lighter(60),
+        IDE_Morph.prototype.groupColor.darker(10),
+        IDE_Morph.prototype.groupColor
+    ];
+    IDE_Morph.prototype.rotationStyleColors = [
+        IDE_Morph.prototype.groupColor,
+        IDE_Morph.prototype.groupColor.darker(10),
+        IDE_Morph.prototype.groupColor.darker(30)
+    ];
+    IDE_Morph.prototype.appModeColor = IDE_Morph.prototype.frameColor;
+    IDE_Morph.prototype.scriptsPaneTexture = null;
+    IDE_Morph.prototype.padding = 1;
+
+    SpriteIconMorph.prototype.labelColor
+        = IDE_Morph.prototype.buttonLabelColor;
+    CostumeIconMorph.prototype.labelColor
+        = IDE_Morph.prototype.buttonLabelColor;
+    SoundIconMorph.prototype.labelColor
+        = IDE_Morph.prototype.buttonLabelColor;
+    TurtleIconMorph.prototype.labelColor
+        = IDE_Morph.prototype.buttonLabelColor;
+};
+
+IDE_Morph.prototype.setDefaultDesign();
 
 // IDE_Morph instance creation:
 
@@ -312,8 +385,7 @@ IDE_Morph.prototype.createLogo = function () {
     }
 
     this.logo = new Morph();
-    this.logo.texture = 'snap_logo_sm.gif';
+    this.logo.texture = 'snap_logo_sm.png';
-
     this.logo.drawNew = function () {
         this.image = newCanvas(this.extent());
         var context = this.image.getContext('2d'),
@@ -325,7 +397,8 @@ IDE_Morph.prototype.createLogo = function () {
             );
         gradient.addColorStop(0, 'black');
         gradient.addColorStop(0.5, myself.frameColor.toString());
-        context.fillStyle = gradient;
+        context.fillStyle = MorphicPreferences.isFlat ?
+                myself.frameColor.toString() : gradient;
         context.fillRect(0, 0, this.width(), this.height());
         if (this.texture) {
             this.drawTexture(this.texture);
@@ -405,7 +478,7 @@ IDE_Morph.prototype.createControlBar = function () {
     button.padding = 0;
     button.labelShadowOffset = new Point(-1, -1);
     button.labelShadowColor = colors[1];
-    button.labelColor = new Color(255, 255, 255);
+    button.labelColor = this.buttonLabelColor;
     button.contrast = this.buttonContrast;
     button.drawNew();
     // button.hint = 'stage size\nsmall & normal';
@@ -437,7 +510,7 @@ IDE_Morph.prototype.createControlBar = function () {
     button.padding = 0;
     button.labelShadowOffset = new Point(-1, -1);
     button.labelShadowColor = colors[1];
-    button.labelColor = new Color(255, 255, 255);
+    button.labelColor = this.buttonLabelColor;
     button.contrast = this.buttonContrast;
     button.drawNew();
     // button.hint = 'app & edit\nmodes';
@@ -539,7 +612,7 @@ IDE_Morph.prototype.createControlBar = function () {
     button.padding = 0;
     button.labelShadowOffset = new Point(-1, -1);
     button.labelShadowColor = colors[1];
-    button.labelColor = new Color(255, 255, 255);
+    button.labelColor = this.buttonLabelColor;
     button.contrast = this.buttonContrast;
     button.drawNew();
     // button.hint = 'open, save, & annotate project';
@@ -563,7 +636,7 @@ IDE_Morph.prototype.createControlBar = function () {
     button.padding = 0;
     button.labelShadowOffset = new Point(-1, -1);
     button.labelShadowColor = colors[1];
-    button.labelColor = new Color(255, 255, 255);
+    button.labelColor = this.buttonLabelColor;
     button.contrast = this.buttonContrast;
     button.drawNew();
     // button.hint = 'edit settings';
@@ -586,7 +659,7 @@ IDE_Morph.prototype.createControlBar = function () {
     button.padding = 0;
     button.labelShadowOffset = new Point(-1, -1);
     button.labelShadowColor = colors[1];
-    button.labelColor = new Color(255, 255, 255);
+    button.labelColor = this.buttonLabelColor;
     button.contrast = this.buttonContrast;
     button.drawNew();
     // button.hint = 'cloud operations';
@@ -648,10 +721,10 @@ IDE_Morph.prototype.createControlBar = function () {
             true,
             false,
             false,
-            new Point(2, 1),
+            MorphicPreferences.isFlat ? null : new Point(2, 1),
             myself.frameColor.darker(myself.buttonContrast)
         );
-        this.label.color = new Color(255, 255, 255);
+        this.label.color = myself.buttonLabelColor;
         this.label.drawNew();
         this.add(this.label);
         this.label.setCenter(this.center());
@@ -705,7 +778,7 @@ IDE_Morph.prototype.createCategories = function () {
         button.padding = 0;
         button.labelShadowOffset = new Point(-1, -1);
         button.labelShadowColor = colors[1];
-        button.labelColor = new Color(255, 255, 255);
+        button.labelColor = myself.buttonLabelColor;
         button.fixLayout();
         button.refresh();
         myself.categories.add(button);
@@ -816,11 +889,7 @@ IDE_Morph.prototype.createSpriteBar = function () {
         padlock,
         thumbnail,
         tabCorner = 15,
-        tabColors = [
+        tabColors = this.tabColors,
-            this.groupColor.darker(40),
-            this.groupColor.darker(60),
-            this.groupColor
-        ],
         tabBar = new AlignmentMorph('row', -tabCorner * 2),
         tab,
         myself = this;
@@ -834,7 +903,7 @@ IDE_Morph.prototype.createSpriteBar = function () {
     this.add(this.spriteBar);
 
     function addRotationStyleButton(rotationStyle) {
-        var colors = tabColors,
+        var colors = myself.rotationStyleColors,
             button;
 
         button = new ToggleButtonMorph(
@@ -869,7 +938,7 @@ IDE_Morph.prototype.createSpriteBar = function () {
         button.padding = 0;
         button.labelShadowOffset = new Point(-1, -1);
         button.labelShadowColor = colors[1];
-        button.labelColor = new Color(255, 255, 255);
+        button.labelColor = myself.buttonLabelColor;
         button.fixLayout();
         button.refresh();
         rotationStyleButtons.push(button);
@@ -934,14 +1003,15 @@ IDE_Morph.prototype.createSpriteBar = function () {
         }
     );
     padlock.label.isBold = false;
-    padlock.label.setColor(new Color(255, 255, 255));
+    padlock.label.setColor(this.buttonLabelColor);
     padlock.color = tabColors[2];
     padlock.highlightColor = tabColors[0];
     padlock.pressColor = tabColors[1];
 
-    padlock.tick.shadowOffset = new Point(-1, -1);
+    padlock.tick.shadowOffset = MorphicPreferences.isFlat ?
+            new Point() : new Point(-1, -1);
     padlock.tick.shadowColor = new Color(); // black
-    padlock.tick.color = new Color(255, 255, 255);
+    padlock.tick.color = this.buttonLabelColor;
     padlock.tick.isBold = false;
     padlock.tick.drawNew();
 
@@ -979,7 +1049,7 @@ IDE_Morph.prototype.createSpriteBar = function () {
     tab.edge = 1;
     tab.labelShadowOffset = new Point(-1, -1);
     tab.labelShadowColor = tabColors[1];
-    tab.labelColor = new Color(255, 255, 255);
+    tab.labelColor = this.buttonLabelColor;
     tab.drawNew();
     tab.fixLayout();
     tabBar.add(tab);
@@ -998,7 +1068,7 @@ IDE_Morph.prototype.createSpriteBar = function () {
     tab.edge = 1;
     tab.labelShadowOffset = new Point(-1, -1);
     tab.labelShadowColor = tabColors[1];
-    tab.labelColor = new Color(255, 255, 255);
+    tab.labelColor = this.buttonLabelColor;
     tab.drawNew();
     tab.fixLayout();
     tabBar.add(tab);
@@ -1017,7 +1087,7 @@ IDE_Morph.prototype.createSpriteBar = function () {
     tab.edge = 1;
     tab.labelShadowOffset = new Point(-1, -1);
     tab.labelShadowColor = tabColors[1];
-    tab.labelColor = new Color(255, 255, 255);
+    tab.labelColor = this.buttonLabelColor;
     tab.drawNew();
     tab.fixLayout();
     tabBar.add(tab);
@@ -1047,7 +1117,7 @@ IDE_Morph.prototype.createSpriteEditor = function () {
     if (this.currentTab === 'scripts') {
         scripts.isDraggable = false;
         scripts.color = this.groupColor;
-        scripts.texture = 'scriptsPaneTexture.gif';
+        scripts.texture = this.scriptsPaneTexture;
 
         this.spriteEditor = new ScrollFrameMorph(
             scripts,
@@ -1136,7 +1206,7 @@ IDE_Morph.prototype.createCorralBar = function () {
     newbutton.padding = 0;
     newbutton.labelShadowOffset = new Point(-1, -1);
     newbutton.labelShadowColor = colors[1];
-    newbutton.labelColor = new Color(255, 255, 255);
+    newbutton.labelColor = this.buttonLabelColor;
     newbutton.contrast = this.buttonContrast;
     newbutton.drawNew();
     newbutton.hint = "add a new Turtle sprite";
@@ -1158,7 +1228,7 @@ IDE_Morph.prototype.createCorralBar = function () {
     paintbutton.padding = 0;
     paintbutton.labelShadowOffset = new Point(-1, -1);
     paintbutton.labelShadowColor = colors[1];
-    paintbutton.labelColor = new Color(255, 255, 255);
+    paintbutton.labelColor = this.buttonLabelColor;
     paintbutton.contrast = this.buttonContrast;
     paintbutton.drawNew();
     paintbutton.hint = "paint a new sprite";
@@ -1275,7 +1345,7 @@ IDE_Morph.prototype.createCorral = function () {
 IDE_Morph.prototype.fixLayout = function (situation) {
     // situation is a string, i.e.
     // 'selectSprite' or 'refreshPalette' or 'tabEditor'
-    var padding = 5;
+    var padding = this.padding;
 
     Morph.prototype.trackChanges = false;
 
@@ -1549,6 +1619,40 @@ IDE_Morph.prototype.selectSprite = function (sprite) {
     this.currentSprite.scripts.fixMultiArgs();
 };
 
+// IDE_Morph skins
+
+IDE_Morph.prototype.defaultDesign = function () {
+    this.setDefaultDesign();
+    this.refreshIDE();
+};
+
+IDE_Morph.prototype.flatDesign = function () {
+    this.setFlatDesign();
+    this.refreshIDE();
+};
+
+IDE_Morph.prototype.refreshIDE = function () {
+    var projectData;
+
+    if (Process.prototype.isCatchingErrors) {
+        try {
+            projectData = this.serializer.serialize(this.stage);
+        } catch (err) {
+            this.showMessage('Serialization failed: ' + err);
+        }
+    } else {
+        projectData = this.serializer.serialize(this.stage);
+    }
+    SpriteMorph.prototype.initBlocks();
+    this.buildPanes();
+    this.fixLayout();
+    if (this.loadNewProject) {
+        this.newProject();
+    } else {
+        this.openProjectString(projectData);
+    }
+};
+
 // IDE_Morph sprite list access
 
 IDE_Morph.prototype.addNewSprite = function () {
@@ -1738,7 +1842,7 @@ IDE_Morph.prototype.cloudMenu = function () {
                 } else {
                     myself.prompt('Export Project As...', function (name) {
                         myself.exportProjectMedia(name);
-                    }, 'exportProject');
+                    }, null, 'exportProject');
                 }
             },
             null,
@@ -1752,7 +1856,7 @@ IDE_Morph.prototype.cloudMenu = function () {
                 } else {
                     myself.prompt('Export Project As...', function (name) {
                         myself.exportProjectNoMedia(name);
-                    }, 'exportProject');
+                    }, null, 'exportProject');
                 }
             },
             null,
@@ -1766,7 +1870,7 @@ IDE_Morph.prototype.cloudMenu = function () {
                 } else {
                     myself.prompt('Export Project As...', function (name) {
                         myself.exportProjectAsCloudData(name);
-                    }, 'exportProject');
+                    }, null, 'exportProject');
                 }
             },
             null,
@@ -1947,6 +2051,19 @@ IDE_Morph.prototype.settingsMenu = function () {
         'check to rasterize\nSVGs on import',
         true
     );
+    addPreference(
+        'Flat design',
+        function () {
+            if (MorphicPreferences.isFlat) {
+                return myself.defaultDesign();
+            }
+            myself.flatDesign();
+        },
+        MorphicPreferences.isFlat,
+        'uncheck for default\nGUI design',
+        'check for alternative\nGUI design',
+        false
+    );
     menu.addLine(); // everything below this line is made persistent
     addPreference(
         'Thread safe scripts',
@@ -2055,7 +2172,7 @@ IDE_Morph.prototype.projectMenu = function () {
             } else {
                 myself.prompt('Export Project As...', function (name) {
                     myself.exportProject(name);
-                }, 'exportProject');
+                }, null, 'exportProject');
             }
         },
         'show project data as XML\nin a new browser window',
@@ -2786,7 +2903,7 @@ IDE_Morph.prototype.toggleAppMode = function (appMode) {
 
     Morph.prototype.trackChanges = false;
     if (this.isAppMode) {
-        this.setColor(new Color());
+        this.setColor(this.appModeColor);
         this.controlBar.setColor(this.color);
         this.controlBar.appModeButton.refresh();
         elements.forEach(function (e) {
@@ -2962,7 +3079,7 @@ IDE_Morph.prototype.userSetBlocksScale = function () {
 
     sample = new FrameMorph();
     sample.acceptsDrops = false;
-    sample.texture = 'scriptsPaneTexture.gif';
+    sample.texture = this.scriptsPaneTexture;
     sample.setExtent(new Point(250, 180));
     scrpt.setPosition(sample.position().add(10));
     sample.add(scrpt);
@@ -3419,14 +3536,17 @@ IDE_Morph.prototype.cloudError = function () {
 
 IDE_Morph.prototype.cloudIcon = function (height, color) {
     var clr = color || DialogBoxMorph.prototype.titleBarColor,
+        isFlat = MorphicPreferences.isFlat,
         icon = new SymbolMorph(
-            'cloudGradient',
+            isFlat ? 'cloud' : 'cloudGradient',
             height || 50,
             clr,
-            new Point(-1, -1),
+            isFlat ? null : new Point(-1, -1),
             clr.darker(50)
         );
-    icon.addShadow(new Point(1, 1), 1, clr.lighter(95));
+    if (!isFlat) {
+        icon.addShadow(new Point(1, 1), 1, clr.lighter(95));
+    }
     return icon;
 };
 
@@ -4967,6 +5087,8 @@ TurtleIconMorph.prototype.init = function (aSpriteOrStage, aTemplate) {
 };
 
 TurtleIconMorph.prototype.createThumbnail = function () {
+    var isFlat = MorphicPreferences.isFlat;
+
     if (this.thumbnail) {
         this.thumbnail.destroy();
     }
@@ -4975,7 +5097,7 @@ TurtleIconMorph.prototype.createThumbnail = function () {
             'turtle',
             this.thumbSize.y,
             this.labelColor,
-            new Point(-1, -1),
+            isFlat ? null : new Point(-1, -1),
             new Color(0, 0, 0)
         );
     } else {
@@ -4983,7 +5105,7 @@ TurtleIconMorph.prototype.createThumbnail = function () {
             'stage',
             this.thumbSize.y,
             this.labelColor,
-            new Point(-1, -1),
+            isFlat ? null : new Point(-1, -1),
             new Color(0, 0, 0)
         );
     }
@@ -5140,7 +5262,7 @@ WardrobeMorph.prototype.updateList = function () {
     paintbutton.labelMinExtent = new Point(36, 18);
     paintbutton.labelShadowOffset = new Point(-1, -1);
     paintbutton.labelShadowColor = paintbutton.highlightColor;
-    paintbutton.labelColor = new Color(255, 255, 255);
+    paintbutton.labelColor = TurtleIconMorph.prototype.labelColor;
     paintbutton.contrast = this.buttonContrast;
     paintbutton.drawNew();
     paintbutton.hint = "Paint a new costume";
@@ -5156,7 +5278,7 @@ WardrobeMorph.prototype.updateList = function () {
         "costumes tab help" // look up long string in translator
     ));
     txt.fontSize = 9;
-    txt.setColor(new Color(230, 230, 230));
+    txt.setColor(SpriteMorph.prototype.paletteTextColor);
 
     txt.setPosition(new Point(x, y));
     this.addContents(txt);
@@ -5507,7 +5629,7 @@ JukeboxMorph.prototype.updateList = function () {
         'import a sound from your computer\nby dragging it into here'
     ));
     txt.fontSize = 9;
-    txt.setColor(new Color(230, 230, 230));
+    txt.setColor(SpriteMorph.prototype.paletteTextColor);
     txt.setPosition(new Point(x, y));
     this.addContents(txt);
     y = txt.bottom() + padding;

history.txt

@@ -1711,3 +1711,7 @@ ______
 * Objects: Costume shrinkWrap adjustments
 * Morphic: Flat design preference introduced (default is off)
 * Widgets: preparing for "flat GUI skins"
+
+130516
+------
+* "flat" GUI design preference (in the settings menu)

morphic.js

@@ -1035,7 +1035,7 @@
 /*global window, HTMLCanvasElement, getMinimumFontHeight, FileReader, Audio,
 FileList, getBlurredShadowSupport*/
 
-var morphicVersion = '2013-May-15';
+var morphicVersion = '2013-May-16';
 var modules = {}; // keep track of additional loaded modules
 var useBlurredShadows = getBlurredShadowSupport(); // check for Chrome-bug
 
@@ -2794,7 +2794,7 @@ Morph.prototype.shadow = function (off, a, color) {
         alpha = a || ((a === 0) ? 0 : 0.2),
         fb = this.fullBounds();
     shadow.setExtent(fb.extent().add(this.shadowBlur * 2));
-    if (useBlurredShadows) {
+    if (useBlurredShadows && !MorphicPreferences.isFlat) {
         shadow.image = this.shadowImageBlurred(offset, color);
         shadow.alpha = alpha;
         shadow.setPosition(fb.origin.add(offset).subtract(this.shadowBlur));
@@ -6137,7 +6137,7 @@ InspectorMorph.prototype.init = function (target) {
     );
     this.isDraggable = true;
     this.border = 1;
-    this.edge = 5;
+    this.edge = MorphicPreferences.isFlat ? 1 : 5;
     this.color = new Color(60, 60, 60);
     this.borderColor = new Color(95, 95, 95);
     this.drawNew();
@@ -6674,6 +6674,9 @@ MenuMorph.prototype.createLabel = function () {
     text.backgroundColor = this.borderColor;
     text.drawNew();
     this.label = new BoxMorph(3, 0);
+    if (MorphicPreferences.isFlat) {
+        this.label.edge = 0;
+    }
     this.label.color = this.borderColor;
     this.label.borderColor = this.borderColor;
     this.label.setExtent(text.extent().add(4));
@@ -6695,8 +6698,8 @@ MenuMorph.prototype.drawNew = function () {
     });
     this.children = [];
     if (!this.isListContents) {
-        this.edge = 5;
+        this.edge = MorphicPreferences.isFlat ? 0 : 5;
-        this.border = 2;
+        this.border = MorphicPreferences.isFlat ? 1 : 2;
     }
     this.color = new Color(255, 255, 255);
     this.borderColor = new Color(60, 60, 60);

objects.js

@@ -123,7 +123,7 @@ PrototypeHatBlockMorph*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.objects = '2013-May-15';
+modules.objects = '2013-May-16';
 
 var SpriteMorph;
 var StageMorph;
@@ -178,6 +178,7 @@ SpriteMorph.prototype.blockColor = {
 };
 
 SpriteMorph.prototype.paletteColor = new Color(55, 55, 55);
+SpriteMorph.prototype.paletteTextColor = new Color(230, 230, 230);
 SpriteMorph.prototype.sliderColor
     = SpriteMorph.prototype.paletteColor.lighter(30);
 SpriteMorph.prototype.isCachingPrimitives = true;
@@ -1492,7 +1493,7 @@ SpriteMorph.prototype.blockTemplates = function (category) {
                 'development mode \ndebugging primitives:'
             ));
             txt.fontSize = 9;
-            txt.setColor(new Color(230, 230, 230));
+            txt.setColor(this.paletteTextColor);
             blocks.push(txt);
             blocks.push('-');
             blocks.push(block('log'));
@@ -1621,7 +1622,7 @@ SpriteMorph.prototype.blockTemplates = function (category) {
                 'development mode \ndebugging primitives:'
             ));
             txt.fontSize = 9;
-            txt.setColor(new Color(230, 230, 230));
+            txt.setColor(this.paletteTextColor);
             blocks.push(txt);
             blocks.push('-');
             blocks.push(block('colorFiltered'));
@@ -1675,7 +1676,7 @@ SpriteMorph.prototype.blockTemplates = function (category) {
                 'development mode \ndebugging primitives:'
             );
             txt.fontSize = 9;
-            txt.setColor(new Color(230, 230, 230));
+            txt.setColor(this.paletteTextColor);
             blocks.push(txt);
             blocks.push('-');
             blocks.push(block('reportTypeOf'));
@@ -3184,6 +3185,9 @@ StageMorph.prototype.isCachingPrimitives
 StageMorph.prototype.sliderColor
     = SpriteMorph.prototype.sliderColor;
 
+StageMorph.prototype.paletteTextColor
+    = SpriteMorph.prototype.paletteTextColor;
+
 StageMorph.prototype.hiddenPrimitives = {};
 
 // StageMorph instance creation
@@ -3734,7 +3738,7 @@ StageMorph.prototype.blockTemplates = function (category) {
             'Stage selected:\nno motion primitives'
         ));
         txt.fontSize = 9;
-        txt.setColor(new Color(230, 230, 230));
+        txt.setColor(this.paletteTextColor);
         blocks.push(txt);
 
     } else if (cat === 'looks') {
@@ -3756,7 +3760,7 @@ StageMorph.prototype.blockTemplates = function (category) {
                 'development mode \ndebugging primitives:'
             ));
             txt.fontSize = 9;
-            txt.setColor(new Color(230, 230, 230));
+            txt.setColor(this.paletteTextColor);
             blocks.push(txt);
             blocks.push('-');
             blocks.push(block('log'));
@@ -3862,7 +3866,7 @@ StageMorph.prototype.blockTemplates = function (category) {
                 'development mode \ndebugging primitives:'
             ));
             txt.fontSize = 9;
-            txt.setColor(new Color(230, 230, 230));
+            txt.setColor(this.paletteTextColor);
             blocks.push(txt);
             blocks.push('-');
             blocks.push(block('colorFiltered'));
@@ -3918,7 +3922,7 @@ StageMorph.prototype.blockTemplates = function (category) {
                 'development mode \ndebugging primitives:'
             );
             txt.fontSize = 9;
-            txt.setColor(new Color(230, 230, 230));
+            txt.setColor(this.paletteTextColor);
             blocks.push(txt);
             blocks.push('-');
             blocks.push(block('reportTypeOf'));

paint.js

@@ -47,6 +47,7 @@
     ----------------
     May 10 - first full release (Kartik)
     May 14 - bugfixes (bugfixes, Snap integration (Jens)
+    May 16 - flat design adjustments (Jens)
 
  */
 
@@ -54,12 +55,13 @@
  FrameMorph, PushButtonMorph, Color, SymbolMorph, newCanvas, Morph, TextMorph,
  CostumeIconMorph, IDE_Morph, Costume, SpriteMorph, nop, Image, WardrobeMorph,
  TurtleIconMorph, localize, MenuMorph, InputFieldMorph, SliderMorph,
- ToggleMorph, ToggleButtonMorph, BoxMorph, modules, radians
+ ToggleMorph, ToggleButtonMorph, BoxMorph, modules, radians,
+ MorphicPreferences
  */
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.paint = '2013-May-14';
+modules.paint = '2013-May-16';
 
 // Declarations
 
@@ -118,7 +120,10 @@ PaintEditorMorph.prototype.buildContents = function () {
 
     this.toolbox = new BoxMorph();
     this.toolbox.color = SpriteMorph.prototype.paletteColor.lighter(8);
-    this.toolbox.borderColor = this.toolbox.color.lighter(40);
+    this.toolbox.borderColor = this.toolbox.color.lighter(40);
+    if (MorphicPreferences.isFlat) {
+        this.toolbox.edge = 0;
+    }
 
     this.buildToolbox();
     this.controls.add(this.toolbox);

widgets.js

@@ -73,7 +73,7 @@ newCanvas, StringMorph, Morph, TextMorph, nop, detect, StringFieldMorph,
 HTMLCanvasElement, fontHeight, SymbolMorph, localize, SpeechBubbleMorph,
 ArrowMorph, MenuMorph, isString, isNil, SliderMorph, MorphicPreferences*/
 
-modules.widgets = '2013-May-15';
+modules.widgets = '2013-May-16';
 
 var PushButtonMorph;
 var ToggleButtonMorph;
@@ -208,10 +208,10 @@ PushButtonMorph.prototype.mouseLeave = function () {
 PushButtonMorph.prototype.outlinePath = BoxMorph.prototype.outlinePath;
 
 PushButtonMorph.prototype.drawOutline = function (context) {
-    var outlineStyle;
+    var outlineStyle,
+        isFlat = MorphicPreferences.isFlat && !this.is3D;
 
-    if (MorphicPreferences.isFlat && !this.is3D) {return; }
+    if (!this.outline || isFlat) {return null; }
-    if (!this.outline) {return null; }
     if (this.outlineGradient) {
         outlineStyle = context.createLinearGradient(
             0,
@@ -228,7 +228,7 @@ PushButtonMorph.prototype.drawOutline = function (context) {
     context.beginPath();
     this.outlinePath(
         context,
-        this.corner,
+        isFlat ? 0 : this.corner,
         0
     );
     context.closePath();
@@ -236,11 +236,13 @@ PushButtonMorph.prototype.drawOutline = function (context) {
 };
 
 PushButtonMorph.prototype.drawBackground = function (context, color) {
+    var isFlat = MorphicPreferences.isFlat && !this.is3D;
+
     context.fillStyle = color.toString();
     context.beginPath();
     this.outlinePath(
         context,
-        Math.max(this.corner - this.outline, 0),
+        isFlat ? 0 : Math.max(this.corner - this.outline, 0),
         this.outline
     );
     context.closePath();
@@ -724,8 +726,6 @@ ToggleButtonMorph.prototype.drawEdges = function (
     topColor,
     bottomColor
 ) {
-    if (MorphicPreferences.isFlat && !this.is3D) {return; }
-
     var gradient;
 
     ToggleButtonMorph.uber.drawEdges.call(
@@ -737,6 +737,16 @@ ToggleButtonMorph.prototype.drawEdges = function (
     );
 
     if (this.hasPreview) { // indicate the possible selection color
+        if (MorphicPreferences.isFlat && !this.is3D) {
+            context.fillStyle = this.pressColor.toString();
+            context.fillRect(
+                this.outline,
+                this.outline,
+                this.corner,
+                this.height() - this.outline * 2
+            );
+            return;
+        }
         gradient = context.createLinearGradient(
             0,
             0,
@@ -1509,7 +1519,7 @@ DialogBoxMorph.prototype.inform = function (
         'center',
         null,
         null,
-        new Point(1, 1),
+        MorphicPreferences.isFlat ? null : new Point(1, 1),
         new Color(255, 255, 255)
     );
 
@@ -1544,7 +1554,7 @@ DialogBoxMorph.prototype.askYesNo = function (
         'center',
         null,
         null,
-        new Point(1, 1),
+        MorphicPreferences.isFlat ? null : new Point(1, 1),
         new Color(255, 255, 255)
     );
 
@@ -1708,7 +1718,7 @@ DialogBoxMorph.prototype.promptCredentials = function (
             null, // alignment
             null, // width
             null, // font name
-            new Point(1, 1), // shadow offset
+            MorphicPreferences.isFlat ? null : new Point(1, 1),
             new Color(255, 255, 255) // shadowColor
         );
     }
@@ -2411,13 +2421,16 @@ DialogBoxMorph.prototype.drawNew = function () {
         ),
         shift = this.corner / 2,
         x,
-        y;
+        y,
+        isFlat = MorphicPreferences.isFlat && !this.is3D;
+
+    // this.alpha = isFlat ? 0.9 : 1;
 
     this.image = newCanvas(this.extent());
     context = this.image.getContext('2d');
 
     // title bar
-    if (MorphicPreferences.isFlat && !this.is3D) {
+    if (isFlat) {
         context.fillStyle = this.titleBarColor.toString();
     } else {
         gradient = context.createLinearGradient(0, 0, 0, th);
@@ -2434,7 +2447,7 @@ DialogBoxMorph.prototype.drawNew = function () {
     context.beginPath();
     this.outlinePathTitle(
         context,
-        this.corner
+        isFlat ? 0 : this.corner
     );
     context.closePath();
     context.fill();
@@ -2445,12 +2458,12 @@ DialogBoxMorph.prototype.drawNew = function () {
     context.beginPath();
     this.outlinePathBody(
         context,
-        this.corner
+        isFlat ? 0 : this.corner
     );
     context.closePath();
     context.fill();
 
-    if (MorphicPreferences.isFlat && !this.is3D) {
+    if (isFlat) {
         DialogBoxMorph.uber.addShadow.call(this);
         Morph.prototype.trackChanges = true;
         this.fullChanged();
@@ -2973,7 +2986,11 @@ InputFieldMorph.prototype.drawNew = function () {
     this.image = newCanvas(this.extent());
     context = this.image.getContext('2d');
     if (this.parent) {
-        this.color = this.parent.color.lighter(this.contrast * 0.75);
+        if (this.parent.color.eq(new Color(255, 255, 255))) {
+            this.color = this.parent.color.darker(this.contrast * 0.1);
+        } else {
+            this.color = this.parent.color.lighter(this.contrast * 0.75);
+        }
         borderColor = this.parent.color;
     } else {
         borderColor = new Color(120, 120, 120);