tweak media import dialog

* make dialog resizable
* enable double-click on icons
* prevent error if no icon is selected
* prevent error if icon is dragged
* prevent error if icon is right-clicked / ctrl-clicked
* adjust background color
* adjust icon layout

gui.js

@@ -2597,69 +2597,6 @@ IDE_Morph.prototype.projectMenu = function () {
         };
     }
 
-    function importMediaDialog(mediaType) {
-        var dialog = new DialogBoxMorph().withKey('import' + mediaType),
-            frame = new ScrollFrameMorph(),
-            size = 500,
-            padding = 4, x = padding, y = padding,
-            selectedIcon = null,
-            turtle = new SymbolMorph('turtle', 60),
-            items = myself.getMediaList(mediaType);
-
-        frame.padding = 6;
-        frame.setWidth(size);
-        frame.acceptsDrops = false;
-        frame.contents.acceptsDrops = false;
-        frame.setHeight(size);
-        frame.fixLayout = nop;
-
-        items.forEach(function (item) {
-            var url = myself.resourceURL(mediaType, item.file),
-                img = new Image();
-            var icon = new CostumeIconMorph(new Costume(turtle.image, item.name));
-            icon.setPosition(new Point(x, y));
-            icon.userMenu = null;
-            icon.action = function () { 
-                if (selectedIcon === icon) return;
-                var prevSelected = selectedIcon;
-                selectedIcon = icon;
-                if (prevSelected) prevSelected.refresh();
-            };
-            icon.query = function () {
-                return icon === selectedIcon;
-            };
-            frame.addContents(icon);
-            x = icon.right() + padding;
-            if (x + icon.width() > frame.width()) {
-                x = padding;
-                y = icon.bottom() + padding;
-            }
-            img.onload = function () {
-                var canvas = newCanvas(new Point(img.width, img.height));
-                canvas.getContext('2d').drawImage(img, 0, 0);
-                icon.object = new Costume(canvas, item.name);
-                icon.rawImage = canvas;
-                icon.refresh();
-            };
-            img.src = url;
-        });
-
-        dialog.ok = function () {
-            myself.droppedImage(selectedIcon.rawImage, selectedIcon.labelString);
-        };
-
-        dialog.labelString = mediaType;
-        dialog.createLabel();
-        dialog.addBody(frame);
-        frame.drawNew();
-        dialog.addButton('ok', 'Import');
-        dialog.addButton('cancel', 'Cancel');
-        dialog.fixLayout();
-        dialog.drawNew();
-        dialog.popUp(world);
-        dialog.setCenter(world.center());
-    }
-
     menu = new MenuMorph(this);
     menu.addItem('Project notes...', 'editProjectNotes');
     menu.addLine();
@@ -2704,7 +2641,9 @@ IDE_Morph.prototype.projectMenu = function () {
 
     if (shiftClicked) {
         menu.addItem(
-            localize('Export project...') + ' ' + localize('(in a new window)'),
+            localize(
+                'Export project...') + ' ' + localize('(in a new window)'
+            ),
             function () {
                 if (myself.projectName) {
                     myself.exportProject(myself.projectName, shiftClicked);
@@ -2801,7 +2740,7 @@ IDE_Morph.prototype.projectMenu = function () {
     menu.addItem(
         localize(graphicsName) + '...',
         function () {
-            importMediaDialog(graphicsName);
+            myself.importMedia(graphicsName);
         },
         'Select a costume from the media library'
     );
@@ -2881,6 +2820,110 @@ IDE_Morph.prototype.parseResourceFile = function (text) {
     return items;
 };
 
+IDE_Morph.prototype.importMedia = function (mediaType) {
+    // open a dialog box letting the user browse available "built-in"
+    // costumes or backgrounds
+
+    var dialog = new DialogBoxMorph().withKey('import' + mediaType),
+        frame = new ScrollFrameMorph(),
+        selectedIcon = null,
+        turtle = new SymbolMorph('turtle', 60),
+        items = this.getMediaList(mediaType),
+        myself = this,
+        world = this.world(),
+        handle;
+
+    frame.acceptsDrops = false;
+    frame.contents.acceptsDrops = false;
+    frame.color = myself.groupColor;
+    frame.fixLayout = nop;
+    dialog.labelString = mediaType;
+    dialog.createLabel();
+    dialog.addBody(frame);
+    dialog.addButton('ok', 'Import');
+    dialog.addButton('cancel', 'Cancel');
+
+    dialog.ok = function () {
+        if (selectedIcon) {
+            myself.droppedImage(
+                selectedIcon.object.contents,
+                selectedIcon.labelString
+            );
+        }
+    };
+
+    dialog.fixLayout = function () {
+        var th = fontHeight(this.titleFontSize) + this.titlePadding * 2,
+            x = 0,
+            y = 0,
+            fp, fw;
+        this.buttons.fixLayout();
+        this.body.setPosition(this.position().add(new Point(
+            this.padding,
+            th + this.padding
+        )));
+        this.body.setExtent(new Point(
+            this.width() - this.padding * 2,
+            this.height() - this.padding * 3 - th - this.buttons.height()
+        ));
+        fp = this.body.position();
+        fw = this.body.width();
+        frame.contents.children.forEach(function (icon) {
+              icon.setPosition(fp.add(new Point(x, y)));
+            x += icon.width();
+            if (x + icon.width() > fw) {
+                x = 0;
+                y += icon.height();
+            }
+        });
+        frame.contents.adjustBounds();
+        this.label.setCenter(this.center());
+        this.label.setTop(this.top() + (th - this.label.height()) / 2);
+        this.buttons.setCenter(this.center());
+        this.buttons.setBottom(this.bottom() - this.padding);
+    };
+
+    items.forEach(function (item) {
+        var url = myself.resourceURL(mediaType, item.file),
+            img = new Image(),
+            icon = new CostumeIconMorph(
+                new Costume(turtle.image, item.name)
+            );
+        icon.isDraggable = false;
+        icon.userMenu = nop;
+        icon.action = function () {
+            if (selectedIcon === icon) return;
+            var prevSelected = selectedIcon;
+            selectedIcon = icon;
+            if (prevSelected) prevSelected.refresh();
+        };
+        icon.doubleClickAction = dialog.ok;
+        icon.query = function () {
+            return icon === selectedIcon;
+        };
+        frame.addContents(icon);
+        img.onload = function () {
+            var canvas = newCanvas(new Point(img.width, img.height));
+            canvas.getContext('2d').drawImage(img, 0, 0);
+            icon.object = new Costume(canvas, item.name);
+            icon.refresh();
+        };
+        img.src = url;
+    });
+    dialog.popUp(world);
+    dialog.setExtent(new Point(390, 300));
+    dialog.setCenter(world.center());
+    dialog.drawNew();
+
+    handle = new HandleMorph(
+        dialog,
+        300,
+        280,
+        dialog.corner,
+        dialog.corner
+    );
+};
+
 // IDE_Morph menu actions
 
 IDE_Morph.prototype.aboutSnap = function () {