Refactor the main menu in preparation for a mobile application menu

Summary:
As per discussion, this primes the existing mobile menu / menu button for "phabricator" and "application" menus.

Design here is very rough, I'm just trying to get everything laid in functionally first. It's based on `frame_v3.png` but missing a lot of touches.

Test Plan:
{F26143}
{F26144}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T1960

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

src/__celerity_resource_map__.php

@@ -2602,7 +2602,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-main-menu-view' =>
   array(
-    'uri' => '/res/9d3b519e/rsrc/css/application/base/main-menu-view.css',
+    'uri' => '/res/864ad89e/rsrc/css/application/base/main-menu-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -2620,15 +2620,6 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/js/application/core/DropdownMenuItem.js',
   ),
-  'phabricator-menu-view-css' =>
-  array(
-    'uri' => '/res/d72130a1/rsrc/css/layout/phabricator-menu-view.css',
-    'type' => 'css',
-    'requires' =>
-    array(
-    ),
-    'disk' => '/rsrc/css/layout/phabricator-menu-view.css',
-  ),
   'phabricator-nav-view-css' =>
   array(
     'uri' => '/res/68187089/rsrc/css/aphront/phabricator-nav-view.css',
@@ -2806,6 +2797,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/js/application/core/ShapedRequest.js',
   ),
