searchDisplay, and others: Switch from provider title to provider icon

Display a '+' icon on the provider icon if there are more results that are
hidden. If the provider icon is clicked, ask the provider to launch itself and
perform a search with the current terms.

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

data/Makefile.am

@@ -34,6 +34,7 @@ dist_theme_DATA =				\
 	theme/gnome-shell.css			\
 	theme/logged-in-indicator.svg		\
 	theme/message-tray-background.png	\
+	theme/more-results.svg			\
 	theme/noise-texture.png			\
 	theme/panel-button-border.svg		\
 	theme/panel-button-highlight-narrow.svg	\

data/theme/gnome-shell.css

@@ -871,8 +871,15 @@ StScrollBar StButton#vhandle:active {
     padding: 4px 8px;
 }
 
+.search-provider-icon-more {
+    width: 16px;
+    height: 16px;
+    background-image: url("more-results.svg");
+}
+
 .app-well-app > .overview-icon,
 .show-apps > .overview-icon,
+.search-provider-icon,
 .search-result-content > .overview-icon {
     border-radius: 4px;
     padding: 3px;
@@ -889,6 +896,7 @@ StScrollBar StButton#vhandle:active {
 
 .app-well-app:hover > .overview-icon,
 .show-apps:hover > .overview-icon,
+.search-provider-icon:hover,
 .search-result-content:hover > .overview-icon {
     background-color: rgba(255,255,255,0.1);
     text-shadow: black 0px 2px 2px;
@@ -926,8 +934,10 @@ StScrollBar StButton#vhandle:active {
 .app-well-app:focus > .overview-icon,
 .search-result-content:focus > .overview-icon,
 .show-apps:focus > .overview-icon,
+.search-provider-icon:focus,
 .app-well-app:selected > .overview-icon,
-.search-result-content:selected > .overview-icon {
+.search-result-content:selected > .overview-icon,
+.search-provider-icon:selected {
     background-color: rgba(255,255,255,0.33);
 }
 

data/theme/more-results.svg

@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   id="svg12430"
+   version="1.1"
+   inkscape:version="0.48+devel r11908 custom"
+   sodipodi:docname="more-results.svg">
+  <defs
+     id="defs12432" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#7a7a7a"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="7.4498765"
+     inkscape:cy="9.9072581"
+     inkscape:document-units="px"
+     inkscape:current-layer="g14642-3-0"
+     showgrid="false"
+     borderlayer="true"
+     inkscape:showpageshadow="false"
+     inkscape:window-width="2560"
+     inkscape:window-height="1376"
+     inkscape:window-x="1600"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid13002" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata12435">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1036.3622)">
+    <g
+       style="display:inline"
+       transform="translate(-141.99984,638.37113)"
+       inkscape:label="zoom-in"
+       id="g14642-3-0">
+      <path
+         sodipodi:type="inkscape:offset"
+         inkscape:radius="0"
+         inkscape:original="M 145.1875 400 C 144.5248 400 144 400.54899 144 401.21875 L 144 410.78125 C 144 411.45101 144.5248 412 145.1875 412 L 154.8125 412 C 155.4752 412 156 411.45101 156 410.78125 L 156 401.21875 C 156 400.54899 155.4752 400 154.8125 400 L 145.1875 400 z M 149 403 L 151 403 L 151 405 L 153 405 L 153 407 L 151 407 L 151 409 L 149 409 L 149 407 L 147 407 L 147 405 L 149 405 L 149 403 z "
+         xlink:href="#rect11749-5-0-1-8"
+         style="color:#bebebe;fill:#000000;fill-opacity:0.38207546;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible"
+         id="path13004"
+         inkscape:href="#rect11749-5-0-1-8"
+         d="M 145.1875,400 C 144.5248,400 144,400.54899 144,401.21875 l 0,9.5625 c 0,0.66976 0.5248,1.21875 1.1875,1.21875 l 9.625,0 c 0.6627,0 1.1875,-0.54899 1.1875,-1.21875 l 0,-9.5625 C 156,400.54899 155.4752,400 154.8125,400 L 145.1875,400 z m 3.8125,3 2,0 0,2 2,0 0,2 -2,0 0,2 -2,0 0,-2 -2,0 0,-2 2,0 L 149,403 Z"
+         transform="translate(0,1)" />
+      <path
+         inkscape:connector-curvature="0"
+         style="color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible"
+         d="M 145.1875,400 C 144.5248,400 144,400.54899 144,401.21875 l 0,9.5625 c 0,0.66976 0.5248,1.21875 1.1875,1.21875 l 9.625,0 c 0.6627,0 1.1875,-0.54899 1.1875,-1.21875 l 0,-9.5625 C 156,400.54899 155.4752,400 154.8125,400 L 145.1875,400 z m 3.8125,3 2,0 0,2 2,0 0,2 -2,0 0,2 -2,0 0,-2 -2,0 0,-2 2,0 L 149,403 Z"
+         id="rect11749-5-0-1-8" />
+      <rect
+         style="fill:none;stroke:none"
+         id="rect3620-5-4"
+         width="15.981825"
+         height="16"
+         x="142"
+         y="398"
+         rx="0"
+         ry="0" />
+    </g>
+  </g>
+</svg>

js/ui/appDisplay.js

@@ -315,8 +315,9 @@ const AppSearchProvider = new Lang.Class({
     Extends: Search.SearchProvider,
 
     _init: function() {
-        this.parent(_("APPLICATIONS"));
+        this.parent();
         this._appSys = Shell.AppSystem.get_default();
+        this.id = 'applications';
     },
 
     getResultMetas: function(apps, callback) {
@@ -372,10 +373,8 @@ const SettingsSearchProvider = new Lang.Class({
     Extends: Search.SearchProvider,
 
     _init: function() {
-        this.parent(_("SETTINGS"));
+        this.parent(Gio.DesktopAppInfo.new('gnome-control-center.desktop'));
-
         this._appSys = Shell.AppSystem.get_default();
-        this.appInfo = Gio.DesktopAppInfo.new('gnome-control-center.desktop');
     },
 
     getResultMetas: function(prefs, callback) {

js/ui/remoteSearch.js

@@ -176,7 +176,7 @@ const RemoteSearchProvider = new Lang.Class({
         this.proxy = new proxyType(Gio.DBus.session,
                 dbusName, dbusPath, Lang.bind(this, this._onProxyConstructed));
 
-        this.parent(appInfo.get_name().toUpperCase(), appInfo, true);
+        this.parent(appInfo, true);
         this._cancellable = new Gio.Cancellable();
     },
 

js/ui/search.js

@@ -76,12 +76,14 @@ const SearchResultDisplay = new Lang.Class({
 const SearchProvider = new Lang.Class({
     Name: 'SearchProvider',
 
-    _init: function(title, appInfo, isRemoteProvider) {
+    _init: function(appInfo, isRemoteProvider) {
-        this.title = title;
         this.appInfo = appInfo;
         this.searchSystem = null;
         this.isRemoteProvider = !!isRemoteProvider;
         this.canLaunchSearch = false;
+
+        if (this.appInfo)
+            this.id = this.appInfo.get_id();
     },
 
     /**
@@ -273,7 +275,7 @@ const SearchSystem = new Lang.Class({
                     results.push([provider, []]);
                     provider.getSubsearchResultSet(previousResults, terms);
                 } catch (error) {
-                    log('A ' + error.name + ' has occured in ' + provider.title + ': ' + error.message);
+                    log('A ' + error.name + ' has occured in ' + provider.id + ': ' + error.message);
                 }
             }
         } else {
@@ -283,7 +285,7 @@ const SearchSystem = new Lang.Class({
                     results.push([provider, []]);
                     provider.getInitialResultSet(terms);
                 } catch (error) {
-                    log('A ' + error.name + ' has occured in ' + provider.title + ': ' + error.message);
+                    log('A ' + error.name + ' has occured in ' + provider.id + ': ' + error.message);
                 }
             }
         }

js/ui/searchDisplay.js

@@ -144,6 +144,10 @@ const GridSearchResults = new Lang.Class({
         return this._grid.visibleItemsCount();
     },
 
+    hasMoreResults: function() {
+        return this._notDisplayedResult.length > 0;
+    },
+
     setResults: function(results, terms) {
         // copy the lists
         this._notDisplayedResult = results.slice(0);
@@ -222,11 +226,22 @@ const SearchResults = new Lang.Class({
     },
 
     createProviderMeta: function(provider) {
-        let providerBox = new St.BoxLayout({ style_class: 'search-section',
+        let providerBox = new St.BoxLayout({ style_class: 'search-section' });
-                                             vertical: true });
+        let providerIcon = null;
-        let title = new St.Label({ style_class: 'search-section-header',
+
-                                   text: provider.title });
+        if (provider.appInfo) {
-        providerBox.add(title, { x_fill: false, x_align: St.Align.START });
+            providerIcon = new ProviderIcon(provider);
+            providerIcon.connect('clicked', Lang.bind(this,
+                function() {
+                    provider.launchSearch(this._searchSystem.getTerms());
+                    Main.overview.toggle();
+                }));
+
+            providerBox.add(providerIcon, { x_fill: false,
+                                            y_fill: false,
+                                            x_align: St.Align.START,
+                                            y_align: St.Align.START });
+        }
 
         let resultDisplayBin = new St.Bin({ style_class: 'search-section-results',
                                             x_fill: true,
@@ -237,6 +252,7 @@ const SearchResults = new Lang.Class({
 
         this._providerMeta.push({ provider: provider,
                                   actor: providerBox,
+                                  icon: providerIcon,
                                   resultDisplay: resultDisplay });
         this._content.add(providerBox);
     },
@@ -343,6 +359,11 @@ const SearchResults = new Lang.Class({
             meta.resultDisplay.setResults(providerResults, terms);
             let results = meta.resultDisplay.getResultsForDisplay();
 
+            if (meta.icon)
+                meta.icon.moreIcon.visible =
+                    meta.resultDisplay.hasMoreResults() &&
+                    provider.canLaunchSearch;
+
             provider.getResultMetas(results, Lang.bind(this, function(metas) {
                 this._clearDisplayForProvider(provider);
                 meta.actor.show();
@@ -395,3 +416,35 @@ const SearchResults = new Lang.Class({
         }
     }
 });
+
+const ProviderIcon = new Lang.Class({
+    Name: 'ProviderIcon',
+    Extends: St.Button,
+
+    PROVIDER_ICON_SIZE: 48,
+
+    _init: function(provider) {
+        this.provider = provider;
+        this.parent({ style_class: 'search-provider-icon',
+                      reactive: true,
+                      can_focus: true,
+                      track_hover: true });
+
+        this._content = new St.Widget({ layout_manager: new Clutter.BinLayout() });
+        this.set_child(this._content);
+
+        let rtl = (this.get_text_direction() == Clutter.TextDirection.RTL);
+
+        this.moreIcon = new St.Widget({ style_class: 'search-provider-icon-more',
+                                        visible: false,
+                                        x_align: rtl ? Clutter.ActorAlign.START : Clutter.ActorAlign.END,
+                                        y_align: Clutter.ActorAlign.END,
+                                        x_expand: true,
+                                        y_expand: true });
+
+        let icon = new St.Icon({ icon_size: this.PROVIDER_ICON_SIZE,
+                                 gicon: provider.appInfo.get_icon() });
+        this._content.add_actor(icon);
+        this._content.add_actor(this.moreIcon);
+    }
+});

js/ui/wanda.js

@@ -136,7 +136,8 @@ const WandaSearchProvider = new Lang.Class({
     Extends: Search.SearchProvider,
 
     _init: function() {
-        this.parent(_("Your favorite Easter Egg"));
+        this.parent();
+        this.id = 'wanda';
     },
 
     getResultMetas: function(fish, callback) {