Rework Mobile Header and Mobile Home.

Summary: Mostly finished, wanted to get it into your hands to play with. I need to remove some more dead CSS and figure out where we want to put profile/logout, but overall feels pretty good. Tested a bunch in iOS and other layouts.

Test Plan: Test Home, Maniphest, search bars, app menus.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin, AnhNhan

Maniphest Tasks: T2809

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

resources/sprite/manifest/menu.json

@@ -4,12 +4,12 @@
     "app"              : {
       "name" : "app",
       "rule" : ".menu-icon-app",
-      "hash" : "fc525b5b3e3ecaeda3baccc18ace5a0a"
+      "hash" : "14cd042732abba487dc9c4135d65f2c5"
     },
     "app_blue"         : {
       "name" : "app_blue",
       "rule" : ".menu-icon-app-blue",
-      "hash" : "b92f3961cf38ba4d95fa26d7a54031c0"
+      "hash" : "5f9926e52a4e6fd43fc5fdd0cc5c8053"
     },
     "arrow-right"      : {
       "name" : "arrow-right",
@@ -31,21 +31,21 @@
       "rule" : ".alert-notifications.message-unread .phabricator-main-menu-message-icon",
       "hash" : "85d603ae4a9b8004944c6cf59da98b7d"
     },
-    "eye"              : {
-      "name" : "eye",
-      "rule" : ".menu-icon-eye",
-      "hash" : "553eb617c19b74b428558e606ff9b066"
-    },
-    "eye_blue"         : {
-      "name" : "eye_blue",
-      "rule" : ".menu-icon-eye-blue",
-      "hash" : "3ae3de9e694152bd6dbba58aebc46a45"
-    },
     "logo"             : {
       "name" : "logo",
       "rule" : ".phabricator-main-menu-logo-image",
       "hash" : "6eadea2c3dd2ada989eba22b6769b3eb"
     },