+  'phabricator-side-menu-view-css' =>
+  array(
+    'uri' => '/res/9453a468/rsrc/css/layout/phabricator-side-menu-view.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/layout/phabricator-side-menu-view.css',
+  ),
   'phabricator-slowvote-css' =>
   array(
     'uri' => '/res/94d20443/rsrc/css/application/slowvote/slowvote.css',
@@ -3172,7 +3172,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    '58a04024' =>
+    'ad64af49' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -3211,7 +3211,7 @@ celerity_register_resource_map(array(
         31 => 'phabricator-filetree-view-css',
         32 => 'phabricator-nav-view-css',
       ),
-      'uri' => '/res/pkg/58a04024/core.pkg.css',
+      'uri' => '/res/pkg/ad64af49/core.pkg.css',
       'type' => 'css',
     ),
     'd0aed73b' =>
@@ -3401,21 +3401,21 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => '7839ae2d',
-    'aphront-crumbs-view-css' => '58a04024',
+    'aphront-crumbs-view-css' => 'ad64af49',
-    'aphront-dialog-view-css' => '58a04024',
+    'aphront-dialog-view-css' => 'ad64af49',
-    'aphront-error-view-css' => '58a04024',
+    'aphront-error-view-css' => 'ad64af49',
-    'aphront-form-view-css' => '58a04024',
+    'aphront-form-view-css' => 'ad64af49',
     'aphront-headsup-action-list-view-css' => '47549184',
-    'aphront-headsup-view-css' => '58a04024',
+    'aphront-headsup-view-css' => 'ad64af49',
-    'aphront-list-filter-view-css' => '58a04024',
+    'aphront-list-filter-view-css' => 'ad64af49',
-    'aphront-pager-view-css' => '58a04024',
+    'aphront-pager-view-css' => 'ad64af49',
-    'aphront-panel-view-css' => '58a04024',
+    'aphront-panel-view-css' => 'ad64af49',
-    'aphront-side-nav-view-css' => '58a04024',
+    'aphront-side-nav-view-css' => 'ad64af49',
-    'aphront-table-view-css' => '58a04024',
+    'aphront-table-view-css' => 'ad64af49',
-    'aphront-tokenizer-control-css' => '58a04024',
+    'aphront-tokenizer-control-css' => 'ad64af49',
-    'aphront-tooltip-css' => '58a04024',
+    'aphront-tooltip-css' => 'ad64af49',
-    'aphront-typeahead-control-css' => '58a04024',
+    'aphront-typeahead-control-css' => 'ad64af49',
-    'autosprite-css' => '58a04024',
+    'autosprite-css' => 'ad64af49',
     'differential-changeset-view-css' => '47549184',
     'differential-core-view-css' => '47549184',
     'differential-inline-comment-editor' => '7ecd31fa',
@@ -3498,42 +3498,42 @@ celerity_register_resource_map(array(
     'javelin-util' => '20727878',
     'javelin-vector' => '20727878',
     'javelin-workflow' => '20727878',
-    'lightbox-attachment-css' => '58a04024',
+    'lightbox-attachment-css' => 'ad64af49',
     'maniphest-task-summary-css' => '7839ae2d',
     'maniphest-transaction-detail-css' => '7839ae2d',
-    'phabricator-app-buttons-css' => '58a04024',
+    'phabricator-app-buttons-css' => 'ad64af49',
     'phabricator-busy' => 'd0aed73b',
     'phabricator-content-source-view-css' => '47549184',
-    'phabricator-core-buttons-css' => '58a04024',
+    'phabricator-core-buttons-css' => 'ad64af49',
-    'phabricator-core-css' => '58a04024',
+    'phabricator-core-css' => 'ad64af49',
-    'phabricator-directory-css' => '58a04024',
+    'phabricator-directory-css' => 'ad64af49',
     'phabricator-drag-and-drop-file-upload' => '7ecd31fa',
     'phabricator-dropdown-menu' => 'd0aed73b',
     'phabricator-file-upload' => 'd0aed73b',
-    'phabricator-filetree-view-css' => '58a04024',
+    'phabricator-filetree-view-css' => 'ad64af49',
-    'phabricator-flag-css' => '58a04024',
+    'phabricator-flag-css' => 'ad64af49',
-    'phabricator-form-view-css' => '58a04024',
+    'phabricator-form-view-css' => 'ad64af49',
-    'phabricator-header-view-css' => '58a04024',
+    'phabricator-header-view-css' => 'ad64af49',
-    'phabricator-jump-nav' => '58a04024',
+    'phabricator-jump-nav' => 'ad64af49',
     'phabricator-keyboard-shortcut' => 'd0aed73b',
     'phabricator-keyboard-shortcut-manager' => 'd0aed73b',
-    'phabricator-main-menu-view' => '58a04024',
+    'phabricator-main-menu-view' => 'ad64af49',
     'phabricator-menu-item' => 'd0aed73b',
-    'phabricator-nav-view-css' => '58a04024',
+    'phabricator-nav-view-css' => 'ad64af49',
     'phabricator-notification' => 'd0aed73b',
-    'phabricator-notification-css' => '58a04024',
+    'phabricator-notification-css' => 'ad64af49',
-    'phabricator-notification-menu-css' => '58a04024',
+    'phabricator-notification-menu-css' => 'ad64af49',
     'phabricator-object-selector-css' => '47549184',
     'phabricator-paste-file-upload' => 'd0aed73b',
     'phabricator-prefab' => 'd0aed73b',
     'phabricator-project-tag-css' => '7839ae2d',
-    'phabricator-remarkup-css' => '58a04024',
+    'phabricator-remarkup-css' => 'ad64af49',
     'phabricator-shaped-request' => '7ecd31fa',
-    'phabricator-standard-page-view' => '58a04024',
+    'phabricator-standard-page-view' => 'ad64af49',
     'phabricator-textareautils' => 'd0aed73b',
     'phabricator-tooltip' => 'd0aed73b',
-    'phabricator-transaction-view-css' => '58a04024',
+    'phabricator-transaction-view-css' => 'ad64af49',
-    'sprite-icon-css' => '58a04024',
+    'sprite-icon-css' => 'ad64af49',
-    'syntax-highlighting-css' => '58a04024',
+    'syntax-highlighting-css' => 'ad64af49',
   ),
 ));

src/applications/auth/application/PhabricatorApplicationAuth.php

