Add some textures/gradients to crumbs and menu

Summary:
This doesn't lay in everything, but:

  - Break the buttons gradient apart into components and rebuild it (along with other gradients) into a single gradient sprite (possible after {D4099}).
  - Use the sliced gradient for the crumbs background.
  - Use the sliced image for the crumb divider.
  - Adds the black/white app sheets, but I'm not generating them quite yet.

Test Plan: {F26537} {F26540}

Reviewers: chad, btrahan

Reviewed By: chad

CC: aran

Maniphest Tasks: T1960

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

resources/sprite/manifest/gradient.json

@@ -0,0 +1,60 @@
+{
+  "version" : 1,
+  "sprites" : {
+    "gradient-black-dark"      : {
+      "name" : "gradient-black-dark",
+      "rule" : ".gradient-black-dark, button.black, a.black, a.black:visited",
+      "hash" : "b9faf8505427bb14a8c51324e13e2f81"
+    },
+    "gradient-black-light"     : {
+      "name" : "gradient-black-light",
+      "rule" : ".gradient-black-light, button.black:active, a.black:active",
+      "hash" : "812c3375d00ccc93c36c6df2eb565df4"
+    },
+    "gradient-blue-dark"       : {
+      "name" : "gradient-blue-dark",
+      "rule" : ".gradient-blue-dark, button, a.button, a.button:visited, input.inputsubmit",
+      "hash" : "adc2d0f7397374936384014c5d78550d"
+    },
+    "gradient-blue-light"      : {
+      "name" : "gradient-blue-light",
+      "rule" : ".gradient-blue-light, button:active, a.button:active",
+      "hash" : "91b841067a63e543a4dcd9d41e0a2e5c"
+    },
+    "gradient-breadcrumbs"     : {
+      "name" : "gradient-breadcrumbs",
+      "rule" : ".gradient-breadcrumbs",
+      "hash" : "688ab77f50cfbc17ec30d798efb1b39e"
+    },
+    "gradient-dark-menu-label" : {
+      "name" : "gradient-dark-menu-label",
+      "rule" : ".gradient-dark-menu-label",
+      "hash" : "89a908596142d38fbe61a706694cd321"
+    },
+    "gradient-green-dark"      : {
+      "name" : "gradient-green-dark",
+      "rule" : ".gradient-green-dark, button.green, a.green, a.green:visited",
+      "hash" : "0d19ab593772b6b406c0db309b3a14fb"
+    },
+    "gradient-green-light"     : {
+      "name" : "gradient-green-light",
+      "rule" : ".gradient-green-light, button.green:active, a.green:active",
+      "hash" : "71c67916327ec7fc65149ab72c3a2924"
+    },
+    "gradient-grey-dark"       : {
+      "name" : "gradient-grey-dark",
+      "rule" : ".gradient-grey-dark, button.grey, input.inputaux, a.grey, a.grey:visited, a.button.disabled, button[disabled], button.disabled",
+      "hash" : "32651902d28d37dca01cf067072c39c0"
+    },
+    "gradient-grey-light"      : {
+      "name" : "gradient-grey-light",
+      "rule" : ".gradient-grey-light, button.grey:active, a.grey:active, button.grey_active, a.dropdown-open",
+      "hash" : "c3c9ee1ed6f800a4ac86910b94687877"
+    }
+  },
+  "scales"  : [
+    1
+  ],
+  "header"  : "\/**\n * @provides sprite-gradient-css\n * @generated\n *\/\n\n.sprite-gradient, button, a.button, a.button:visited, input.inputsubmit {\n  background-image: url(\/rsrc\/image\/sprite-gradient.png);\n  background-repeat: repeat-x;\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-gradient, button, a.button, a.button:visited, input.inputsubmit {\n    background-image: url(\/rsrc\/image\/sprite-gradient-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}",
+  "type"    : "repeat-x"
+}

resources/sprite/manifest/icon.json

@@ -966,5 +966,6 @@
     1,
     2
   ],
-  "header"  : "\/**\n * @provides sprite-icon-css\n * @generated\n *\/\n\n.sprite-icon {\n  background-image: url(\/rsrc\/image\/sprite-icon.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-icon {\n    background-image: url(\/rsrc\/image\/sprite-icon-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}"
+  "header"  : "\/**\n * @provides sprite-icon-css\n * @generated\n *\/\n\n.sprite-icon {\n  background-image: url(\/rsrc\/image\/sprite-icon.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-icon {\n    background-image: url(\/rsrc\/image\/sprite-icon-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}",
+  "type"    : "standard"
 }

