Use sprites for (nearly) all application icons

Summary: Sprites for everyone.

Test Plan: Loaded `/applications/`.

Reviewers: btrahan, chad, vrana

Reviewed By: vrana

CC: aran

Maniphest Tasks: T1569

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

scripts/celerity/generate_sprites.php

@@ -55,13 +55,13 @@ function gly($y) {
 }
 
 $sheet = new PhutilSpriteSheet();
-$sheet->addCSSHeader(<<<EOCSS
+$sheet->setCSSHeader(<<<EOCSS
 /**
  * @provides autosprite-css
  */
 
 .autosprite {
-  background-image: url(/rsrc/images/autosprite.png);
+  background-image: url(/rsrc/image/autosprite.png);
   background-repeat: no-repeat;
 }
 EOCSS
@@ -109,7 +109,7 @@ $app_template_full = id(new PhutilSprite())
 
 $app_template_mini = id(new PhutilSprite())
   ->setSourceFile($srcroot.'/application_normal_1x.png')
-  ->setSourceSize(26, 26);
+  ->setSourceSize(30, 30);
 
 $app_source_map = array(
   '-full' => array($app_template_full, 2),
@@ -140,13 +140,14 @@ $app_map = array(
   'feed'            => array(3, 11),
 );
 
+$xadj = -1;
 foreach ($app_map as $icon => $coords) {
   list($x, $y) = $coords;
   foreach ($app_source_map as $suffix => $spec) {
     list($template, $scale) = $spec;
     $sheet->addSprite(
       id(clone $template)
-        ->setSourcePosition(glx($x) * $scale, gly($y) * $scale)
+        ->setSourcePosition(($xadj + glx($x)) * $scale, gly($y) * $scale)
         ->setTargetCSS('.app-'.$icon.$suffix));
   }
 }

src/__celerity_resource_map__.php

@@ -7,13 +7,6 @@
  */
 
 celerity_register_resource_map(array(
-  '/rsrc/image/app/app_applications.png' =>
-  array(
-    'hash' => 'ce191dc12ab1fc0e9c0881df5e8d4535',
-    'uri' => '/res/ce191dc1/rsrc/image/app/app_applications.png',
-    'disk' => '/rsrc/image/app/app_applications.png',
-    'type' => 'png',
-  ),
   '/rsrc/image/app/app_audit.png' =>
   array(
     'hash' => '53340003d1daf306b64ed5ebb08bc204',
@@ -21,69 +14,6 @@ celerity_register_resource_map(array(
     'disk' => '/rsrc/image/app/app_audit.png',
     'type' => 'png',
   ),
-  '/rsrc/image/app/app_differential.png' =>
-  array(
-    'hash' => 'ac7f3cd87dde332b283ff83c3c7198a8',
-    'uri' => '/res/ac7f3cd8/rsrc/image/app/app_differential.png',
-    'disk' => '/rsrc/image/app/app_differential.png',
-    'type' => 'png',
-  ),
-  '/rsrc/image/app/app_diffusion.png' =>
-  array(
-    'hash' => 'd06f3b996adfe38f233851125471f43f',
-    'uri' => '/res/d06f3b99/rsrc/image/app/app_diffusion.png',
-    'disk' => '/rsrc/image/app/app_diffusion.png',
-    'type' => 'png',
-  ),
-  '/rsrc/image/app/app_fact.png' =>
-  array(
-    'hash' => 'c0bd5443c552e8d76c2adf05986c9ef6',
-    'uri' => '/res/c0bd5443/rsrc/image/app/app_fact.png',
-    'disk' => '/rsrc/image/app/app_fact.png',
-    'type' => 'png',
-  ),
-  '/rsrc/image/app/app_flags.png' =>
-  array(
-    'hash' => '574ea87812d3ebd15252889d74f39dd0',
-    'uri' => '/res/574ea878/rsrc/image/app/app_flags.png',
-    'disk' => '/rsrc/image/app/app_flags.png',
-    'type' => 'png',
-  ),
-  '/rsrc/image/app/app_maniphest.png' =>
-  array(
-    'hash' => '6f62e17097399a687892dc2e3f9abeb9',
-    'uri' => '/res/6f62e170/rsrc/image/app/app_maniphest.png',
-    'disk' => '/rsrc/image/app/app_maniphest.png',
-    'type' => 'png',
-  ),
-  '/rsrc/image/app/app_people.png' =>
-  array(
-    'hash' => 'b6c6fd4bc8b831dfd0e680f303f20d5f',
-    'uri' => '/res/b6c6fd4b/rsrc/image/app/app_people.png',
-    'disk' => '/rsrc/image/app/app_people.png',
-    'type' => 'png',
-  ),
-  '/rsrc/image/app/app_phriction.png' =>
-  array(
-    'hash' => 'f8c16c533b38b081486be48c4f1cf5bd',
-    'uri' => '/res/f8c16c53/rsrc/image/app/app_phriction.png',
-    'disk' => '/rsrc/image/app/app_phriction.png',
-    'type' => 'png',
-  ),
-  '/rsrc/image/app/app_ponder.png' =>
-  array(
-    'hash' => '9893ca3674af96884d3564ecbe101280',
-    'uri' => '/res/9893ca36/rsrc/image/app/app_ponder.png',
-    'disk' => '/rsrc/image/app/app_ponder.png',
-    'type' => 'png',
-  ),
-  '/rsrc/image/app/app_settings.png' =>
-  array(
-    'hash' => '095fa0e61ec11d3f7e543ba48f5a5adb',
-    'uri' => '/res/095fa0e6/rsrc/image/app/app_settings.png',
-    'disk' => '/rsrc/image/app/app_settings.png',
-    'type' => 'png',
-  ),
   '/rsrc/image/application/ponder/downvote.png' =>
   array(
     'hash' => '46c5644a0fccb9e237a3363e07f50487',
@@ -135,8 +65,8 @@ celerity_register_resource_map(array(
   ),
   '/rsrc/image/autosprite.png' =>
   array(
-    'hash' => 'd02cc399dc950cd70006ef2374a6da4a',
-    'uri' => '/res/d02cc399/rsrc/image/autosprite.png',
+    'hash' => 'e3a103473dad6161a7be5369c2e21276',
+    'uri' => '/res/e3a10347/rsrc/image/autosprite.png',
     'disk' => '/rsrc/image/autosprite.png',
     'type' => 'png',
   ),
@@ -147,13 +77,6 @@ celerity_register_resource_map(array(
     'disk' => '/rsrc/image/avatar.png',
     'type' => 'png',
   ),
-  '/rsrc/image/bolt.png' =>
-  array(
-    'hash' => 'f8c30376f30cf5a8675a5e683400684a',
-    'uri' => '/res/f8c30376/rsrc/image/bolt.png',
-    'disk' => '/rsrc/image/bolt.png',
-    'type' => 'png',
-  ),
   '/rsrc/image/button_apps.png' =>
   array(
     'hash' => 'cc29f793afd01b15af613562225118f3',
@@ -720,7 +643,7 @@ celerity_register_resource_map(array(
   ),
   'autosprite-css' =>
   array(
-    'uri' => '/res/ef26301d/rsrc/css/autosprite.css',
+    'uri' => '/res/e09ec93c/rsrc/css/autosprite.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -1729,7 +1652,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-repository-crossreference' =>
   array(
-    'uri' => '/res/d3ff7611/rsrc/js/application/repository/repository-crossreference.js',
+    'uri' => '/res/6a59668a/rsrc/js/application/repository/repository-crossreference.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -2303,7 +2226,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-application-launch-view-css' =>
   array(
-    'uri' => '/res/e157830a/rsrc/css/application/base/phabricator-application-launch-view.css',
+    'uri' => '/res/effb87ee/rsrc/css/application/base/phabricator-application-launch-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -2448,7 +2371,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-main-menu-view' =>
   array(
-    'uri' => '/res/a51c5f64/rsrc/css/application/base/main-menu-view.css',
+    'uri' => '/res/cb2796ae/rsrc/css/application/base/main-menu-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -2468,7 +2391,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-nav-view-css' =>
   array(
-    'uri' => '/res/051b6ab6/rsrc/css/aphront/phabricator-nav-view.css',
+    'uri' => '/res/ca2744bd/rsrc/css/aphront/phabricator-nav-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -2988,7 +2911,7 @@ celerity_register_resource_map(array(
       'uri' => '/res/pkg/19ebcc79/differential.pkg.css',
       'type' => 'css',
     ),
-    '5b33c790' =>
+    '26972e06' =>
     array(
       'name' => 'differential.pkg.js',
       'symbols' =>
@@ -3012,7 +2935,7 @@ celerity_register_resource_map(array(
         16 => 'javelin-behavior-differential-dropdown-menus',
         17 => 'javelin-behavior-buoyant',
       ),
-      'uri' => '/res/pkg/5b33c790/differential.pkg.js',
+      'uri' => '/res/pkg/26972e06/differential.pkg.js',
       'type' => 'js',
     ),
     'c8ce2d88' =>
@@ -3120,7 +3043,7 @@ celerity_register_resource_map(array(
     'aphront-typeahead-control-css' => 'edf6b149',
     'differential-changeset-view-css' => '19ebcc79',
     'differential-core-view-css' => '19ebcc79',
-    'differential-inline-comment-editor' => '5b33c790',
+    'differential-inline-comment-editor' => '26972e06',
     'differential-local-commits-view-css' => '19ebcc79',
     'differential-results-table-css' => '19ebcc79',
     'differential-revision-add-comment-css' => '19ebcc79',
@@ -3133,21 +3056,21 @@ celerity_register_resource_map(array(
     'inline-comment-summary-css' => '19ebcc79',
     'javelin-behavior' => '6fb20113',
     'javelin-behavior-aphront-basic-tokenizer' => '97f65640',
-    'javelin-behavior-aphront-drag-and-drop' => '5b33c790',
-    'javelin-behavior-aphront-drag-and-drop-textarea' => '5b33c790',
+    'javelin-behavior-aphront-drag-and-drop' => '26972e06',
+    'javelin-behavior-aphront-drag-and-drop-textarea' => '26972e06',
     'javelin-behavior-aphront-form-disable-on-submit' => '971b021e',
     'javelin-behavior-audit-preview' => '5e68be89',
-    'javelin-behavior-buoyant' => '5b33c790',
-    'javelin-behavior-differential-accept-with-errors' => '5b33c790',
-    'javelin-behavior-differential-add-reviewers-and-ccs' => '5b33c790',
-    'javelin-behavior-differential-comment-jump' => '5b33c790',
-    'javelin-behavior-differential-diff-radios' => '5b33c790',
-    'javelin-behavior-differential-dropdown-menus' => '5b33c790',
-    'javelin-behavior-differential-edit-inline-comments' => '5b33c790',
-    'javelin-behavior-differential-feedback-preview' => '5b33c790',
-    'javelin-behavior-differential-keyboard-navigation' => '5b33c790',
-    'javelin-behavior-differential-populate' => '5b33c790',
-    'javelin-behavior-differential-show-more' => '5b33c790',
+    'javelin-behavior-buoyant' => '26972e06',
+    'javelin-behavior-differential-accept-with-errors' => '26972e06',
+    'javelin-behavior-differential-add-reviewers-and-ccs' => '26972e06',
+    'javelin-behavior-differential-comment-jump' => '26972e06',
+    'javelin-behavior-differential-diff-radios' => '26972e06',
+    'javelin-behavior-differential-dropdown-menus' => '26972e06',
+    'javelin-behavior-differential-edit-inline-comments' => '26972e06',
+    'javelin-behavior-differential-feedback-preview' => '26972e06',
+    'javelin-behavior-differential-keyboard-navigation' => '26972e06',
+    'javelin-behavior-differential-populate' => '26972e06',
+    'javelin-behavior-differential-show-more' => '26972e06',
     'javelin-behavior-diffusion-commit-graph' => '5e68be89',
     'javelin-behavior-diffusion-pull-lastmodified' => '5e68be89',
     'javelin-behavior-maniphest-batch-selector' => '7707de41',
@@ -3157,12 +3080,12 @@ celerity_register_resource_map(array(
     'javelin-behavior-maniphest-transaction-preview' => '7707de41',
     'javelin-behavior-phabricator-autofocus' => '971b021e',
     'javelin-behavior-phabricator-keyboard-shortcuts' => '971b021e',
-    'javelin-behavior-phabricator-object-selector' => '5b33c790',
+    'javelin-behavior-phabricator-object-selector' => '26972e06',
     'javelin-behavior-phabricator-oncopy' => '971b021e',
     'javelin-behavior-phabricator-tooltips' => '971b021e',
     'javelin-behavior-phabricator-watch-anchor' => '971b021e',
     'javelin-behavior-refresh-csrf' => '971b021e',
-    'javelin-behavior-repository-crossreference' => '5b33c790',
+    'javelin-behavior-repository-crossreference' => '26972e06',
     'javelin-behavior-workflow' => '971b021e',
     'javelin-dom' => '6fb20113',
     'javelin-event' => '6fb20113',
@@ -3188,7 +3111,7 @@ celerity_register_resource_map(array(
     'phabricator-core-buttons-css' => 'edf6b149',
     'phabricator-core-css' => 'edf6b149',
     'phabricator-directory-css' => 'edf6b149',
-    'phabricator-drag-and-drop-file-upload' => '5b33c790',
+    'phabricator-drag-and-drop-file-upload' => '26972e06',
     'phabricator-dropdown-menu' => '971b021e',
     'phabricator-flag-css' => 'edf6b149',
     'phabricator-jump-nav' => 'edf6b149',
@@ -3200,7 +3123,7 @@ celerity_register_resource_map(array(
     'phabricator-prefab' => '971b021e',
     'phabricator-project-tag-css' => '7839ae2d',
     'phabricator-remarkup-css' => 'edf6b149',
-    'phabricator-shaped-request' => '5b33c790',
+    'phabricator-shaped-request' => '26972e06',
     'phabricator-standard-page-view' => 'edf6b149',
     'phabricator-tooltip' => '971b021e',
     'phabricator-transaction-view-css' => 'edf6b149',

src/applications/base/PhabricatorApplication.php

@@ -55,7 +55,11 @@ abstract class PhabricatorApplication {
   }
 
   public function getIconURI() {
-    return PhabricatorUser::getDefaultProfileImageURI();
+    return null;
+  }
+
+  public function getAutospriteName() {
+    return 'default';
   }
 
   public function shouldAppearInLaunchView() {

src/applications/daemon/application/PhabricatorApplicationDaemons.php

@@ -34,6 +34,10 @@ final class PhabricatorApplicationDaemons extends PhabricatorApplication {
     return "\xE2\x98\xAF";
   }
 
+  public function getAutospriteName() {
+    return 'daemons';
+  }
+
   public function getRoutes() {
     return array(
       '/daemon/' => array(

src/applications/differential/application/PhabricatorApplicationDifferential.php

@@ -26,8 +26,8 @@ final class PhabricatorApplicationDifferential extends PhabricatorApplication {
     return 'Review Code';
   }
 
-  public function getIconURI() {
-    return celerity_get_resource_uri('/rsrc/image/app/app_differential.png');
+  public function getAutospriteName() {
+    return 'differential';
   }
 
   public function getFactObjectsForAnalysis() {

src/applications/diffusion/application/PhabricatorApplicationDiffusion.php

@@ -26,8 +26,8 @@ final class PhabricatorApplicationDiffusion extends PhabricatorApplication {
     return '/diffusion/';
   }
 
-  public function getIconURI() {
-    return celerity_get_resource_uri('/rsrc/image/app/app_diffusion.png');
+  public function getAutospriteName() {
+    return 'diffusion';
   }
 
   public function getHelpURI() {

src/applications/fact/application/PhabricatorApplicationFact.php

@@ -26,8 +26,8 @@ final class PhabricatorApplicationFact extends PhabricatorApplication {
     return '/fact/';
   }
 
-  public function getIconURI() {
-    return celerity_get_resource_uri('/rsrc/image/app/app_fact.png');
+  public function getAutospriteName() {
+    return 'fact';
   }
 
   public function getRoutes() {

src/applications/flag/application/PhabricatorApplicationFlags.php

@@ -26,8 +26,8 @@ final class PhabricatorApplicationFlags extends PhabricatorApplication {
     return '/flag/';
   }
 
-  public function getIconURI() {
-    return celerity_get_resource_uri('/rsrc/image/app/app_flags.png');
+  public function getAutospriteName() {
+    return 'flags';
   }
 
   public function loadStatus(PhabricatorUser $user) {

src/applications/mailinglists/application/PhabricatorApplicationMailingLists.php

@@ -30,6 +30,10 @@ final class PhabricatorApplicationMailingLists extends PhabricatorApplication {
     return 'Manage External Lists';
   }
 
+  public function getAutospriteName() {
+    return 'mail';
+  }
+
   public function getRoutes() {
     return array(
       '/mailinglists/' => array(

src/applications/maniphest/application/PhabricatorApplicationManiphest.php

@@ -30,8 +30,8 @@ final class PhabricatorApplicationManiphest extends PhabricatorApplication {
     return PhabricatorEnv::getEnvConfig('maniphest.enabled');
   }
 
-  public function getIconURI() {
-    return celerity_get_resource_uri('/rsrc/image/app/app_maniphest.png');
+  public function getAutospriteName() {
+    return 'maniphest';
   }
 
   public function getCoreApplicationOrder() {

src/applications/meta/application/PhabricatorApplicationApplications.php

@@ -26,8 +26,8 @@ final class PhabricatorApplicationApplications extends PhabricatorApplication {
     return 'Manage Applications';
   }
 
-  public function getIconURI() {
-    return celerity_get_resource_uri('/rsrc/image/app/app_applications.png');
+  public function getAutospriteName() {
+    return 'applications';
   }
 
   public function getRoutes() {

src/applications/meta/view/PhabricatorApplicationLaunchView.php

@@ -76,13 +76,34 @@ final class PhabricatorApplicationLaunchView extends AphrontView {
         phutil_escape_html($count));
     }
 
+
+    $classes = array();
+    $classes[] = 'phabricator-application-launch-icon';
+    $styles = array();
+
+    if ($application->getIconURI()) {
+      $styles[] = 'background-image: url('.$application->getIconURI().')';
+    } else {
+      $autosprite = $application->getAutospriteName();
+      $classes[] = 'autosprite';
+      $classes[] = 'app-'.$autosprite.'-full';
+    }
+
+    $icon = phutil_render_tag(
+      'span',
+      array(
+        'class' => implode(' ', $classes),
+        'style' => nonempty(implode('; ', $styles), null),
+      ),
+      '');
+
     return phutil_render_tag(
       'a',
       array(
         'class' => 'phabricator-application-launch-container',
-        'style' => 'background-image: url('.$application->getIconURI().')',
         'href'  => $application->getBaseURI(),
       ),
+      $icon.
       $this->renderSingleView($content));
   }
 }

src/applications/metamta/application/PhabricatorApplicationMetaMTA.php

@@ -26,6 +26,10 @@ final class PhabricatorApplicationMetaMTA extends PhabricatorApplication {
     return 'View Mail Logs';
   }
 
+  public function getAutospriteName() {
+    return 'mail';
+  }
+
   public function getRoutes() {
     return array(
       $this->getBaseURI() => array(

src/applications/people/application/PhabricatorApplicationPeople.php

@@ -30,8 +30,8 @@ final class PhabricatorApplicationPeople extends PhabricatorApplication {
     return "\xE2\x99\x9F";
   }
 
-  public function getIconURI() {
-    return celerity_get_resource_uri('/rsrc/image/app/app_people.png');
+  public function getAutospriteName() {
+    return 'people';
   }
 
   public function getRoutes() {

src/applications/phriction/application/PhabricatorApplicationPhriction.php

@@ -26,8 +26,8 @@ final class PhabricatorApplicationPhriction extends PhabricatorApplication {
     return '/w/';
   }
 
-  public function getIconURI() {
-    return celerity_get_resource_uri('/rsrc/image/app/app_phriction.png');
+  public function getAutospriteName() {
+    return 'phriction';
   }
 
   public function getHelpURI() {

src/applications/ponder/application/PhabricatorApplicationPonder.php

@@ -26,8 +26,8 @@ final class PhabricatorApplicationPonder extends PhabricatorApplication {
     return 'Find Answers';
   }
 
-  public function getIconURI() {
-    return celerity_get_resource_uri('/rsrc/image/app/app_ponder.png');
+  public function getAutospriteName() {
+    return 'ponder';
   }
 
   public function getFactObjectsForAnalysis() {

src/applications/project/application/PhabricatorApplicationProject.php

@@ -30,6 +30,10 @@ final class PhabricatorApplicationProject extends PhabricatorApplication {
     return '/project/';
   }
 
+  public function getAutospriteName() {
+    return 'projects';
+  }
+
   public function getRoutes() {
     return array(
       '/project/' => array(

src/applications/settings/application/PhabricatorApplicationSettings.php

@@ -26,8 +26,8 @@ final class PhabricatorApplicationSettings extends PhabricatorApplication {
     return 'User Preferences';
   }
 
-  public function getIconURI() {
-    return celerity_get_resource_uri('/rsrc/image/app/app_settings.png');
+  public function getAutospriteName() {
+    return 'settings';
   }
 
   public function getRoutes() {

src/view/layout/AphrontSideNavView.php

@@ -240,13 +240,32 @@ final class AphrontSideNavView extends AphrontView {
         $classes[] = 'phabricator-nav-app-item-selected';
       }
 
+      $iclasses = array();
+      $iclasses[] = 'phabricator-nav-app-item-icon';
+      $style = null;
+      if ($application->getIconURI()) {
+        $style = 'background-image: url('.$application->getIconURI().'); '.
+                 'background-size: 30px auto;';
+      } else {
+        $iclasses[] = 'autosprite';
+        $iclasses[] = 'app-'.$application->getAutospriteName();
+      }
+
+      $icon = phutil_render_tag(
+        'span',
+        array(
+          'class' => implode(' ', $iclasses),
+          'style' => $style,
+        ),
+        '');
+
       $apps[] = phutil_render_tag(
         'a',
         array(
           'class' => implode(' ', $classes),
           'href' => $application->getBaseURI(),
-          'style' => 'background-image: url('.$application->getIconURI().')',
         ),
+        $icon.
         phutil_escape_html($application->getName()));
     }
 

webroot/rsrc/css/aphront/phabricator-nav-view.css

@@ -119,25 +119,37 @@ a.phabricator-nav-app-item {
   color: #222222;
   font-weight: normal;
   padding: 4px;
-  padding-left: 37px;
+  padding-left: 40px;
   vertical-align: middle;
-  line-height: 25px;
+  line-height: 30px;
+  height: 30px;
 
   border-width: 1px 0px;
   border-style: solid;
   border-color: transparent;
 
-  background-size: auto 25px;
-  background-position: 4px 4px;
-  background-repeat: no-repeat;
+  position: relative;
 }
 
 a.phabricator-nav-app-item-selected {
   background-color: #f3f3f3;
-  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.20);
+  box-shadow: inset -1px 0 3px rgba(0, 0, 0, 0.15);
   border-color: #b0b0b0;
 }
 
+span.phabricator-nav-app-item-icon {
+  position: absolute;
+  display: block;
+
+  left: 5px;
+  top: 6px;
+  background-repeat: no-repeat;
+
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  margin: 0;
+}
 
 a.phabricator-nav-app-button-expand,
 a.phabricator-nav-app-button-collapse {

webroot/rsrc/css/application/base/phabricator-application-launch-view.css

@@ -32,9 +32,7 @@ a.phabricator-application-launch-container {
   display: inline-block;
   width: 210px;
   min-height: 90px;
-  background-repeat: no-repeat;
   padding: 5px 15px 5px 80px;
-  background-position: 15px 10px;
   margin: 3px 6px;
   overflow: hidden;
   position: relative;
@@ -65,6 +63,16 @@ a.phabricator-application-launch-container:hover {
   display: block;
 }
 
+.phabricator-application-launch-icon {
+  display: block;
+  position: absolute;
+  left: 15px;
+  top: 10px;
+  width: 60px;
+  height: 60px;
+  background-repeat: no-repeat;
+}
+
 .phabricator-application-launch-name {
   font-weight: bold;
 }
@@ -82,7 +90,7 @@ a.phabricator-application-launch-container:hover {
   position: absolute;
   left: 45px;
   top: 10px;
-  background: red;
+  background: #ff0000;
   border-radius: 10px;
   color: white;
   font-weight: normal;

webroot/rsrc/css/autosprite.css

@@ -11,226 +11,226 @@
   background-position: 0px 0px;
 }
 
-.main-menu-item-icon-settings {
-  background-position: 0px -26px;
-}
-
-.main-menu-item-icon-logout {
-  background-position: 0px -52px;
-}
-
-.main-menu-item-icon-notifications {
-  background-position: 0px -78px;
-}
-
-.main-menu-item-icon-task {
-  background-position: 0px -104px;
-}
-
 .main-menu-item-icon-help-selected {
-  background-position: 0px -130px;
-}
-
-.main-menu-item-icon-settings-selected {
-  background-position: 0px -156px;
-}
-
-.main-menu-item-icon-logout-selected {
-  background-position: 0px -182px;
-}
-
-.main-menu-item-icon-notifications-selected {
-  background-position: 0px -208px;
-}
-
-.main-menu-item-icon-task-selected {
-  background-position: 0px -234px;
+  background-position: 0px -27px;
 }
 
 .main-menu-item-icon-help:hover {
-  background-position: 0px -260px;
+  background-position: 0px -54px;
+}
+
+.main-menu-item-icon-settings {
+  background-position: 0px -81px;
+}
+
+.main-menu-item-icon-settings-selected {
+  background-position: 0px -108px;
 }
 
 .main-menu-item-icon-settings:hover {
-  background-position: 0px -286px;
+  background-position: 0px -135px;
+}
+
+.main-menu-item-icon-logout {
+  background-position: 0px -162px;
+}
+
+.main-menu-item-icon-logout-selected {
+  background-position: 0px -189px;
 }
 
 .main-menu-item-icon-logout:hover {
-  background-position: 0px -312px;
+  background-position: 0px -216px;
+}
+
+.main-menu-item-icon-notifications {
+  background-position: 0px -243px;
+}
+
+.main-menu-item-icon-notifications-selected {
+  background-position: 0px -270px;
 }
 
 .main-menu-item-icon-notifications:hover {
-  background-position: 0px -338px;
+  background-position: 0px -297px;
+}
+
+.main-menu-item-icon-task {
+  background-position: 0px -324px;
+}
+
+.main-menu-item-icon-task-selected {
+  background-position: 0px -351px;
 }
 
 .main-menu-item-icon-task:hover {
-  background-position: 0px -364px;
+  background-position: 0px -378px;
 }
 
 .app-differential-full {
-  background-position: 0px -390px;
-}
-
-.app-fact-full {
-  background-position: 0px -450px;
-}
-
-.app-mail-full {
-  background-position: 0px -510px;
-}
-
-.app-diffusion-full {
-  background-position: 0px -570px;
-}
-
-.app-slowvote-full {
-  background-position: 0px -630px;
-}
-
-.app-phriction-full {
-  background-position: 0px -690px;
-}
-
-.app-maniphest-full {
-  background-position: 0px -750px;
-}
-
-.app-flags-full {
-  background-position: 0px -810px;
-}
-
-.app-settings-full {
-  background-position: 0px -870px;
-}
-
-.app-applications-full {
-  background-position: 0px -930px;
-}
-
-.app-default-full {
-  background-position: 0px -990px;
-}
-
-.app-people-full {
-  background-position: 0px -1050px;
-}
-
-.app-ponder-full {
-  background-position: 0px -1110px;
-}
-
-.app-calendar-full {
-  background-position: 0px -1170px;
-}
-
-.app-files-full {
-  background-position: 0px -1230px;
-}
-
-.app-projects-full {
-  background-position: 0px -1290px;
-}
-
-.app-daemons-full {
-  background-position: 0px -1350px;
-}
-
-.app-herald-full {
-  background-position: 0px -1410px;
-}
-
-.app-countdown-full {
-  background-position: 0px -1470px;
-}
-
-.app-conduit-full {
-  background-position: 0px -1530px;
-}
-
-.app-feed-full {
-  background-position: 0px -1590px;
+  background-position: 0px -405px;
 }
 
 .app-differential {
-  background-position: 0px -1650px;
+  background-position: 0px -466px;
+}
+
+.app-fact-full {
+  background-position: 0px -497px;
 }
 
 .app-fact {
-  background-position: 0px -1676px;
+  background-position: 0px -558px;
+}
+
+.app-mail-full {
+  background-position: 0px -589px;
 }
 
 .app-mail {
-  background-position: 0px -1702px;
+  background-position: 0px -650px;
+}
+
+.app-diffusion-full {
+  background-position: 0px -681px;
 }
 
 .app-diffusion {
-  background-position: 0px -1728px;
+  background-position: 0px -742px;
+}
+
+.app-slowvote-full {
+  background-position: 0px -773px;
 }
 
 .app-slowvote {
-  background-position: 0px -1754px;
+  background-position: 0px -834px;
+}
+
+.app-phriction-full {
+  background-position: 0px -865px;
 }
 
 .app-phriction {
-  background-position: 0px -1780px;
+  background-position: 0px -926px;
+}
+
+.app-maniphest-full {
+  background-position: 0px -957px;
 }
 
 .app-maniphest {
-  background-position: 0px -1806px;
+  background-position: 0px -1018px;
+}
+
+.app-flags-full {
+  background-position: 0px -1049px;
 }
 
 .app-flags {
-  background-position: 0px -1832px;
+  background-position: 0px -1110px;
+}
+
+.app-settings-full {
+  background-position: 0px -1141px;
 }
 
 .app-settings {
-  background-position: 0px -1858px;
+  background-position: 0px -1202px;
+}
+
+.app-applications-full {
+  background-position: 0px -1233px;
 }
 
 .app-applications {
-  background-position: 0px -1884px;
+  background-position: 0px -1294px;
+}
+
+.app-default-full {
+  background-position: 0px -1325px;
 }
 
 .app-default {
-  background-position: 0px -1910px;
+  background-position: 0px -1386px;
+}
+
+.app-people-full {
+  background-position: 0px -1417px;
 }
 
 .app-people {
-  background-position: 0px -1936px;
+  background-position: 0px -1478px;
+}
+
+.app-ponder-full {
+  background-position: 0px -1509px;
 }
 
 .app-ponder {
-  background-position: 0px -1962px;
+  background-position: 0px -1570px;
+}
+
+.app-calendar-full {
+  background-position: 0px -1601px;
 }
 
 .app-calendar {
-  background-position: 0px -1988px;
+  background-position: 0px -1662px;
+}
+
+.app-files-full {
+  background-position: 0px -1693px;
 }
 
 .app-files {
-  background-position: 0px -2014px;
+  background-position: 0px -1754px;
+}
+
+.app-projects-full {
+  background-position: 0px -1785px;
 }
 
 .app-projects {
-  background-position: 0px -2040px;
+  background-position: 0px -1846px;
+}
+
+.app-daemons-full {
+  background-position: 0px -1877px;
 }
 
 .app-daemons {
-  background-position: 0px -2066px;
+  background-position: 0px -1938px;
+}
+
+.app-herald-full {
+  background-position: 0px -1969px;
 }
 
 .app-herald {
-  background-position: 0px -2092px;
+  background-position: 0px -2030px;
+}
+
+.app-countdown-full {
+  background-position: 0px -2061px;
 }
 
 .app-countdown {
-  background-position: 0px -2118px;
+  background-position: 0px -2122px;
+}
+
+.app-conduit-full {
+  background-position: 0px -2153px;
 }
 
 .app-conduit {
-  background-position: 0px -2144px;
+  background-position: 0px -2214px;
+}
+
+.app-feed-full {
+  background-position: 0px -2245px;
 }
 
 .app-feed {
-  background-position: 0px -2170px;
+  background-position: 0px -2306px;
 }