Replace action sprite with FontAwesome

Summary: Replaces the action icons in action headers with FontAwesome

Test Plan:
- grep SPRITE_ACTIONS
- grep sprite-actions
- Replace on UIExamples
- Replace on Workboards
- Replace on Dashboards
- Replace on FeedStories

{F157840}
{F157841}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => '865102d6',
+    'core.pkg.css' => '3445a3a7',
     'core.pkg.js' => 'ab0d6d3d',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => '382ca868',
@@ -113,8 +113,8 @@ return array(
     'rsrc/css/diviner/diviner-shared.css' => '38813222',
     'rsrc/css/font/font-awesome.css' => '73d075c3',
     'rsrc/css/font/font-source-sans-pro.css' => '91d53463',
-    'rsrc/css/font/phui-font-icon-base.css' => '74cfb6a9',
+    'rsrc/css/font/phui-font-icon-base.css' => '3b2f9260',
-    'rsrc/css/layout/phabricator-action-header-view.css' => '0c333cad',
+    'rsrc/css/layout/phabricator-action-header-view.css' => '40134802',
     'rsrc/css/layout/phabricator-action-list-view.css' => 'dcd9875f',
     'rsrc/css/layout/phabricator-crumbs-view.css' => '6a23399c',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'a8c86ace',
@@ -128,12 +128,12 @@ return array(
     'rsrc/css/phui/phui-box.css' => '7b3a2eed',
     'rsrc/css/phui/phui-button.css' => '3dbdbf0d',
     'rsrc/css/phui/phui-document.css' => '3b078dc0',
-    'rsrc/css/phui/phui-feed-story.css' => '3a59c2cf',
+    'rsrc/css/phui/phui-feed-story.css' => '37216a85',
     'rsrc/css/phui/phui-fontkit.css' => 'de84aa4a',
     'rsrc/css/phui/phui-form-view.css' => '867463b4',
     'rsrc/css/phui/phui-form.css' => 'b78ec020',
     'rsrc/css/phui/phui-header-view.css' => '689dbc38',
-    'rsrc/css/phui/phui-icon.css' => 'ef701b9b',
+    'rsrc/css/phui/phui-icon.css' => 'cdcf2aca',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-list.css' => 'ce29d035',
     'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
@@ -148,7 +148,6 @@ return array(
     'rsrc/css/phui/phui-timeline-view.css' => '15ff2a9f',
     'rsrc/css/phui/phui-workboard-view.css' => '2bf82d00',
     'rsrc/css/phui/phui-workpanel-view.css' => 'fddd97bf',
-    'rsrc/css/sprite-actions.css' => '969ad0e5',
     'rsrc/css/sprite-apps-large.css' => '76d8716b',
     'rsrc/css/sprite-apps-xlarge.css' => 'db66c878',
     'rsrc/css/sprite-apps.css' => '600df7dd',
@@ -308,8 +307,6 @@ return array(
     'rsrc/image/phrequent_inactive.png' => 'bfc15a69',
     'rsrc/image/search-white.png' => '64cc0d45',
     'rsrc/image/search.png' => '82625a7e',
-    'rsrc/image/sprite-actions-X2.png' => '7dfd5652',
-    'rsrc/image/sprite-actions.png' => '2ddd18c3',
     'rsrc/image/sprite-apps-X2.png' => '55b68035',
     'rsrc/image/sprite-apps-large-X2.png' => 'becb43e7',
     'rsrc/image/sprite-apps-large.png' => '6c673dd5',
@@ -691,7 +688,7 @@ return array(
     'paste-css' => 'aa1767d1',
     'path-typeahead' => 'f7fc67ec',
     'people-profile-css' => 'ba7b2762',
-    'phabricator-action-header-view-css' => '0c333cad',
+    'phabricator-action-header-view-css' => '40134802',
     'phabricator-action-list-view-css' => 'dcd9875f',
     'phabricator-application-launch-view-css' => 'd290ba21',
     'phabricator-busy' => '6453c869',
@@ -761,13 +758,13 @@ return array(
     'phui-calendar-list-css' => 'c1d0ca59',
     'phui-calendar-month-css' => 'a92e47d2',
     'phui-document-view-css' => '3b078dc0',
-    'phui-feed-story-css' => '3a59c2cf',
+    'phui-feed-story-css' => '37216a85',
-    'phui-font-icon-base-css' => '74cfb6a9',
+    'phui-font-icon-base-css' => '3b2f9260',
     'phui-fontkit-css' => 'de84aa4a',
     'phui-form-css' => 'b78ec020',
     'phui-form-view-css' => '867463b4',
     'phui-header-view-css' => '689dbc38',
-    'phui-icon-view-css' => 'ef701b9b',
+    'phui-icon-view-css' => 'cdcf2aca',
     'phui-info-panel-css' => '27ea50a1',
     'phui-list-view-css' => 'ce29d035',
     'phui-object-box-css' => 'ce92d8ec',
@@ -800,7 +797,6 @@ return array(
     'releeph-request-differential-create-dialog' => '8d8b92cd',
     'releeph-request-typeahead-css' => '667a48ae',
     'setup-issue-css' => '69e640e7',
-    'sprite-actions-css' => '969ad0e5',
     'sprite-apps-css' => '600df7dd',
     'sprite-apps-large-css' => '76d8716b',
     'sprite-apps-xlarge-css' => 'db66c878',

resources/sprite/manifest/actions.json

@@ -1,206 +0,0 @@
-{
-  "version" : 1,
-  "sprites" : {
-    "actions-close-dark"     : {
-      "name" : "actions-close-dark",
-      "rule" : ".actions-close-dark, .device-desktop .actions-close-grey.phui-icon-view:hover",
-      "hash" : "dc370e5777e6ac4ca06bc72adffea903"
-    },
-    "actions-close-grey"     : {
-      "name" : "actions-close-grey",
-      "rule" : ".actions-close-grey",
-      "hash" : "557249561ccfd1c44ce8b5ff52938195"
-    },
-    "actions-close-white"    : {
-      "name" : "actions-close-white",
-      "rule" : ".actions-close-white",
-      "hash" : "07ee0398d250301db4773a43a31ef2fa"
-    },
-    "actions-down-dark"      : {
-      "name" : "actions-down-dark",
-      "rule" : ".actions-down-dark, .device-desktop .actions-down-grey.phui-icon-view:hover",
-      "hash" : "56e0299b481c8cbd1104d4d06a9ad60f"
-    },
-    "actions-down-grey"      : {
-      "name" : "actions-down-grey",
-      "rule" : ".actions-down-grey",
-      "hash" : "62021593f80189ead4c16dbb6496eff9"
-    },
-    "actions-down-white"     : {
-      "name" : "actions-down-white",
-      "rule" : ".actions-down-white",
-      "hash" : "fbf8553693281e156a864cc10c90811c"
-    },
-    "actions-flag-dark"      : {
-      "name" : "actions-flag-dark",
-      "rule" : ".actions-flag-dark, .device-desktop .actions-flag-grey.phui-icon-view:hover",
-      "hash" : "c6d1f2054109fa35c61791ba6c8b3b4e"
-    },
-    "actions-flag-grey"      : {
-      "name" : "actions-flag-grey",
-      "rule" : ".actions-flag-grey",
-      "hash" : "f283ebb54b50a4dd4df6c968c327b1ae"
-    },
-    "actions-flag-white"     : {
-      "name" : "actions-flag-white",
-      "rule" : ".actions-flag-white",
-      "hash" : "e4ac2df6b75607b4a41a7be3a232340d"
-    },
-    "actions-heart-dark"     : {
-      "name" : "actions-heart-dark",
-      "rule" : ".actions-heart-dark, .device-desktop .actions-heart-grey.phui-icon-view:hover",
-      "hash" : "51063df4f5317c40fd3bbe55683c2eb8"
-    },
-    "actions-heart-grey"     : {
-      "name" : "actions-heart-grey",
-      "rule" : ".actions-heart-grey",
-      "hash" : "dc21c4569280ee297f556cc08a366f9a"
-    },
-    "actions-heart-white"    : {
-      "name" : "actions-heart-white",
-      "rule" : ".actions-heart-white",
-      "hash" : "5652d7ad050e93ef3795e8f3d535b0af"
-    },
-    "actions-move-dark"      : {
-      "name" : "actions-move-dark",
-      "rule" : ".actions-move-dark, .device-desktop .actions-move-grey.phui-icon-view:hover",
-      "hash" : "849975a0f7d870b2098b5df97a262e32"
-    },
-    "actions-move-grey"      : {
-      "name" : "actions-move-grey",
-      "rule" : ".actions-move-grey",
-      "hash" : "9f880792fcd0728a263685cf83c4c4ef"
-    },
-    "actions-move-white"     : {
-      "name" : "actions-move-white",
-      "rule" : ".actions-move-white",
-      "hash" : "0baa80bc68e08ee62a2ea00939d701dd"
-    },
-    "actions-new-dark"       : {
-      "name" : "actions-new-dark",
-      "rule" : ".actions-new-dark, .device-desktop .actions-new-grey.phui-icon-view:hover",
-      "hash" : "75f7db365f28cac6e8e4bef6582db4d5"
-    },
-    "actions-new-grey"       : {
-      "name" : "actions-new-grey",
-      "rule" : ".actions-new-grey",
-      "hash" : "edd7f1d803dc7c4991e484315e1690cd"
-    },
-    "actions-new-white"      : {
-      "name" : "actions-new-white",
-      "rule" : ".actions-new-white",
-      "hash" : "dded791b1ec55c32710845a1338bd31d"
-    },
-    "actions-search-dark"    : {
-      "name" : "actions-search-dark",
-      "rule" : ".actions-search-dark, .device-desktop .actions-search-grey.phui-icon-view:hover",
-      "hash" : "90e71b95196672296a329a9d2ba54b6f"
-    },
-    "actions-search-grey"    : {
-      "name" : "actions-search-grey",
-      "rule" : ".actions-search-grey",
-      "hash" : "041d1033d4500972791cc7cf752ed250"
-    },
-    "actions-search-white"   : {
-      "name" : "actions-search-white",
-      "rule" : ".actions-search-white",
-      "hash" : "8bfe4fb8c44c302c676d8b42740dfbe4"
-    },
-    "actions-settings-dark"  : {
-      "name" : "actions-settings-dark",
-      "rule" : ".actions-settings-dark, .device-desktop .actions-settings-grey.phui-icon-view:hover",
-      "hash" : "45a4a5f926b84dadffe036cb7cbda166"
-    },
-    "actions-settings-grey"  : {
-      "name" : "actions-settings-grey",
-      "rule" : ".actions-settings-grey",
-      "hash" : "73db9b654d8287d8e15be5bef8d72d89"
-    },
-    "actions-settings-white" : {
-      "name" : "actions-settings-white",
-      "rule" : ".actions-settings-white",
-      "hash" : "ade04349a27cf2c223e8f4e7fea52cf1"
-    },
-    "actions-star-dark"      : {
-      "name" : "actions-star-dark",
-      "rule" : ".actions-star-dark, .device-desktop .actions-star-grey.phui-icon-view:hover",
-      "hash" : "ca65f112d09fed7854bb013de6e78323"
-    },
-    "actions-star-grey"      : {
-      "name" : "actions-star-grey",
-      "rule" : ".actions-star-grey",
-      "hash" : "23894980dd42da92451c355c844250c6"
-    },
-    "actions-star-white"     : {
-      "name" : "actions-star-white",
-      "rule" : ".actions-star-white",
-      "hash" : "fd709f3e1bebb17364bbfac7c0b8aaa5"
-    },
-    "actions-tag-dark"       : {
-      "name" : "actions-tag-dark",
-      "rule" : ".actions-tag-dark, .device-desktop .actions-tag-grey.phui-icon-view:hover",
-      "hash" : "7ca0e9df25c74a09e5111a8ce578c7fe"
-    },
-    "actions-tag-grey"       : {
-      "name" : "actions-tag-grey",
-      "rule" : ".actions-tag-grey",
-      "hash" : "02d0bb07ce65a12a8e653c7cced7e72d"
-    },
-    "actions-tag-white"      : {
-      "name" : "actions-tag-white",
-      "rule" : ".actions-tag-white",
-      "hash" : "dac6bff0b839a3430fda3de4a5c44bfd"
-    },
-    "actions-token-dark"     : {
-      "name" : "actions-token-dark",
-      "rule" : ".actions-token-dark, .device-desktop .actions-token-grey.phui-icon-view:hover",
-      "hash" : "4c289b5175df8375fc286127f47ddad9"
-    },
-    "actions-token-grey"     : {
-      "name" : "actions-token-grey",
-      "rule" : ".actions-token-grey",
-      "hash" : "93a9c3b4786480fd44ba4f17610f3926"
-    },
-    "actions-token-white"    : {
-      "name" : "actions-token-white",
-      "rule" : ".actions-token-white",
-      "hash" : "075f3f28279e73b793b612a61f4b1a07"
-    },
-    "actions-up-dark"        : {
-      "name" : "actions-up-dark",
-      "rule" : ".actions-up-dark, .device-desktop .actions-up-grey.phui-icon-view:hover",
-      "hash" : "e7f3352316b07244babe7a3ebab82132"
-    },
-    "actions-up-grey"        : {
-      "name" : "actions-up-grey",
-      "rule" : ".actions-up-grey",
-      "hash" : "a52ff86b194bf68f220668ba60013c0c"
-    },
-    "actions-up-white"       : {
-      "name" : "actions-up-white",
-      "rule" : ".actions-up-white",
-      "hash" : "e42262ba18632de2d3dfdab8c83324e6"
-    },
-    "actions-wrench-dark"    : {
-      "name" : "actions-wrench-dark",
-      "rule" : ".actions-wrench-dark, .device-desktop .actions-wrench-grey.phui-icon-view:hover",
-      "hash" : "aac832965a14438c2c161cdf347dfed7"
-    },
-    "actions-wrench-grey"    : {
-      "name" : "actions-wrench-grey",
-      "rule" : ".actions-wrench-grey",
-      "hash" : "1b27d1fe1776af2808503c6d3e842855"
-    },
-    "actions-wrench-white"   : {
-      "name" : "actions-wrench-white",
-      "rule" : ".actions-wrench-white",
-      "hash" : "fbb09cf182d70c99c74c360ce87724a2"
-    }
-  },
-  "scales"  : [
-    1,
-    2
-  ],
-  "header"  : "\/**\n * @provides sprite-actions-css\n * @generated\n *\/\n\n.sprite-actions {\n  background-image: url(\/rsrc\/image\/sprite-actions.png);\n  background-repeat: no-repeat;\n}\n\n@media\nonly screen and (min-device-pixel-ratio: 1.5),\nonly screen and (-webkit-min-device-pixel-ratio: 1.5) {\n  .sprite-actions {\n    background-image: url(\/rsrc\/image\/sprite-actions-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}\n",
-  "type"    : "standard"
-}

scripts/celerity/generate_sprites.php

@@ -30,7 +30,6 @@ $sheets = array(
   'remarkup' => $generator->buildRemarkupSheet(),
   'menu' => $generator->buildMenuSheet(),
   'apps' => $generator->buildAppsSheet(),
-  'actions' => $generator->buildActionsSheet(),
   'minicons' => $generator->buildMiniconsSheet(),
   'conpherence' => $generator->buildConpherenceSheet(),
   'apps-large' => $generator->buildAppsLargeSheet(),

src/applications/conpherence/controller/ConpherenceWidgetController.php

@@ -66,8 +66,7 @@ final class ConpherenceWidgetController extends
 
     $widgets = array();
     $new_icon = id(new PHUIIconView())
-      ->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
+      ->setIconFont('fa-plus')
-      ->setSpriteIcon('new-grey')
       ->setHref($this->getWidgetURI())
       ->setMetadata(array('widget' => null))
       ->addSigil('conpherence-widget-adder');

src/applications/dashboard/engine/PhabricatorDashboardPanelRenderingEngine.php

@@ -229,8 +229,7 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
       $edit_uri->setQueryParam('dashboardID', $dashboard_id);
     }
     $action_edit = id(new PHUIIconView())
-      ->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
+      ->setIconFont('fa-pencil')
-      ->setSpriteIcon('settings-grey')
       ->setHref((string) $edit_uri);
     $header->addAction($action_edit);
 
@@ -239,8 +238,7 @@ final class PhabricatorDashboardPanelRenderingEngine extends Phobject {
         '/dashboard/removepanel/'.$dashboard_id.'/'))
         ->setQueryParam('panelPHID', $panel->getPHID());
       $action_remove = id(new PHUIIconView())
-        ->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
+        ->setIconFont('fa-trash-o')
-        ->setSpriteIcon('close-grey')
         ->setHref((string) $uri)
         ->setWorkflow(true);
       $header->addAction($action_remove);

src/applications/project/controller/PhabricatorProjectBoardViewController.php

@@ -165,8 +165,7 @@ final class PhabricatorProjectBoardViewController
         $panel->setEditURI('column/'.$column->getID().'/');
       }
       $panel->setHeaderAction(id(new PHUIIconView())
-        ->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
+        ->setIconFont('fa-plus')
-        ->setSpriteIcon('new-grey')
         ->setHref('/maniphest/task/create/')
         ->addSigil('column-add-task')
         ->setMetadata(

src/applications/uiexample/examples/PHUIFeedStoryExample.php

@@ -66,8 +66,7 @@ final class PHUIFeedStoryExample extends PhabricatorUIExample {
     $text = hsprintf('<strong><a>harding (Tom Harding)</a></strong> awarded '.
       '<a>M10: Workboards</a> a token.');
     $action1 = id(new PHUIIconView())
-      ->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
+      ->setIconFont('fa-trophy bluegrey')
-      ->setSpriteIcon('token-grey')
       ->setHref('#');
     $token =
         id(new PHUIIconView())
@@ -87,12 +86,10 @@ final class PHUIFeedStoryExample extends PhabricatorUIExample {
     $text = hsprintf('<strong><a>wgharding (Warren Harding)</a></strong> '.
       'asked a new question.');
     $action1 = id(new PHUIIconView())
-      ->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
+      ->setIconFont('fa-chevron-up bluegrey')
-      ->setSpriteIcon('up-grey')
       ->setHref('#');
     $action2 = id(new PHUIIconView())
-      ->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
+      ->setIconFont('fa-chevron-down bluegrey')
-      ->setSpriteIcon('down-grey')
       ->setHref('#');
     $story4 = id(new PHUIFeedStoryView())
       ->setTitle($text)

src/applications/uiexample/examples/PHUIIconExample.php

@@ -578,21 +578,6 @@ final class PHUIIconExample extends PhabricatorUIExample {
       ->setSpriteSheet(PHUIIconView::SPRITE_PAYMENTS)
       ->setSpriteIcon('googlecheckout');
 
-    $actions = array(
-      'settings-grey',
-      'heart-grey',
-      'tag-grey',
-      'new-grey',
-      'search-grey',
-      'move-grey');
-    $actionview = array();
-    foreach ($actions as $action) {
-      $actionview[] = id(new PHUIIconView())
-        ->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
-        ->setSpriteIcon($action)
-        ->setHref('#');
-    }
-
     $tokens = array(
       'like-1',
       'like-2',
@@ -628,10 +613,6 @@ final class PHUIIconExample extends PhabricatorUIExample {
       ->appendChild($ficons)
       ->addMargin(PHUI::MARGIN_LARGE);
 
-    $layout1 = id(new PHUIBoxView())
-      ->appendChild($actionview)
-      ->addMargin(PHUI::MARGIN_MEDIUM);
-
     $layout2 = id(new PHUIBoxView())
       ->appendChild(array($person1, $person2, $person3))
       ->addMargin(PHUI::MARGIN_MEDIUM);
@@ -668,10 +649,6 @@ final class PHUIIconExample extends PhabricatorUIExample {
       ->setHeaderText(pht('Colors and Transforms'))
       ->appendChild($layout_cicons);
 
-    $wrap1 = id(new PHUIObjectBoxView())
-      ->setHeaderText(pht('Action Icons!'))
-      ->appendChild($layout1);
-
     $wrap2 = id(new PHUIObjectBoxView())
       ->setHeaderText(pht('People!'))
       ->appendChild(array($layout2, $layout2a));
@@ -696,7 +673,6 @@ final class PHUIIconExample extends PhabricatorUIExample {
         array(
           $fontawesome,
           $transforms,
-          $wrap1,
           $wrap2,
           $wrap3,
           $wrap4,

src/applications/uiexample/examples/PhabricatorActionHeaderExample.php

@@ -106,33 +106,27 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
       ->setHeader(pht('With Action Icons'));
 
     $action1 = new PHUIIconView();
-    $action1->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
+    $action1->setIconFont('fa-cog');
-    $action1->setSpriteIcon('settings-grey');
     $action1->setHref('#');
 
     $action2 = new PHUIIconView();
-    $action2->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
+    $action1->setIconFont('fa-heart');
-    $action2->setSpriteIcon('heart-white');
     $action2->setHref('#');
 
     $action3 = new PHUIIconView();
-    $action3->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
+    $action1->setIconFont('fa-tag');
-    $action3->setSpriteIcon('tag-white');
     $action3->setHref('#');
 
     $action4 = new PHUIIconView();
-    $action4->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
+    $action4->setIconFont('fa-plus');
-    $action4->setSpriteIcon('new-white');
     $action4->setHref('#');
 
     $action5 = new PHUIIconView();
-    $action5->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
+    $action5->setIconFont('fa-search');
-    $action5->setSpriteIcon('search-white');
     $action5->setHref('#');
 
     $action6 = new PHUIIconView();
-    $action6->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
+    $action6->setIconFont('fa-arrows');
-    $action6->setSpriteIcon('move-white');
     $action6->setHref('#');
 
     $header1 = id(new PhabricatorActionHeaderView())
@@ -200,8 +194,7 @@ final class PhabricatorActionHeaderExample extends PhabricatorUIExample {
       ->setName('Closed');
 
     $action1 = new PHUIIconView();
-    $action1->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS);
+    $action1->setIconFont('fa-flag');
-    $action1->setSpriteIcon('flag-grey');
     $action1->setHref('#');
 
     $header1 = id(new PhabricatorActionHeaderView())

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -46,65 +46,6 @@ final class CeleritySpriteGenerator {
     return $sheet;
   }
 
-  public function buildActionsSheet() {
-    $icons = $this->getDirectoryList('actions_white_1x');
-
-    $colors = array(
-      'dark',
-      'grey',
-      'white',
-    );
-
-    $scales = array(
-      '1x'  => 1,
-      '2x'  => 2,
-    );
-
-    $template = id(new PhutilSprite())
-      ->setSourceSize(24, 24);
-
-    $sprites = array();
-    foreach ($colors as $color) {
-      foreach ($icons as $icon) {
-        $prefix = 'actions_';
-        if (strlen($color)) {
-          $prefix .= $color.'_';
-        }
-
-        $suffix = '';
-        if (strlen($color)) {
-          $suffix = '-'.$color;
-        }
-
-        $sprite = id(clone $template)
-          ->setName('actions-'.$icon.$suffix);
-
-        $tcss = array();
-        $tcss[] = '.actions-'.$icon.$suffix;
-        if ($color == 'dark') {
-          $tcss[] = '.device-desktop '.
-            '.actions-'.$icon.'-grey.phui-icon-view:hover';
-        }
-
-        $sprite->setTargetCSS(implode(', ', $tcss));
-
-        foreach ($scales as $scale_key => $scale) {
-          $path = $this->getPath($prefix.$scale_key.'/'.$icon.'.png');
-          $sprite->setSourceFile($path, $scale);
-        }
-        $sprites[] = $sprite;
-      }
-    }
-
-    $sheet = $this->buildSheet('actions', true);
-    $sheet->setScales($scales);
-    foreach ($sprites as $sprite) {
-      $sheet->addSprite($sprite);
-    }
-
-    return $sheet;
-  }
-
   public function buildMiniconsSheet() {
     $icons = $this->getDirectoryList('minicons_white_1x');
 

src/view/layout/PhabricatorActionHeaderView.php

@@ -2,9 +2,6 @@
 
 final class PhabricatorActionHeaderView extends AphrontView {
 
-  const ICON_GREY = 'grey';
-  const ICON_WHITE = 'white';
-
   const HEADER_GREY = 'grey';
   const HEADER_DARK_GREY = 'dark-grey';
   const HEADER_BLUE = 'blue';
@@ -18,8 +15,8 @@ final class PhabricatorActionHeaderView extends AphrontView {
   private $headerIcon;
   private $headerSigils = array();
   private $actions = array();
-  private $iconColor = PhabricatorActionHeaderView::ICON_GREY;
   private $headerColor;
+  private $tag = null;
   private $dropdown;
 
   public function setDropdown($dropdown) {
@@ -33,7 +30,7 @@ final class PhabricatorActionHeaderView extends AphrontView {
   }
 
   public function setTag(PHUITagView $tag) {
-    $this->actions[] = $tag;
+    $this->tag = $tag;
     return $this;
   }
 
@@ -57,16 +54,30 @@ final class PhabricatorActionHeaderView extends AphrontView {
     return $this;
   }
 
-  public function setIconColor($color) {
-    $this->iconColor = $color;
-    return $this;
-  }
-
   public function setHeaderColor($color) {
     $this->headerColor = $color;
     return $this;
   }
 
+  private function getIconColor() {
+    switch ($this->headerColor) {
+      case self::HEADER_GREY:
+        return 'lightgreytext';
+      case self::HEADER_DARK_GREY:
+        return 'lightgreytext';
+      case self::HEADER_BLUE:
+        return 'white';
+      case self::HEADER_GREEN:
+        return 'white';
+      case self::HEADER_RED:
+        return 'white';
+      case self::HEADER_YELLOW:
+        return 'white';
+      case self::HEADER_LIGHTBLUE:
+        return 'bluegrey';
+    }
+  }
+
   public function render() {
 
     require_celerity_resource('phabricator-action-header-view-css');
@@ -84,7 +95,9 @@ final class PhabricatorActionHeaderView extends AphrontView {
     }
 
     $action_list = array();
+    if (nonempty($this->actions)) {
       foreach ($this->actions as $action) {
+        $action->addClass($this->getIconColor());
         $action_list[] = phutil_tag(
           'li',
             array(
@@ -92,8 +105,18 @@ final class PhabricatorActionHeaderView extends AphrontView {
           ),
           $action);
       }
+    }
 
-    $header_icon = '';
+    if ($this->tag) {
+      $action_list[] = phutil_tag(
+        'li',
+          array(
+          'class' => 'phabricator-action-header-icon-item'
+        ),
+        $this->tag);
+    }
+
+    $header_icon = null;
     if ($this->headerIcon) {
       require_celerity_resource('sprite-minicons-css');
       $header_icon = phutil_tag(
@@ -126,8 +149,7 @@ final class PhabricatorActionHeaderView extends AphrontView {
         $header_title));
 
     $icons = '';
-    if (!empty($action_list)) {
+    if (nonempty($action_list)) {
-      $classes[] = 'phabricator-action-header-icon-'.$this->iconColor;
       $icons = phutil_tag(
         'ul',
           array(

src/view/phui/PHUIIconView.php

@@ -3,11 +3,9 @@
 final class PHUIIconView extends AphrontTagView {
 
   const SPRITE_MINICONS = 'minicons';
-  const SPRITE_ACTIONS = 'actions';
   const SPRITE_APPS = 'apps';
   const SPRITE_TOKENS = 'tokens';
   const SPRITE_PAYMENTS = 'payments';
-  const SPRITE_ICONS = 'icons';
   const SPRITE_LOGIN = 'login';
   const SPRITE_PROJECTS = 'projects';
   const SPRITE_BUTTONBAR = 'buttonbar';

src/view/phui/PHUIWorkpanelView.php

@@ -62,8 +62,7 @@ final class PHUIWorkpanelView extends AphrontTagView {
     $header_edit = null;
     if ($this->editURI) {
       $header_edit = id(new PHUIIconView())
-        ->setSpriteSheet(PHUIIconView::SPRITE_ACTIONS)
+        ->setIconFont('fa-pencil')
-        ->setSpriteIcon('settings-grey')
         ->setHref($this->editURI);
     }
     $header = id(new PhabricatorActionHeaderView())

webroot/rsrc/css/font/phui-font-icon-base.css

@@ -144,3 +144,14 @@
 .phui-icon-view.grey {
   color: {$lightgreytext};
 }
+
+/* Hovers */
+
+.device-desktop a.phui-icon-view.lightgreytext:hover,
+.device-desktop a.phui-icon-view.grey:hover {
+  color: {$darkgreytext};
+}
+
+.device-desktop a.phui-icon-view.bluegrey:hover {
+  color: {$darkbluetext};
+}

webroot/rsrc/css/layout/phabricator-action-header-view.css

@@ -14,8 +14,8 @@
   font-weight: bold;
   line-height: 15px;
   padding: 8px 0;
-  text-shadow: 0 1px 1px #fff;
   white-space: nowrap;
+  -webkit-font-smoothing: antialiased;
 }
 
 .gradient-lightblue-header .phabricator-action-header-title {
@@ -29,11 +29,15 @@
 
 .phabricator-action-header-icon-item {
   float: right;
-  padding-left: 2px;
+  padding-left: 4px;
 }
 
 .phabricator-action-header-icon-item .phui-icon-view {
   display: inline-block;
+  font-size: 18px;
+  margin: 4px 0;
+  height: 18px;
+  width: 18px;
 }
 
 .phabricator-action-header-icon-item .phui-tag-view {
@@ -53,7 +57,6 @@
 .gradient-blue-header .phabricator-action-header-link,
 .gradient-yellow-header .phabricator-action-header-link {
   color: #fff;
-  text-shadow: 0 -1px 1px rgba(0,0,0,.7);
 }
 
 .phabricator-action-header-icon-list .phui-tag-view {

webroot/rsrc/css/phui/phui-feed-story.css

@@ -84,6 +84,9 @@
 .phui-feed-story-action-item {
   float: right;
   padding-left: 2px;
+  height: 18px;
+  width: 18px;
+  font-size: 18px;
 }
 
 .phui-feed-story-action-list .phui-icon-view {

webroot/rsrc/css/phui/phui-icon.css

@@ -12,11 +12,6 @@
   width: 16px;
 }
 
-.phui-icon-view.sprite-actions {
-  height: 24px;
-  width: 24px;
-}
-
 .phui-icon-view.sprite-apps,
 .phui-icon-view.sprite-buttonbar {
   height: 14px;
@@ -54,3 +49,7 @@
 .phui-icon-has-text:before {
   margin-right: 8px;
 }
+
+a.phui-icon-view:hover {
+  text-decoration: none;
+}

webroot/rsrc/css/sprite-actions.css

@@ -1,175 +0,0 @@
-/**
- * @provides sprite-actions-css
- * @generated
- */
-
-.sprite-actions {
-  background-image: url(/rsrc/image/sprite-actions.png);
-  background-repeat: no-repeat;
-}
-
-@media
-only screen and (min-device-pixel-ratio: 1.5),
-only screen and (-webkit-min-device-pixel-ratio: 1.5) {
-  .sprite-actions {
-    background-image: url(/rsrc/image/sprite-actions-X2.png);
-    background-size: 150px 175px;
-  }
-}
-
-
-.actions-close-dark, .device-desktop .actions-close-grey.phui-icon-view:hover {
-  background-position: 0px 0px;
-}
-
-.actions-down-dark, .device-desktop .actions-down-grey.phui-icon-view:hover {
-  background-position: -25px 0px;
-}
-
-.actions-flag-dark, .device-desktop .actions-flag-grey.phui-icon-view:hover {
-  background-position: -50px 0px;
-}
-
-.actions-heart-dark, .device-desktop .actions-heart-grey.phui-icon-view:hover {
-  background-position: -75px 0px;
-}
-
-.actions-move-dark, .device-desktop .actions-move-grey.phui-icon-view:hover {
-  background-position: -100px 0px;
-}
-
-.actions-new-dark, .device-desktop .actions-new-grey.phui-icon-view:hover {
-  background-position: -125px 0px;
-}
-
-.actions-search-dark, .device-desktop .actions-search-grey.phui-icon-view:hover {
-  background-position: 0px -25px;
-}
-
-.actions-settings-dark, .device-desktop .actions-settings-grey.phui-icon-view:hover {
-  background-position: -25px -25px;
-}
-
-.actions-star-dark, .device-desktop .actions-star-grey.phui-icon-view:hover {
-  background-position: -50px -25px;
-}
-
-.actions-tag-dark, .device-desktop .actions-tag-grey.phui-icon-view:hover {
-  background-position: -75px -25px;
-}
-
-.actions-token-dark, .device-desktop .actions-token-grey.phui-icon-view:hover {
-  background-position: -100px -25px;
-}
-
-.actions-up-dark, .device-desktop .actions-up-grey.phui-icon-view:hover {
-  background-position: -125px -25px;
-}
-
-.actions-wrench-dark, .device-desktop .actions-wrench-grey.phui-icon-view:hover {
-  background-position: 0px -50px;
-}
-
-.actions-close-grey {
-  background-position: -25px -50px;
-}
-
-.actions-down-grey {
-  background-position: -50px -50px;
-}
-
-.actions-flag-grey {
-  background-position: -75px -50px;
-}
-
-.actions-heart-grey {
-  background-position: -100px -50px;
-}
-
-.actions-move-grey {
-  background-position: -125px -50px;
-}
-
-.actions-new-grey {
-  background-position: 0px -75px;
-}
-
-.actions-search-grey {
-  background-position: -25px -75px;
-}
-
-.actions-settings-grey {
-  background-position: -50px -75px;
-}
-
-.actions-star-grey {
-  background-position: -75px -75px;
-}
-
-.actions-tag-grey {
-  background-position: -100px -75px;
-}
-
-.actions-token-grey {
-  background-position: -125px -75px;
-}
-
-.actions-up-grey {
-  background-position: 0px -100px;
-}
-
-.actions-wrench-grey {
-  background-position: -25px -100px;
-}
-
-.actions-close-white {
-  background-position: -50px -100px;
-}
-
-.actions-down-white {
-  background-position: -75px -100px;
-}
-
-.actions-flag-white {
-  background-position: -100px -100px;
-}
-
-.actions-heart-white {
-  background-position: -125px -100px;
-}
-
-.actions-move-white {
-  background-position: 0px -125px;
-}
-
-.actions-new-white {
-  background-position: -25px -125px;
-}
-
-.actions-search-white {
-  background-position: -50px -125px;
-}
-
-.actions-settings-white {
-  background-position: -75px -125px;
-}
-
-.actions-star-white {
-  background-position: -100px -125px;
-}
-
-.actions-tag-white {
-  background-position: -125px -125px;
-}
-
-.actions-token-white {
-  background-position: 0px -150px;
-}
-
-.actions-up-white {
-  background-position: -25px -150px;
-}
-
-.actions-wrench-white {
-  background-position: -50px -150px;
-}