resources/sprite/manifest/menu.json

@@ -1,35 +1,41 @@
 {
   "version" : 1,
   "sprites" : {
+    "arrow-right"      : {
+      "name" : "arrow-right",
+      "rule" : ".phabricator-crumb-divider",
+      "hash" : "a994209450dc73a80841cdd66bb59925"
+    },
     "bubble"           : {
       "name" : "bubble",
       "rule" : ".phabricator-main-menu-alert-bubble.alert-unread",
-      "hash" : "07bc6fd60e5c2fa14558c9101cba5261"
+      "hash" : "1145ac8a137a2a22517c1945fe22c517"
     },
     "round_bubble"     : {
       "name" : "round_bubble",
       "rule" : ".phabricator-main-menu-alert-bubble",
-      "hash" : "02de5b1c1720749a566e7a4cf7c2216c"
+      "hash" : "9be91cc0128997992e9001baf32c8ab8"
     },
     "seen_have_unread" : {
       "name" : "seen_have_unread",
       "rule" : ".alert-notifications:hover .phabricator-main-menu-alert-icon",
-      "hash" : "d0210b3908193ee841db2eeec264a154"
+      "hash" : "a8a7f07caa726d7e61ef3d41f959d94d"
     },
     "seen_read_all"    : {
       "name" : "seen_read_all",
       "rule" : ".alert-notifications .phabricator-main-menu-alert-icon",
-      "hash" : "8d0644ec8fa33330b30b7531272e24f1"
+      "hash" : "4fdd4807d0c41bd4179dd43150c7fc44"
     },
     "unseen_any"       : {
       "name" : "unseen_any",
       "rule" : ".alert-notifications.alert-unread .phabricator-main-menu-alert-icon",
-      "hash" : "0e50bf01f640b2f8231eaef246863f0b"
+      "hash" : "50d946952c73028b34e0c3378ca36b17"
     }
   },
   "scales"  : [
     1,
     2
   ],
-  "header"  : "\/**\n * @provides sprite-menu-css\n * @generated\n *\/\n\n.sprite-menu {\n  background-image: url(\/rsrc\/image\/sprite-menu.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-menu {\n    background-image: url(\/rsrc\/image\/sprite-menu-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}"
+  "header"  : "\/**\n * @provides sprite-menu-css\n * @generated\n *\/\n\n.sprite-menu {\n  background-image: url(\/rsrc\/image\/sprite-menu.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-menu {\n    background-image: url(\/rsrc\/image\/sprite-menu-X2.png);\n    background-size: {X}px {Y}px;\n  }\n}",
+  "type"    : "standard"
 }

scripts/celerity/generate_sprites.php

@@ -88,6 +88,7 @@ foreach ($icon_map as $icon => $coords) {
   foreach ($menu_map as $suffix => $template) {
     $sheet->addSprite(
       id(clone $template)
+        ->setName('menu-item-'.$icon.'-'.$suffix)
         ->setSourcePosition(glx($x), gly($y))
         ->setTargetCSS('.main-menu-item-icon-'.$icon.$suffix));
   }
@@ -183,6 +184,7 @@ foreach ($app_map as $icon => $coords) {
     }
     $sheet->addSprite(
       id(clone $template)
+        ->setName('app-'.$icon.'-'.$suffix)
         ->setSourcePosition(($xadj + glx($x)) * $scale, gly($y) * $scale)
         ->setTargetCSS($prefix.'.app-'.$icon.$suffix));
   }
@@ -199,6 +201,7 @@ $generator = new CeleritySpriteGenerator();
 $sheets = array(
   'icon' => $generator->buildIconSheet(),
   'menu' => $generator->buildMenuSheet(),
+  'gradient' => $generator->buildGradientSheet(),
 );
 
 foreach ($sheets as $name => $sheet) {
@@ -214,10 +217,17 @@ foreach ($sheets as $name => $sheet) {
   }
 
   $sheet
-    ->generateImage($webroot."/image/sprite-{$name}.png", 1)
-    ->generateImage($webroot."/image/sprite-{$name}-X2.png", 2)
     ->generateCSS($webroot."/css/sprite-{$name}.css")
     ->generateManifest($root."/resources/sprite/manifest/{$name}.json");
+
+  foreach ($sheet->getScales() as $scale) {
+    if ($scale == 1) {
+      $sheet_name = "sprite-{$name}.png";
+    } else {
+      $sheet_name = "sprite-{$name}-X{$scale}.png";
+    }
+    $sheet->generateImage("{$webroot}/image/{$sheet_name}", $scale);
+  }
 }
 
 echo "Done.\n";

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -108,6 +108,11 @@ final class CeleritySpriteGenerator {
         'css' =>
           '.alert-notifications.alert-unread .phabricator-main-menu-alert-icon',
       ),
