Mobile Crumbs.

Summary: Not for full review. This makes crumbs appear consistently in mobile. It helps give a quick link to the apps home, the page title currently on, and action icons for the object. It will take additional clean-up to make this consistent across apps. Passing for early review from a UEX perspective. I actually really like it and think onces it's everywhere, helps mobile feel complete.

Test Plan: Testing in iOS and Simulator.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T2796

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

src/__celerity_resource_map__.php

@@ -2793,7 +2793,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-crumbs-view-css' =>
   array(
-    'uri' => '/res/4f15b2ae/rsrc/css/layout/phabricator-crumbs-view.css',
+    'uri' => '/res/2857d229/rsrc/css/layout/phabricator-crumbs-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3701,7 +3701,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    '93e81012' =>
+    'bcecb316' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -3743,7 +3743,7 @@ celerity_register_resource_map(array(
         34 => 'phabricator-object-item-list-view-css',
         35 => 'global-drag-and-drop-css',
       ),
-      'uri' => '/res/pkg/93e81012/core.pkg.css',
+      'uri' => '/res/pkg/bcecb316/core.pkg.css',
       'type' => 'css',
     ),
     '95ceba95' =>
@@ -3934,16 +3934,16 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => '6b1fccc6',
-    'aphront-dialog-view-css' => '93e81012',
+    'aphront-dialog-view-css' => 'bcecb316',
-    'aphront-error-view-css' => '93e81012',
+    'aphront-error-view-css' => 'bcecb316',
-    'aphront-form-view-css' => '93e81012',
+    'aphront-form-view-css' => 'bcecb316',
-    'aphront-list-filter-view-css' => '93e81012',
+    'aphront-list-filter-view-css' => 'bcecb316',
-    'aphront-pager-view-css' => '93e81012',
+    'aphront-pager-view-css' => 'bcecb316',
-    'aphront-panel-view-css' => '93e81012',
+    'aphront-panel-view-css' => 'bcecb316',
-    'aphront-table-view-css' => '93e81012',
+    'aphront-table-view-css' => 'bcecb316',
-    'aphront-tokenizer-control-css' => '93e81012',
+    'aphront-tokenizer-control-css' => 'bcecb316',
-    'aphront-tooltip-css' => '93e81012',
+    'aphront-tooltip-css' => 'bcecb316',
-    'aphront-typeahead-control-css' => '93e81012',
+    'aphront-typeahead-control-css' => 'bcecb316',
     'differential-changeset-view-css' => '8aaacd1b',
     'differential-core-view-css' => '8aaacd1b',
     'differential-inline-comment-editor' => '322728f3',
@@ -3957,7 +3957,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => '8aaacd1b',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => '93e81012',
+    'global-drag-and-drop-css' => 'bcecb316',
     'inline-comment-summary-css' => '8aaacd1b',
     'javelin-aphlict' => '95ceba95',
     'javelin-behavior' => 'fe22443b',
@@ -4029,48 +4029,48 @@ celerity_register_resource_map(array(
     'javelin-util' => 'fe22443b',
     'javelin-vector' => 'fe22443b',
     'javelin-workflow' => 'fe22443b',
-    'lightbox-attachment-css' => '93e81012',
+    'lightbox-attachment-css' => 'bcecb316',
     'maniphest-task-summary-css' => '6b1fccc6',
     'maniphest-transaction-detail-css' => '6b1fccc6',
     'phabricator-busy' => '95ceba95',
     'phabricator-content-source-view-css' => '8aaacd1b',
-    'phabricator-core-buttons-css' => '93e81012',
+    'phabricator-core-buttons-css' => 'bcecb316',
-    'phabricator-core-css' => '93e81012',
+    'phabricator-core-css' => 'bcecb316',
-    'phabricator-crumbs-view-css' => '93e81012',
+    'phabricator-crumbs-view-css' => 'bcecb316',
-    'phabricator-directory-css' => '93e81012',
+    'phabricator-directory-css' => 'bcecb316',
     'phabricator-drag-and-drop-file-upload' => '322728f3',
     'phabricator-dropdown-menu' => '95ceba95',
     'phabricator-file-upload' => '95ceba95',
-    'phabricator-filetree-view-css' => '93e81012',
+    'phabricator-filetree-view-css' => 'bcecb316',
-    'phabricator-flag-css' => '93e81012',
+    'phabricator-flag-css' => 'bcecb316',
-    'phabricator-form-view-css' => '93e81012',
+    'phabricator-form-view-css' => 'bcecb316',
-    'phabricator-header-view-css' => '93e81012',
+    'phabricator-header-view-css' => 'bcecb316',
-    'phabricator-jump-nav' => '93e81012',
+    'phabricator-jump-nav' => 'bcecb316',
     'phabricator-keyboard-shortcut' => '95ceba95',
     'phabricator-keyboard-shortcut-manager' => '95ceba95',
-    'phabricator-main-menu-view' => '93e81012',
+    'phabricator-main-menu-view' => 'bcecb316',
     'phabricator-menu-item' => '95ceba95',
-    'phabricator-nav-view-css' => '93e81012',
+    'phabricator-nav-view-css' => 'bcecb316',
     'phabricator-notification' => '95ceba95',
-    'phabricator-notification-css' => '93e81012',
+    'phabricator-notification-css' => 'bcecb316',
-    'phabricator-notification-menu-css' => '93e81012',
+    'phabricator-notification-menu-css' => 'bcecb316',
-    'phabricator-object-item-list-view-css' => '93e81012',
+    'phabricator-object-item-list-view-css' => 'bcecb316',
     'phabricator-object-selector-css' => '8aaacd1b',
     'phabricator-paste-file-upload' => '95ceba95',
     'phabricator-prefab' => '95ceba95',
     'phabricator-project-tag-css' => '6b1fccc6',
-    'phabricator-remarkup-css' => '93e81012',
+    'phabricator-remarkup-css' => 'bcecb316',
     'phabricator-shaped-request' => '322728f3',
-    'phabricator-side-menu-view-css' => '93e81012',
+    'phabricator-side-menu-view-css' => 'bcecb316',
-    'phabricator-standard-page-view' => '93e81012',
+    'phabricator-standard-page-view' => 'bcecb316',
     'phabricator-textareautils' => '95ceba95',
     'phabricator-tooltip' => '95ceba95',
-    'phabricator-transaction-view-css' => '93e81012',
+    'phabricator-transaction-view-css' => 'bcecb316',
-    'phabricator-zindex-css' => '93e81012',
+    'phabricator-zindex-css' => 'bcecb316',
-    'sprite-apps-large-css' => '93e81012',
+    'sprite-apps-large-css' => 'bcecb316',
-    'sprite-gradient-css' => '93e81012',
+    'sprite-gradient-css' => 'bcecb316',
-    'sprite-icon-css' => '93e81012',
+    'sprite-icon-css' => 'bcecb316',
-    'sprite-menu-css' => '93e81012',
+    'sprite-menu-css' => 'bcecb316',
-    'syntax-highlighting-css' => '93e81012',
+    'syntax-highlighting-css' => 'bcecb316',
   ),
 ));

