Toggle the info pane when clicking the info icon (#587550)

Now clicking on the information icon of the same item a second
time will hide the details pane. Clicking it another time will
show it again, etc.

This is achieved by adding a 'toggle-details' signal which
switches the visibility of the details pane.

Other than the necessary changes, function _selectIndex (in
genericDisplay.js) has been restructured a bit to avoid
duplicating checks.

js/ui/genericDisplay.js

@@ -796,10 +796,19 @@ GenericDisplay.prototype = {
     // Selects (e.g. highlights) a display item at the provided index,
     // updates this.selectedItemDetails actor, and emits 'selected' signal.
     _selectIndex: function(index) {
-        let count = this._list.displayedCount;
+        if (index >= this._list.displayedCount)
+            return
+
+        // If the item is already selected, all we do is toggling the details pane.
+        if (this._selectedIndex == index && index >= 0) {
+            this.emit('toggle-details');
+            return;
+        }
+
+        // Cleanup from the previous item
         if (this._selectedIndex >= 0) {
-            let prev = this._findDisplayedByIndex(this._selectedIndex);
+            this._findDisplayedByIndex(this._selectedIndex).markSelected(false);
-            prev.markSelected(false);
+
             // Calling destroy() gets large image previews released as quickly as
             // possible, if we just removed them, they might hang around for a while
             // until the actor was garbage collected.
@@ -809,17 +818,18 @@ GenericDisplay.prototype = {
 
             this.selectedItemDetails.remove_all();
         }
-        if (index < count) {
+
         this._selectedIndex = index;
-            if (index >= 0) {
+        if (index < 0)
+            return
+
+        // Mark the new item as selected and create its details pane
         let item = this._findDisplayedByIndex(index);
         item.markSelected(true);
         this.selectedItemDetails.append(item.createDetailsActor(this._availableWidthForItemDetails,
             this._availableHeightForItemDetails), Big.BoxPackFlags.NONE);
         this.emit('selected');
     }
-        }
-    }
 };
 
 Signals.addSignalMethods(GenericDisplay.prototype);

js/ui/overlay.js

@@ -505,6 +505,9 @@ Dash.prototype = {
             this._detailsContent.remove_all();
             this._detailsContent.append(this._docDisplay.selectedItemDetails, Big.BoxPackFlags.NONE);
         }));
+        this._docDisplay.connect('toggle-details', Lang.bind(this, function(docDisplay) {
+            this._toggleDetails();
+        }));
         this._resultsDocsSection.display.connect('selected', Lang.bind(this, function(resultsDocDisplay) {
             this._docDisplay.unsetSelected();
             this._resultsAppsSection.display.unsetSelected();
@@ -512,6 +515,9 @@ Dash.prototype = {
             this._detailsContent.remove_all();
             this._detailsContent.append(this._resultsDocsSection.display.selectedItemDetails, Big.BoxPackFlags.NONE);
         }));
+        this._resultsDocsSection.display.connect('toggle-details', Lang.bind(this, function(resultsDocDisplay) {
+            this._toggleDetails();
+        }));
         this._resultsAppsSection.display.connect('selected', Lang.bind(this, function(resultsAppDisplay) {
             this._docDisplay.unsetSelected();
             this._resultsDocsSection.display.unsetSelected();
@@ -696,6 +702,13 @@ Dash.prototype = {
         this.emit('panes-removed');
      },
 
+    _toggleDetails: function() {
+        if (this._detailsShowing())
+            this._hideDetails();
+        else
+            this._showDetails();
+    },
+
     _detailsShowing: function() {
         return this._detailsPane.visible;
     },