Update Phabricator header to use FontAwesome

Summary: Updates header to use font-icons instead of images.

Test Plan: Test desktop and mobile layouts, Chrome, FF, Safari, IE.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '00cd55eb',
+    'core.pkg.css' => 'b5618e4c',
     'core.pkg.js' => 'e64447dc',
     'darkconsole.pkg.js' => 'df001cab',
     'differential.pkg.css' => '8af45893',
@@ -35,7 +35,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' => 'a8d57876',
+    'rsrc/css/application/base/main-menu-view.css' => '03fdd0a2',
     'rsrc/css/application/base/notification-menu.css' => '6aa0a74b',
     'rsrc/css/application/base/phabricator-application-launch-view.css' => '5d71008f',
     'rsrc/css/application/base/standard-page-view.css' => '3f5b9311',
@@ -152,7 +152,7 @@ return array(
     'rsrc/css/sprite-gradient.css' => '4bdb98a7',
     'rsrc/css/sprite-login.css' => 'a355d921',
     'rsrc/css/sprite-main-header.css' => '92720ee2',
-    'rsrc/css/sprite-menu.css' => '1e5b7537',
+    'rsrc/css/sprite-menu.css' => 'afaf676d',
     'rsrc/css/sprite-payments.css' => 'cc085d44',
     'rsrc/css/sprite-projects.css' => '7578fa56',
     'rsrc/css/sprite-tokens.css' => '1706b943',
@@ -330,8 +330,8 @@ return array(
     'rsrc/image/sprite-login-X2.png' => '5ae6de3a',
     'rsrc/image/sprite-login.png' => '07f2c67c',
     'rsrc/image/sprite-main-header.png' => '83521873',
-    'rsrc/image/sprite-menu-X2.png' => '162d7d2b',
-    'rsrc/image/sprite-menu.png' => '3734edad',
+    'rsrc/image/sprite-menu-X2.png' => 'a54606dd',
+    'rsrc/image/sprite-menu.png' => '34048681',
     'rsrc/image/sprite-payments.png' => 'd8576309',
     'rsrc/image/sprite-projects-X2.png' => '218fdc8b',
     'rsrc/image/sprite-projects.png' => '631ff9a7',
@@ -725,7 +725,7 @@ return array(
     'phabricator-hovercard-view-css' => '893f4783',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'ad7a69ca',
-    'phabricator-main-menu-view' => 'a8d57876',
+    'phabricator-main-menu-view' => '03fdd0a2',
     'phabricator-nav-view-css' => '9283c2df',
     'phabricator-notification' => '0c6946e7',
     'phabricator-notification-css' => '9c279160',
@@ -822,7 +822,7 @@ return array(
     'sprite-gradient-css' => '4bdb98a7',
     'sprite-login-css' => 'a355d921',
     'sprite-main-header-css' => '92720ee2',
-    'sprite-menu-css' => '1e5b7537',
+    'sprite-menu-css' => 'afaf676d',
     'sprite-payments-css' => 'cc085d44',
     'sprite-projects-css' => '7578fa56',
     'sprite-tokens-css' => '1706b943',

resources/sprite/manifest/menu.json

@@ -1,16 +1,6 @@
 {
   "version" : 1,
   "sprites" : {
-    "app"              : {
-      "name" : "app",
-      "rule" : ".menu-icon-app",
-      "hash" : "2602e3ab2968d60c7584682e6b25766b"
-    },
-    "app_blue"         : {
-      "name" : "app_blue",
-      "rule" : ".menu-icon-app-blue",
-      "hash" : "e4a998e14f21ae244254f4025324f636"
-    },
     "arrow-right"      : {
       "name" : "arrow-right",
       "rule" : ".phabricator-crumb-divider",
@@ -36,51 +26,11 @@
       "rule" : ".phabricator-main-menu-eye",
       "hash" : "35f24014f23142275574136a63dcb73f"
     },
-    "info-sm"          : {
-      "name" : "info-sm",
-      "rule" : ".menu-icon-info-sm",
-      "hash" : "f87b45771fa5cfd61bfe20cacd84dd24"
-    },
     "logo"             : {
       "name" : "logo",
       "rule" : ".phabricator-main-menu-logo",
       "hash" : "668b04729a4b9460b0c89cb6ef6db4d4"
     },
-    "logout-sm"        : {
-      "name" : "logout-sm",
-      "rule" : ".menu-icon-logout-sm",
-      "hash" : "813cc784e18d5c4622e87210d203e067"
-    },
-    "new"              : {
-      "name" : "new",
-      "rule" : ".menu-icon-new",
-      "hash" : "84cf453396e9fdb82fb965ac74cd86cc"
-    },
-    "new-sm"           : {
-      "name" : "new-sm",
-      "rule" : ".menu-icon-new-sm",
-      "hash" : "795d30ee8ec68eb4d7ceb54e983c8694"
-    },
-    "new_blue"         : {
-      "name" : "new_blue",
-      "rule" : ".menu-icon-new-blue",
-      "hash" : "3cb927000c2bb3a11002377fe5fab9ec"
-    },
-    "power"            : {
-      "name" : "power",
-      "rule" : ".menu-icon-power",
-      "hash" : "f14a923a0ab7c359426defc561227e31"
-    },
-    "search"           : {
-      "name" : "search",
-      "rule" : ".menu-icon-search",
-      "hash" : "f83c83dbe748b94a4853edb6d9d28288"
-    },
-    "search_blue"      : {
-      "name" : "search_blue",
-      "rule" : ".menu-icon-search-blue",
-      "hash" : "96119040bd1c621d1fde30520488c4b8"
-    },
     "seen_have_unread" : {
       "name" : "seen_have_unread",
       "rule" : ".alert-notifications:hover .phabricator-main-menu-alert-icon",
@@ -91,11 +41,6 @@
       "rule" : ".alert-notifications .phabricator-main-menu-alert-icon",
       "hash" : "94d4fea01dbb666bb794feec56f783e5"
     },
-    "settings-sm"      : {
-      "name" : "settings-sm",
-      "rule" : ".menu-icon-settings-sm",
-      "hash" : "c5fdf1316f114b07cc23ccc0435eb4e2"
-    },
     "unseen_any"       : {
       "name" : "unseen_any",
       "rule" : ".alert-notifications.alert-unread .phabricator-main-menu-alert-icon",

src/applications/auth/application/PhabricatorAuthApplication.php

@@ -48,7 +48,7 @@ final class PhabricatorAuthApplication extends PhabricatorApplication {
       $item = id(new PHUIListItemView())
         ->addClass('core-menu-item')
         ->setName(pht('Log Out'))
-        ->setIcon('logout-sm')
+        ->setIcon('fa-sign-out')
         ->setWorkflow(true)
         ->setHref('/logout/')
         ->setSelected(($controller instanceof PhabricatorLogoutController))
@@ -64,7 +64,7 @@ final class PhabricatorAuthApplication extends PhabricatorApplication {
           ->addClass('core-menu-item')
           ->setName(pht('Log In'))
           // TODO: Login icon?
-          ->setIcon('power')
+          ->setIcon('fa-sign-in')
           ->setHref('/auth/start/')
           ->setAural(pht('Log In'))
           ->setOrder(900);

src/applications/celerity/CeleritySpriteGenerator.php

@@ -29,61 +29,6 @@ final class CeleritySpriteGenerator {
         'y' => 31,
         'css' => '.phabricator-crumb-divider',
       ),
-      'search' => array(
-        'x' => 24,
-        'y' => 24,
-        'css' => '.menu-icon-search',
-      ),
-      'search_blue' => array(
-        'x' => 24,
-        'y' => 24,
-        'css' => '.menu-icon-search-blue',
-      ),
-      'new' => array(
-        'x' => 24,
-        'y' => 24,
-        'css' => '.menu-icon-new',
-      ),
-      'new_blue' => array(
-        'x' => 24,
-        'y' => 24,
-        'css' => '.menu-icon-new-blue',
-      ),
-      'info-sm' => array(
-        'x' => 28,
-        'y' => 28,
-        'css' => '.menu-icon-info-sm',
-      ),
-      'logout-sm' => array(
-        'x' => 28,
-        'y' => 28,
-        'css' => '.menu-icon-logout-sm',
-      ),
-      'new-sm' => array(
-        'x' => 28,
-        'y' => 28,
-        'css' => '.menu-icon-new-sm',
-      ),
-      'settings-sm' => array(
-        'x' => 28,
-        'y' => 28,
-        'css' => '.menu-icon-settings-sm',
-      ),
-      'power' => array(
-        'x' => 28,
-        'y' => 28,
-        'css' => '.menu-icon-power',
-      ),
-      'app' => array(
-        'x' => 24,
-        'y' => 24,
-        'css' => '.menu-icon-app',
-      ),
-      'app_blue' => array(
-        'x' => 24,
-        'y' => 24,
-        'css' => '.menu-icon-app-blue',
-      ),
       'logo' => array(
         'x' => 96,
         'y' => 26,

src/applications/help/application/PhabricatorHelpApplication.php

@@ -40,7 +40,7 @@ final class PhabricatorHelpApplication extends PhabricatorApplication {
       $item = id(new PHUIListItemView())
         ->setName($help_name)
         ->addClass('core-menu-item')
-        ->setIcon('info-sm')
+        ->setIcon('fa-info-circle')
         ->setAural($help_name)
         ->setOrder(200)
         ->setHref($application->getHelpURI());

src/applications/home/application/PhabricatorHomeApplication.php

@@ -62,7 +62,7 @@ final class PhabricatorHomeApplication extends PhabricatorApplication {
 
       $item = id(new PHUIListItemView())
         ->setName(pht('Create New...'))
-        ->setIcon('new-sm')
+        ->setIcon('fa-plus')
         ->addClass('core-menu-item')
         ->setHref('/home/create/')
         ->addSigil('quick-create-menu')

src/applications/settings/application/PhabricatorSettingsApplication.php

@@ -50,7 +50,7 @@ final class PhabricatorSettingsApplication extends PhabricatorApplication {
       $selected = ($controller instanceof PhabricatorSettingsMainController);
       $item = id(new PHUIListItemView())
         ->setName(pht('Settings'))
-        ->setIcon('settings-sm')
+        ->setIcon('fa-cogs')
         ->addClass('core-menu-item')
         ->setSelected($selected)
         ->setHref('/settings/')

src/view/page/menu/PhabricatorMainMenuView.php

@@ -144,14 +144,15 @@ final class PhabricatorMainMenuView extends AphrontView {
         'meta'  => array(
           'map' => array(
             $header_id => 'phabricator-application-menu-expanded',
-            $button_id => 'menu-icon-app-blue',
+            $button_id => 'sky',
           ),
         ),
       ),
       phutil_tag(
         'span',
         array(
-          'class' => 'phabricator-menu-button-icon sprite-menu menu-icon-app',
+          'class' => 'phabricator-menu-button-icon phui-icon-view '.
+                     'phui-font-fa fa-bars white',
           'id' => $button_id,
         ),
         ''));
@@ -188,10 +189,6 @@ final class PhabricatorMainMenuView extends AphrontView {
           ->setType(PHUIListItemView::TYPE_LABEL)
           ->setName(pht('Actions')));
       foreach ($actions as $action) {
-        $icon = $action->getIcon();
-        if ($icon) {
-          $action->appendChild($this->renderMenuIcon($icon));
-        }
         $view->addMenuItem($action);
       }
     }
@@ -210,14 +207,15 @@ final class PhabricatorMainMenuView extends AphrontView {
         'meta'  => array(
           'map' => array(
             $header_id => 'phabricator-search-menu-expanded',
-            $button_id => 'menu-icon-search-blue',
+            $button_id => 'sky',
           ),
         ),
       ),
       phutil_tag(
       'span',
       array(
-        'class' => 'phabricator-menu-button-icon sprite-menu menu-icon-search',
+        'class' => 'phabricator-menu-button-icon phui-icon-view '.
+                   'phui-font-fa fa-search white',
         'id' => $button_id,
       ),
       ''));
@@ -472,14 +470,4 @@ final class PhabricatorMainMenuView extends AphrontView {
     );
   }
 
-  private function renderMenuIcon($name) {
-    return phutil_tag(
-      'span',
-      array(
-        'class' => 'phabricator-core-menu-icon '.
-                   'sprite-menu menu-icon-'.$name,
-      ),
-      '');
-  }
-
 }

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

@@ -82,6 +82,10 @@
   margin: 10px 10px 0 5px;
 }
 
+.phabricator-menu-button-icon.phui-icon-view {
+  font-size: 24px;
+}
+
 .phabricator-expand-application-menu,
 .phabricator-expand-search-menu {
   float: right;
@@ -381,8 +385,17 @@
   display: none;
 }
 
-.phabricator-application-menu .phui-list-item-icon {
-  display: none;
+.phabricator-application-menu .phui-list-item-href {
+  display: block;
+}
+
+.phabricator-application-menu .phui-list-item-icon.phui-font-fa {
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+  color: #fff;
+  margin: 8px;
+  text-align: center;
 }
 
 .device-desktop .phabricator-application-menu .phui-list-item-view.core-menu-item {

webroot/rsrc/css/sprite-menu.css

@@ -13,7 +13,7 @@ only screen and (min-device-pixel-ratio: 1.5),
 only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   .sprite-menu {
     background-image: url(/rsrc/image/sprite-menu-X2.png);
-    background-size: 116px 192px;
+    background-size: 97px 138px;
   }
 }
 
@@ -31,59 +31,15 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
 }
 
 .phabricator-crumb-divider {
-  background-position: 0px -119px;
-}
-
-.menu-icon-search {
-  background-position: 0px -38px;
-}
-
-.menu-icon-search-blue {
-  background-position: -25px -38px;
-}
-
-.menu-icon-new {
-  background-position: -50px -38px;
-}
-
-.menu-icon-new-blue {
-  background-position: -75px -38px;
-}
-
-.menu-icon-info-sm {
-  background-position: 0px -90px;
-}
-
-.menu-icon-logout-sm {
-  background-position: -29px -90px;
-}
-
-.menu-icon-new-sm {
-  background-position: -58px -90px;
-}
-
-.menu-icon-settings-sm {
-  background-position: -87px -90px;
-}
-
-.menu-icon-power {
-  background-position: -60px -119px;
-}
-
-.menu-icon-app {
-  background-position: -10px -119px;
-}
-
-.menu-icon-app-blue {
-  background-position: -35px -119px;
+  background-position: 0px -65px;
 }
 
 .phabricator-main-menu-logo {
-  background-position: 0px -63px;
+  background-position: 0px -38px;
 }
 
 .phabricator-main-menu-eye {
-  background-position: 0px -151px;
+  background-position: 0px -97px;
 }
 
 .alert-notifications .phabricator-main-menu-message-icon {