Redesign Crumbs

Summary: Slimmer crumbs, less complex, no sprites, less visual disruption.

Test Plan:
Test Conpherence, Objects, Application Search pages.

{F275026}

{F275027}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'bfa98093',
+    'core.pkg.css' => 'a793698c',
     'core.pkg.js' => '63963771',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '8af45893',
@@ -47,7 +47,7 @@ return array(
     'rsrc/css/application/config/setup-issue.css' => '8f852bc0',
     'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
     'rsrc/css/application/conpherence/menu.css' => 'e1e0fdf1',
-    'rsrc/css/application/conpherence/message-pane.css' => '042886d1',
+    'rsrc/css/application/conpherence/message-pane.css' => '684d1b80',
     'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
     'rsrc/css/application/conpherence/update.css' => '1099a660',
     'rsrc/css/application/conpherence/widget-pane.css' => '3d575438',
@@ -124,7 +124,7 @@ return array(
     'rsrc/css/phui/phui-action-list.css' => '9ee9910a',
     'rsrc/css/phui/phui-box.css' => '7b3a2eed',
     'rsrc/css/phui/phui-button.css' => '008ba5e2',
-    'rsrc/css/phui/phui-crumbs-view.css' => 'cd08e0bf',
+    'rsrc/css/phui/phui-crumbs-view.css' => '8d3bc4a6',
     'rsrc/css/phui/phui-document.css' => 'bbeb1890',
     'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
     'rsrc/css/phui/phui-fontkit.css' => '9c3d2dce',
@@ -150,7 +150,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' => '661b879f',
+    'rsrc/css/sprite-menu.css' => '9457345d',
     'rsrc/css/sprite-projects.css' => 'b0d9e24f',
     'rsrc/css/sprite-tokens.css' => '1706b943',
     'rsrc/externals/font/fontawesome/fontawesome-webfont.eot' => '5fb6fb0e',
@@ -320,8 +320,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' => '89ae35f1',
-    'rsrc/image/sprite-menu.png' => 'b912a047',
+    'rsrc/image/sprite-menu-X2.png' => 'acea7012',
+    'rsrc/image/sprite-menu.png' => '24e76f8a',
     'rsrc/image/sprite-projects-X2.png' => '8c91c839',
     'rsrc/image/sprite-projects.png' => 'ef9dc9b5',
     'rsrc/image/sprite-tokens-X2.png' => 'b4776580',
@@ -506,7 +506,7 @@ return array(
     'config-options-css' => '7fedf08b',
     'config-welcome-css' => 'b0d16200',
     'conpherence-menu-css' => 'e1e0fdf1',
-    'conpherence-message-pane-css' => '042886d1',
+    'conpherence-message-pane-css' => '684d1b80',
     'conpherence-notification-css' => '04a6e10a',
     'conpherence-update-css' => '1099a660',
     'conpherence-widget-pane-css' => '3d575438',
@@ -764,7 +764,7 @@ return array(
     'phui-calendar-day-css' => 'de035c8a',
     'phui-calendar-list-css' => 'c1d0ca59',
     'phui-calendar-month-css' => 'a92e47d2',
-    'phui-crumbs-view-css' => 'cd08e0bf',
+    'phui-crumbs-view-css' => '8d3bc4a6',
     'phui-document-view-css' => 'bbeb1890',
     'phui-feed-story-css' => 'c9f3a0b5',
     'phui-font-icon-base-css' => '3dad2ae3',
@@ -810,7 +810,7 @@ return array(
     'sprite-gradient-css' => '4bdb98a7',
     'sprite-login-css' => 'a355d921',
     'sprite-main-header-css' => '92720ee2',
-    'sprite-menu-css' => '661b879f',
+    'sprite-menu-css' => '9457345d',
     'sprite-projects-css' => 'b0d9e24f',
     'sprite-tokens-css' => '1706b943',
     'syntax-highlighting-css' => '56c1ba38',

resources/sprite/manifest/menu.json

@@ -1,26 +1,21 @@
 {
-  "version" : 1,
-  "sprites" : {
-    "arrow-right" : {
-      "name" : "arrow-right",
-      "rule" : ".phabricator-crumb-divider",
-      "hash" : "87affa58adbe8da437a1cea6ffc5d8a4"
+  "version": 1,
+  "sprites": {
+    "eye": {
+      "name": "eye",
+      "rule": ".phabricator-main-menu-eye",
+      "hash": "35f24014f23142275574136a63dcb73f"
     },
-    "eye"         : {
-      "name" : "eye",
-      "rule" : ".phabricator-main-menu-eye",
-      "hash" : "35f24014f23142275574136a63dcb73f"
-    },
-    "logo"        : {
-      "name" : "logo",
-      "rule" : ".phabricator-main-menu-logo",
-      "hash" : "668b04729a4b9460b0c89cb6ef6db4d4"
+    "logo": {
+      "name": "logo",
+      "rule": ".phabricator-main-menu-logo",
+      "hash": "668b04729a4b9460b0c89cb6ef6db4d4"
     }
   },
-  "scales"  : [
+  "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}\n",
-  "type"    : "standard"
+  "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}\n",
+  "type": "standard"
 }

src/applications/base/controller/PhabricatorController.php

@@ -441,7 +441,7 @@ abstract class PhabricatorController extends AphrontController {
 
       $crumbs[] = id(new PHUICrumbView())
         ->setHref($this->getApplicationURI())
-        ->setAural($application->getName())
+        ->setName($application->getName())
         ->setIcon($icon);
     }
 

src/applications/celerity/CeleritySpriteGenerator.php

@@ -6,11 +6,6 @@ final class CeleritySpriteGenerator {
     $sprites = array();
 
     $sources = array(
-      'arrow-right' => array(
-        'x' => 9,
-        'y' => 31,
-        'css' => '.phui-crumb-divider',
-      ),
       'logo' => array(
         'x' => 96,
         'y' => 26,

src/applications/search/controller/PhabricatorApplicationSearchController.php

@@ -254,7 +254,7 @@ final class PhabricatorApplicationSearchController
     }
 
     if ($named_query) {
-      $title = pht('Query: %s', $named_query->getQueryName());
+      $title = $named_query->getQueryName();
     } else {
       $title = pht('Advanced Search');
     }

src/view/phui/PHUICrumbView.php

@@ -69,12 +69,8 @@ final class PHUICrumbView extends AphrontView {
     $icon = null;
     if ($this->icon) {
       $classes[] = 'phui-crumb-has-icon';
-      $icon = phutil_tag(
-        'span',
-        array(
-          'class' => 'phui-crumb-icon phui-icon-view phui-font-fa '.$this->icon,
-        ),
-        '');
+      $icon = id(new PHUIIconView())
+        ->setIconFont($this->icon);
     }
 
     $name = phutil_tag(
@@ -86,23 +82,23 @@ final class PHUICrumbView extends AphrontView {
 
     $divider = null;
     if (!$this->isLastCrumb) {
-      $divider = phutil_tag(
-        'span',
-        array(
-          'class' => 'sprite-menu phui-crumb-divider',
-        ),
-        '');
+      $divider = id(new PHUIIconView())
+        ->setIconFont('fa-angle-right')
+        ->addClass('phui-crumb-divider')
+        ->addClass('phui-crumb-view');
     } else {
       $classes[] = 'phabricator-last-crumb';
     }
 
-    return javelin_tag(
+    $tag = javelin_tag(
       $this->href ? 'a' : 'span',
         array(
           'sigil' => $this->workflow ? 'workflow' : null,
           'href'  => $this->href,
           'class' => implode(' ', $classes),
         ),
-        array($aural, $icon, $name, $divider));
+        array($aural, $icon, $name));
+
+    return array($tag, $divider);
   }
 }

src/view/phui/PHUICrumbsView.php

@@ -97,11 +97,13 @@ final class PHUICrumbsView extends AphrontView {
       last($this->crumbs)->setIsLastCrumb(true);
     }
 
+    $classes = array();
+    $classes[] = 'phui-crumbs-view';
+
     return phutil_tag(
       'div',
       array(
-        'class' => 'phui-crumbs-view '.
-                   'sprite-gradient gradient-breadcrumbs',
+        'class' => implode(' ', $classes),
       ),
       array(
         $action_view,

webroot/rsrc/css/application/conpherence/message-pane.css

@@ -32,6 +32,11 @@
   margin: 16px 0px 16px 0px;
 }
 
+.conpherence-layout .phui-crumbs-view {
+  padding: 0 0 0 8px;
+  background: #EBECEE;
+}
+
 .conpherence-show-older-messages {
   display: block;
   background: #e0e3ec;

webroot/rsrc/css/phui/phui-crumbs-view.css

@@ -3,16 +3,14 @@
  */
 
 .phui-crumbs-view {
-  background-color: #ebecee;
-  background-image: none !important;
-  height: 31px;
   overflow: hidden;
   vertical-align: top;
-  border-bottom: 1px solid rgba(205, 207, 211, 1);
+  padding: 0 8px 0 16px;
   /* TODO: Position this over the slider for Differential's file tree view.
      Remove this once that gets sorted out. */
   position: relative;
   -webkit-font-smoothing: antialiased;
+  border-bottom: 1px solid rgba(205, 207, 211, 1);
 }
 
 .phui-crumbs-view,
@@ -38,12 +36,7 @@
 
 .phui-crumb-view {
   float: left;
-  height: 31px;
-  line-height: 31px;
-}
-
-.device-phone .phui-crumb-view {
-  display: none;
+  padding: 8px 0;
 }
 
 .device-phone .phui-crumb-view.phabricator-last-crumb,
@@ -51,14 +44,12 @@
   display: inline-block;
 }
 
-.phui-crumb-icon {
-  display: inline-block;
-  width: 28px;
-  height: 28px;
-  margin: 6px 2px 2px 10px;
-  vertical-align: top;
-  font-size: 20px;
-  text-align: center;
+.device-phone .phui-crumb-has-icon .phui-crumb-name {
+  display: none;
+}
+
+.phui-crumb-has-icon .phui-icon-view {
+  margin: 0 4px;
 }
 
 .device-phone .phui-crumb-icon {
@@ -79,11 +70,11 @@
 
 .device-phone a.phui-crumbs-action {
   padding: 7px;
-  border-left: 1px solid {$hovergrey};
 }
 
-.device-desktop a.phui-crumbs-action:hover {
-  background: rgba(205, 207, 211, .5);
+.device-desktop .phui-crumbs-view a:hover,
+.device-desktop .phui-crumbs-view a:hover .phui-icon-view {
+  color: {$sky};
   text-decoration: none;
 }
 
@@ -101,9 +92,5 @@ a.phui-crumbs-action .phui-icon-view {
 }
 
 .phui-crumb-divider {
-  display: inline-block;
-  width: 9px;
-  height: 31px;
-  vertical-align: top;
-  margin: 0 8px 0 4px;
+  margin: 2px 8px;
 }

webroot/rsrc/css/sprite-menu.css

@@ -13,19 +13,15 @@ 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: 97px 100px;
+    background-size: 97px 68px;
   }
 }
 
 
-.phui-crumb-divider {
-  background-position: 0px -27px;
-}
-
 .phabricator-main-menu-logo {
   background-position: 0px 0px;
 }
 
 .phabricator-main-menu-eye {
-  background-position: 0px -59px;
+  background-position: 0px -27px;
 }