Add app icons to search typeahead

Summary: Seems likely reasonable.

Test Plan:
Search for apps and other stuff, seems good.

{F166279}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D9524

resources/celerity/map.php

@@ -7,8 +7,8 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => '6cdd937e',
-    'core.pkg.js' => '8335fe3f',
+    'core.pkg.css' => 'a8d8a51c',
+    'core.pkg.js' => '07b01d4f',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => '4a93db37',
     'differential.pkg.js' => 'eca39a2c',
@@ -36,7 +36,7 @@ return array(
     'rsrc/css/aphront/two-column.css' => '16ab3ad2',
     'rsrc/css/aphront/typeahead.css' => 'a989b5b3',
     'rsrc/css/application/auth/auth.css' => '1e655982',
-    'rsrc/css/application/base/main-menu-view.css' => '72d1d2ef',
+    'rsrc/css/application/base/main-menu-view.css' => 'b597e539',
     'rsrc/css/application/base/notification-menu.css' => 'cbff1b94',
     'rsrc/css/application/base/phabricator-application-launch-view.css' => '8b7e271d',
     'rsrc/css/application/base/standard-page-view.css' => '517cdfb1',
@@ -464,7 +464,7 @@ return array(
     'rsrc/js/core/behavior-remarkup-preview.js' => 'f7379f45',
     'rsrc/js/core/behavior-reorder-applications.js' => 'a8e3795d',
     'rsrc/js/core/behavior-reveal-content.js' => '8f24abfc',
-    'rsrc/js/core/behavior-search-typeahead.js' => '86549ee3',
+    'rsrc/js/core/behavior-search-typeahead.js' => 'fbeabd1e',
     'rsrc/js/core/behavior-select-on-click.js' => '0e34ca02',
     'rsrc/js/core/behavior-toggle-class.js' => 'a82a7769',
     'rsrc/js/core/behavior-tokenizer.js' => 'b3a4b884',
@@ -605,7 +605,7 @@ return array(
     'javelin-behavior-phabricator-oncopy' => 'c3e218fe',
     'javelin-behavior-phabricator-remarkup-assist' => 'ba22863c',
     'javelin-behavior-phabricator-reveal-content' => '8f24abfc',
-    'javelin-behavior-phabricator-search-typeahead' => '86549ee3',
+    'javelin-behavior-phabricator-search-typeahead' => 'fbeabd1e',
     'javelin-behavior-phabricator-show-all-transactions' => '7c273581',
     'javelin-behavior-phabricator-tooltips' => '48db4145',
     'javelin-behavior-phabricator-transaction-comment-form' => '9084a36f',
@@ -706,7 +706,7 @@ return array(
     'phabricator-hovercard-view-css' => 'cae6e28f',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'ad7a69ca',
-    'phabricator-main-menu-view' => '72d1d2ef',
+    'phabricator-main-menu-view' => 'b597e539',
     'phabricator-nav-view-css' => '9283c2df',
     'phabricator-notification' => '0c6946e7',
     'phabricator-notification-css' => 'ef2c9b34',
@@ -1442,16 +1442,6 @@ return array(
       1 => 'javelin-dom',
       2 => 'javelin-reactor-dom',
     ),
-    '86549ee3' =>
-    array(
-      0 => 'javelin-behavior',
-      1 => 'javelin-typeahead-ondemand-source',
-      2 => 'javelin-typeahead',
-      3 => 'javelin-dom',
-      4 => 'javelin-uri',
-      5 => 'javelin-util',
-      6 => 'javelin-stratcom',
-    ),
     '8a3ed18b' =>
     array(
       0 => 'javelin-magical-init',
@@ -2058,6 +2048,16 @@ return array(
       0 => 'phabricator-busy',
       1 => 'javelin-behavior',
     ),
+    'fbeabd1e' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-typeahead-ondemand-source',
+      2 => 'javelin-typeahead',
+      3 => 'javelin-dom',
+      4 => 'javelin-uri',
+      5 => 'javelin-util',
+      6 => 'javelin-stratcom',
+    ),
     'fe2e0ba4' =>
     array(
       0 => 'javelin-behavior',

src/applications/typeahead/controller/PhabricatorTypeaheadCommonDatasourceController.php

@@ -315,7 +315,7 @@ final class PhabricatorTypeaheadCommonDatasourceController
       $packages = id(new PhabricatorOwnersPackage())->loadAll();
       foreach ($packages as $package) {
         $results[] = id(new PhabricatorTypeaheadResult())
-          ->setIcon('pl-testplan')
+          ->setIcon('fa-list-alt bluegrey')
           ->setName($package->getName())
           ->setURI('/owners/package/'.$package->getID().'/')
           ->setPHID($package->getPHID());
@@ -339,7 +339,7 @@ final class PhabricatorTypeaheadCommonDatasourceController
           continue;
         }
         $name = $application->getName().' '.$application->getShortDescription();
-
+        $img = 'apps-'.$application->getIconName().'-dark-large';
         $results[] = id(new PhabricatorTypeaheadResult())
           ->setName($name)
           ->setURI($uri)
@@ -348,7 +348,8 @@ final class PhabricatorTypeaheadCommonDatasourceController
           ->setDisplayName($application->getName())
           ->setDisplayType($application->getShortDescription())
           ->setImageuRI($application->getIconURI())
-          ->setPriorityType('apps');
+          ->setPriorityType('apps')
+          ->setImageSprite('phabricator-search-icon sprite-apps-large '.$img);
       }
     }
 
@@ -424,6 +425,7 @@ final class PhabricatorTypeaheadCommonDatasourceController
         'Display Type',
         'Image URI',
         'Priority Type',
+        'Sprite Class',
       ));
 
     $panel = new AphrontPanelView();
@@ -433,7 +435,8 @@ final class PhabricatorTypeaheadCommonDatasourceController
     return $this->buildStandardPageResponse(
       $panel,
       array(
-        'title' => 'Typeahead Results',
+        'title' => pht('Typeahead Results'),
+        'device' => true
       ));
   }
 

