search-display: Change the default display to use iconGrid

Current mockups display all search results as icons as used by
application results, so change the default result display to use
iconGrid/BaseIcon. Remove the custom application results display,
as it is no longer needed.

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

data/theme/gnome-shell.css

@@ -433,15 +433,6 @@ StTooltip StLabel {
     spacing: 4px;
 }
 
-.search-result-content {
-    padding: 4px;
-}
-
-.search-result-content:selected {
-    border-radius: 4px;
-    background: rgba(255,255,255,0.33);
-}
-
 .results-container {
     spacing: 4px;
 }
@@ -511,7 +502,8 @@ StTooltip StLabel {
     padding: 6px 12px;
 }
 
-.app-well-app > .overview-icon {
+.app-well-app > .overview-icon,
+.search-result-content > .overview-icon {
     border-radius: 4px;
     padding: 4px;
     font-size: 10px;
@@ -525,11 +517,13 @@ StTooltip StLabel {
     background-image: url("running-indicator.svg");
 }
 
-.app-well-app.selected > .overview-icon {
+.app-well-app:selected > .overview-icon,
+.search-result-content:selected > .overview-icon {
     background: rgba(255,255,255,0.33);
 }
 
-.app-well-app:hover > .overview-icon {
+.app-well-app:hover > .overview-icon,
+.search-result-content:hover > .overview-icon {
     background: rgba(255,255,255,0.33);
     text-shadow: black 0px 2px 2px;
     transition-duration: 100;

js/ui/appDisplay.js

@@ -21,8 +21,6 @@ const Tweener = imports.ui.tweener;
 const Workspace = imports.ui.workspace;
 const Params = imports.misc.params;
 
-const WELL_MAX_COLUMNS = 16;
-const WELL_MAX_SEARCH_ROWS = 1;
 const MENU_POPUP_TIMEOUT = 600;
 
 function AlphabeticalView() {
@@ -171,68 +169,8 @@ AllAppDisplay.prototype = {
         this._appView.refresh(apps);
     }
 };
-
 Signals.addSignalMethods(AllAppDisplay.prototype);
 
-function AppSearchResultDisplay(provider) {
-    this._init(provider);
-}
-
-AppSearchResultDisplay.prototype = {
-    __proto__: Search.SearchResultDisplay.prototype,
-
-    _init: function (provider) {
-        Search.SearchResultDisplay.prototype._init.call(this, provider);
-        this._grid = new IconGrid.IconGrid({ rowLimit: WELL_MAX_SEARCH_ROWS });
-        this.actor = new St.Bin({ name: 'dashAppSearchResults',
-                                  x_align: St.Align.START });
-        this.actor.set_child(this._grid.actor);
-    },
-
-    renderResults: function(results, terms) {
-        let appSys = Shell.AppSystem.get_default();
-        let maxItems = WELL_MAX_SEARCH_ROWS * WELL_MAX_COLUMNS;
-        for (let i = 0; i < results.length && i < maxItems; i++) {
-            let result = results[i];
-            let app = appSys.get_app(result);
-            let display = new AppWellIcon(app);
-            this._grid.addItem(display.actor);
-        }
-    },
-
-    clear: function () {
-        this._grid.removeAll();
-        this.selectionIndex = -1;
-    },
-
-    getVisibleResultCount: function() {
-        return this._grid.visibleItemsCount();
-    },
-
-    selectIndex: function (index) {
-        let nVisible = this.getVisibleResultCount();
-        if (this.selectionIndex >= 0) {
-            let prevActor = this._grid.getItemAtIndex(this.selectionIndex);
-            prevActor._delegate.setSelected(false);
-        }
-        this.selectionIndex = -1;
-        if (index >= nVisible)
-            return false;
-        else if (index < 0)
-            return false;
-        let targetActor = this._grid.getItemAtIndex(index);
-        targetActor._delegate.setSelected(true);
-        this.selectionIndex = index;
-        return true;
-    },
-
-    activateSelected: function() {
-        if (this.selectionIndex < 0)
-            return;
-        let targetActor = this._grid.getItemAtIndex(this.selectionIndex);
-        this.provider.activateResult(targetActor._delegate.app.get_id());
-    }
-};
 
 function BaseAppSearchProvider() {
     this._init();
@@ -285,12 +223,10 @@ AppSearchProvider.prototype = {
         return this._appSys.subsearch(false, previousResults, terms);
     },
 
-    createResultContainerActor: function () {
-        return new AppSearchResultDisplay(this);
-    },
-
     createResultActor: function (resultMeta, terms) {
-        return new AppIcon(resultMeta.id);
+        let app = this._appSys.get_app(resultMeta['id']);
+        let icon = new AppWellIcon(app);
+        return icon.actor;
     },
 
     expandSearch: function(terms) {
@@ -489,14 +425,6 @@ AppWellIcon.prototype = {
         }
     },
 
-    setSelected: function (isSelected) {
-        this._selected = isSelected;
-        if (this._selected)
-            this.actor.add_style_class_name('selected');
-        else
-            this.actor.remove_style_class_name('selected');
-    },
-
     _onMenuPoppedUp: function() {
         if (this._getRunning()) {
             Main.overview.getWorkspacesForWindow(null).setApplicationWindowSelection(this.app.get_id());

js/ui/search.js

@@ -2,7 +2,7 @@
 
 const Signals = imports.signals;
 
-const RESULT_ICON_SIZE = 24;
+const RESULT_ICON_SIZE = 48;
 
 // Not currently referenced by the search API, but
 // this enumeration can be useful for provider

js/ui/searchDisplay.js

@@ -4,14 +4,16 @@ const Clutter = imports.gi.Clutter;
 const Lang = imports.lang;
 const Gettext = imports.gettext.domain('gnome-shell');
 const _ = Gettext.gettext;
+const Gtk = imports.gi.Gtk;
+const St = imports.gi.St;
 
 const DND = imports.ui.dnd;
+const IconGrid = imports.ui.iconGrid;
 const Main = imports.ui.main;
 const Search = imports.ui.search;
 
+const MAX_SEARCH_RESULTS_ROWS = 2;
 
-// 25 search results (per result type) should be enough for everyone
-const MAX_RENDERED_SEARCH_RESULTS = 25;
 
 function SearchResult(provider, metaInfo, terms) {
     this._init(provider, metaInfo, terms);
@@ -24,17 +26,19 @@ SearchResult.prototype = {
         this.actor = new St.Clickable({ style_class: 'search-result',
                                         reactive: true,
                                         x_align: St.Align.START,
-                                        x_fill: true,
                                         y_fill: true });
         this.actor._delegate = this;
 
         let content = provider.createResultActor(metaInfo, terms);
         if (content == null) {
-            content = new St.BoxLayout({ style_class: 'search-result-content' });
+            content = new St.Bin({ style_class: 'search-result-content',
-            let title = new St.Label({ text: this.metaInfo['name'] });
+                                   reactive: true,
-            let icon = this.metaInfo['icon'];
+                                   track_hover: true });
-            content.add(icon, { y_fill: false });
+            let icon = new IconGrid.BaseIcon(this.metaInfo['name'],
-            content.add(title, { expand: true, y_fill: false });
+                                             { createIcon: Lang.bind(this, function(size) {
+                                                 return this.metaInfo['icon'];
+                                             })});
+            content.set_child(icon.actor);
         }
         this._content = content;
         this.actor.set_child(content);
@@ -84,36 +88,45 @@ SearchResult.prototype = {
     }
 };
 
-function OverflowSearchResults(provider) {
+
+function GridSearchResults(provider) {
     this._init(provider);
 }
 
-OverflowSearchResults.prototype = {
+GridSearchResults.prototype = {
     __proto__: Search.SearchResultDisplay.prototype,
 
     _init: function(provider) {
         Search.SearchResultDisplay.prototype._init.call(this, provider);
-        this.actor = new St.OverflowBox({ style_class: 'search-section-list-results' });
+        this._grid = new IconGrid.IconGrid({ rowLimit: MAX_SEARCH_RESULTS_ROWS,
+                                             xAlign: St.Align.START });
+        this.actor = new St.Bin({ x_align: St.Align.START });
+        this.actor.set_child(this._grid.actor);
+        this.selectionIndex = -1;
     },
 
     getVisibleResultCount: function() {
-        return this.actor.get_n_visible();
+        return this._grid.visibleItemsCount();
     },
 
     renderResults: function(results, terms) {
-        for (let i = 0; i < results.length && i < MAX_RENDERED_SEARCH_RESULTS; i++) {
+        for (let i = 0; i < results.length; i++) {
             let result = results[i];
             let meta = this.provider.getResultMeta(result);
             let display = new SearchResult(this.provider, meta, terms);
-            this.actor.add_actor(display.actor);
+            this._grid.addItem(display.actor);
         }
     },
 
+    clear: function () {
+        this._grid.removeAll();
+        this.selectionIndex = -1;
+    },
+
     selectIndex: function (index) {
-        let nVisible = this.actor.get_n_visible();
+        let nVisible = this.getVisibleResultCount();
-        let children = this.actor.get_children();
         if (this.selectionIndex >= 0) {
-            let prevActor = children[this.selectionIndex];
+            let prevActor = this._grid.getItemAtIndex(this.selectionIndex);
             prevActor._delegate.setSelected(false);
         }
         this.selectionIndex = -1;
@@ -121,19 +134,21 @@ OverflowSearchResults.prototype = {
             return false;
         else if (index < 0)
             return false;
-        let targetActor = children[index];
+        let targetActor = this._grid.getItemAtIndex(index);
         targetActor._delegate.setSelected(true);
         this.selectionIndex = index;
         return true;
     },
 
     activateSelected: function() {
-        let children = this.actor.get_children();
+        if (this.selectionIndex < 0)
-        let targetActor = children[this.selectionIndex];
+            return;
+        let targetActor = this._grid.getItemAtIndex(this.selectionIndex);
         targetActor._delegate.activate();
     }
 };
 
+
 function SearchResults(searchSystem) {
     this._init(searchSystem);
 }
@@ -142,10 +157,23 @@ SearchResults.prototype = {
     _init: function(searchSystem) {
         this._searchSystem = searchSystem;
 
-        this.actor = new St.BoxLayout({ name: 'searchResults',
+        this.actor = new St.Bin({ name: 'searchResults',
+                                  y_align: St.Align.START,
+                                  x_align: St.Align.START,
+                                  x_fill: true });
+        this._content = new St.BoxLayout({ name: 'searchResultsContent',
                                            vertical: true });
+
+        let scrollView = new St.ScrollView({ x_fill: true,
+                                             y_fill: false,
+                                             vshadows: true });
+        scrollView.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
+        scrollView.add_actor(this._content);
+
+        this.actor.set_child(scrollView);
+
         this._statusText = new St.Label({ style_class: 'search-statustext' });
-        this.actor.add(this._statusText);
+        this._content.add(this._statusText);
         this._selectedProvider = -1;
         this._providers = this._searchSystem.getProviders();
         this._providerMeta = [];
@@ -175,14 +203,14 @@ SearchResults.prototype = {
         providerBox.add(resultDisplayBin, { expand: true });
         let resultDisplay = provider.createResultContainerActor();
         if (resultDisplay == null) {
-            resultDisplay = new OverflowSearchResults(provider);
+            resultDisplay = new GridSearchResults(provider);
         }
         resultDisplayBin.set_child(resultDisplay.actor);
 
         this._providerMeta.push({ actor: providerBox,
                                   resultDisplay: resultDisplay,
                                   count: count });
-        this.actor.add(providerBox);
+        this._content.add(providerBox);
     },
 
     _clearDisplay: function() {