+      'arrow-right' => array(
+        'x' => 9,
+        'y' => 31,
+        'css' => '.phabricator-crumb-divider',
+      ),
     );
 
     $scales = array(
@@ -123,7 +128,7 @@ final class CeleritySpriteGenerator {
         ->setTargetCSS($spec['css']);
 
       foreach ($scales as $scale_name => $scale) {
-        $path = 'notifications_'.$scale_name.'/'.$name.'.png';
+        $path = 'menu_'.$scale_name.'/'.$name.'.png';
         $path = $this->getPath($path);
 
         $sprite->setSourceFile($path, $scale);
@@ -140,6 +145,65 @@ final class CeleritySpriteGenerator {
     return $sheet;
   }
 
+  public function buildGradientSheet() {
+    $gradients = $this->getDirectoryList('gradients');
+
+    $template = new PhutilSprite();
+
+    $unusual_heights = array(
+      'dark-menu-label' => 25,
+      'breadcrumbs'     => 31,
+    );
+
+    // Reorder the sprites so less-specific rules generate earlier in the sheet.
+    // Otherwise we end up with blue "a.black" buttons because the blue rules
+    // have the same specificity but appear later.
+    $gradients = array_combine($gradients, $gradients);
+    $gradients = array_select_keys(
+      $gradients,
+      array(
+        'blue-dark',
+        'blue-light',
+      )) + $gradients;
+
+    $extra_css = array(
+      'black-dark' => ', button.black, a.black, a.black:visited',
+      'black-light' => ', button.black:active, a.black:active',
+      'blue-dark' => ', button, a.button, a.button:visited, input.inputsubmit',
+      'blue-light' => ', button:active, a.button:active',
+      'grey-dark' => ', button.grey, input.inputaux, a.grey, a.grey:visited, '.
+                        'a.button.disabled, button[disabled], button.disabled',
+      'grey-light' => ', button.grey:active, a.grey:active, '.
+                        'button.grey_active, a.dropdown-open',
+      'green-dark' => ', button.green, a.green, a.green:visited',
+      'green-light' => ', button.green:active, a.green:active',
+    );
+
+    $sprites = array();
+    foreach ($gradients as $gradient) {
+      $path = $this->getPath('gradients/'.$gradient.'.png');
+      $sprite = id(clone $template)
+        ->setName('gradient-'.$gradient)
+        ->setSourceFile($path)
+        ->setTargetCSS('.gradient-'.$gradient.idx($extra_css, $gradient));
+
+      $sprite->setSourceSize(4, idx($unusual_heights, $gradient, 26));
+
+      $sprites[] = $sprite;
+    }
+
+    $sheet = $this->buildSheet(
+      'gradient',
+      PhutilSpriteSheet::TYPE_REPEAT_X,
+      ', button, a.button, a.button:visited, input.inputsubmit');
+    foreach ($sprites as $sprite) {
+      $sheet->addSprite($sprite);
+    }
+
+    return $sheet;
+  }
+
+
   private function getPath($to_path = null) {
     $root = dirname(phutil_get_library_root('phabricator'));
     return $root.'/resources/sprite/'.$to_path;
@@ -163,25 +227,41 @@ final class CeleritySpriteGenerator {
     return $result;
   }
 
-  private function buildSheet($name) {
+  private function buildSheet($name, $type = null, $extra_css = '') {
     $sheet = new PhutilSpriteSheet();
 
     $at = '@';
+
+    switch ($type) {
+      case PhutilSpriteSheet::TYPE_STANDARD:
+      default:
+        $type = PhutilSpriteSheet::TYPE_STANDARD;
+        $repeat_rule = 'no-repeat';
+        break;
+      case PhutilSpriteSheet::TYPE_REPEAT_X:
+        $repeat_rule = 'repeat-x';
+        break;
+      case PhutilSpriteSheet::TYPE_REPEAT_Y:
+        $repeat_rule = 'repeat-y';
+        break;
+    }
+
+    $sheet->setSheetType($type);
     $sheet->setCSSHeader(<<<EOCSS
 /**
  * @provides sprite-{$name}-css
  * {$at}generated
  */
 
-.sprite-{$name} {
+.sprite-{$name}{$extra_css} {
   background-image: url(/rsrc/image/sprite-{$name}.png);
-  background-repeat: no-repeat;
+  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} {
+  .sprite-{$name}{$extra_css} {
     background-image: url(/rsrc/image/sprite-{$name}-X2.png);
     background-size: {X}px {Y}px;
   }

src/view/layout/AphrontSideNavFilterView.php

@@ -218,7 +218,7 @@ final class AphrontSideNavFilterView extends AphrontView {
         'localID'     => $local_id,
         'dragID'      => $drag_id,
         'contentID'   => $content_id,
-        'menuSize'   => ($crumbs ? 78 : 44),
+        'menuSize'   => ($crumbs ? 76 : 44),
       ));
 
     if ($this->active && $local_id) {

src/view/layout/PhabricatorCrumbView.php

@@ -59,7 +59,7 @@ final class PhabricatorCrumbView extends AphrontView {
       $divider = phutil_render_tag(
         'span',
         array(
-          'class' => 'phabricator-crumb-divider',
+          'class' => 'sprite-menu phabricator-crumb-divider',
         ),
         '');
     }

src/view/layout/PhabricatorCrumbsView.php

@@ -61,7 +61,8 @@ final class PhabricatorCrumbsView extends AphrontView {
     return phutil_render_tag(
       'div',
       array(
-        'class' => 'phabricator-crumbs-view',
+        'class' => 'phabricator-crumbs-view '.
+                   'sprite-gradient gradient-breadcrumbs',
       ),
       $action_view.
       self::renderSingleView($this->crumbs));

src/view/page/PhabricatorStandardPageView.php

@@ -103,6 +103,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
     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');
 
     Javelin::initBehavior('workflow', array());

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

@@ -20,7 +20,7 @@
 }
 
 .has-crumbs .phabricator-nav-col {
-  top: 78px;
+  top: 76px;
 }
 
 .phabricator-nav-local {

webroot/rsrc/css/autosprite.css

@@ -56,6 +56,14 @@
   background-position: -341px 0px;
 }
 
+.app-differential-large {
+  background-position: 0px -186px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-differential-large /* hover */ {
+  background-position: -61px -186px;
+}
+
 .app-differential {
   background-position: -372px 0px;
 }
@@ -68,6 +76,14 @@
   background-position: -434px 0px;
 }
 
+.app-fact-large {
+  background-position: -122px -186px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-fact-large /* hover */ {
+  background-position: -183px -186px;
+}
+
 .app-fact {
   background-position: -465px 0px;
 }
@@ -80,6 +96,14 @@
   background-position: -527px 0px;
 }
 
+.app-mail-large {
+  background-position: -244px -186px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-mail-large /* hover */ {
+  background-position: -305px -186px;
+}
+
 .app-mail {
   background-position: -558px 0px;
 }
@@ -92,6 +116,14 @@
   background-position: -31px -31px;
 }
 
+.app-diffusion-large {
+  background-position: -366px -186px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-diffusion-large /* hover */ {
+  background-position: -427px -186px;
+}
+
 .app-diffusion {
   background-position: -62px -31px;
 }
@@ -104,6 +136,14 @@
   background-position: -124px -31px;
 }
 
+.app-slowvote-large {
+  background-position: -488px -186px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-slowvote-large /* hover */ {
+  background-position: -549px -186px;
+}
+
 .app-slowvote {
   background-position: -155px -31px;
 }
@@ -116,6 +156,14 @@
   background-position: -217px -31px;
 }
 
+.app-phriction-large {
+  background-position: 0px -247px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-phriction-large /* hover */ {
+  background-position: -61px -247px;
+}
+
 .app-phriction {
   background-position: -248px -31px;
 }
@@ -128,6 +176,14 @@
   background-position: -310px -31px;
 }
 
+.app-maniphest-large {
+  background-position: -122px -247px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-maniphest-large /* hover */ {
+  background-position: -183px -247px;
+}
+
 .app-maniphest {
   background-position: -341px -31px;
 }
@@ -140,6 +196,14 @@
   background-position: -403px -31px;
 }
 
+.app-flags-large {
+  background-position: -244px -247px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-flags-large /* hover */ {
+  background-position: -305px -247px;
+}
+
 .app-flags {
   background-position: -434px -31px;
 }
@@ -152,6 +216,14 @@
   background-position: -496px -31px;
 }
 
+.app-settings-large {
+  background-position: -366px -247px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-settings-large /* hover */ {
+  background-position: -427px -247px;
+}
+
 .app-settings {
   background-position: -527px -31px;
 }
@@ -164,6 +236,14 @@
   background-position: 0px -62px;
 }
 
+.app-applications-large {
+  background-position: -488px -247px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-applications-large /* hover */ {
+  background-position: -549px -247px;
+}
+
 .app-applications {
   background-position: -31px -62px;
 }
@@ -176,6 +256,14 @@
   background-position: -93px -62px;
 }
 
+.app-default-large {
+  background-position: 0px -308px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-default-large /* hover */ {
+  background-position: -61px -308px;
+}
+
 .app-default {
   background-position: -124px -62px;
 }
@@ -188,6 +276,14 @@
   background-position: -186px -62px;
 }
 
+.app-people-large {
+  background-position: -122px -308px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-people-large /* hover */ {
+  background-position: -183px -308px;
+}
+
 .app-people {
   background-position: -217px -62px;
 }
@@ -200,6 +296,14 @@
   background-position: -279px -62px;
 }
 
+.app-ponder-large {
+  background-position: -244px -308px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-ponder-large /* hover */ {
+  background-position: -305px -308px;
+}
+
 .app-ponder {
   background-position: -310px -62px;
 }
@@ -212,6 +316,14 @@
   background-position: -372px -62px;
 }
 
+.app-calendar-large {
+  background-position: -366px -308px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-calendar-large /* hover */ {
+  background-position: -427px -308px;
+}
+
 .app-calendar {
   background-position: -403px -62px;
 }
@@ -224,6 +336,14 @@
   background-position: -465px -62px;
 }
 
+.app-files-large {
+  background-position: -488px -308px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-files-large /* hover */ {
+  background-position: -549px -308px;
+}
+
 .app-files {
   background-position: -496px -62px;
 }
@@ -236,6 +356,14 @@
   background-position: -558px -62px;
 }
 
+.app-projects-large {
+  background-position: 0px -369px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-projects-large /* hover */ {
+  background-position: -61px -369px;
+}
+
 .app-projects {
   background-position: 0px -93px;
 }
@@ -248,6 +376,14 @@
   background-position: -62px -93px;
 }
 
+.app-daemons-large {
+  background-position: -122px -369px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-daemons-large /* hover */ {
+  background-position: -183px -369px;
+}
+
 .app-daemons {
   background-position: -93px -93px;
 }
@@ -260,6 +396,14 @@
   background-position: -155px -93px;
 }
 
+.app-herald-large {
+  background-position: -244px -369px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-herald-large /* hover */ {
+  background-position: -305px -369px;
+}
+
 .app-herald {
   background-position: -186px -93px;
 }
@@ -272,6 +416,14 @@
   background-position: -248px -93px;
 }
 
+.app-countdown-large {
+  background-position: -366px -369px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-countdown-large /* hover */ {
+  background-position: -427px -369px;
+}
+
 .app-countdown {
   background-position: -279px -93px;
 }
@@ -284,6 +436,14 @@
   background-position: -341px -93px;
 }
 
+.app-conduit-large {
+  background-position: -488px -369px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-conduit-large /* hover */ {
+  background-position: 0px -430px;
+}
+
 .app-conduit {
   background-position: -372px -93px;
 }
@@ -296,6 +456,14 @@
   background-position: -434px -93px;
 }
 
+.app-feed-large {
+  background-position: -61px -430px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-feed-large /* hover */ {
+  background-position: -122px -430px;
+}
+
 .app-feed {
   background-position: -465px -93px;
 }
@@ -308,6 +476,14 @@
   background-position: -527px -93px;
 }
 
+.app-paste-large {
+  background-position: -183px -430px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-paste-large /* hover */ {
+  background-position: -244px -430px;
+}
+
 .app-paste {
   background-position: 0px -124px;
 }
@@ -320,6 +496,14 @@
   background-position: -62px -124px;
 }
 
+.app-audit-large {
+  background-position: -305px -430px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-audit-large /* hover */ {
+  background-position: -366px -430px;
+}
+
 .app-audit {
   background-position: -93px -124px;
 }
@@ -332,6 +516,14 @@
   background-position: -155px -124px;
 }
 
+.app-uiexample-large {
+  background-position: -427px -430px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-uiexample-large /* hover */ {
+  background-position: -488px -430px;
+}
+
 .app-uiexample {
   background-position: -186px -124px;
 }
@@ -344,6 +536,14 @@
   background-position: -248px -124px;
 }
 
+.app-phpast-large {
+  background-position: 0px -491px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-phpast-large /* hover */ {
+  background-position: -61px -491px;
+}
+
 .app-phpast {
   background-position: -279px -124px;
 }
@@ -356,6 +556,14 @@
   background-position: -341px -124px;
 }
 
+.app-owners-large {
+  background-position: -122px -491px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-owners-large /* hover */ {
+  background-position: -183px -491px;
+}
+
 .app-owners {
   background-position: -372px -124px;
 }
@@ -368,6 +576,14 @@
   background-position: -434px -124px;
 }
 
+.app-phid-large {
+  background-position: -244px -491px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-phid-large /* hover */ {
+  background-position: -305px -491px;
+}
+
 .app-phid {
   background-position: -465px -124px;
 }
@@ -380,6 +596,14 @@
   background-position: -527px -124px;
 }
 
+.app-diviner-large {
+  background-position: -366px -491px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-diviner-large /* hover */ {
+  background-position: -427px -491px;
+}
+
 .app-diviner {
   background-position: 0px -155px;
 }
@@ -392,6 +616,14 @@
   background-position: -62px -155px;
 }
 
+.app-repositories-large {
+  background-position: -488px -491px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-repositories-large /* hover */ {
+  background-position: 0px -552px;
+}
+
 .app-repositories {
   background-position: -93px -155px;
 }
@@ -404,6 +636,14 @@
   background-position: -155px -155px;
 }
 
+.app-phame-large {
+  background-position: -61px -552px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-phame-large /* hover */ {
+  background-position: -122px -552px;
+}
+
 .app-phame {
   background-position: -186px -155px;
 }
@@ -416,6 +656,14 @@
   background-position: -248px -155px;
 }
 
+.app-macro-large {
+  background-position: -183px -552px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-macro-large /* hover */ {
+  background-position: -244px -552px;
+}
+
 .app-macro {
   background-position: -279px -155px;
 }
@@ -428,6 +676,14 @@
   background-position: -341px -155px;
 }
 
+.app-releeph-large {
+  background-position: -305px -552px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-releeph-large /* hover */ {
+  background-position: -366px -552px;
+}
+
 .app-releeph {
   background-position: -372px -155px;
 }
@@ -440,6 +696,14 @@
   background-position: -434px -155px;
 }
 
+.app-drydock-large {
+  background-position: -427px -552px;
+}
+
+.device-desktop .phabricator-application-launch-container:hover .app-drydock-large /* hover */ {
+  background-position: -488px -552px;
+}
+
 .app-drydock {
   background-position: -465px -155px;
 }
@@ -451,267 +715,3 @@
 .app-drydock-selected {
   background-position: -527px -155px;
 }
-
-.app-differential-large {
-  background-position: 0px -186px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-differential-large /* hover */ {
-  background-position: -61px -186px;
-}
-
-.app-fact-large {
-  background-position: -122px -186px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-fact-large /* hover */ {
-  background-position: -183px -186px;
-}
-
-.app-mail-large {
-  background-position: -244px -186px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-mail-large /* hover */ {
-  background-position: -305px -186px;
-}
-
-.app-diffusion-large {
-  background-position: -366px -186px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-diffusion-large /* hover */ {
-  background-position: -427px -186px;
-}
-
-.app-slowvote-large {
-  background-position: -488px -186px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-slowvote-large /* hover */ {
-  background-position: -549px -186px;
-}
-
-.app-phriction-large {
-  background-position: 0px -247px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-phriction-large /* hover */ {
-  background-position: -61px -247px;
-}
-
-.app-maniphest-large {
-  background-position: -122px -247px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-maniphest-large /* hover */ {
-  background-position: -183px -247px;
-}
-
-.app-flags-large {
-  background-position: -244px -247px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-flags-large /* hover */ {
-  background-position: -305px -247px;
-}
-
-.app-settings-large {
-  background-position: -366px -247px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-settings-large /* hover */ {
-  background-position: -427px -247px;
-}
-
-.app-applications-large {
-  background-position: -488px -247px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-applications-large /* hover */ {
-  background-position: -549px -247px;
-}
-
-.app-default-large {
-  background-position: 0px -308px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-default-large /* hover */ {
-  background-position: -61px -308px;
-}
-
-.app-people-large {
-  background-position: -122px -308px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-people-large /* hover */ {
-  background-position: -183px -308px;
-}
-
-.app-ponder-large {
-  background-position: -244px -308px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-ponder-large /* hover */ {
-  background-position: -305px -308px;
-}
-
-.app-calendar-large {
-  background-position: -366px -308px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-calendar-large /* hover */ {
-  background-position: -427px -308px;
-}
-
-.app-files-large {
-  background-position: -488px -308px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-files-large /* hover */ {
-  background-position: -549px -308px;
-}
-
-.app-projects-large {
-  background-position: 0px -369px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-projects-large /* hover */ {
-  background-position: -61px -369px;
-}
-
-.app-daemons-large {
-  background-position: -122px -369px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-daemons-large /* hover */ {
-  background-position: -183px -369px;
-}
-
-.app-herald-large {
-  background-position: -244px -369px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-herald-large /* hover */ {
-  background-position: -305px -369px;
-}
-
-.app-countdown-large {
-  background-position: -366px -369px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-countdown-large /* hover */ {
-  background-position: -427px -369px;
-}
-
-.app-conduit-large {
-  background-position: -488px -369px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-conduit-large /* hover */ {
-  background-position: 0px -430px;
-}
-
-.app-feed-large {
-  background-position: -61px -430px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-feed-large /* hover */ {
-  background-position: -122px -430px;
-}
-
-.app-paste-large {
-  background-position: -183px -430px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-paste-large /* hover */ {
-  background-position: -244px -430px;
-}
-
-.app-audit-large {
-  background-position: -305px -430px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-audit-large /* hover */ {
-  background-position: -366px -430px;
-}
-
-.app-uiexample-large {
-  background-position: -427px -430px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-uiexample-large /* hover */ {
-  background-position: -488px -430px;
-}
-
-.app-phpast-large {
-  background-position: 0px -491px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-phpast-large /* hover */ {
-  background-position: -61px -491px;
-}
-
-.app-owners-large {
-  background-position: -122px -491px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-owners-large /* hover */ {
-  background-position: -183px -491px;
-}
-
-.app-phid-large {
-  background-position: -244px -491px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-phid-large /* hover */ {
-  background-position: -305px -491px;
-}
-
-.app-diviner-large {
-  background-position: -366px -491px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-diviner-large /* hover */ {
-  background-position: -427px -491px;
-}
-
-.app-repositories-large {
-  background-position: -488px -491px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-repositories-large /* hover */ {
-  background-position: 0px -552px;
-}
-
-.app-phame-large {
-  background-position: -61px -552px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-phame-large /* hover */ {
-  background-position: -122px -552px;
-}
-
-.app-macro-large {
-  background-position: -183px -552px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-macro-large /* hover */ {
-  background-position: -244px -552px;
-}
-
-.app-releeph-large {
-  background-position: -305px -552px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-releeph-large /* hover */ {
-  background-position: -366px -552px;
-}
-
-.app-drydock-large {
-  background-position: -427px -552px;
-}
-
-.device-desktop .phabricator-application-launch-container:hover .app-drydock-large /* hover */ {
-  background-position: -488px -552px;
-}

webroot/rsrc/css/core/buttons.css

@@ -8,8 +8,6 @@ a.button,
 a.button:visited,
 input.inputsubmit {
   background-color: #19558D;
-  background-image: url('/rsrc/image/button_gradients.png');
-  background-position: 0 -26px;
 
   color: white;
   text-shadow: 0 -1px #19558D;
@@ -39,39 +37,26 @@ a.icon:visited {
 button:active,
 a.button:active {
   background-color: #19558D;
-  background-position: 0 0;
 }
 
 button.black,
 a.black,
 a.black:visited {
   background-color: #383838;
-  background-position: 0 -182px;
   border: 1px solid #333;
   text-shadow: 0 -1px #000;
   border-bottom-color: #000;
 }
 
-button.black:active,
-a.black:active {
-  background-position: 0 -156px;
-}
-
 button.green,
 a.green,
 a.green:visited {
   background-color: #006600;
-  background-position: 0 -130px;
   border: 1px solid #3b6e22;
   text-shadow: 0 -1px #006600;
   border-bottom-color: #2c5a15;
 }
 
-button.green:active,
-a.green:active {
-  background-position: 0 -104px;
-}
-
 button.grey,
 input.inputaux,
 a.grey,
@@ -80,8 +65,6 @@ a.button.disabled,
 button[disabled], /* Set by JX.Workflow. */
 button.disabled {
   background-color: #f7f7f7;
-  background-image: url('/rsrc/image/button_gradients.png');
-  background-position: 0 -52px;
   border-color: #aaa;
   color: #333;
   border-bottom-color: #999;
@@ -101,7 +84,6 @@ a.grey:active,
 button.grey_active,
 a.dropdown-open {
   background-color: #7d7d7d;
-  background-position: 0 -78px;
   color: #777;
 }
 

webroot/rsrc/css/layout/phabricator-crumbs-view.css

@@ -8,11 +8,12 @@
 }
 
 .phabricator-crumbs-view {
-  background: #e1e5eb;
+  background-color: #d8dce2;
-  border-bottom: 1px solid #c5c9ce;
+  height: 31px;
-  height: 33px;
   overflow: hidden;
   vertical-align: top;
+
+  box-shadow: 0 1px rgba(0, 0, 0, 0.25);
 }
 
 .phabricator-crumbs-view,
@@ -26,8 +27,8 @@
 
 .phabricator-crumb-view {
   display: inline-block;
-  height: 33px;
+  height: 31px;
-  line-height: 33px;
+  line-height: 31px;
   overflow: hidden;
 }
 
@@ -35,7 +36,7 @@
   display: inline-block;
   width: 30px;
   height: 30px;
-  margin: 2px 2px 1px 8px;
+  margin: 1px 2px 0 8px;
   vertical-align: top;
 }
 
@@ -61,8 +62,7 @@
 .phabricator-crumb-divider {
   display: inline-block;
   width: 9px;
-  height: 33px;
+  height: 31px;
-  background-image: url(/rsrc/image/tab_divider.png);
   vertical-align: top;
   margin: 0 9px;
 }

webroot/rsrc/css/sprite-gradient.css

@@ -0,0 +1,58 @@
+/**
+ * @provides sprite-gradient-css
+ * @generated
+ */
+
+.sprite-gradient, button, a.button, a.button:visited, input.inputsubmit {
+  background-image: url(/rsrc/image/sprite-gradient.png);
+  background-repeat: repeat-x;
+}
+
+@media
+only screen and (min-device-pixel-ratio: 1.5),
+only screen and (-webkit-min-device-pixel-ratio: 1.5) {
+  .sprite-gradient, button, a.button, a.button:visited, input.inputsubmit {
+    background-image: url(/rsrc/image/sprite-gradient-X2.png);
+    background-size: 4px 274px;
+  }
+}
+
+.gradient-blue-dark, button, a.button, a.button:visited, input.inputsubmit {
+  background-position: 0px -26px;
+}
+
+.gradient-blue-light, button:active, a.button:active {
+  background-position: 0px -53px;
+}
+
+.gradient-black-dark, button.black, a.black, a.black:visited {
+  background-position: 0px -80px;
+}
+
+.gradient-black-light, button.black:active, a.black:active {
+  background-position: 0px -107px;
+}
+
+.gradient-breadcrumbs {
+  background-position: 0px -242px;
+}
+
+.gradient-dark-menu-label {
+  background-position: 0px 0px;
+}
+
+.gradient-green-dark, button.green, a.green, a.green:visited {
+  background-position: 0px -134px;
+}
+
+.gradient-green-light, button.green:active, a.green:active {
+  background-position: 0px -161px;
+}
+
+.gradient-grey-dark, button.grey, input.inputaux, a.grey, a.grey:visited, a.button.disabled, button[disabled], button.disabled {
+  background-position: 0px -188px;
+}
+
+.gradient-grey-light, button.grey:active, a.grey:active, button.grey_active, a.dropdown-open {
+  background-position: 0px -215px;
+}

webroot/rsrc/css/sprite-menu.css

@@ -13,10 +13,18 @@ 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: 47px 69px;
+    background-size: 47px 101px;
   }
 }
 
+.phabricator-main-menu-alert-bubble {
+  background-position: 0px -42px;
+}
+
+.phabricator-main-menu-alert-bubble.alert-unread {
+  background-position: 0px -15px;
+}
+
 .alert-notifications .phabricator-main-menu-alert-icon {
   background-position: 0px 0px;
 }
@@ -25,14 +33,10 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   background-position: -15px 0px;
 }
 
-.phabricator-main-menu-alert-bubble.alert-unread {
-  background-position: 0px -15px;
-}
-
-.phabricator-main-menu-alert-bubble {
-  background-position: 0px -42px;
-}
-
 .alert-notifications.alert-unread .phabricator-main-menu-alert-icon {
   background-position: -27px -42px;
 }
+
+.phabricator-crumb-divider {
+  background-position: 0px -69px;
+}