Use application icons for "Eye" menu and Crumbs

Summary:
Issues here:

  - Need an application-sized "eye", or a "home" icon for "Phabricator Home".
  - Some of the "apps_lb_2x" sliced images are the "_dark_" versions, not the light versions.
  - If you slice an application-sized "logout" (power off) icon and application-sized "help" (questionmark in circle) icon I can replace the current menu icons and nearly get rid of "autosprite".
  - To replace the icons on /applications/, the non-retina size is "4x", so we'd need "8x" for retina. Alternatively I can reduce the icon sizes by 50%.
  - The "Help", "Settings" and "Logout" items currently have a "glowing" hover state, which needs a variant (or we can drop it).
  - The /applications/ icons have a white hover state (or we can drop it).
  - The 1x application (14x14) icons aren't used anywhere right now, should they be? Maybe in the feed in the future, etc?
  - The "apps-2x" and "apps-large" sheets are the same image, but getting them to actually use the same file is a bit tricky, so I just left them separate for now.

Test Plan:
{F26698}
{F26699}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T1960

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

src/applications/audit/application/PhabricatorApplicationAudit.php

@@ -10,7 +10,7 @@ final class PhabricatorApplicationAudit extends PhabricatorApplication {
     return '/audit/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'audit';
   }
 

src/applications/auth/application/PhabricatorApplicationAuth.php