+    "search"           : {
+      "name" : "search",
+      "rule" : ".menu-icon-search",
+      "hash" : "26fa1f6646d20e159bb5ed5bd125a3b9"
+    },
+    "search_blue"      : {
+      "name" : "search_blue",
+      "rule" : ".menu-icon-search-blue",
+      "hash" : "8ddecd3b988a3ec69c2116bfd65959cb"
+    },
     "seen_have_unread" : {
       "name" : "seen_have_unread",
       "rule" : ".alert-notifications:hover .phabricator-main-menu-alert-icon",

src/__celerity_resource_map__.php

@@ -534,15 +534,15 @@ celerity_register_resource_map(array(
   ),
   '/rsrc/image/sprite-menu-X2.png' =>
   array(
-    'hash' => '9f5cae08146fbe3b7e865b60c64121d1',
-    'uri' => '/res/9f5cae08/rsrc/image/sprite-menu-X2.png',
+    'hash' => '867092041ce0a62b7e50136213ca7be1',
+    'uri' => '/res/86709204/rsrc/image/sprite-menu-X2.png',
     'disk' => '/rsrc/image/sprite-menu-X2.png',
     'type' => 'png',
   ),
   '/rsrc/image/sprite-menu.png' =>
   array(
-    'hash' => 'cc82b64d031dafa2b2a62cc8effa62f6',
-    'uri' => '/res/cc82b64d/rsrc/image/sprite-menu.png',
+    'hash' => '21508eebdf582d7251d62bb2cd09f66d',
+    'uri' => '/res/21508eeb/rsrc/image/sprite-menu.png',
     'disk' => '/rsrc/image/sprite-menu.png',
     'type' => 'png',
   ),
@@ -2713,7 +2713,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-application-launch-view-css' =>
   array(
-    'uri' => '/res/13c3d7f3/rsrc/css/application/base/phabricator-application-launch-view.css',
+    'uri' => '/res/b04e66e6/rsrc/css/application/base/phabricator-application-launch-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -2927,7 +2927,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-main-menu-view' =>
   array(
-    'uri' => '/res/c1a73bc2/rsrc/css/application/base/main-menu-view.css',
+    'uri' => '/res/401e9389/rsrc/css/application/base/main-menu-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -2947,7 +2947,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-nav-view-css' =>
   array(
-    'uri' => '/res/f3c78a53/rsrc/css/aphront/phabricator-nav-view.css',
+    'uri' => '/res/0af35d12/rsrc/css/aphront/phabricator-nav-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3631,7 +3631,7 @@ celerity_register_resource_map(array(
   ),
   'sprite-menu-css' =>
   array(
-    'uri' => '/res/50bb9cc5/rsrc/css/sprite-menu.css',
+    'uri' => '/res/e4e428f9/rsrc/css/sprite-menu.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3686,7 +3686,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    '2fc6daef' =>
+    '8de9d42a' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -3728,7 +3728,7 @@ celerity_register_resource_map(array(
         34 => 'phabricator-object-item-list-view-css',
         35 => 'global-drag-and-drop-css',
       ),
-      'uri' => '/res/pkg/2fc6daef/core.pkg.css',
+      'uri' => '/res/pkg/8de9d42a/core.pkg.css',
       'type' => 'css',
     ),
     '95ceba95' =>
@@ -3919,16 +3919,16 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => 'c41b4907',
-    'aphront-dialog-view-css' => '2fc6daef',
-    'aphront-error-view-css' => '2fc6daef',
-    'aphront-form-view-css' => '2fc6daef',
-    'aphront-list-filter-view-css' => '2fc6daef',
-    'aphront-pager-view-css' => '2fc6daef',
-    'aphront-panel-view-css' => '2fc6daef',
-    'aphront-table-view-css' => '2fc6daef',
-    'aphront-tokenizer-control-css' => '2fc6daef',
-    'aphront-tooltip-css' => '2fc6daef',
-    'aphront-typeahead-control-css' => '2fc6daef',
+    'aphront-dialog-view-css' => '8de9d42a',
+    'aphront-error-view-css' => '8de9d42a',
+    'aphront-form-view-css' => '8de9d42a',
+    'aphront-list-filter-view-css' => '8de9d42a',
+    'aphront-pager-view-css' => '8de9d42a',
+    'aphront-panel-view-css' => '8de9d42a',
+    'aphront-table-view-css' => '8de9d42a',
+    'aphront-tokenizer-control-css' => '8de9d42a',
+    'aphront-tooltip-css' => '8de9d42a',
+    'aphront-typeahead-control-css' => '8de9d42a',
     'differential-changeset-view-css' => '8aaacd1b',
     'differential-core-view-css' => '8aaacd1b',
     'differential-inline-comment-editor' => '322728f3',
@@ -3942,7 +3942,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' => '2fc6daef',
+    'global-drag-and-drop-css' => '8de9d42a',
     'inline-comment-summary-css' => '8aaacd1b',
     'javelin-aphlict' => '95ceba95',
     'javelin-behavior' => 'fe22443b',
@@ -4014,48 +4014,48 @@ celerity_register_resource_map(array(
     'javelin-util' => 'fe22443b',
     'javelin-vector' => 'fe22443b',
     'javelin-workflow' => 'fe22443b',
-    'lightbox-attachment-css' => '2fc6daef',
+    'lightbox-attachment-css' => '8de9d42a',
     'maniphest-task-summary-css' => 'c41b4907',
     'maniphest-transaction-detail-css' => 'c41b4907',
     'phabricator-busy' => '95ceba95',
     'phabricator-content-source-view-css' => '8aaacd1b',
-    'phabricator-core-buttons-css' => '2fc6daef',
-    'phabricator-core-css' => '2fc6daef',
-    'phabricator-crumbs-view-css' => '2fc6daef',
-    'phabricator-directory-css' => '2fc6daef',
+    'phabricator-core-buttons-css' => '8de9d42a',
+    'phabricator-core-css' => '8de9d42a',
+    'phabricator-crumbs-view-css' => '8de9d42a',
+    'phabricator-directory-css' => '8de9d42a',
     'phabricator-drag-and-drop-file-upload' => '322728f3',
     'phabricator-dropdown-menu' => '95ceba95',
     'phabricator-file-upload' => '95ceba95',
-    'phabricator-filetree-view-css' => '2fc6daef',
-    'phabricator-flag-css' => '2fc6daef',
-    'phabricator-form-view-css' => '2fc6daef',
-    'phabricator-header-view-css' => '2fc6daef',
-    'phabricator-jump-nav' => '2fc6daef',
+    'phabricator-filetree-view-css' => '8de9d42a',
+    'phabricator-flag-css' => '8de9d42a',
+    'phabricator-form-view-css' => '8de9d42a',
+    'phabricator-header-view-css' => '8de9d42a',
+    'phabricator-jump-nav' => '8de9d42a',
     'phabricator-keyboard-shortcut' => '95ceba95',
     'phabricator-keyboard-shortcut-manager' => '95ceba95',
-    'phabricator-main-menu-view' => '2fc6daef',
+    'phabricator-main-menu-view' => '8de9d42a',
     'phabricator-menu-item' => '95ceba95',
-    'phabricator-nav-view-css' => '2fc6daef',
+    'phabricator-nav-view-css' => '8de9d42a',
     'phabricator-notification' => '95ceba95',
-    'phabricator-notification-css' => '2fc6daef',
-    'phabricator-notification-menu-css' => '2fc6daef',
-    'phabricator-object-item-list-view-css' => '2fc6daef',
+    'phabricator-notification-css' => '8de9d42a',
+    'phabricator-notification-menu-css' => '8de9d42a',
+    'phabricator-object-item-list-view-css' => '8de9d42a',
     'phabricator-object-selector-css' => '8aaacd1b',
     'phabricator-paste-file-upload' => '95ceba95',
     'phabricator-prefab' => '95ceba95',
     'phabricator-project-tag-css' => 'c41b4907',
-    'phabricator-remarkup-css' => '2fc6daef',
+    'phabricator-remarkup-css' => '8de9d42a',
     'phabricator-shaped-request' => '322728f3',
-    'phabricator-side-menu-view-css' => '2fc6daef',
-    'phabricator-standard-page-view' => '2fc6daef',
+    'phabricator-side-menu-view-css' => '8de9d42a',
+    'phabricator-standard-page-view' => '8de9d42a',
     'phabricator-textareautils' => '95ceba95',
     'phabricator-tooltip' => '95ceba95',
-    'phabricator-transaction-view-css' => '2fc6daef',
-    'phabricator-zindex-css' => '2fc6daef',
-    'sprite-apps-large-css' => '2fc6daef',
-    'sprite-gradient-css' => '2fc6daef',
-    'sprite-icon-css' => '2fc6daef',
-    'sprite-menu-css' => '2fc6daef',
-    'syntax-highlighting-css' => '2fc6daef',
+    'phabricator-transaction-view-css' => '8de9d42a',
+    'phabricator-zindex-css' => '8de9d42a',
+    'sprite-apps-large-css' => '8de9d42a',
+    'sprite-gradient-css' => '8de9d42a',
+    'sprite-icon-css' => '8de9d42a',
+    'sprite-menu-css' => '8de9d42a',
+    'syntax-highlighting-css' => '8de9d42a',
   ),
 ));

src/applications/directory/controller/PhabricatorDirectoryMainController.php

@@ -65,10 +65,11 @@ final class PhabricatorDirectoryMainController
     $nav->appendChild($content);
     $nav->appendChild(new PhabricatorGlobalUploadTargetView());
 
-    return $this->buildStandardPageResponse(
+    return $this->buildApplicationPage(
       $nav,
       array(
         'title' => 'Phabricator',
+        'device' => true,
       ));
   }
 

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -110,24 +110,24 @@ final class CeleritySpriteGenerator {
         'y' => 31,
         'css' => '.phabricator-crumb-divider',
       ),
-      'eye' => array(
+      'search' => array(
         'x' => 24,
-        'y' => 20,
-        'css' => '.menu-icon-eye',
+        'y' => 24,
+        'css' => '.menu-icon-search',
       ),
-      'eye_blue' => array(
+      'search_blue' => array(
         'x' => 24,
-        'y' => 20,
-        'css' => '.menu-icon-eye-blue',
+        'y' => 24,
+        'css' => '.menu-icon-search-blue',
       ),
       'app' => array(
         'x' => 24,
-        'y' => 20,
+        'y' => 24,
         'css' => '.menu-icon-app',
       ),
       'app_blue' => array(
         'x' => 24,
-        'y' => 20,
+        'y' => 24,
         'css' => '.menu-icon-app-blue',
       ),
       'logo' => array(

src/view/page/menu/PhabricatorMainMenuView.php

@@ -41,14 +41,18 @@ final class PhabricatorMainMenuView extends AphrontView {
     $header_id = celerity_generate_unique_node_id();
     $menus = array();
     $alerts = array();
+    $search_button = '';
+    $app_button = '';
 
     if ($user->isLoggedIn()) {
       list($menu, $dropdown) = $this->renderNotificationMenu();
       $alerts[] = $menu;
       $menus[] = $dropdown;
+      $app_button = $this->renderApplicationMenuButton($header_id);
+      $search_button = $this->renderSearchMenuButton($header_id);
     }
 
-    $phabricator_menu = $this->renderPhabricatorMenu();
+    $search_menu = $this->renderPhabricatorSearchMenu();
 
     if ($alerts) {
       $alerts = phutil_tag(
@@ -59,11 +63,7 @@ final class PhabricatorMainMenuView extends AphrontView {
         $alerts);
     }
 
-    $application_menu = $this->getApplicationMenu();
-    if ($application_menu) {
-      $application_menu->addClass('phabricator-dark-menu');
-      $application_menu->addClass('phabricator-application-menu');
-    }
+    $application_menu = $this->renderApplicationMenu();
 
     return phutil_tag(
       'div',
@@ -72,14 +72,12 @@ final class PhabricatorMainMenuView extends AphrontView {
         'id'    => $header_id,
       ),
       array(
-        $this->renderPhabricatorMenuButton($header_id),
-        $application_menu
-          ? $this->renderApplicationMenuButton($header_id)
-          : null,
+        $app_button,
+        $search_button,
         $this->renderPhabricatorLogo(),
         $alerts,
-        $phabricator_menu,
         $application_menu,
+        $search_menu,
         $menus,
       ));
   }
@@ -116,37 +114,13 @@ final class PhabricatorMainMenuView extends AphrontView {
     return $result;
   }
 
-  private function renderPhabricatorMenuButton($header_id) {
-    $button_id = celerity_generate_unique_node_id();
-    return javelin_tag(
-      'a',
-      array(
-        'class' => 'phabricator-main-menu-expand-button '.
-                   'phabricator-expand-core-menu',
-        'sigil' => 'jx-toggle-class',
-        'meta'  => array(
-          'map' => array(
-            $header_id => 'phabricator-core-menu-expanded',
-            $button_id => 'menu-icon-eye-blue',
-          ),
-        ),
-      ),
-      phutil_tag(
-        'span',
-        array(
-          'class' => 'phabricator-menu-button-icon sprite-menu menu-icon-eye',
-          'id' => $button_id,
-        ),
-        ''));
-  }
-
   public function renderApplicationMenuButton($header_id) {
     $button_id = celerity_generate_unique_node_id();
     return javelin_tag(
       'a',
       array(
         'class' => 'phabricator-main-menu-expand-button '.
-                   'phabricator-expand-application-menu',
+                   'phabricator-expand-search-menu',
         'sigil' => 'jx-toggle-class',
         'meta'  => array(
           'map' => array(
@@ -164,81 +138,30 @@ final class PhabricatorMainMenuView extends AphrontView {
         ''));
   }
 
-  private function renderPhabricatorMenu() {
+  public function renderApplicationMenu() {
     $user = $this->getUser();
     $controller = $this->getController();
 
     $applications = PhabricatorApplication::getAllInstalledApplications();
 
-    $core = array();
-    $more = array();
     $actions = array();
-
-    require_celerity_resource('sprite-apps-large-css');
-
-    $group_core = PhabricatorApplication::GROUP_CORE;
     foreach ($applications as $application) {
       if ($application->shouldAppearInLaunchView()) {
-        $icon = $application->getIconName().'-light-large';
-
-        $item = id(new PhabricatorMenuItemView())
-          ->setName($application->getName())
-          ->setHref($application->getBaseURI())
-          ->appendChild($this->renderMenuIcon($icon));
-        if ($application->getApplicationGroup() == $group_core) {
-          $core[] = $item;
-        } else {
-          $more[$application->getName()] = $item;
-        }
-      }
-
         $app_actions = $application->buildMainMenuItems($user, $controller);
         foreach ($app_actions as $action) {
           $actions[] = $action;
         }
       }
+    }
 
+    $view = $this->getApplicationMenu();
 
+    if (!$view) {
       $view = new PhabricatorMenuView();
+    }
+
     $view->addClass('phabricator-dark-menu');
-    $view->addClass('phabricator-core-menu');
-
-    $search = $this->renderSearch();
-    if ($search) {
-      $view->addMenuItem($search);
-    }
-
-    $view
-      ->newLabel(pht('Home'))
-      ->addClass('phabricator-core-item-device');
-    $view->addMenuItem(
-      id(new PhabricatorMenuItemView())
-        ->addClass('phabricator-core-item-device')
-        ->setName(pht('Phabricator Home'))
-        ->setHref('/')
-        ->appendChild($this->renderMenuIcon('logo-light-large')));
-    if ($controller && $controller->getCurrentApplication()) {
-      $application = $controller->getCurrentApplication();
-      $icon = $application->getIconName().'-light-large';
-      $view->addMenuItem(
-        id(new PhabricatorMenuItemView())
-          ->addClass('phabricator-core-item-device')
-          ->setName(pht('%s Home', $application->getName()))
-          ->appendChild($this->renderMenuIcon($icon))
-          ->setHref($controller->getApplicationURI()));
-    }
-
-    if ($core) {
-      $view->addMenuItem(
-        id(new PhabricatorMenuItemView())
-          ->addClass('phabricator-core-item-device')
-          ->setType(PhabricatorMenuItemView::TYPE_LABEL)
-          ->setName(pht('Core Applications')));
-      foreach ($core as $item) {
-        $item->addClass('phabricator-core-item-device');
-        $view->addMenuItem($item);
-      }
-    }
+    $view->addClass('phabricator-application-menu');
 
     if ($actions) {
       $view->addMenuItem(
@@ -259,19 +182,52 @@ final class PhabricatorMainMenuView extends AphrontView {
       }
     }
 
-    if ($more) {
+    if ($user->isLoggedIn()) {
       $view->addMenuItem(
         id(new PhabricatorMenuItemView())
-          ->addClass('phabricator-core-item-device')
-          ->setType(PhabricatorMenuItemView::TYPE_LABEL)
-          ->setName(pht('More Applications')));
-      ksort($more);
-      foreach ($more as $item) {
-        $item->addClass('phabricator-core-item-device');
-        $view->addMenuItem($item);
-      }
+          ->addClass('phabricator-menu-item-type-link')
+          ->setName(pht('Log Out'))
+          ->setHref('/logout/')
+          ->appendChild($this->renderMenuIcon('power-light-large')));
     }
 
+    return $view;
+  }
+
+  public function renderSearchMenuButton($header_id) {
+    $button_id = celerity_generate_unique_node_id();
+    return javelin_tag(
+      'a',
+      array(
+        'class' => 'phabricator-main-menu-search-button '.
+                   'phabricator-expand-application-menu',
+        'sigil' => 'jx-toggle-class',
+        'meta'  => array(
+          'map' => array(
+            $header_id => 'phabricator-search-menu-expanded',
+            $button_id => 'menu-icon-search-blue',
+          ),
+        ),
+      ),
+      phutil_tag(
+      'span',
+      array(
+        'class' => 'phabricator-menu-button-icon sprite-menu menu-icon-search',
+        'id' => $button_id,
+      ),
+      ''));
+  }
+
+  private function renderPhabricatorSearchMenu() {
+
+    $view = new PhabricatorMenuView();
+    $view->addClass('phabricator-dark-menu');
+    $view->addClass('phabricator-search-menu');
+
+    $search = $this->renderSearch();
+    if ($search) {
+      $view->addMenuItem($search);
+    }
 
     return $view;
   }

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

@@ -37,6 +37,11 @@
   display: block;
 }
 
+.device .phabricator-side-menu-home .phabricator-nav-column-background,
+.device .phabricator-side-menu-home .phabricator-nav-local {
+  display: block;
+}
+
 .phabricator-nav-local {
   width: 205px;
   position: absolute;
@@ -80,6 +85,17 @@
   width: 240px;
 }
 
-.device-desktop .phabricator-side-menu-home .phabricator-nav-content {
+.device-desktop .phabricator-side-menu-home .phabricator-nav-content,
+.device-tablet .phabricator-side-menu-home .phabricator-nav-content {
   margin-left: 240px;
 }
+
+.device-phone .phabricator-side-menu-home .phabricator-nav-content {
+  display: none;
+}
+
+.device-phone .phabricator-side-menu-home .phabricator-nav-column-background,
+.device-phone .phabricator-side-menu-home .phabricator-nav-local {
+  width: 100%;
+}
+

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

@@ -60,8 +60,12 @@
   top: 9px;
 }
 
-.device .phabricator-main-menu-logo {
-  display: none;
+.device-phone .phabricator-main-menu-logo {
+  margin-left: -45px;
+}
+
+.device .phabricator-main-menu-logo:hover {
+  background-color: transparent;
 }
 
 /* - Expand/Collapse Button ----------------------------------------------------
@@ -71,38 +75,23 @@
 
 */
 
-.phabricator-main-menu-expand-button {
-  position: absolute;
-  top: 7px;
-  display: block;
-  width: 40px;
-  height: 28px;
-}
-
 .phabricator-menu-button-icon {
-  position: absolute;
   width: 24px;
-  height: 20px;
-  top: 5px;
-  left: 8px;
+  height: 24px;
+  float: left;
+  margin: 10px 10px 0 5px;
 }
 
-.phabricator-expand-core-menu {
-  left: 5px;
-}
-
-.phabricator-expand-application-menu {
-  right: 5px;
+.phabricator-expand-application-menu,
+.phabricator-expand-search-menu {
+  float: right;
 }
 
+.device-desktop .phabricator-main-menu-search-button,
 .device-desktop .phabricator-main-menu-expand-button {
   display: none;
 }
 
-.device .phabricator-main-menu-expand-button {
-  display: block;
-}
-
 
 /* - Search --------------------------------------------------------------------
 
@@ -196,7 +185,6 @@
   top: 3px;
 }
 
-
 .phabricator-main-menu-search-target div.jx-typeahead-results {
   border-radius: 4px;
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.35);
@@ -247,10 +235,6 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
 
 */
 
-.device .phabricator-main-menu-alerts {
-  margin-left: 60px;
-}
-
 .phabricator-main-menu-alerts {
   display: inline-block;
   border-radius: 15px;
@@ -335,22 +319,20 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
 
 */
 
-.phabricator-core-menu-icon {
-  position: absolute;
-  display: block;
-  width: 28px;
-  height: 28px;
-}
-
 .phabricator-core-menu-profile-image {
   background-size: 28px 28px;
 }
 
-.device .phabricator-core-menu {
+.device .phabricator-search-menu {
   display: none;
 }
 
-.device .phabricator-core-menu-expanded .phabricator-core-menu {
+.device-desktop .phabricator-search-menu {
+  float: right;
+  margin-right: 110px;
+}
+
+.device .phabricator-search-menu-expanded .phabricator-search-menu {
   display: block;
   padding-top: 44px;
 }
@@ -361,23 +343,23 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
   line-height: 28px;
 }
 
-.device .phabricator-core-menu
-   .phabricator-menu-item-type-link .phabricator-menu-item-name {
-  margin-left: 40px;
+.device .phabricator-menu-item-type-link
+  .phabricator-core-menu-icon + .phabricator-menu-item-name {
+  margin-left: 36px;
 }
 
-.device-desktop .phabricator-core-menu {
+.device-desktop .phabricator-application-menu {
   position: absolute;
   right: 0;
   top: 0;
   vertical-align: top;
 }
 
-.device-desktop .phabricator-core-menu .phabricator-menu-item-name {
+.device-desktop .phabricator-application-menu .phabricator-menu-item-name {
   display: none;
 }
 
-.device-desktop .phabricator-core-menu .phabricator-menu-item-view {
+.device-desktop .phabricator-application-menu .phabricator-menu-item-view {
   display: block;
   float: left;
   position: relative;
@@ -385,7 +367,7 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
   height: 44px;
 }
 
-.device-desktop .phabricator-core-menu .phabricator-core-item-device {
+.device-desktop .phabricator-application-menu .phabricator-core-item-device {
   display: none;
 }
 
@@ -398,14 +380,13 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
   left: 6px;
 }
 
-.device-desktop .phabricator-core-menu .phabricator-core-menu-item-profile {
-  border-width: 0 1px;
-  border-style: solid;
-  border-color: #44494d;
-  margin: 0 8px;
+.phabricator-core-menu-icon {
+  position: absolute;
+  display: block;
+  width: 28px;
+  height: 28px;
 }
 
-
 /* - Application Menu ----------------------------------------------------------
 
   Styles unique to the application menu (right button on mobile).
@@ -417,11 +398,11 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
   padding-top: 44px;
 }
 
-.phabricator-application-menu {
+.device .phabricator-application-menu,
+.device-desktop .phabricator-dark-menu .phabricator-menu-item-type-label {
   display: none;
 }
 
-.phabricator-application-menu .phabricator-menu-item-type-link
-  .phabricator-menu-item-name {
+.phabricator-application-menu .phabricator-menu-item-name {
   padding-left: 12px;
 }

webroot/rsrc/css/application/base/phabricator-application-launch-view.css

@@ -29,37 +29,41 @@ div.phabricator-application-launch-container {
   height: 66px;
   overflow: hidden;
   position: relative;
-
+  border: 1px solid #000;
   text-decoration: none;
-
-  border: 1px solid #080909;
-
 }
 
 a.application-tile-full {
-  width: 240px;
+  width: 100%;
   height: 52px;
+  border-bottom: 1px solid #404040;
+  border-left: none;
+  border-right: none;
+}
+
+.device-phone div.phabricator-application-launch-container {
+  display: none;
 }
 
 a.application-tile-full.application-tile-create {
-  width: 210px;
+  width: 88%;
   height: 52px;
   border-right: none;
 }
 
 .application-tile-full + .phabricator-application-launch-create {
-  display: block;
   float: right;
-  width: 28px;
-  border-top: 1px solid #080909;
-  border-bottom: 1px solid #080909;
-  border-left: 1px solid #080909;
+  width: 12%;
   height: 52px;
   position: relative;
+  border-top: 1px solid #000;
+  border-bottom: 1px solid #404040;
+  display: inline-block;
+  text-align: center;
 }
 
 a.phabricator-application-launch-create:hover {
-  background-image: url('/rsrc/image/texture/dark-menu-hover.png');
+  background-image: url(/res/a214a732/rsrc/image/texture/dark-menu-hover.png);
   color: #fff;
   text-decoration: none;
 }
@@ -70,7 +74,7 @@ a.phabricator-application-launch-container:hover {
 
 /* The hover effect looks awful on phones/tablets when scrolling. */
 .device-desktop a.phabricator-application-launch-container:hover {
-  background-image: url('/rsrc/image/texture/dark-menu-hover.png');
+  background-image: url(/res/a214a732/rsrc/image/texture/dark-menu-hover.png);
   color: #fff;
 }
 
@@ -84,10 +88,8 @@ a.phabricator-application-launch-container:hover {
 }
 
 .phabricator-application-create-icon {
-  display: block;
-  position: absolute;
-  right: 7px;
-  top: 20px;
+  display: inline-block;
+  margin: 20px auto;
   width: 14px;
   height: 14px;
 }

webroot/rsrc/css/sprite-menu.css

@@ -13,7 +13,7 @@ only screen and (min-device-pixel-ratio: 1.5),
 only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   .sprite-menu {
     background-image: url(/rsrc/image/sprite-menu-X2.png);
-    background-size: 140px 117px;
+    background-size: 140px 121px;
   }
 }
 
@@ -31,27 +31,27 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
 }
 
 .phabricator-crumb-divider {
-  background-position: 0px -85px;
+  background-position: 0px -89px;
 }
 
-.menu-icon-eye {
+.menu-icon-search {
   background-position: 0px -38px;
 }
 
-.menu-icon-eye-blue {
+.menu-icon-search-blue {
   background-position: -25px -38px;
 }
 
 .menu-icon-app {
-  background-position: -10px -85px;
+  background-position: -10px -89px;
 }
 
 .menu-icon-app-blue {
-  background-position: -35px -85px;
+  background-position: -35px -89px;
 }
 
 .phabricator-main-menu-logo-image {
-  background-position: 0px -59px;
+  background-position: 0px -63px;
 }
 
 .alert-notifications .phabricator-main-menu-message-icon {