extension-tool: Clean up code creator, update sample

Update the sample to be more up to date with respect to Shell practices,
and make it look a bit prettier. Additionally, change the file extract
code so that it's easier to update and add new files later.

https://bugzilla.gnome.org/show_bug.cgi?id=653206

src/gnome-shell-extension-tool.in

@@ -27,6 +27,69 @@ if args:
     parser.print_usage()
     sys.exit(1)
 
+SAMPLE_EXTENSION_FILES = {
+    "extension.js": """
+const St = imports.gi.St;
+const Main = imports.ui.main;
+const Tweener = imports.ui.tweener;
+
+let text;
+
+function _hideHello() {
+    Main.uiGroup.remove_actor(text);
+    text = null;
+}
+
+function _showHello() {
+    if (!text) {
+        text = new St.Label({ style_class: 'helloworld-label', text: "Hello, world!" });
+        Main.uiGroup.add_actor(text);
+    }
+
+    text.opacity = 255;
+
+    let monitor = Main.layoutManager.primaryMonitor;
+
+    text.set_position(Math.floor(monitor.width / 2 - text.width / 2),
+                      Math.floor(monitor.height / 2 - text.height / 2));
+
+    Tweener.addTween(text,
+                     { opacity: 0,
+                       time: 2,
+                       transition: 'easeOutQuad',
+                       onComplete: _hideHello });
+}
+
+function main() {
+    let button = new St.Bin({ style_class: 'panel-button',
+                              reactive: true,
+                              can_focus: true,
+                              x_fill: true,
+                              y_fill: false,
+                              track_hover: true });
+    let icon = new St.Icon({ icon_name: 'system-run',
+                             icon_type: St.IconType.SYMBOLIC,
+                             style_class: 'system-status-icon' });
+
+    button.set_child(icon);
+    button.connect('button-press-event', _showHello);
+
+    Main.panel._rightBox.insert_actor(button, 0);
+}
+""",
+
+    "stylesheet.css": """
+.helloworld-label {
+    font-size: 36px;
+    font-weight: bold;
+    color: #ffffff;
+    background-color: rgba(10,10,10,0.7);
+    border-radius: 5px;
+    padding: .5em;
+}
+""",
+}
+
 if options.create_extension:
     print
     print '''Name should be a very short (ideally descriptive) string.
@@ -72,41 +135,11 @@ use an extension title clicktofocus@janedoe.example.com.'''
         f.write(json.write(meta) + '\n')
     f.close()
 
-    extensionjs_path = os.path.join(extension_path, 'extension.js')
+    for filename, contents in SAMPLE_EXTENSION_FILES.iteritems():
-    f = open(extensionjs_path, 'w')
+        path = os.path.join(extension_path, filename)
-    f.write('''// Sample extension code, makes clicking on the panel show a message
+        f = open(path, 'w')
-const St = imports.gi.St;
+        f.write(contents)
-const Mainloop = imports.mainloop;
+        f.close()
-
-const Main = imports.ui.main;
-
-function _showHello() {
-    let text = new St.Label({ style_class: 'helloworld-label', text: "Hello, world!" });
-    let monitor = global.get_primary_monitor();
-    global.stage.add_actor(text);
-    text.set_position(Math.floor (monitor.width / 2 - text.width / 2), Math.floor(monitor.height / 2 - text.height / 2));
-    Mainloop.timeout_add(3000, function () { text.destroy(); });
-}
-
-// Put your extension initialization code here
-function main() {
-    Main.panel.actor.reactive = true;
-    Main.panel.actor.connect('button-release-event', _showHello);
-}
-''')
-    f.close()
-
-    f = open(os.path.join(extension_path, 'stylesheet.css'), 'w')
-    f.write('''/* Example stylesheet */
-.helloworld-label {
-    font-size: 36px;
-    font-weight: bold;
-    color: #ffffff;
-    background-color: rgba(10,10,10,0.7);
-    border-radius: 5px;
-}
-''')
-    f.close()
 
     print "Created extension in %r" % (extension_path, )
     subprocess.Popen(['gnome-open', extensionjs_path])