Fixes to allow widgets to be initially collapsed

js/ui/sidebar.js

@@ -76,7 +76,7 @@ Sidebar.prototype = {
     addWidget: function(widget) {
         let widgetBox;
         try {
-            widgetBox = new WidgetBox.WidgetBox(widget);
+            widgetBox = new WidgetBox.WidgetBox(widget, this.expanded);
         } catch(e) {
             logError(e, "Failed to add widget '" + widget + "'");
             return;

js/ui/widget.js

@@ -31,12 +31,22 @@ function Widget() {
 Widget.prototype = {
     // _init():
     //
-    // Your widget constructor. Receives no arguments. Must define a
+    // Your widget constructor. Your constructor function should look
-    // field named "actor" containing the Clutter.Actor to show in
+    // like:
-    // expanded mode. This actor will be clipped to
+    //
-    // Widget.EXPANDED_WIDTH. Most widgets will also define a field
+    //     function MyWidgetType() {
-    // named "title" containing the title string to show above the
+    //         this._init.apply(this, arguments);
-    // widget in the sidebar.
+    //     }
+    //
+    // and your _init method should start by doing:
+    //
+    //     Widget.Widget.prototype._init.apply(this, arguments);
+    //
+    // The _init method must define a field named "actor" containing
+    // the Clutter.Actor to show in expanded mode. This actor will be
+    // clipped to Widget.EXPANDED_WIDTH. Most widgets will also define
+    // a field named "title" containing the title string to show above
+    // the widget in the sidebar.
     //
     // If you want to have a separate collapsed view, you can define a
     // field "collapsedActor" containing the Clutter.Actor to show in
@@ -51,6 +61,9 @@ Widget.prototype = {
     // the sidebar is collapsed, the widget's expanded view will pop
     // out of the sidebar until either the cursor moves out of it,
     // or else the widget calls this.activated() on itself.
+    _init: function (initialState) {
+        this.state = initialState;
+    },
 
     // destroy():
     //
@@ -81,23 +94,22 @@ Widget.prototype = {
     // state:
     //
     // A field set on your widget by the sidebar. Will contain one of
-    // the Widget.STATE_* values. (Eg, Widget.STATE_EXPANDED). Note
+    // the Widget.STATE_* values. (Eg, Widget.STATE_EXPANDED).
-    // that this will not be set until *after* _init() is called, so
-    // you cannot rely on it being set at that point. The widget will
-    // always initially be in STATE_EXPANDED.
 };
 
 Signals.addSignalMethods(Widget.prototype);
 
 
 function ClockWidget() {
-  this._init();
+    this._init.apply(this, arguments);
 }
 
 ClockWidget.prototype = {
     __proto__ : Widget.prototype,
 
     _init: function() {
+        Widget.prototype._init.apply(this, arguments);
+
         this.actor = new Clutter.Text({ font_name: "Sans Bold 16px",
                                         text: "",
                                         // Give an explicit height to ensure
@@ -168,7 +180,7 @@ const ITEM_NAME_COLOR = new Clutter.Color();
 ITEM_NAME_COLOR.from_pixel(0x000000ff);
 
 function LauncherWidget() {
-    this._init();
+    this._init.apply(this, arguments);
 }
 
 LauncherWidget.prototype = {
@@ -273,13 +285,15 @@ LauncherWidget.prototype = {
 };
 
 function AppsWidget() {
-    this._init();
+    this._init.apply(this, arguments);
 }
 
 AppsWidget.prototype = {
     __proto__ : LauncherWidget.prototype,
 
     _init : function() {
+        Widget.prototype._init.apply(this, arguments);
+
         this.title = "Applications";
         this.actor = new Big.Box({ spacing: 2 });
         this.collapsedActor = new Big.Box({ spacing: 2});
@@ -291,13 +305,15 @@ AppsWidget.prototype = {
 };
 
 function DocsWidget() {
-    this._init();
+    this._init.apply(this, arguments);
 }
 
 DocsWidget.prototype = {
     __proto__ : LauncherWidget.prototype,
 
     _init : function() {
+        Widget.prototype._init.apply(this, arguments);
+
         this.title = "Recent Docs";
         this.actor = new Big.Box({ spacing: 2 });
 

js/ui/widgetBox.js

@@ -19,17 +19,20 @@ const WIDGETBOX_PADDING = 2;
 const ANIMATION_TIME = 0.5;
 const POP_IN_LAG = 250; /* milliseconds */
 
-function WidgetBox(widget) {
+function WidgetBox(widget, expanded) {
-    this._init(widget);
+    this._init(widget, expanded);
 }
 
 WidgetBox.prototype = {
-    _init: function(widget) {
+    _init: function(widget, expanded) {
-	if (widget instanceof Widget.Widget)
+        this.state = expanded ? Widget.STATE_EXPANDED : Widget.STATE_COLLAPSED;
+
+	if (widget instanceof Widget.Widget) {
 	    this._widget = widget;
-	else {
+            this._widget.state = this.state;
+	} else {
 	    let ctor = this._ctorFromName(widget);
-            this._widget = new ctor();
+            this._widget = new ctor(this.state);
 	}
 
         if (!this._widget.actor)
@@ -37,7 +40,7 @@ WidgetBox.prototype = {
         else if (!this._widget.title && !this._widget.collapsedActor)
             throw new Error("widget has neither title nor collapsedActor");
 
-        this.state = this._widget.state = Widget.STATE_EXPANDED;
+        this.state = expanded ? Widget.STATE_EXPANDED : Widget.STATE_COLLAPSED;
 
         // The structure of a WidgetBox:
         //
@@ -128,7 +131,6 @@ WidgetBox.prototype = {
             this._activationHandler = this._widget.connect('activated',
                                                            Lang.bind(this, this._activationHandler));
         }
-        this._cgroup.hide();
 
         this._egroup = new Clutter.Group({ clip_to_allocation: true });
         this._hbox.append(this._egroup, Big.BoxPackFlags.NONE);
@@ -148,6 +150,11 @@ WidgetBox.prototype = {
         }
 
         this._ebox.append(this._widget.actor, Big.BoxPackFlags.NONE);
+
+        if (expanded)
+            this._setWidgetExpanded();
+        else
+            this._setWidgetCollapsed();
     },
 
     // Given a name like "imports.ui.widget.ClockWidget", turn that
@@ -184,16 +191,25 @@ WidgetBox.prototype = {
         this.state = this._widget.state = Widget.STATE_EXPANDING;
     },
 
-    _expandPart1Complete: function() {
+    _setWidgetExpanded: function() {
         this._cgroup.hide();
-        this._cbox.x = 0;
+        this._egroup.show();
 
         if (this._singleActor) {
-            log(this._widget.actor);
             this._widget.actor.unparent();
             this._ebox.append(this._widget.actor, Big.BoxPackFlags.NONE);
         }
 
+        if (this._htitle) {
+            this._htitle.show();
+            this._hline.show();
+        }
+    },
+
+    _expandPart1Complete: function() {
+        this._cbox.x = 0;
+        this._setWidgetExpanded();
+
         if (this._widget.expand) {
             try {
                 this._widget.expand();
@@ -202,11 +218,6 @@ WidgetBox.prototype = {
             }
         }
 
-        this._egroup.show();
-        if (this._htitle) {
-            this._htitle.show();
-            this._hline.show();
-        }
         this._ebox.x = -Widget.EXPANDED_WIDTH;
         Tweener.addTween(this._ebox, { x: 0,
                                        time: ANIMATION_TIME / 2,
@@ -228,19 +239,27 @@ WidgetBox.prototype = {
         this.state = this._widget.state = Widget.STATE_COLLAPSING;
     },
 
-    _collapsePart1Complete: function() {
+    _setWidgetCollapsed: function() {
         this._egroup.hide();
-        this._ebox.x = 0;
+        this._cgroup.show();
+
+        if (this._singleActor) {
+            this._widget.actor.unparent();
+            this._cbox.append(this._widget.actor, Big.BoxPackFlags.NONE);
+        }
+
         if (this._htitle) {
             this._htitle.hide();
             this._hline.hide();
         }
 
-        if (this._singleActor) {
+        if (this._vtitle)
-            log(this._widget.actor);
+            this._cbox.height = this._ebox.height;
-            this._widget.actor.unparent();
+    },
-            this._cbox.append(this._widget.actor, Big.BoxPackFlags.NONE);
+
-        }
+    _collapsePart1Complete: function() {
+        this._ebox.x = 0;
+        this._setWidgetCollapsed();
 
         if (this._widget.collapse) {
             try {
@@ -250,10 +269,7 @@ WidgetBox.prototype = {
             }
         }
 
-        this._cgroup.show();
         this._cbox.x = -Widget.COLLAPSED_WIDTH;
-        if (this._vtitle)
-            this._cbox.height = this._ebox.height;
         Tweener.addTween(this._cbox, { x: 0,
                                        time: ANIMATION_TIME / 2,
                                        transition: "easeOutQuad",