src/applications/differential/controller/DifferentialDiffCreateController.php

@@ -65,13 +65,24 @@ final class DifferentialDiffCreateController extends DifferentialController {
 
     $panel = new AphrontPanelView();
     $panel->setHeader(pht('Create New Diff'));
+    $panel->setNoBackground();
     $panel->appendChild($form);
     $panel->setWidth(AphrontPanelView::WIDTH_FORM);
 
-    return $this->buildStandardPageResponse(
+    $crumbs = $this->buildApplicationCrumbs();
-      $panel,
+    $crumbs->addCrumb(
+      id(new PhabricatorCrumbView())
+        ->setName(pht('Create Diff'))
+        ->setHref('/differential/diff/create/'));
+
+    return $this->buildApplicationPage(
+      array(
+        $crumbs,
+        $panel
+      ),
       array(
         'title' => pht('Create Diff'),
+        'device' => true,
       ));
   }
 

src/applications/files/controller/PhabricatorFileListController.php

@@ -48,12 +48,8 @@ final class PhabricatorFileListController extends PhabricatorFileController {
     $side_nav = $this->buildSideNavView();
     $side_nav->selectFilter($this->getFilter());
 
-    $header_view = id(new PhabricatorHeaderView())
-      ->setHeader($header);
-
     $side_nav->appendChild(
       array(
-        $header_view,
         $file_list,
         $pager,
         new PhabricatorGlobalUploadTargetView(),
@@ -72,6 +68,7 @@ final class PhabricatorFileListController extends PhabricatorFileController {
       array(
         'title' => 'Files',
         'device' => true,
+        'dust' => true,
       ));
   }
 

src/applications/files/controller/PhabricatorFileUploadController.php

@@ -39,7 +39,6 @@ final class PhabricatorFileUploadController extends PhabricatorFileController {
           'desktop onto this page or the Phabricator home page.')));
 
     $form = id(new AphrontFormView())
-      ->setFlexible(true)
       ->setUser($user)
       ->setEncType('multipart/form-data')
       ->appendChild(
@@ -68,9 +67,6 @@ final class PhabricatorFileUploadController extends PhabricatorFileController {
 
     $title = pht('Upload File');
 
-    $header = id(new PhabricatorHeaderView())
-      ->setHeader($title);
-
     if ($errors) {
       $errors = id(new AphrontErrorView())
         ->setTitle(pht('Form Errors'))
@@ -80,12 +76,17 @@ final class PhabricatorFileUploadController extends PhabricatorFileController {
     $global_upload = id(new PhabricatorGlobalUploadTargetView())
       ->setShowIfSupportedID($support_id);
 
+    $panel = new AphrontPanelView();
+    $panel->setHeader(pht('New File Upload'));
+    $panel->setNoBackground();
+    $panel->appendChild($form);
+    $panel->setWidth(AphrontPanelView::WIDTH_FORM);
+
     return $this->buildApplicationPage(
       array(
         $crumbs,
-        $header,
         $errors,
-        $form,
+        $panel,
         $global_upload,
       ),
       array(

src/applications/macro/controller/PhabricatorMacroEditController.php

@@ -152,7 +152,6 @@ final class PhabricatorMacroEditController
     }
 
     $form = new AphrontFormView();
-    $form->setFlexible(true);
     $form->addHiddenInput('name_form', 1);
     $form->setUser($request->getUser());
 
@@ -237,10 +236,6 @@ final class PhabricatorMacroEditController
         ->setHref($request->getRequestURI())
         ->setName($crumb));
 
-    $header = id(new PhabricatorHeaderView())
-      ->setHeader($title);
-
-
     $upload = null;
     if ($macro->getID()) {
       $upload_header = id(new PhabricatorHeaderView())
@@ -272,16 +267,22 @@ final class PhabricatorMacroEditController
       $upload = array($upload_header, $upload_form);
     }
 
+    $panel = new AphrontPanelView();
+    $panel->setHeader(pht('Create New Macro'));
+    $panel->setNoBackground();
+    $panel->appendChild($form);
+    $panel->setWidth(AphrontPanelView::WIDTH_FORM);
+
     return $this->buildApplicationPage(
       array(
         $crumbs,
-        $header,
         $error_view,
-        $form,
+        $panel,
         $upload,
       ),
       array(
         'title' => $title,
+        'device' => true,
       ));
   }
 }

src/applications/maniphest/controller/ManiphestTaskDetailController.php

@@ -340,7 +340,12 @@ final class ManiphestTaskDetailController extends ManiphestController {
     $crumbs->addCrumb(
       id(new PhabricatorCrumbView())
         ->setName($object_name)
-        ->setHref('/'.$object_name));
+        ->setHref('/'.$object_name))
+      ->addAction(
+        id(new PhabricatorMenuItemView())
+          ->setHref($this->getApplicationURI('/task/create/'))
+          ->setName(pht('Create Task'))
+          ->setIcon('create'));
 
     $header = $this->buildHeaderView($task);
     $actions = $this->buildActionView($task);

src/applications/maniphest/controller/ManiphestTaskEditController.php

@@ -532,8 +532,20 @@ final class ManiphestTaskEditController extends ManiphestController {
       $page_objects = array();
     }
 
+    $crumbs = $this->buildApplicationCrumbs();
+    $crumbs->addCrumb(
+      id(new PhabricatorCrumbView())
+        ->setName($header_name)
+        ->setHref($this->getApplicationURI('/task/create/')))
+      ->addAction(
+        id(new PhabricatorMenuItemView())
+          ->setHref($this->getApplicationURI('/task/create/'))
+          ->setName(pht('Create Task'))
+          ->setIcon('create'));
+
     return $this->buildApplicationPage(
       array(
+        $crumbs,
         $error_view,
         $panel,
         $description_preview_panel,

src/applications/paste/controller/PhabricatorPasteListController.php

@@ -43,12 +43,8 @@ final class PhabricatorPasteListController extends PhabricatorPasteController {
     $list->setPager($pager);
     $list->setNoDataString($nodata);
 
-    $header = id(new PhabricatorHeaderView())
-      ->setHeader($title);
-
     $nav->appendChild(
       array(
-        $header,
         $list,
       ));
 
@@ -66,6 +62,7 @@ final class PhabricatorPasteListController extends PhabricatorPasteController {
       array(
         'title' => $title,
         'device' => true,
+        'dust' => true,
       ));
   }
 

src/applications/phlux/controller/PhluxListController.php

@@ -36,13 +36,9 @@ final class PhluxListController extends PhluxController {
         ->setName($title)
         ->setHref($this->getApplicationURI()));
 
-    $header = id(new PhabricatorHeaderView())
-      ->setHeader($title);
-
     return $this->buildApplicationPage(
       array(
         $crumbs,
-        $header,
         $view,
         $pager,
       ),

src/applications/pholio/controller/PholioMockEditController.php

@@ -219,11 +219,14 @@ final class PholioMockEditController extends PholioController {
           ->setName('can_view'))
       ->appendChild($submit);
 
-    $header = id(new PhabricatorHeaderView())
+    $crumbs = $this->buildApplicationCrumbs($this->buildSideNav());
-      ->setHeader($title);
+    $crumbs->addCrumb(
+      id(new PhabricatorCrumbView())
+        ->setName($title)
+        ->setHref($this->getApplicationURI()));
 
     $content = array(
-      $header,
+      $crumbs,
       $error_view,
       $form,
     );

src/applications/project/controller/PhabricatorProjectListController.php

@@ -123,12 +123,8 @@ final class PhabricatorProjectListController
       $list->addItem($item);
     }
 
-    $header = id(new PhabricatorHeaderView())
-      ->setHeader($table_header);
-
     $nav->appendChild(
       array(
-        $header,
         $list,
         $pager,
       ));

src/view/layout/PhabricatorCrumbView.php

@@ -67,6 +67,8 @@ final class PhabricatorCrumbView extends AphrontView {
           'class' => 'sprite-menu phabricator-crumb-divider',
         ),
         '');
+    } else {
+      $classes[] = 'phabricator-last-crumb';
     }
 
     return phutil_tag(

src/view/layout/PhabricatorCrumbsView.php

@@ -37,6 +37,13 @@ final class PhabricatorCrumbsView extends AphrontView {
             ),
             '');
         }
+        $name = phutil_tag(
+          'span',
+            array(
+              'class' => 'phabricator-crumbs-action-name'
+            ),
+          $action->getName()
+        );
         $actions[] = javelin_tag(
           'a',
           array(
@@ -46,7 +53,7 @@ final class PhabricatorCrumbsView extends AphrontView {
           ),
           array(
             $icon,
-            $action->getName(),
+            $name,
           ));
       }
 

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

@@ -2,10 +2,6 @@
  * @provides phabricator-crumbs-view-css
  */
 
-.device .phabricator-crumbs-view {
-  display: none;
-}
-
 .phabricator-crumbs-view {
   background-color: #d8dce2;
   height: 31px;
@@ -43,6 +39,15 @@
   line-height: 31px;
 }
 
+.device-phone .phabricator-crumb-view {
+  display: none;
+}
+
+.device-phone .phabricator-crumb-view.phabricator-last-crumb,
+.device-phone .phabricator-crumb-view.phabricator-crumb-has-icon {
+  display: inline-block;
+}
+
 .phabricator-crumb-icon {
   display: inline-block;
   width: 28px;
@@ -51,6 +56,10 @@
   vertical-align: top;
 }
 
+.device-phone .phabricator-crumb-icon {
+  margin-left: 7px;
+}
+
 .phabricator-crumbs-actions {
   float: right;
 }
@@ -62,6 +71,19 @@
   position: relative;
 }
 
+.device-phone a.phabricator-crumbs-action {
+  padding: 13px 20px 4px 10px;
+  border-left: 1px solid #ccc;
+}
+
+.device-phone .phabricator-crumbs-action-name {
+  display: none;
+}
+
+.device-phone a.phabricator-crumbs-action .sprite-icon {
+  margin-left: 5px;
+}
+
 .phabricator-crumbs-action .sprite-icon {
   width: 14px;
   height: 14px;