@@ -15,7 +15,7 @@ final class PhabricatorApplicationAuth extends PhabricatorApplication {
     if ($user->isLoggedIn()) {
       $item = new PhabricatorMenuItemView();
       $item->setName(pht('Log Out'));
-      $item->setIcon('logout');
+      $item->setIcon('power');
       $item->setWorkflow(true);
       $item->setHref('/logout/');
       $item->setSortOrder(2.0);

src/applications/base/PhabricatorApplication.php

@@ -62,8 +62,8 @@ abstract class PhabricatorApplication {
     return null;
   }
 
-  public function getAutospriteName() {
-    return 'default';
+  public function getIconName() {
+    return 'application';
   }
 
   public function shouldAppearInLaunchView() {

src/applications/base/controller/PhabricatorController.php

@@ -253,14 +253,14 @@ abstract class PhabricatorController extends AphrontController {
 
     $application = $this->getCurrentApplication();
     if ($application) {
-      $sprite = $application->getAutospriteName();
+      $sprite = $application->getIconName();
       if (!$sprite) {
-        $sprite = 'default';
+        $sprite = 'application';
       }
 
       $crumbs[] = id(new PhabricatorCrumbView())
         ->setHref($this->getApplicationURI())
-        ->setIcon('temporary-icon-apps');
+        ->setIcon($sprite);
     }
 
     $view = new PhabricatorCrumbsView();

src/applications/conduit/application/PhabricatorApplicationConduit.php

@@ -6,7 +6,7 @@ final class PhabricatorApplicationConduit extends PhabricatorApplication {
     return '/conduit/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'conduit';
   }
 

src/applications/countdown/application/PhabricatorApplicationCountdown.php

@@ -6,7 +6,7 @@ final class PhabricatorApplicationCountdown extends PhabricatorApplication {
     return '/countdown/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'countdown';
   }
 

src/applications/daemon/application/PhabricatorApplicationDaemons.php

@@ -18,8 +18,8 @@ final class PhabricatorApplicationDaemons extends PhabricatorApplication {
     return "\xE2\x98\xAF";
   }
 
-  public function getAutospriteName() {
-    return 'daemons';
+  public function getIconName() {
+    return 'daemon';
   }
 
   public function getApplicationGroup() {

src/applications/differential/application/PhabricatorApplicationDifferential.php

@@ -10,7 +10,7 @@ final class PhabricatorApplicationDifferential extends PhabricatorApplication {
     return 'Review Code';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'differential';
   }
 

src/applications/diffusion/application/PhabricatorApplicationDiffusion.php

@@ -10,7 +10,7 @@ final class PhabricatorApplicationDiffusion extends PhabricatorApplication {
     return '/diffusion/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'diffusion';
   }
 

src/applications/diviner/application/PhabricatorApplicationDiviner.php

@@ -6,7 +6,7 @@ final class PhabricatorApplicationDiviner extends PhabricatorApplication {
     return '/diviner/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'diviner';
   }
 

src/applications/drydock/application/PhabricatorApplicationDrydock.php

@@ -10,7 +10,7 @@ final class PhabricatorApplicationDrydock extends PhabricatorApplication {
     return 'Allocate Software Resources';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'drydock';
   }
 

src/applications/fact/application/PhabricatorApplicationFact.php

@@ -10,7 +10,7 @@ final class PhabricatorApplicationFact extends PhabricatorApplication {
     return '/fact/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'fact';
   }
 

src/applications/files/application/PhabricatorApplicationFiles.php

@@ -10,7 +10,7 @@ final class PhabricatorApplicationFiles extends PhabricatorApplication {
     return 'Store and Share Files';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'files';
   }
 

src/applications/flag/application/PhabricatorApplicationFlags.php

@@ -10,7 +10,7 @@ final class PhabricatorApplicationFlags extends PhabricatorApplication {
     return '/flag/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'flags';
   }
 

src/applications/herald/application/PhabricatorApplicationHerald.php

@@ -6,7 +6,7 @@ final class PhabricatorApplicationHerald extends PhabricatorApplication {
     return '/herald/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'herald';
   }
 

src/applications/macro/application/PhabricatorApplicationMacro.php

@@ -10,7 +10,7 @@ final class PhabricatorApplicationMacro extends PhabricatorApplication {
     return 'Image Macros and Memes';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'macro';
   }
 

src/applications/mailinglists/application/PhabricatorApplicationMailingLists.php

@@ -14,7 +14,7 @@ final class PhabricatorApplicationMailingLists extends PhabricatorApplication {
     return 'Manage External Lists';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'mail';
   }
 

src/applications/maniphest/application/PhabricatorApplicationManiphest.php

@@ -14,7 +14,7 @@ final class PhabricatorApplicationManiphest extends PhabricatorApplication {
     return PhabricatorEnv::getEnvConfig('maniphest.enabled');
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'maniphest';
   }
 

src/applications/meta/application/PhabricatorApplicationApplications.php

@@ -10,7 +10,7 @@ final class PhabricatorApplicationApplications extends PhabricatorApplication {
     return 'Manage Applications';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'applications';
   }
 

src/applications/meta/view/PhabricatorApplicationLaunchView.php

@@ -25,6 +25,7 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
     $application = $this->application;
 
     require_celerity_resource('phabricator-application-launch-view-css');
+    require_celerity_resource('sprite-apps-xlarge-css');
 
     $content = array();
     $content[] = phutil_render_tag(
@@ -79,9 +80,9 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
     if ($application->getIconURI()) {
       $styles[] = 'background-image: url('.$application->getIconURI().')';
     } else {
-      $autosprite = $application->getAutospriteName();
-      $classes[] = 'autosprite';
-      $classes[] = 'app-'.$autosprite.'-large';
+      $icon = $application->getIconName();
+      $classes[] = 'sprite-apps-xlarge';
+      $classes[] = 'app-'.$icon.'-dark-xlarge';
     }
 
     $icon = phutil_render_tag(

src/applications/metamta/application/PhabricatorApplicationMetaMTA.php

@@ -10,8 +10,8 @@ final class PhabricatorApplicationMetaMTA extends PhabricatorApplication {
     return 'View Mail Logs';
   }
 
-  public function getAutospriteName() {
-    return 'mail';
+  public function getIconName() {
+    return 'metamta';
   }
 
   public function getFlavorText() {

src/applications/owners/application/PhabricatorApplicationOwners.php

@@ -6,7 +6,7 @@ final class PhabricatorApplicationOwners extends PhabricatorApplication {
     return '/owners/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'owners';
   }
 

src/applications/paste/application/PhabricatorApplicationPaste.php

@@ -6,7 +6,7 @@ final class PhabricatorApplicationPaste extends PhabricatorApplication {
     return '/paste/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'paste';
   }
 

src/applications/people/application/PhabricatorApplicationPeople.php

@@ -14,7 +14,7 @@ final class PhabricatorApplicationPeople extends PhabricatorApplication {
     return "\xE2\x99\x9F";
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'people';
   }
 

src/applications/phame/application/PhabricatorApplicationPhame.php

@@ -6,7 +6,7 @@ final class PhabricatorApplicationPhame extends PhabricatorApplication {
     return '/phame/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'phame';
   }
 

src/applications/phid/application/PhabricatorApplicationPHID.php

@@ -10,7 +10,7 @@ final class PhabricatorApplicationPHID extends PhabricatorApplication {
     return '/phid/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'phid';
   }
 

src/applications/pholio/application/PhabricatorApplicationPholio.php

@@ -18,7 +18,7 @@ final class PhabricatorApplicationPholio extends PhabricatorApplication {
     return 'Design Review';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'pholio';
   }
 

src/applications/phriction/application/PhabricatorApplicationPhriction.php

@@ -10,7 +10,7 @@ final class PhabricatorApplicationPhriction extends PhabricatorApplication {
     return '/w/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'phriction';
   }
 

src/applications/ponder/application/PhabricatorApplicationPonder.php

@@ -10,7 +10,7 @@ final class PhabricatorApplicationPonder extends PhabricatorApplication {
     return 'Find Answers';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'ponder';
   }
 

src/applications/project/application/PhabricatorApplicationProject.php

@@ -14,7 +14,7 @@ final class PhabricatorApplicationProject extends PhabricatorApplication {
     return '/project/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'projects';
   }
 

src/applications/repository/application/PhabricatorApplicationRepositories.php

@@ -6,7 +6,7 @@ final class PhabricatorApplicationRepositories extends PhabricatorApplication {
     return '/repository/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'repositories';
   }
 

src/applications/settings/application/PhabricatorApplicationSettings.php

@@ -10,7 +10,7 @@ final class PhabricatorApplicationSettings extends PhabricatorApplication {
     return 'User Preferences';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'settings';
   }
 

src/applications/slowvote/application/PhabricatorApplicationSlowvote.php

@@ -6,7 +6,7 @@ final class PhabricatorApplicationSlowvote extends PhabricatorApplication {
     return '/vote/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'slowvote';
   }
 

src/applications/uiexample/application/PhabricatorApplicationUIExamples.php

@@ -10,8 +10,8 @@ final class PhabricatorApplicationUIExamples extends PhabricatorApplication {
     return 'Developer UI Examples';
   }
 
-  public function getAutospriteName() {
-    return 'uiexample';
+  public function getIconName() {
+    return 'uiexamples';
   }
 
   public function getTitleGlyph() {

src/applications/xhpastview/application/PhabricatorApplicationPHPAST.php

@@ -6,7 +6,7 @@ final class PhabricatorApplicationPHPAST extends PhabricatorApplication {
     return '/xhpast/';
   }
 
-  public function getAutospriteName() {
+  public function getIconName() {
     return 'phpast';
   }
 

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -67,7 +67,7 @@ final class CeleritySpriteGenerator {
       $sprites[] = $sprite;
     }
 
-    $sheet = $this->buildSheet('icon');
+    $sheet = $this->buildSheet('icon', true);
     $sheet->setScales($scales);
     foreach ($sprites as $sprite) {
       $sheet->addSprite($sprite);
@@ -146,7 +146,7 @@ final class CeleritySpriteGenerator {
       $sprites[] = $sprite;
     }
 
-    $sheet = $this->buildSheet('menu');
+    $sheet = $this->buildSheet('menu', true);
     $sheet->setScales($scales);
     foreach ($sprites as $sprite) {
       $sheet->addSprite($sprite);
@@ -206,6 +206,7 @@ final class CeleritySpriteGenerator {
 
     $sheet = $this->buildSheet(
       'gradient',
+      false,
       PhutilSpriteSheet::TYPE_REPEAT_X,
       ', button, a.button, a.button:visited, input.inputsubmit, '.
       '.phabricator-dark-menu .phabricator-menu-item-type-label');
@@ -216,6 +217,113 @@ final class CeleritySpriteGenerator {
     return $sheet;
   }
 
+  public function buildAppsSheet() {
+    return $this->buildAppsSheetVariant(1);
+  }
+
+  public function buildAppsLargeSheet() {
+    return $this->buildAppsSheetVariant(2);
+  }
+
+  public function buildAppsXLargeSheet() {
+    return $this->buildAppsSheetVariant(3);
+  }
+
+  private function buildAppsSheetVariant($variant) {
+
+    if ($variant == 1) {
+      $scales = array(
+        '1x' => 1,
+        '2x' => 2,
+      );
+      $variant_name = 'apps';
+      $variant_short = '';
+      $size_x = 14;
+      $size_y = 14;
+
+      $colors = array(
+        'dark'  => 'dark',
+      );
+    } else if ($variant == 2) {
+      $scales = array(
+        '2x' => 1,
+        '4x' => 2,
+      );
+      $variant_name = 'apps-large';
+      $variant_short = '-large';
+      $size_x = 28;
+      $size_y = 28;
+
+      $colors = array(
+        'light' => 'lb',
+        'dark'  => 'dark',
+        'blue'  => 'blue',
+        'glow'  => 'glow',
+      );
+    } else {
+      $scales = array(
+        '4x' => 1,
+      );
+      $variant_name = 'apps-xlarge';
+      $variant_short = '-xlarge';
+      $size_x = 56;
+      $size_y = 56;
+
+      $colors = array(
+        'dark'  => 'dark',
+        /*
+
+        TODO: These are available but not currently used.
+
+        'blue'  => 'blue',
+        'light' => 'lb',
+        'glow'  => 'glow',
+        */
+      );
+    }
+
+
+    $apps = $this->getDirectoryList('apps_dark_1x');
+
+    $template = id(new PhutilSprite())
+      ->setSourceSize($size_x, $size_y);
+
+    $sprites = array();
+    foreach ($apps as $app) {
+      foreach ($colors as $color => $color_path) {
+
+        $css = '.app-'.$app.'-'.$color.$variant_short;
+        if ($color == 'blue' && $variant_name == 'apps-large') {
+          $css .= ', .phabricator-crumb-view:hover .app-'.$app.'-dark-large';
+        }
+        if ($color == 'glow' && $variant_name == 'apps-large') {
+          $css .= ', .device-desktop .phabricator-dark-menu a:hover '.
+                  '.app-'.$app.'-light-large';
+        }
+
+        $sprite = id(clone $template)
+          ->setName('app-'.$app.'-'.$color.$variant_short)
+          ->setTargetCSS($css);
+
+        foreach ($scales as $scale_name => $scale) {
+          $path = $this->getPath(
+            'apps_'.$color_path.'_'.$scale_name.'/'.$app.'.png');
+          $sprite->setSourceFile($path, $scale);
+        }
+
+        $sprites[] = $sprite;
+      }
+    }
+
+    $sheet = $this->buildSheet($variant_name, count($scales) > 1);
+    $sheet->setScales($scales);
+    foreach ($sprites as $sprite) {
+      $sheet->addSprite($sprite);
+    }
+
+    return $sheet;
+  }
+
 
   private function getPath($to_path = null) {
     $root = dirname(phutil_get_library_root('phabricator'));
@@ -240,7 +348,12 @@ final class CeleritySpriteGenerator {
     return $result;
   }
 
-  private function buildSheet($name, $type = null, $extra_css = '') {
+  private function buildSheet(
+    $name,
+    $has_retina,
+    $type = null,
+    $extra_css = '') {
+
     $sheet = new PhutilSpriteSheet();
 
     $at = '@';
@@ -259,6 +372,20 @@ final class CeleritySpriteGenerator {
         break;
     }
 
+    $retina_rules = null;
+    if ($has_retina) {
+      $retina_rules = <<<EOCSS
+@media
+only screen and (min-device-pixel-ratio: 1.5),
+only screen and (-webkit-min-device-pixel-ratio: 1.5) {
+  .sprite-{$name}{$extra_css} {
+    background-image: url(/rsrc/image/sprite-{$name}-X2.png);
+    background-size: {X}px {Y}px;
+  }
+}
+EOCSS;
+    }
+
     $sheet->setSheetType($type);
     $sheet->setCSSHeader(<<<EOCSS
 /**
@@ -271,14 +398,8 @@ final class CeleritySpriteGenerator {
   background-repeat: {$repeat_rule};
 }
 
-@media
-only screen and (min-device-pixel-ratio: 1.5),
-only screen and (-webkit-min-device-pixel-ratio: 1.5) {
-  .sprite-{$name}{$extra_css} {
-    background-image: url(/rsrc/image/sprite-{$name}-X2.png);
-    background-size: {X}px {Y}px;
-  }
-}
+{$retina_rules}
+
 EOCSS
 );
 

src/view/layout/PhabricatorCrumbView.php

@@ -42,7 +42,8 @@ final class PhabricatorCrumbView extends AphrontView {
       $icon = phutil_render_tag(
         'span',
         array(
-          'class' => 'phabricator-crumb-icon '.$this->icon,
+          'class' => 'phabricator-crumb-icon '.
+                     'sprite-apps-large app-'.$this->icon.'-dark',
         ),
         '');
     }

src/view/page/PhabricatorStandardPageView.php

@@ -101,7 +101,6 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
     $console = $this->getConsole();
 
     require_celerity_resource('phabricator-core-css');
-    require_celerity_resource('autosprite-css');
     require_celerity_resource('phabricator-core-buttons-css');
     require_celerity_resource('sprite-gradient-css');
     require_celerity_resource('phabricator-standard-page-view');

src/view/page/menu/PhabricatorMainMenuView.php

@@ -205,12 +205,17 @@ final class PhabricatorMainMenuView extends AphrontView {
     $more = array();
     $actions = array();
 
+    require_celerity_resource('sprite-apps-large-css');
+
     $group_core = PhabricatorApplication::GROUP_CORE;
     foreach ($applications as $application) {
       if ($application->shouldAppearInLaunchView()) {
+        $icon = $application->getIconName().'-light-large';
+
         $item = id(new PhabricatorMenuItemView())
           ->setName($application->getName())
-          ->setHref($application->getBaseURI());
+          ->setHref($application->getBaseURI())
+          ->appendChild($this->renderMenuIcon($icon));
         if ($application->getApplicationGroup() == $group_core) {
           $core[] = $item;
         } else {
@@ -239,13 +244,16 @@ final class PhabricatorMainMenuView extends AphrontView {
       id(new PhabricatorMenuItemView())
         ->addClass('phabricator-core-item-device')
         ->setName(pht('Phabricator Home'))
-        ->setHref('/'));
+        ->setHref('/')
+        ->appendChild($this->renderMenuIcon('logo-light-large')));
     if ($controller->getCurrentApplication()) {
       $application = $controller->getCurrentApplication();
+      $icon = $application->getIconName().'-light-large';
       $view->addMenuItem(
         id(new PhabricatorMenuItemView())
           ->addClass('phabricator-core-item-device')
           ->setName(pht('%s Home', $application->getName()))
+          ->appendChild($this->renderMenuIcon($icon))
           ->setHref($controller->getApplicationURI()));
     }
 
@@ -271,24 +279,11 @@ final class PhabricatorMainMenuView extends AphrontView {
       foreach ($actions as $action) {
         $icon = $action->getIcon();
         if ($icon) {
-          $classes = array(
-            'phabricator-core-menu-icon',
-            'autosprite',
-          );
-
           if ($action->getSelected()) {
-            $classes[] = 'main-menu-item-icon-'.$icon.'-selected';
+            $action->appendChild($this->renderMenuIcon($icon.'-blue-large'));
           } else {
-            $classes[] = 'main-menu-item-icon-'.$icon;
+            $action->appendChild($this->renderMenuIcon($icon.'-light-large'));
           }
-
-          $action->appendChild(
-            phutil_render_tag(
-              'span',
-              array(
-                'class' => implode(' ', $classes),
-              ),
-              ''));
         }
         $view->addMenuItem($action);
       }
@@ -382,4 +377,14 @@ final class PhabricatorMainMenuView extends AphrontView {
     return array($bubble_tag, $notification_dropdown);
   }
 
+  private function renderMenuIcon($name) {
+    return phutil_render_tag(
+      'span',
+      array(
+        'class' => 'phabricator-core-menu-icon '.
+                   'sprite-apps-large app-'.$name,
+      ),
+      '');
+  }
+
 }