src/applications/typeahead/storage/PhabricatorTypeaheadResult.php

@@ -10,6 +10,7 @@ final class PhabricatorTypeaheadResult {
   private $displayType;
   private $imageURI;
   private $priorityType;
+  private $imageSprite;
   private $icon;
   private $closed;
 
@@ -58,6 +59,11 @@ final class PhabricatorTypeaheadResult {
     return $this;
   }
 
+  public function setImageSprite($image_sprite) {
+    $this->imageSprite = $image_sprite;
+    return $this;
+  }
+
   public function setClosed($closed) {
     $this->closed = $closed;
     return $this;
@@ -75,6 +81,7 @@ final class PhabricatorTypeaheadResult {
       $this->priorityType,
       $this->icon,
       $this->closed,
+      $this->imageSprite ? (string)$this->imageSprite : null,
     );
     while (end($data) === null) {
       array_pop($data);

webroot/rsrc/css/application/base/main-menu-view.css

@@ -201,12 +201,22 @@
   margin-left: 40px;
 }
 
+.phabricator-main-search-typeahead-result .phabricator-search-icon {
+  display: inline-block;
+  width: 28px;
+  height: 28px;
+  position: absolute;
+  top: 9px;
+  left: 9px;
+}
+
 .phabricator-main-search-typeahead-result {
   display: block;
   padding: 6px 8px 8px 44px;
   background-position: 8px;
   background-size: 30px 30px;
   background-repeat: no-repeat;
+  position: relative;
 }
 
 .phabricator-main-search-typeahead-result .result-name {

webroot/rsrc/js/core/behavior-search-typeahead.js

@@ -26,6 +26,7 @@ JX.behavior('phabricator-search-typeahead', function(config) {
       'span',
       attr,
       [
+        JX.$N('span', {className: object[10]}),
         JX.$N('span', {className: 'result-name'}, object[4] || object[0]),
         JX.$N('span', {className: 'result-type'}, object[5])
       ]);