@@ -12,19 +12,14 @@ final class PhabricatorApplicationAuth extends PhabricatorApplication {
 
     $items = array();
 
-    if ($controller instanceof PhabricatorLogoutController) {
-      $class = 'main-menu-item-icon-logout-selected';
-    } else {
-      $class = 'main-menu-item-icon-logout';
-    }
-
     if ($user->isLoggedIn()) {
-      $item = new PhabricatorMainMenuIconView();
+      $item = new PhabricatorMenuItemView();
       $item->setName(pht('Log Out'));
-      $item->addClass('autosprite main-menu-item-icon '.$class);
+      $item->setIcon('logout');
       $item->setWorkflow(true);
       $item->setHref('/logout/');
-      $item->setSortOrder(1.0);
+      $item->setSortOrder(2.0);
+      $item->setSelected(($controller instanceof PhabricatorLogoutController));
       $items[] = $item;
     }
 

src/applications/diviner/application/PhabricatorApplicationDiviner.php

@@ -40,10 +40,9 @@ final class PhabricatorApplicationDiviner extends PhabricatorApplication {
     }
 
     if ($application && $application->getHelpURI()) {
-      $class = 'main-menu-item-icon-help';
+      $item = new PhabricatorMenuItemView();
-      $item = new PhabricatorMainMenuIconView();
       $item->setName(pht('%s Help', $application->getName()));
-      $item->addClass('autosprite main-menu-item-icon '.$class);
+      $item->setIcon('help');
       $item->setHref($application->getHelpURI());
       $item->setSortOrder(0.1);
       $items[] = $item;

src/applications/people/application/PhabricatorApplicationPeople.php

@@ -48,23 +48,29 @@ final class PhabricatorApplicationPeople extends PhabricatorApplication {
 
     $items = array();
 
-    if (($controller instanceof PhabricatorPeopleProfileController) &&
-        ($controller->getProfileUser()) &&
-        ($controller->getProfileUser()->getPHID() == $user->getPHID())) {
-      $class = 'main-menu-item-icon-profile-selected';
-    } else {
-      $class = 'main-menu-item-icon-profile-not-selected';
-    }
-
     if ($user->isLoggedIn()) {
       $image = $user->loadProfileImageURI();
 
-      $item = new PhabricatorMainMenuIconView();
+      $item = new PhabricatorMenuItemView();
       $item->setName($user->getUsername());
-      $item->addClass('main-menu-item-icon-profile '.$class);
-      $item->addStyle('background-image: url('.$image.')');
       $item->setHref('/p/'.$user->getUsername().'/');
       $item->setSortOrder(0.0);
+      $item->addClass('phabricator-core-menu-item-profile');
+
+      $classes = array(
+        'phabricator-core-menu-icon',
+        'phabricator-core-menu-profile-image',
+      );
+
+      $item->appendChild(
+        phutil_render_tag(
+          'span',
+          array(
+            'class' => implode(' ', $classes),
+            'style' => 'background-image: url('.$image.')',
+          ),
+          ''));
+
       $items[] = $item;
     }
 

src/applications/settings/application/PhabricatorApplicationSettings.php

@@ -33,16 +33,12 @@ final class PhabricatorApplicationSettings extends PhabricatorApplication {
 
     $items = array();
 
-    if ($controller instanceof PhabricatorSettingsMainController) {
-      $class = 'main-menu-item-icon-settings-selected';
-    } else {
-      $class = 'main-menu-item-icon-settings';
-    }
-
     if ($user->isLoggedIn()) {
-      $item = new PhabricatorMainMenuIconView();
+      $selected = ($controller instanceof PhabricatorSettingsMainController);
+      $item = new PhabricatorMenuItemView();
       $item->setName(pht('Settings'));
-      $item->addClass('autosprite main-menu-item-icon '.$class);
+      $item->setIcon('settings');
+      $item->setSelected($selected);
       $item->setHref('/settings/');
       $item->setSortOrder(0.90);
       $items[] = $item;

src/view/layout/AphrontSideNavFilterView.php

@@ -31,7 +31,7 @@ final class AphrontSideNavFilterView extends AphrontView {
   private $menu;
 
   public function __construct() {
-    $this->menu = new PhabricatorMenuView();
+    $this->menu = id(new PhabricatorMenuView());
   }
 
   public function setActive($active) {
@@ -131,6 +131,8 @@ final class AphrontSideNavFilterView extends AphrontView {
       $selected_item->addClass('phabricator-menu-item-selected');
     }
 
+    require_celerity_resource('phabricator-side-menu-view-css');
+
     if ($this->flexNav) {
       return $this->renderFlexNav();
     } else {
@@ -174,7 +176,8 @@ final class AphrontSideNavFilterView extends AphrontView {
       $local_menu = phutil_render_tag(
         'div',
         array(
-          'class' => 'phabricator-nav-col phabricator-nav-local',
+          'class' => 'phabricator-nav-col phabricator-nav-local '.
+                     'phabricator-side-menu',
           'id'    => $local_id,
         ),
         self::renderSingleView($this->menu));
@@ -228,7 +231,7 @@ final class AphrontSideNavFilterView extends AphrontView {
     require_celerity_resource('aphront-side-nav-view-css');
 
     return
-      '<table class="aphront-side-nav-view">'.
+      '<table class="aphront-side-nav-view phabricator-side-menu">'.
         '<tr>'.
           '<th class="aphront-side-nav-navigation">'.
             self::renderSingleView($this->menu).

src/view/layout/PhabricatorMenuItemView.php

@@ -12,6 +12,28 @@ final class PhabricatorMenuItemView extends AphrontView {
   private $isExternal;
   private $key;
   private $classes = array();
+  private $workflow;
+  private $sortOrder = 1.0;
+  private $icon;
+  private $selected;
+
+  public function setSelected($selected) {
+    $this->selected = $selected;
+    return $this;
+  }
+
+  public function getSelected() {
+    return $this->selected;
+  }
+
+  public function setIcon($icon) {
+    $this->icon = $icon;
+    return $this;
+  }
+
+  public function getIcon() {
+    return $this->icon;
+  }
 
   public function setKey($key) {
     $this->key = $key;
@@ -63,8 +85,18 @@ final class PhabricatorMenuItemView extends AphrontView {
     return $this;
   }
 
-  protected function canAppendChild() {
+  public function setWorkflow($workflow) {
-    return false;
+    $this->workflow = $workflow;
+    return $this;
+  }
+
+  public function setSortOrder($order) {
+    $this->sortOrder = $order;
+    return $this;
+  }
+
+  public function getSortOrder() {
+    return $this->sortOrder;
   }
 
   public function render() {
@@ -73,20 +105,31 @@ final class PhabricatorMenuItemView extends AphrontView {
       'phabricator-menu-item-'.$this->type,
     );
 
-    $external = null;
-    if ($this->isExternal) {
-      $external = " \xE2\x86\x97";
-    }
-
     $classes = array_merge($classes, $this->classes);
 
-    return phutil_render_tag(
+    $name = null;
+    if ($this->name) {
+      $external = null;
+      if ($this->isExternal) {
+        $external = " \xE2\x86\x97";
+      }
+      $name = phutil_render_tag(
+        'span',
+        array(
+          'class' => 'phabricator-menu-item-name',
+        ),
+        phutil_escape_html($this->name.$external));
+    }
+
+    return javelin_render_tag(
       $this->href ? 'a' : 'div',
       array(
-        'class' => implode(' ', $classes),
+        'class'     => implode(' ', $classes),
-        'href'  => $this->href,
+        'href'      => $this->href,
+        'sigil'     => $this->workflow ? 'workflow' : null,
       ),
-      phutil_escape_html($this->name.$external));
+      $this->renderChildren().
+      $name);
   }
 
 }

src/view/layout/PhabricatorMenuView.php

@@ -4,6 +4,12 @@ final class PhabricatorMenuView extends AphrontView {
 
   private $items = array();
   private $map = array();
+  private $classes = array();
+
+  public function addClass($class) {
+    $this->classes[] = $class;
+    return $this;
+  }
 
   public function addMenuItem(PhabricatorMenuItemView $item) {
     $key = $item->getKey();
@@ -30,11 +36,13 @@ final class PhabricatorMenuView extends AphrontView {
   }
 
   public function render() {
-    require_celerity_resource('phabricator-menu-view-css');
+    $classes = $this->classes;
+    $classes[] = 'phabricator-menu-view';
+
     return phutil_render_tag(
       'div',
       array(
-        'class' => 'phabricator-menu-view',
+        'class' => implode(' ', $classes),
       ),
       $this->renderChildren());
   }

src/view/page/PhabricatorStandardPageView.php

@@ -142,7 +142,11 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
       require_celerity_resource('javelin-behavior-error-log');
     }
 
-    $this->menuContent = $this->renderMainMenu();
+    $this->menuContent = id(new PhabricatorMainMenuView())
+      ->setUser($request->getUser())
+      ->setController($this->getController())
+      ->setDefaultSearchScope($this->getSearchDefaultScope())
+      ->render();
   }
 
 
@@ -363,46 +367,6 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
     return $this->getRequest()->getApplicationConfiguration()->getConsole();
   }
 
-  private function renderMainMenu() {
-    $request = $this->getRequest();
-    $user = $request->getUser();
-
-    $menu = new PhabricatorMainMenuView();
-    $menu->setUser($user);
-
-    $keyboard_config = array(
-      'helpURI' => '/help/keyboardshortcut/',
-    );
-
-    if ($user->isLoggedIn()) {
-      $search = new PhabricatorMainMenuSearchView();
-      $search->setUser($user);
-      $search->setScope($this->getSearchDefaultScope());
-      $menu->appendChild($search);
-
-      $pref_shortcut = PhabricatorUserPreferences::PREFERENCE_SEARCH_SHORTCUT;
-      if ($user->loadPreferences()->getPreference($pref_shortcut, true)) {
-        $keyboard_config['searchID'] = $search->getID();
-      }
-    }
-
-    Javelin::initBehavior('phabricator-keyboard-shortcuts', $keyboard_config);
-
-    $applications = PhabricatorApplication::getAllInstalledApplications();
-    $icon_views = array();
-    foreach ($applications as $application) {
-      $icon_views[] = $application->buildMainMenuItems(
-        $this->getRequest()->getUser(),
-        $this->getController());
-    }
-    $icon_views = array_mergev($icon_views);
-    $icon_views = msort($icon_views, 'getSortOrder');
-
-    $menu->appendChild($icon_views);
-
-    return $menu->render();
-  }
-
   public function renderFooter() {
     $console = $this->getConsole();
 

src/view/page/menu/PhabricatorMainMenuSearchView.php

@@ -79,10 +79,7 @@ final class PhabricatorMainMenuSearchView extends AphrontView {
         $target.
       '</div>');
 
-    $group = new PhabricatorMainMenuGroupView();
+    return $form;
-    $group->addClass('phabricator-main-menu-search');
-    $group->appendChild($form);
-    return $group->render();
   }
 
 }

src/view/page/menu/PhabricatorMainMenuView.php

@@ -3,9 +3,34 @@
 final class PhabricatorMainMenuView extends AphrontView {
 
   private $user;
+  private $defaultSearchScope;
+  private $controller;
+
+  public function setController(PhabricatorController $controller) {
+    $this->controller = $controller;
+    return $this;
+  }
+
+  public function getController() {
+    return $this->controller;
+  }
+
+  public function setDefaultSearchScope($default_search_scope) {
+    $this->defaultSearchScope = $default_search_scope;
+    return $this;
+  }
+
+  public function getDefaultSearchScope() {
+    return $this->defaultSearchScope;
+  }
 
   public function setUser(PhabricatorUser $user) {
     $this->user = $user;
+    return $this;
+  }
+
+  public function getUser() {
+    return $this->user;
   }
 
   public function render() {
@@ -14,7 +39,7 @@ final class PhabricatorMainMenuView extends AphrontView {
     require_celerity_resource('phabricator-main-menu-view');
 
     $header_id = celerity_generate_unique_node_id();
-    $extra = '';
+    $menus = array();
 
     $group = new PhabricatorMainMenuGroupView();
     $group->addClass('phabricator-main-menu-group-logo');
@@ -27,13 +52,13 @@ final class PhabricatorMainMenuView extends AphrontView {
           'class' => 'phabricator-main-menu-logo',
           'href'  => '/',
         ),
-        '<span>Phabricator</span>'));
+        ''));
 
     if (PhabricatorEnv::getEnvConfig('notification.enabled') &&
         $user->isLoggedIn()) {
       list($menu, $dropdown) = $this->renderNotificationMenu();
       $group->appendChild($menu);
-      $extra .= $dropdown;
+      $menus[] = $dropdown;
     }
 
     $group->appendChild(
@@ -44,21 +69,163 @@ final class PhabricatorMainMenuView extends AphrontView {
           'sigil' => 'jx-toggle-class',
           'meta'  => array(
             'map' => array(
-              $header_id => 'phabricator-main-menu-reveal',
+              $header_id => 'phabricator-core-menu-expand',
             ),
           ),
         ),
-        '<span>Expand</span>'));
+        ''));
     $logo = $group->render();
 
+    $phabricator_menu = $this->renderPhabricatorMenu();
+//    $menus[] = $this->renderApplicationMenu();
+
+
+
+
+    $actions = '';
+
     return phutil_render_tag(
       'div',
       array(
         'class' => 'phabricator-main-menu',
         'id'    => $header_id,
       ),
-      $logo.$this->renderChildren()).
+      self::renderSingleView(
-      $extra;
+        array(
+          $logo,
+          $phabricator_menu,
+        ))).
+      self::renderSingleView($menus);
+  }
+
+  private function renderSearch() {
+    $user = $this->user;
+
+    $result = null;
+
+    $keyboard_config = array(
+      'helpURI' => '/help/keyboardshortcut/',
+    );
+
+    if ($user->isLoggedIn()) {
+      $search = new PhabricatorMainMenuSearchView();
+      $search->setUser($user);
+      $search->setScope($this->getDefaultSearchScope());
+      $result = $search;
+
+      $pref_shortcut = PhabricatorUserPreferences::PREFERENCE_SEARCH_SHORTCUT;
+      if ($user->loadPreferences()->getPreference($pref_shortcut, true)) {
+        $keyboard_config['searchID'] = $search->getID();
+      }
+    }
+
+    Javelin::initBehavior('phabricator-keyboard-shortcuts', $keyboard_config);
+
+    if ($result) {
+      $result = id(new PhabricatorMenuItemView())
+        ->addClass('phabricator-main-menu-search')
+        ->appendChild($result);
+    }
+
+    return $result;
+  }
+
+  private function renderPhabricatorMenu() {
+    $user = $this->getUser();
+    $controller = $this->getController();
+
+    $applications = PhabricatorApplication::getAllInstalledApplications();
+    $applications = msort($applications, 'getName');
+
+    $core = array();
+    $more = array();
+    $actions = array();
+
+    $group_core = PhabricatorApplication::GROUP_CORE;
+    foreach ($applications as $application) {
+      if ($application->shouldAppearInLaunchView()) {
+        $item = id(new PhabricatorMenuItemView())
+          ->setName($application->getName())
+          ->setHref($application->getBaseURI());
+        if ($application->getApplicationGroup() == $group_core) {
+          $core[] = $item;
+        } else {
+          $more[] = $item;
+        }
+      }
+
+      $app_actions = $application->buildMainMenuItems($user, $controller);
+      foreach ($app_actions as $action) {
+        $actions[] = $action;
+      }
+    }
+
+
+    $view = new PhabricatorMenuView();
+    $view->addClass('phabricator-core-menu');
+
+    $search = $this->renderSearch();
+    $view->appendChild($search);
+
+    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);
+      }
+    }
+
+    if ($actions) {
+      $actions = msort($actions, 'getSortOrder');
+      $view->addMenuItem(
+        id(new PhabricatorMenuItemView())
+          ->addClass('phabricator-core-item-device')
+          ->setType(PhabricatorMenuItemView::TYPE_LABEL)
+          ->setName(pht('Actions')));
+      foreach ($actions as $action) {
+        $icon = $action->getIcon();
+        if ($icon) {
+          $classes = array(
+            'phabricator-core-menu-icon',
+            'autosprite',
+          );
+
+          if ($action->getSelected()) {
+            $classes[] = 'main-menu-item-icon-'.$icon.'-selected';
+          } else {
+            $classes[] = 'main-menu-item-icon-'.$icon;
+          }
+
+          $action->appendChild(
+            phutil_render_tag(
+              'span',
+              array(
+                'class' => implode(' ', $classes),
+              ),
+              ''));
+        }
+        $view->addMenuItem($action);
+      }
+    }
+
+    if ($more) {
+      $view->addMenuItem(
+        id(new PhabricatorMenuItemView())
+          ->addClass('phabricator-core-item-device')
+          ->setType(PhabricatorMenuItemView::TYPE_LABEL)
+          ->setName(pht('More Applications')));
+      foreach ($more as $item) {
+        $item->addClass('phabricator-core-item-device');
+        $view->addMenuItem($item);
+      }
+    }
+
+
+    return $view;
   }
 
   private function renderNotificationMenu() {

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

@@ -13,49 +13,17 @@
 .phabricator-main-menu {
   background: #2d3236;
   background-image: url(/rsrc/image/main_texture.png);
+  background-repeat: repeat-x;
   position: relative;
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
-  height: 44px;
   z-index: 6;
+  min-height: 44px;
 }
 
 .phabricator-main-menu a:hover {
   text-decoration: none;
 }
 
-.device-desktop .phabricator-main-menu {
-  text-align: right;
-  width: 100%;
-}
-
-/* - Main Menu Group -----------------------------------------------------------
-
-  Container representing a single item on the main menu. For desktops these lay
-  out horizontally; on phones they switch to vertical.
-
-*/
-
-.phabricator-main-menu-group {
-  height: 44px;
-  position: relative;
-}
-
-.device-desktop .phabricator-main-menu-group {
-  display: inline-block;
-  text-align: left;
-}
-
-.device-tablet .phabricator-main-menu-group,
-.device-phone .phabricator-main-menu-group {
-  width: 100%;
-  display: block;
-}
-
-.device-tablet .phabricator-main-menu-group + .phabricator-main-menu-group,
-.device-phone .phabricator-main-menu-group + .phabricator-main-menu-group {
-  margin-top: 1px;
-}
-
 
 /* - Logo ----------------------------------------------------------------------
 
@@ -76,11 +44,6 @@
   background: 6px 9px url(/rsrc/image/header_logo.png) no-repeat;
 }
 
-.phabricator-main-menu-logo span {
-  display: none;
-}
-
-
 /* - Expand/Collapse Button ----------------------------------------------------
 
   On phones, the menu switches to a vertical layout and uses a button to expand
@@ -113,75 +76,11 @@
   display: block;
 }
 
-.phabricator-main-menu-expand-button span {
+.phabricator-core-menu-expand .phabricator-main-menu-expand-button {
-  display: none;
-}
-
-.phabricator-main-menu-reveal .phabricator-main-menu-expand-button {
   background-color: #55595d;
 }
 
 
-/* - Icon Menus ----------------------------------------------------------------
-
-  These are the small icons for actions like "Settings" and "Log Out" which
-  appear on the right side of the main menu. On tablets and phones these layout
-  vertically.
-
-*/
-
-.phabricator-main-menu-icon {
-  width: 26px;
-  height: 26px;
-  margin: 9px 6px;
-  display: inline-block;
-}
-
-.device-desktop .phabricator-main-menu-icon-label {
-  display: none;
-}
-
-.device-tablet .phabricator-main-menu-icon-label,
-.device-phone .phabricator-main-menu-icon-label {
-  font-weight: bold;
-  color: #eeeeee;
-  position: absolute;
-  display: block;
-  line-height: 44px;
-  left: 60px;
-  right: 0px;
-  top: 0px;
-}
-
-.device-tablet .phabricator-main-menu-icon,
-.device-phone .phabricator-main-menu-icon {
-  margin-left: 20px;
-  position: absolute;
-}
-
-.main-menu-item-icon-profile {
-  background-repeat: no-repeat;
-  background-size: 26px 26px;
-}
-
-.device-desktop .main-menu-item-icon-profile {
-  background-position: 12px 9px;
-  margin: 0 6px;
-  padding: 0 12px;
-  height: 44px;
-  border-width: 0 1px;
-  border-style: solid;
-  border-color: #44494d;
-}
-
-.main-menu-item-icon-profile-not-selected:hover {
-  background-color: #44494d;
-}
-
-.main-menu-item-icon-profile-selected {
-  background-color: #44494d;
-}
-
 /* - Search --------------------------------------------------------------------
 
   The main search input in the menu bar.
@@ -309,30 +208,6 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
 }
 
 
-
-/* - Collapsible ---------------------------------------------------------------
-
-  By default, groups are collapsible, which means they'll be hidden on phones
-  and respond to the menu toggle button.
-
-*/
-
-.device-tablet .phabricator-main-menu-collapsible,
-.device-phone .phabricator-main-menu-collapsible {
-  background: #44494d;
-  display: none;
-}
-
-.phabricator-main-menu-reveal {
-  height: auto;
-}
-
-.device-tablet .phabricator-main-menu-reveal .phabricator-main-menu-collapsible,
-.device-phone .phabricator-main-menu-reveal .phabricator-main-menu-collapsible {
-  display: block;
-}
-
-
 /* - Alert ---------------------------------------------------------------------
 
   Alert menus are like icon menus but don't obey collapse rules.
@@ -381,3 +256,106 @@ a:hover .phabricator-main-search-typeahead-result .result-type {
 .alert-unread .phabricator-main-menu-alert-count {
   display: block;
 }
+
+/* - Core Menu -----------------------------------------------------------------
+
+*/
+
+.phabricator-core-menu-icon {
+  position: absolute;
+  display: block;
+  width: 26px;
+  height: 26px;
+}
+
+.phabricator-core-menu-profile-image {
+  background-size: 26px 26px;
+}
+
+.device-phone .phabricator-core-menu,
+.device-tablet .phabricator-core-menu {
+  display: none;
+}
+
+.device-phone .phabricator-core-menu-expand .phabricator-core-menu,
+.device-tablet .phabricator-core-menu-expand .phabricator-core-menu {
+  display: block;
+}
+
+.device-phone .phabricator-core-menu,
+.device-tablet .phabricator-core-menu,
+.device-phone .phabricator-core-menu a.phabricator-menu-item-type-link,
+.device-tablet .phabricator-core-menu a.phabricator-menu-item-type-link {
+  color: #ffffff;
+}
+
+.device-phone .phabricator-core-menu .phabricator-menu-item-view,
+.device-tablet .phabricator-core-menu .phabricator-menu-item-view {
+  display: block;
+  padding: 4px 0;
+  border-width: 1px 0;
+  border-style: solid;
+  border-color: #35383b transparent #282b2d;
+}
+
+.device-phone .phabricator-core-menu .phabricator-menu-item-type-label,
+.device-tablet .phabricator-core-menu .phabricator-menu-item-type-label {
+  text-transform: uppercase;
+  font-size: 11px;
+  background: #151719;
+  padding-left: 12px;
+}
+
+.device-phone .phabricator-core-menu .phabricator-menu-item-type-link,
+.device-tablet .phabricator-core-menu .phabricator-menu-item-type-link {
+  font-size: 15px;
+  min-height: 30px;
+}
+
+.device-phone .phabricator-core-menu
+   .phabricator-menu-item-type-link .phabricator-menu-item-name,
+.device-tablet .phabricator-core-menu
+   .phabricator-menu-item-type-link .phabricator-menu-item-name {
+  margin-left: 40px;
+  line-height: 26px;
+}
+
+.device-desktop .phabricator-core-menu {
+  position: absolute;
+  right: 0;
+  top: 0;
+  vertical-align: top;
+}
+
+.device-desktop .phabricator-core-menu .phabricator-menu-item-name {
+  display: none;
+}
+
+.device-desktop .phabricator-core-menu .phabricator-menu-item-view {
+  display: block;
+  float: left;
+  position: relative;
+  min-width: 38px;
+  height: 44px;
+}
+
+.device-desktop .phabricator-core-menu .phabricator-core-item-device {
+  display: none;
+}
+
+.device-desktop .phabricator-core-menu-icon {
+  top: 9px;
+  left: 6px;
+}
+
+.device-phone .phabricator-core-menu-icon,
+.device-tablet .phabricator-core-menu-icon {
+  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;
+}

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

@@ -1,38 +0,0 @@
-/**
- * @provides phabricator-menu-view-css
- */
-
-.phabricator-menu-item-view {
-  display: block;
-  margin: 0 0 2px;
-  white-space: nowrap;
-  text-decoration: none;
-  font-weight: bold;
-  font-size: 13px;
-}
-
-.phabricator-menu-item-type-link {
-  padding: 3px 8px 3px 24px;
-}
-
-.phabricator-menu-item-type-label {
-  padding: 6px 8px 3px 12px;
-  color: #333333;
-  text-transform: uppercase;
-  font-size: 11px;
-}
-
-.phabricator-menu-item-type-spacer {
-  padding: 8px 0;
-}
-
-.device-desktop a.phabricator-menu-item-type-link:hover {
-  text-decoration: none;
-  /* TODO: Swap this back to #e7e7e7? */
-  background: #a1bbe5;
-}
-
-.phabricator-menu-item-selected,
-.device-desktop a.phabricator-menu-item-selected:hover {
-  background: #d7d7d7;
-}

webroot/rsrc/css/layout/phabricator-side-menu-view.css

@@ -0,0 +1,38 @@
+/**
+ * @provides phabricator-side-menu-view-css
+ */
+
+.phabricator-side-menu .phabricator-menu-item-view {
+  display: block;
+  margin: 0 0 2px;
+  white-space: nowrap;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 13px;
+}
+
+.phabricator-side-menu .phabricator-menu-item-type-link {
+  padding: 3px 8px 3px 24px;
+}
+
+.phabricator-side-menu .phabricator-menu-item-type-label {
+  padding: 6px 8px 3px 12px;
+  color: #333333;
+  text-transform: uppercase;
+  font-size: 11px;
+}
+
+.phabricator-side-menu .phabricator-menu-item-type-spacer {
+  padding: 8px 0;
+}
+
+.device-desktop .phabricator-side-menu a.phabricator-menu-item-type-link:hover {
+  text-decoration: none;
+  /* TODO: Swap this back to #e7e7e7? */
+  background: #a1bbe5;
+}
+
+.phabricator-side-menu .phabricator-menu-item-selected,
+.device-desktop .phabricator-side-menu a.phabricator-menu-item-selected:hover {
+  background: #d7d7d7;
+}