PHUIList, PHUIDocument updates

Summary:
This diff covers a bit of ground.

- PHUIDocumentExample has been added
- PHUIDocument has been extended with new features
- PhabricatorMenuView is now PHUIListView
- PhabricatorMenuItemView is now PHUIItemListView

Overall - I think I've gotten all the edges covered here. There is some derpi-ness that we can talk about, comments in the code. Responsive design is missing from the new features on PHUIDocument, will follow up later.

Test Plan: Tested mobile and desktop menus, old phriction layout, new document views, new lists, and object lists.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

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

resources/sprite/manifest/gradient.json

@@ -18,7 +18,7 @@
     },
     "gradient-dark-menu-label"  : {
       "name" : "gradient-dark-menu-label",
-      "rule" : ".gradient-dark-menu-label, .phabricator-dark-menu .phabricator-menu-item-type-label",
+      "rule" : ".gradient-dark-menu-label, .phabricator-dark-menu .phui-list-item-type-label",
       "hash" : "8a11efa454f788aa2419ed8c745dece2"
     },
     "gradient-green-header"     : {
@@ -33,7 +33,7 @@
     },
     "gradient-menu-label"       : {
       "name" : "gradient-menu-label",
-      "rule" : ".gradient-menu-label, .phabricator-side-menu .phabricator-menu-item-type-label",
+      "rule" : ".gradient-menu-label, .phabricator-side-menu .phui-list-item-type-label",
       "hash" : "e2aa8e74c3b2c0b18de34d336d318b5c"
     },
     "gradient-red-header"       : {
@@ -50,6 +50,6 @@
   "scales"  : [
     1
   ],
-  "header"  : "\/**\n * @provides sprite-gradient-css\n * @generated\n *\/\n\n.sprite-gradient, .phabricator-dark-menu .phabricator-menu-item-type-label, .phabricator-side-menu .phabricator-menu-item-type-label {\n  background-image: url(\/rsrc\/image\/sprite-gradient.png);\n  background-repeat: repeat-x;\n}\n\n\n",
+  "header"  : "\/**\n * @provides sprite-gradient-css\n * @generated\n *\/\n\n.sprite-gradient, .phabricator-dark-menu .phui-list-item-type-label, .phabricator-side-menu .phui-list-item-type-label {\n  background-image: url(\/rsrc\/image\/sprite-gradient.png);\n  background-repeat: repeat-x;\n}\n\n\n",
   "type"    : "repeat-x"
 }

src/__celerity_resource_map__.php

@@ -3145,7 +3145,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-main-menu-view' =>
   array(
-    'uri' => '/res/50479234/rsrc/css/application/base/main-menu-view.css',
+    'uri' => '/res/0c386cc5/rsrc/css/application/base/main-menu-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3206,7 +3206,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-object-item-list-view-css' =>
   array(
-    'uri' => '/res/b8b2fe24/rsrc/css/layout/phabricator-object-item-list-view.css',
+    'uri' => '/res/b114bc9a/rsrc/css/layout/phabricator-object-item-list-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3347,7 +3347,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-side-menu-view-css' =>
   array(
-    'uri' => '/res/2a1ac469/rsrc/css/layout/phabricator-side-menu-view.css',
+    'uri' => '/res/f43a8365/rsrc/css/layout/phabricator-side-menu-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3574,7 +3574,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-workpanel-view-css' =>
   array(
-    'uri' => '/res/ff5d5b26/rsrc/css/layout/phabricator-workpanel-view.css',
+    'uri' => '/res/d0cdb62e/rsrc/css/layout/phabricator-workpanel-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3669,7 +3669,7 @@ celerity_register_resource_map(array(
   ),
   'phui-document-view-css' =>
   array(
-    'uri' => '/res/ca376da1/rsrc/css/phui/phui-document.css',
+    'uri' => '/res/1b54e1c1/rsrc/css/phui/phui-document.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3703,6 +3703,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/phui/phui-icon.css',
   ),
+  'phui-list-view-css' =>
+  array(
+    'uri' => '/res/c27c269d/rsrc/css/phui/phui-list.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/phui/phui-list.css',
+  ),
   'phui-text-css' =>
   array(
     'uri' => '/res/ca884ca6/rsrc/css/phui/phui-text.css',
@@ -3867,7 +3876,7 @@ celerity_register_resource_map(array(
   ),
   'spacing-css' =>
   array(
-    'uri' => '/res/59e4c9b1/rsrc/css/core/spacing.css',
+    'uri' => '/res/61563661/rsrc/css/core/spacing.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3930,7 +3939,7 @@ celerity_register_resource_map(array(
   ),
   'sprite-gradient-css' =>
   array(
-    'uri' => '/res/ca88b981/rsrc/css/sprite-gradient.css',
+    'uri' => '/res/af8d50a1/rsrc/css/sprite-gradient.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -4003,7 +4012,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    '8e459ff2' =>
+    '2626aa1d' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -4051,7 +4060,7 @@ celerity_register_resource_map(array(
         40 => 'phabricator-property-list-view-css',
         41 => 'phabricator-tag-view-css',
       ),
-      'uri' => '/res/pkg/8e459ff2/core.pkg.css',
+      'uri' => '/res/pkg/2626aa1d/core.pkg.css',
       'type' => 'css',
     ),
     '98f60e3f' =>
@@ -4245,16 +4254,16 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => '03ab92cf',
-    'aphront-dialog-view-css' => '8e459ff2',
-    'aphront-error-view-css' => '8e459ff2',
-    'aphront-form-view-css' => '8e459ff2',
-    'aphront-list-filter-view-css' => '8e459ff2',
-    'aphront-pager-view-css' => '8e459ff2',
-    'aphront-panel-view-css' => '8e459ff2',
-    'aphront-table-view-css' => '8e459ff2',
-    'aphront-tokenizer-control-css' => '8e459ff2',
-    'aphront-tooltip-css' => '8e459ff2',
-    'aphront-typeahead-control-css' => '8e459ff2',
+    'aphront-dialog-view-css' => '2626aa1d',
+    'aphront-error-view-css' => '2626aa1d',
+    'aphront-form-view-css' => '2626aa1d',
+    'aphront-list-filter-view-css' => '2626aa1d',
+    'aphront-pager-view-css' => '2626aa1d',
+    'aphront-panel-view-css' => '2626aa1d',
+    'aphront-table-view-css' => '2626aa1d',
+    'aphront-tokenizer-control-css' => '2626aa1d',
+    'aphront-tooltip-css' => '2626aa1d',
+    'aphront-typeahead-control-css' => '2626aa1d',
     'differential-changeset-view-css' => 'dd27a69b',
     'differential-core-view-css' => 'dd27a69b',
     'differential-inline-comment-editor' => '9488bb69',
@@ -4268,7 +4277,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => 'dd27a69b',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => '8e459ff2',
+    'global-drag-and-drop-css' => '2626aa1d',
     'inline-comment-summary-css' => 'dd27a69b',
     'javelin-aphlict' => '98f60e3f',
     'javelin-behavior' => 'a9f14d76',
@@ -4342,55 +4351,55 @@ celerity_register_resource_map(array(
     'javelin-util' => 'a9f14d76',
     'javelin-vector' => 'a9f14d76',
     'javelin-workflow' => 'a9f14d76',
-    'lightbox-attachment-css' => '8e459ff2',
+    'lightbox-attachment-css' => '2626aa1d',
     'maniphest-task-summary-css' => '03ab92cf',
     'maniphest-transaction-detail-css' => '03ab92cf',
-    'phabricator-action-list-view-css' => '8e459ff2',
-    'phabricator-application-launch-view-css' => '8e459ff2',
+    'phabricator-action-list-view-css' => '2626aa1d',
+    'phabricator-application-launch-view-css' => '2626aa1d',
     'phabricator-busy' => '98f60e3f',
     'phabricator-content-source-view-css' => 'dd27a69b',
-    'phabricator-core-buttons-css' => '8e459ff2',
-    'phabricator-core-css' => '8e459ff2',
-    'phabricator-crumbs-view-css' => '8e459ff2',
+    'phabricator-core-buttons-css' => '2626aa1d',
+    'phabricator-core-css' => '2626aa1d',
+    'phabricator-crumbs-view-css' => '2626aa1d',
     'phabricator-drag-and-drop-file-upload' => '9488bb69',
     'phabricator-dropdown-menu' => '98f60e3f',
     'phabricator-file-upload' => '98f60e3f',
-    'phabricator-filetree-view-css' => '8e459ff2',
-    'phabricator-flag-css' => '8e459ff2',
-    'phabricator-form-view-css' => '8e459ff2',
-    'phabricator-header-view-css' => '8e459ff2',
+    'phabricator-filetree-view-css' => '2626aa1d',
+    'phabricator-flag-css' => '2626aa1d',
+    'phabricator-form-view-css' => '2626aa1d',
+    'phabricator-header-view-css' => '2626aa1d',
     'phabricator-hovercard' => '98f60e3f',
-    'phabricator-jump-nav' => '8e459ff2',
+    'phabricator-jump-nav' => '2626aa1d',
     'phabricator-keyboard-shortcut' => '98f60e3f',
     'phabricator-keyboard-shortcut-manager' => '98f60e3f',
-    'phabricator-main-menu-view' => '8e459ff2',
+    'phabricator-main-menu-view' => '2626aa1d',
     'phabricator-menu-item' => '98f60e3f',
-    'phabricator-nav-view-css' => '8e459ff2',
+    'phabricator-nav-view-css' => '2626aa1d',
     'phabricator-notification' => '98f60e3f',
-    'phabricator-notification-css' => '8e459ff2',
-    'phabricator-notification-menu-css' => '8e459ff2',
-    'phabricator-object-item-list-view-css' => '8e459ff2',
+    'phabricator-notification-css' => '2626aa1d',
+    'phabricator-notification-menu-css' => '2626aa1d',
+    'phabricator-object-item-list-view-css' => '2626aa1d',
     'phabricator-object-selector-css' => 'dd27a69b',
     'phabricator-phtize' => '98f60e3f',
     'phabricator-prefab' => '98f60e3f',
     'phabricator-project-tag-css' => '03ab92cf',
-    'phabricator-property-list-view-css' => '8e459ff2',
-    'phabricator-remarkup-css' => '8e459ff2',
+    'phabricator-property-list-view-css' => '2626aa1d',
+    'phabricator-remarkup-css' => '2626aa1d',
     'phabricator-shaped-request' => '9488bb69',
-    'phabricator-side-menu-view-css' => '8e459ff2',
-    'phabricator-standard-page-view' => '8e459ff2',
-    'phabricator-tag-view-css' => '8e459ff2',
+    'phabricator-side-menu-view-css' => '2626aa1d',
+    'phabricator-standard-page-view' => '2626aa1d',
+    'phabricator-tag-view-css' => '2626aa1d',
     'phabricator-textareautils' => '98f60e3f',
     'phabricator-tooltip' => '98f60e3f',
-    'phabricator-transaction-view-css' => '8e459ff2',
-    'phabricator-zindex-css' => '8e459ff2',
-    'phui-form-css' => '8e459ff2',
-    'phui-icon-view-css' => '8e459ff2',
-    'spacing-css' => '8e459ff2',
-    'sprite-apps-large-css' => '8e459ff2',
-    'sprite-gradient-css' => '8e459ff2',
-    'sprite-icons-css' => '8e459ff2',
-    'sprite-menu-css' => '8e459ff2',
-    'syntax-highlighting-css' => '8e459ff2',
+    'phabricator-transaction-view-css' => '2626aa1d',
+    'phabricator-zindex-css' => '2626aa1d',
+    'phui-form-css' => '2626aa1d',
+    'phui-icon-view-css' => '2626aa1d',
+    'spacing-css' => '2626aa1d',
+    'sprite-apps-large-css' => '2626aa1d',
+    'sprite-gradient-css' => '2626aa1d',
+    'sprite-icons-css' => '2626aa1d',
+    'sprite-menu-css' => '2626aa1d',
+    'syntax-highlighting-css' => '2626aa1d',
   ),
 ));

src/__phutil_library_map__.php

@@ -686,6 +686,7 @@ phutil_register_library_map(array(
     'PHUI' => 'view/phui/PHUI.php',
     'PHUIBoxExample' => 'applications/uiexample/examples/PHUIBoxExample.php',
     'PHUIBoxView' => 'view/phui/PHUIBoxView.php',
+    'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php',
     'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php',
     'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php',
     'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php',
@@ -695,6 +696,9 @@ phutil_register_library_map(array(
     'PHUIFormPageView' => 'view/form/PHUIFormPageView.php',
     'PHUIIconExample' => 'applications/uiexample/examples/PHUIIconExample.php',
     'PHUIIconView' => 'view/phui/PHUIIconView.php',
+    'PHUIListItemView' => 'view/phui/PHUIListItemView.php',
+    'PHUIListView' => 'view/phui/PHUIListView.php',
+    'PHUIListViewTestCase' => 'view/layout/__tests__/PHUIListViewTestCase.php',
     'PHUIPagedFormView' => 'view/form/PHUIPagedFormView.php',
     'PHUITextExample' => 'applications/uiexample/examples/PHUITextExample.php',
     'PHUITextView' => 'view/phui/PHUITextView.php',
@@ -1138,9 +1142,6 @@ phutil_register_library_map(array(
     'PhabricatorMarkupEngine' => 'infrastructure/markup/PhabricatorMarkupEngine.php',
     'PhabricatorMarkupInterface' => 'infrastructure/markup/PhabricatorMarkupInterface.php',
     'PhabricatorMarkupOneOff' => 'infrastructure/markup/PhabricatorMarkupOneOff.php',
-    'PhabricatorMenuItemView' => 'view/layout/PhabricatorMenuItemView.php',
-    'PhabricatorMenuView' => 'view/layout/PhabricatorMenuView.php',
-    'PhabricatorMenuViewTestCase' => 'view/layout/__tests__/PhabricatorMenuViewTestCase.php',
     'PhabricatorMercurialGraphStream' => 'applications/repository/daemon/PhabricatorMercurialGraphStream.php',
     'PhabricatorMetaMTAAttachment' => 'applications/metamta/storage/PhabricatorMetaMTAAttachment.php',
     'PhabricatorMetaMTAConfigOptions' => 'applications/config/option/PhabricatorMetaMTAConfigOptions.php',
@@ -2505,6 +2506,7 @@ phutil_register_library_map(array(
     'OwnersPackageReplyHandler' => 'PhabricatorMailReplyHandler',
     'PHUIBoxExample' => 'PhabricatorUIExample',
     'PHUIBoxView' => 'AphrontTagView',
+    'PHUIDocumentExample' => 'PhabricatorUIExample',
     'PHUIDocumentView' => 'AphrontTagView',
     'PHUIFeedStoryExample' => 'PhabricatorUIExample',
     'PHUIFeedStoryView' => 'AphrontView',
@@ -2514,6 +2516,9 @@ phutil_register_library_map(array(
     'PHUIFormPageView' => 'AphrontView',
     'PHUIIconExample' => 'PhabricatorUIExample',
     'PHUIIconView' => 'AphrontTagView',
+    'PHUIListItemView' => 'AphrontTagView',
+    'PHUIListView' => 'AphrontTagView',
+    'PHUIListViewTestCase' => 'PhabricatorTestCase',
     'PHUIPagedFormView' => 'AphrontTagView',
     'PHUITextExample' => 'PhabricatorUIExample',
     'PHUITextView' => 'AphrontTagView',
@@ -2960,9 +2965,6 @@ phutil_register_library_map(array(
     'PhabricatorManiphestTaskTestDataGenerator' => 'PhabricatorTestDataGenerator',
     'PhabricatorMarkupCache' => 'PhabricatorCacheDAO',
     'PhabricatorMarkupOneOff' => 'PhabricatorMarkupInterface',
-    'PhabricatorMenuItemView' => 'AphrontTagView',
-    'PhabricatorMenuView' => 'AphrontTagView',
-    'PhabricatorMenuViewTestCase' => 'PhabricatorTestCase',
     'PhabricatorMetaMTAConfigOptions' => 'PhabricatorApplicationConfigOptions',
     'PhabricatorMetaMTAController' => 'PhabricatorController',
     'PhabricatorMetaMTADAO' => 'PhabricatorLiskDAO',

src/applications/audit/events/AuditPeopleMenuEventListener.php

@@ -24,7 +24,7 @@ final class AuditPeopleMenuEventListener extends PhutilEventListener {
     $name = pht('Commits');
 
     $menu->addMenuItemToLabel('activity',
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
       ->setIsExternal(true)
       ->setName($name)
       ->setHref($href)

src/applications/auth/application/PhabricatorApplicationAuth.php

@@ -17,7 +17,7 @@ final class PhabricatorApplicationAuth extends PhabricatorApplication {
     $items = array();
 
     if ($user->isLoggedIn()) {
-      $item = new PhabricatorMenuItemView();
+      $item = new PHUIListItemView();
       $item->setName(pht('Log Out'));
       $item->setIcon('power');
       $item->setWorkflow(true);

src/applications/conpherence/controller/ConpherenceController.php

@@ -7,24 +7,24 @@ abstract class ConpherenceController extends PhabricatorController {
   private $conpherences;
 
   public function buildApplicationMenu() {
-    $nav = new PhabricatorMenuView();
+    $nav = new PHUIListView();
 
     $nav->newLink(
       pht('New Message'),
       $this->getApplicationURI('new/'));
 
     $nav->addMenuItem(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
       ->setName(pht('Add Participants'))
-      ->setType(PhabricatorMenuItemView::TYPE_LINK)
+      ->setType(PHUIListItemView::TYPE_LINK)
       ->setHref('#')
       ->addSigil('conpherence-widget-adder')
       ->setMetadata(array('widget' => 'widgets-people')));
 
     $nav->addMenuItem(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
       ->setName(pht('New Calendar Item'))
-      ->setType(PhabricatorMenuItemView::TYPE_LINK)
+      ->setType(PHUIListItemView::TYPE_LINK)
       ->setHref('/calendar/status/create/')
       ->addSigil('conpherence-widget-adder')
       ->setMetadata(array('widget' => 'widgets-calendar')));
@@ -37,13 +37,13 @@ abstract class ConpherenceController extends PhabricatorController {
 
     $crumbs
       ->addAction(
-        id(new PhabricatorMenuItemView())
+        id(new PHUIListItemView())
         ->setName(pht('New Message'))
         ->setHref($this->getApplicationURI('new/'))
         ->setIcon('create')
         ->setWorkflow(true))
       ->addAction(
-        id(new PhabricatorMenuItemView())
+        id(new PHUIListItemView())
         ->setName(pht('Thread'))
         ->setHref('#')
         ->setIcon('action-menu')

src/applications/conpherence/events/ConpherencePeopleMenuEventListener.php

@@ -24,7 +24,7 @@ final class ConpherencePeopleMenuEventListener extends PhutilEventListener {
     $name = pht('Message');
 
     $menu->addMenuItemBefore('activity',
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
       ->setIsExternal(true)
       ->setName($name)
       ->setHref($conpherence_uri)

src/applications/conpherence/view/ConpherenceThreadListView.php

@@ -33,7 +33,7 @@ final class ConpherenceThreadListView extends AphrontView {
   public function render() {
     require_celerity_resource('conpherence-menu-css');
 
-    $menu = id(new PhabricatorMenuView())
+    $menu = id(new PHUIListView())
       ->addClass('conpherence-menu')
       ->setID('conpherence-menu');
 
@@ -69,8 +69,8 @@ final class ConpherenceThreadListView extends AphrontView {
   }
 
   private function renderThreadItem(ConpherenceThread $thread) {
-    return id(new PhabricatorMenuItemView())
-      ->setType(PhabricatorMenuItemView::TYPE_CUSTOM)
+    return id(new PHUIListItemView())
+      ->setType(PHUIListItemView::TYPE_CUSTOM)
       ->setName($this->renderThread($thread));
   }
 
@@ -105,7 +105,7 @@ final class ConpherenceThreadListView extends AphrontView {
   }
 
   private function addThreadsToMenu(
-    PhabricatorMenuView $menu,
+    PHUIListView $menu,
     array $conpherences) {
 
     if ($this->scrollUpParticipant->getID()) {
@@ -139,11 +139,11 @@ final class ConpherenceThreadListView extends AphrontView {
     } else {
       $name = pht('Load Older Threads');
     }
-    $item = id(new PhabricatorMenuItemView())
+    $item = id(new PHUIListItemView())
       ->addSigil('conpherence-menu-scroller')
       ->setName($name)
       ->setHref($this->baseURI)
-      ->setType(PhabricatorMenuItemView::TYPE_BUTTON)
+      ->setType(PHUIListItemView::TYPE_BUTTON)
       ->setMetadata(array(
         'participant_id' => $participant->getID(),
         'conpherence_phid' => $participant->getConpherencePHID(),
@@ -160,8 +160,8 @@ final class ConpherenceThreadListView extends AphrontView {
       ),
       pht('No conpherences.'));
 
-    return id(new PhabricatorMenuItemView())
-      ->setType(PhabricatorMenuItemView::TYPE_CUSTOM)
+    return id(new PHUIListItemView())
+      ->setType(PHUIListItemView::TYPE_CUSTOM)
       ->setName($message);
   }
 

src/applications/countdown/controller/PhabricatorCountdownController.php

@@ -27,7 +27,7 @@ abstract class PhabricatorCountdownController extends PhabricatorController {
     $crumbs = parent::buildApplicationCrumbs();
 
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setName(pht('Create Countdown'))
         ->setHref($this->getApplicationURI('edit/'))
         ->setIcon('create'));

src/applications/differential/controller/DifferentialController.php

@@ -26,7 +26,7 @@ abstract class DifferentialController extends PhabricatorController {
     $crumbs = parent::buildApplicationCrumbs();
 
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setHref($this->getApplicationURI('/diff/create/'))
         ->setName(pht('Create Diff'))
         ->setIcon('create'));

src/applications/differential/events/DifferentialPeopleMenuEventListener.php

@@ -24,7 +24,7 @@ final class DifferentialPeopleMenuEventListener extends PhutilEventListener {
     $name = pht('Revisions');
 
     $menu->addMenuItemToLabel('activity',
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
       ->setIsExternal(true)
       ->setHref($href)
       ->setName($name)

src/applications/diffusion/events/DiffusionPeopleMenuEventListener.php

@@ -23,7 +23,7 @@ final class DiffusionPeopleMenuEventListener extends PhutilEventListener {
     $name = pht('Lint Messages');
 
     $menu->addMenuItemToLabel('activity',
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
       ->setIsExternal(true)
       ->setHref($href)
       ->setName($name)

src/applications/directory/controller/PhabricatorDirectoryController.php

@@ -81,13 +81,13 @@ abstract class PhabricatorDirectoryController extends PhabricatorController {
         $show_item_id = celerity_generate_unique_node_id();
         $hide_item_id = celerity_generate_unique_node_id();
 
-        $show_item = id(new PhabricatorMenuItemView())
+        $show_item = id(new PHUIListItemView())
           ->setName(pht('Show More Applications'))
           ->setHref('#')
           ->addSigil('reveal-content')
           ->setID($show_item_id);
 
-        $hide_item = id(new PhabricatorMenuItemView())
+        $hide_item = id(new PHUIListItemView())
           ->setName(pht('Show Fewer Applications'))
           ->setHref('#')
           ->setStyle('display: none')
@@ -118,14 +118,16 @@ abstract class PhabricatorDirectoryController extends PhabricatorController {
           while (count($tiles) % 3) {
             $tiles[] = id(new PhabricatorApplicationLaunchView());
           }
-          $label = id(new PhabricatorMenuItemView())
-            ->setType(PhabricatorMenuItemView::TYPE_LABEL)
+          $label = id(new PHUIListItemView())
+            ->setType(PHUIListItemView::TYPE_LABEL)
             ->setName($groups[$group]);
 
           if ($is_hide) {
-            $label->setStyle('display: none');
             $label_id = celerity_generate_unique_node_id();
-            $label->setID($label_id);
+            $attrs = array();
+            $attrs['style'] = 'display: none;';
+            $attrs['id'] = $label_id;
+            $label->setContainerAttrs($attrs);
             $tile_ids[] = $label_id;
           }
 

src/applications/diviner/application/PhabricatorApplicationDiviner.php

@@ -51,7 +51,7 @@ final class PhabricatorApplicationDiviner extends PhabricatorApplication {
     }
 
     if ($application && $application->getHelpURI()) {
-      $item = new PhabricatorMenuItemView();
+      $item = new PHUIListItemView();
       $item->setName(pht('%s Help', $application->getName()));
       $item->setIcon('help');
       $item->setHref($application->getHelpURI());

src/applications/diviner/controller/DivinerController.php

@@ -12,7 +12,7 @@ abstract class DivinerController extends PhabricatorController {
   }
 
   private function buildMenu() {
-    $menu = new PhabricatorMenuView();
+    $menu = new PHUIListView();
 
     id(new DivinerAtomSearchEngine())
       ->setViewer($this->getRequest()->getUser())

src/applications/files/controller/PhabricatorFileController.php

@@ -5,7 +5,7 @@ abstract class PhabricatorFileController extends PhabricatorController {
   public function buildApplicationCrumbs() {
     $crumbs = parent::buildApplicationCrumbs();
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setName(pht('Upload File'))
         ->setIcon('create') // TODO: Get @chad to build an "upload" icon.
         ->setHref($this->getApplicationURI('/upload/')));
@@ -23,7 +23,7 @@ abstract class PhabricatorFileController extends PhabricatorController {
   }
 
   private function buildMenu($for_devices) {
-    $menu = new PhabricatorMenuView();
+    $menu = new PHUIListView();
 
     if ($for_devices) {
       $menu->newLink(pht('Upload File'), $this->getApplicationURI('/upload/'));

src/applications/herald/controller/HeraldController.php

@@ -24,7 +24,7 @@ abstract class HeraldController extends PhabricatorController {
     $crumbs = parent::buildApplicationCrumbs();
 
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setName(pht('Create Herald Rule'))
         ->setHref($this->getApplicationURI('new/'))
         ->setIcon('create'));

src/applications/herald/view/HeraldRuleListView.php

@@ -68,7 +68,7 @@ final class HeraldRuleListView extends AphrontView {
         ->addAttribute($edit_log)
         ->addIcon('none', $author)
         ->addAction(
-          id(new PhabricatorMenuItemView())
+          id(new PHUIListItemView())
             ->setHref('/herald/delete/'.$rule->getID().'/')
             ->setIcon('delete')
             ->setWorkflow(true));

src/applications/macro/controller/PhabricatorMacroController.php

@@ -29,7 +29,7 @@ abstract class PhabricatorMacroController
     $crumbs = parent::buildApplicationCrumbs();
 
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setName(pht('Create Macro'))
         ->setHref($this->getApplicationURI('/create/'))
         ->setIcon('create'));

src/applications/mailinglists/controller/PhabricatorMailingListsController.php

@@ -26,7 +26,7 @@ abstract class PhabricatorMailingListsController extends PhabricatorController {
     $crumbs = parent::buildApplicationCrumbs();
 
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setName(pht('Create List'))
         ->setHref($this->getApplicationURI('edit/'))
         ->setIcon('create'));

src/applications/maniphest/controller/ManiphestTaskDetailController.php

@@ -336,7 +336,7 @@ final class ManiphestTaskDetailController extends ManiphestController {
         ->setHref('/'.$object_name))
       ->setActionList($actions)
       ->addAction(
-        id(new PhabricatorMenuItemView())
+        id(new PHUIListItemView())
           ->setHref($this->getApplicationURI('/task/create/'))
           ->setName(pht('Create Task'))
           ->setIcon('create'));

src/applications/maniphest/controller/ManiphestTaskEditController.php

@@ -554,7 +554,7 @@ final class ManiphestTaskEditController extends ManiphestController {
         ->setName($header_name)
         ->setHref($this->getApplicationURI('/task/create/')))
       ->addAction(
-        id(new PhabricatorMenuItemView())
+        id(new PHUIListItemView())
           ->setHref($this->getApplicationURI('/task/create/'))
           ->setName(pht('Create Task'))
           ->setIcon('create'));

src/applications/maniphest/controller/ManiphestTaskListController.php

@@ -416,7 +416,7 @@ final class ManiphestTaskListController extends ManiphestController {
         id(new PhabricatorCrumbView())
           ->setName($title))
       ->addAction(
-        id(new PhabricatorMenuItemView())
+        id(new PHUIListItemView())
           ->setHref($this->getApplicationURI('/task/create/'))
           ->setName(pht('Create Task'))
           ->setIcon('create'));

src/applications/maniphest/event/ManiphestPeopleMenuEventListener.php

@@ -23,7 +23,7 @@ final class ManiphestPeopleMenuEventListener extends PhutilEventListener {
     $name = pht('Tasks');
 
     $menu->addMenuItemToLabel('activity',
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
       ->setIsExternal(true)
       ->setHref($href)
       ->setName($name)

src/applications/maniphest/view/ManiphestTaskListView.php

@@ -101,7 +101,7 @@ final class ManiphestTaskListView extends ManiphestView {
 
       if ($this->showBatchControls) {
         $item->addAction(
-          id(new PhabricatorMenuItemView())
+          id(new PHUIListItemView())
             ->setIcon('edit')
             ->addSigil('maniphest-edit-task')
             ->setHref('/maniphest/task/edit/'.$task->getID().'/'));

src/applications/owners/controller/PhabricatorOwnersController.php

@@ -50,7 +50,7 @@ abstract class PhabricatorOwnersController extends PhabricatorController {
         ->setName($title));
 
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setName(pht('Create Package'))
         ->setHref('/owners/new/')
         ->setIcon('create'));

src/applications/paste/controller/PhabricatorPasteController.php

@@ -29,7 +29,7 @@ abstract class PhabricatorPasteController extends PhabricatorController {
     $crumbs = parent::buildApplicationCrumbs();
 
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setName(pht('Create Paste'))
         ->setHref($this->getApplicationURI('create/'))
         ->setIcon('create'));

src/applications/people/application/PhabricatorApplicationPeople.php

@@ -61,7 +61,7 @@ final class PhabricatorApplicationPeople extends PhabricatorApplication {
     if ($user->isLoggedIn()) {
       $image = $user->loadProfileImageURI();
 
-      $item = new PhabricatorMenuItemView();
+      $item = new PHUIListItemView();
       $item->setName($user->getUsername());
       $item->setHref('/p/'.$user->getUsername().'/');
       $item->addClass('phabricator-core-menu-item');

src/applications/people/controller/PhabricatorPeopleController.php

@@ -39,7 +39,7 @@ abstract class PhabricatorPeopleController extends PhabricatorController {
 
     if ($viewer->getIsAdmin()) {
       $crumbs->addAction(
-        id(new PhabricatorMenuItemView())
+        id(new PHUIListItemView())
           ->setName(pht('Create New User'))
           ->setHref($this->getApplicationURI('edit'))
           ->setIcon('create'));

src/applications/people/controller/PhabricatorPeopleListController.php

@@ -69,7 +69,7 @@ final class PhabricatorPeopleListController extends PhabricatorPeopleController
       if ($viewer->getIsAdmin()) {
         $uid = $user->getID();
         $item->addAction(
-          id(new PhabricatorMenuItemView())
+          id(new PHUIListItemView())
             ->setIcon('edit')
             ->setHref($this->getApplicationURI('edit/'.$uid.'/')));
       }

src/applications/people/controller/PhabricatorPeopleProfileController.php

@@ -55,7 +55,7 @@ final class PhabricatorPeopleProfileController
     $profile = $user->loadUserProfile();
     $username = phutil_escape_uri($user->getUserName());
 
-    $menu = new PhabricatorMenuView();
+    $menu = new PHUIListView();
     foreach ($this->getMainFilters($username) as $filter) {
       $menu->newLink($filter['name'], $filter['href'], $filter['key']);
     }
@@ -91,11 +91,11 @@ final class PhabricatorPeopleProfileController
           $added_label = true;
         }
         $menu->addMenuItem(
-          id(new PhabricatorMenuItemView())
+          id(new PHUIListItemView())
           ->setIsExternal(true)
           ->setName($name)
           ->setHref($href)
-          ->setType(PhabricatorMenuItemView::TYPE_LINK));
+          ->setType(PHUIListItemView::TYPE_LINK));
       }
     }
 

src/applications/phame/controller/PhameController.php

@@ -96,12 +96,12 @@ abstract class PhameController extends PhabricatorController {
   protected function buildApplicationCrumbs() {
     $crumbs = parent::buildApplicationCrumbs();
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setName(pht('New Blog'))
         ->setHref($this->getApplicationURI('/blog/new'))
         ->setIcon('create'));
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setName(pht('New Post'))
         ->setHref($this->getApplicationURI('/post/new'))
         ->setIcon('new'));

src/applications/phlux/controller/PhluxController.php

@@ -5,7 +5,7 @@ abstract class PhluxController extends PhabricatorController {
   protected function buildApplicationCrumbs() {
     $crumbs = parent::buildApplicationCrumbs();
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setName(pht('Create Variable'))
         ->setHref($this->getApplicationURI('/edit/'))
         ->setIcon('create'));

src/applications/pholio/controller/PholioController.php

@@ -24,7 +24,7 @@ abstract class PholioController extends PhabricatorController {
     $crumbs = parent::buildApplicationCrumbs();
 
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setName(pht('Create Mock'))
         ->setHref($this->getApplicationURI('new/'))
         ->setIcon('create'));

src/applications/phortune/controller/PhortuneProductListController.php

@@ -22,7 +22,7 @@ final class PhortuneProductListController extends PhabricatorController {
         ->setName('Products')
         ->setHref($this->getApplicationURI('product/')));
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setName(pht('Create Product'))
         ->setHref($this->getApplicationURI('product/edit/'))
         ->setIcon('create'));

src/applications/phriction/controller/PhrictionController.php

@@ -51,14 +51,14 @@ abstract class PhrictionController extends PhabricatorController {
 
     if (get_class($this) != 'PhrictionListController') {
       $crumbs->addAction(
-        id(new PhabricatorMenuItemView())
+        id(new PHUIListItemView())
           ->setName(pht('Index'))
           ->setHref('/phriction/')
           ->setIcon('transcript'));
     }
 
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setName(pht('New Document'))
         ->setHref('/phriction/new/?slug='.$this->getDocumentSlug())
         ->setWorkflow(true)

src/applications/ponder/controller/PonderController.php

@@ -32,7 +32,7 @@ abstract class PonderController extends PhabricatorController {
     $crumbs = parent::buildApplicationCrumbs();
     $crumbs
       ->addAction(
-        id(new PhabricatorMenuItemView())
+        id(new PHUIListItemView())
           ->setName(pht('New Question'))
           ->setHref('/ponder/question/ask')
           ->setIcon('create'));

src/applications/project/controller/PhabricatorProjectController.php

@@ -71,7 +71,7 @@ abstract class PhabricatorProjectController extends PhabricatorController {
     $crumbs = parent::buildApplicationCrumbs();
 
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setName(pht('Create Project'))
         ->setHref($this->getApplicationURI('create/'))
         ->setIcon('create'));

src/applications/releeph/controller/branch/ReleephBranchViewController.php

@@ -70,7 +70,7 @@ final class ReleephBranchViewController extends ReleephController {
     if ($releeph_branch->isActive()) {
       $create_uri = $releeph_branch->getURI('request/');
       $crumbs->addAction(
-        id(new PhabricatorMenuItemView())
+        id(new PHUIListItemView())
           ->setHref($create_uri)
           ->setName(pht('Request Pick'))
           ->setIcon('create'));

src/applications/releeph/controller/project/ReleephProjectViewController.php

@@ -26,7 +26,7 @@ final class ReleephProjectViewController extends ReleephController {
 
     if ($releeph_project->getIsActive()) {
       $crumbs->addAction(
-        id(new PhabricatorMenuItemView())
+        id(new PHUIListItemView())
           ->setHref($releeph_project->getURI('cutbranch'))
           ->setName(pht('Cut New Branch'))
           ->setIcon('create'));

src/applications/search/controller/PhabricatorApplicationSearchController.php

@@ -250,7 +250,7 @@ final class PhabricatorApplicationSearchController
       }
 
       $item->addAction(
-        id(new PhabricatorMenuItemView())
+        id(new PHUIListItemView())
           ->setIcon($icon)
           ->setHref('/search/delete/'.$key.'/'.$class.'/')
           ->setWorkflow(true));
@@ -263,8 +263,9 @@ final class PhabricatorApplicationSearchController
         }
         $item->setBarColor('grey');
       } else {
+        $item->addIcon('none', $date_created);
         $item->addAction(
-          id(new PhabricatorMenuItemView())
+          id(new PHUIListItemView())
             ->setIcon('edit')
             ->setHref('/search/edit/'.$key.'/'));
       }

src/applications/search/engine/PhabricatorApplicationSearchEngine.php

@@ -106,7 +106,7 @@ abstract class PhabricatorApplicationSearchEngine {
   }
 
 
-  public function addNavigationItems(PhabricatorMenuView $menu) {
+  public function addNavigationItems(PHUIListView $menu) {
     $viewer = $this->requireViewer();
 
     $menu->newLabel(pht('Queries'));

src/applications/settings/application/PhabricatorApplicationSettings.php

@@ -39,7 +39,7 @@ final class PhabricatorApplicationSettings extends PhabricatorApplication {
 
     if ($user->isLoggedIn()) {
       $selected = ($controller instanceof PhabricatorSettingsMainController);
-      $item = new PhabricatorMenuItemView();
+      $item = new PHUIListItemView();
       $item->setName(pht('Settings'));
       $item->setIcon('settings');
       $item->addClass('phabricator-core-menu-item');

src/applications/slowvote/controller/PhabricatorSlowvoteController.php

@@ -51,7 +51,7 @@ abstract class PhabricatorSlowvoteController extends PhabricatorController {
     $crumbs = parent::buildApplicationCrumbs();
 
     $crumbs->addAction(
-      id(new PhabricatorMenuItemView())
+      id(new PHUIListItemView())
         ->setName(pht('Create Question'))
         ->setHref($this->getApplicationURI('create/'))
         ->setIcon('create'));

src/applications/uiexample/examples/PHUIDocumentExample.php

@@ -0,0 +1,196 @@
+<?php
+
+final class PHUIDocumentExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return pht('Document View');
+  }
+
+  public function getDescription() {
+    return pht('Useful for areas of large content navigation');
+  }
+
+  public function renderExample() {
+    $request = $this->getRequest();
+    $user = $request->getUser();
+
+    $action = id(new PHUIListItemView())
+      ->setName('Actions')
+      ->setType(PHUIListItemView::TYPE_LABEL);
+
+    $action1 = id(new PHUIListItemView())
+      ->setName('Edit Document')
+      ->setHref('#')
+      ->setIcon('edit')
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $action2 = id(new PHUIListItemView())
+      ->setName('Move Document')
+      ->setHref('#')
+      ->setIcon('move')
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $action3 = id(new PHUIListItemView())
+      ->setName('Delete Document')
+      ->setHref('#')
+      ->setIcon('delete')
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $action4 = id(new PHUIListItemView())
+      ->setName('View History')
+      ->setHref('#')
+      ->setIcon('history')
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $action5 = id(new PHUIListItemView())
+      ->setName('Subscribe')
+      ->setHref('#')
+      ->setIcon('subscribe-add')
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $divider = id(new PHUIListItemView)
+      ->setType(PHUIListItemView::TYPE_DIVIDER);
+
+    $header = id(new PhabricatorHeaderView())
+      ->setHeader('Installation');
+
+    $label1 = id(new PHUIListItemView())
+      ->setName('Getting Started')
+      ->setType(PHUIListItemView::TYPE_LABEL);
+
+    $label2 = id(new PHUIListItemView())
+      ->setName('Documentation')
+      ->setType(PHUIListItemView::TYPE_LABEL);
+
+    $item1 = id(new PHUIListItemView())
+      ->setName('Installation')
+      ->setHref('#')
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $item2 = id(new PHUIListItemView())
+      ->setName('Webserver Config')
+      ->setHref('#')
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $item3 = id(new PHUIListItemView())
+      ->setName('Adding Users')
+      ->setHref('#')
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $item4 = id(new PHUIListItemView())
+      ->setName('Debugging')
+      ->setHref('#')
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $sidenav = id(new PHUIListView())
+      ->addMenuItem($action)
+      ->addMenuItem($action1)
+      ->addMenuItem($action2)
+      ->addMenuItem($action3)
+      ->addMenuItem($action4)
+      ->addMenuItem($action5)
+      ->addMenuItem($divider)
+      ->addMenuItem($label1)
+      ->addMenuItem($item1)
+      ->addMenuItem($item2)
+      ->addMenuItem($item3)
+      ->addMenuItem($item4)
+      ->addMenuItem($label2)
+      ->addMenuItem($item2)
+      ->addMenuItem($item3)
+      ->addMenuItem($item4)
+      ->addMenuItem($item1);
+
+    $home = id(new PHUIListItemView())
+      ->setIcon('transcript')
+      ->setHref('#')
+      ->setType(PHUIListItemView::TYPE_ICON);
+
+    $item1 = id(new PHUIListItemView())
+      ->setName('Installation')
+      ->setHref('#')
+      ->setSelected(true)
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $item2 = id(new PHUIListItemView())
+      ->setName('Webserver Config')
+      ->setHref('#')
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $item3 = id(new PHUIListItemView())
+      ->setName('Adding Users')
+      ->setHref('#')
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $item4 = id(new PHUIListItemView())
+      ->setName('Debugging')
+      ->setHref('#')
+      ->setType(PHUIListItemView::TYPE_LINK);
+
+    $topnav = id(new PHUIListView())
+      ->addMenuItem($home)
+      ->addMenuItem($item1)
+      ->addMenuItem($item2)
+      ->addMenuItem($item3)
+      ->addMenuItem($item4);
+
+    $document = hsprintf(
+      '<p class="pl">Lorem ipsum dolor sit amet, consectetur adipisicing, '.
+      'sed do eiusmod tempor incididunt ut labore et dolore magna '.
+      'aliqua. Ut enim ad minim veniam, quis nostrud exercitation '.
+      'ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis '.
+      'aute irure dolor in reprehenderit in voluptate velit esse cillum '.
+      'dolore eu fugiat nulla pariatur. Excepteur sint occaecat '.
+      'cupidatat non proident, sunt in culpa qui officia deserunt '.
+      'mollit anim id est laborum.</p>'.
+      '<p class="plr pll plb">Lorem ipsum dolor sit amet, consectetur, '.
+      'sed do eiusmod tempor incididunt ut labore et dolore magna '.
+      'aliqua. Ut enim ad minim veniam, quis nostrud exercitation '.
+      'ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis '.
+      'aute irure dolor in reprehenderit in voluptate velit esse cillum '.
+      'dolore eu fugiat nulla pariatur. Excepteur sint occaecat '.
+      'cupidatat non proident, sunt in culpa qui officia deserunt '.
+      'mollit anim id est laborum.</p>'.
+      '<p class="plr pll plb">Lorem ipsum dolor sit amet, consectetur, '.
+      'sed do eiusmod tempor incididunt ut labore et dolore magna '.
+      'aliqua. Ut enim ad minim veniam, quis nostrud exercitation '.
+      'ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis '.
+      'aute irure dolor in reprehenderit in voluptate velit esse cillum '.
+      'dolore eu fugiat nulla pariatur. Excepteur sint occaecat '.
+      'cupidatat non proident, sunt in culpa qui officia deserunt '.
+      'mollit anim id est laborum.</p>'.
+      '<p class="plr pll plb">Lorem ipsum dolor sit amet, consectetur, '.
+      'sed do eiusmod tempor incididunt ut labore et dolore magna '.
+      'aliqua. Ut enim ad minim veniam, quis nostrud exercitation '.
+      'ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis '.
+      'aute irure dolor in reprehenderit in voluptate velit esse cillum '.
+      'dolore eu fugiat nulla pariatur. Excepteur sint occaecat '.
+      'cupidatat non proident, sunt in culpa qui officia deserunt '.
+      'mollit anim id est laborum.</p>'.
+      '<p class="plr pll plb">Lorem ipsum dolor sit amet, consectetur, '.
+      'sed do eiusmod tempor incididunt ut labore et dolore magna '.
+      'aliqua. Ut enim ad minim veniam, quis nostrud exercitation '.
+      'ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis '.
+      'aute irure dolor in reprehenderit in voluptate velit esse cillum '.
+      'dolore eu fugiat nulla pariatur. Excepteur sint occaecat '.
+      'cupidatat non proident, sunt in culpa qui officia deserunt '.
+      'mollit anim id est laborum.</p>'.
+      '<p class="plr pll plb">Lorem ipsum dolor sit amet, consectetur, '.
+      'sed do eiusmod tempor incididunt ut labore et dolore magna '.
+      'aliqua. Ut enim ad minim veniam, quis nostrud exercitation '.
+      'ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis '.
+      'aute irure dolor in reprehenderit in voluptate velit esse cillum '.
+      'dolore eu fugiat nulla pariatur. Excepteur sint occaecat '.
+      'cupidatat non proident, sunt in culpa qui officia deserunt '.
+      'mollit anim id est laborum.</p>');
+
+     $content = new PHUIDocumentView();
+     $content->setBook('Book or Project Name', 'Article');
+     $content->setHeader($header);
+     $content->setTopNav($topnav);
+     $content->setSidenav($sidenav);
+     $content->appendChild($document);
+
+    return $content;
+  }
+}

src/applications/uiexample/examples/PhabricatorObjectItemListExample.php

@@ -154,7 +154,7 @@ final class PhabricatorObjectItemListExample extends PhabricatorUIExample {
         ->setGrippable(true)
         ->setBarColor('green')
         ->addAction(
-          id(new PhabricatorMenuItemView())
+          id(new PHUIListItemView())
             ->setHref('#')
             ->setIcon('delete')));
 
@@ -170,7 +170,7 @@ final class PhabricatorObjectItemListExample extends PhabricatorUIExample {
         ->setHref('#')
         ->setBarColor('blue')
         ->addAction(
-          id(new PhabricatorMenuItemView())
+          id(new PHUIListItemView())
             ->setHref('#')
             ->setIcon('edit')));
 
@@ -180,11 +180,11 @@ final class PhabricatorObjectItemListExample extends PhabricatorUIExample {
         ->setHref('#')
         ->setBarColor('violet')
         ->addAction(
-          id(new PhabricatorMenuItemView())
+          id(new PHUIListItemView())
             ->setHref('#')
             ->setIcon('edit'))
         ->addAction(
-          id(new PhabricatorMenuItemView())
+          id(new PHUIListItemView())
             ->setHref('#')
             ->setIcon('delete')));
 

src/applications/uiexample/examples/PhabricatorWorkboardExample.php

@@ -103,7 +103,7 @@ final class PhabricatorWorkboardExample extends PhabricatorUIExample {
           ->setCards($list)
           ->setHeader('Business Stuff')
           ->setFooterAction(
-            id(new PhabricatorMenuItemView())
+            id(new PHUIListItemView())
               ->setName(pht('Add Task'))
               ->setIcon('new')
               ->setHref('/maniphest/task/create/'));

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -459,9 +459,9 @@ final class CeleritySpriteGenerator {
 
     $extra_css = array(
       'dark-menu-label' =>
-        ', .phabricator-dark-menu .phabricator-menu-item-type-label',
+        ', .phabricator-dark-menu .phui-list-item-type-label',
       'menu-label' =>
-        ', .phabricator-side-menu .phabricator-menu-item-type-label',
+        ', .phabricator-side-menu .phui-list-item-type-label',
     );
 
     $sprites = array();
@@ -481,8 +481,8 @@ final class CeleritySpriteGenerator {
       'gradient',
       false,
       PhutilSpriteSheet::TYPE_REPEAT_X,
-      ', .phabricator-dark-menu .phabricator-menu-item-type-label, '.
-      '.phabricator-side-menu .phabricator-menu-item-type-label');
+      ', .phabricator-dark-menu .phui-list-item-type-label, '.
+      '.phabricator-side-menu .phui-list-item-type-label');
     foreach ($sprites as $sprite) {
       $sheet->addSprite($sprite);
     }

src/view/AphrontTagView.php

@@ -126,7 +126,8 @@ abstract class AphrontTagView extends AphrontView {
     $tag_view_attributes = array(
       'id' => $this->id,
 
-      'class' => $this->classes ? implode(' ', $this->classes) : null,
+      'class' => $this->classes ?
+        implode(' ', array_filter($this->classes)) : null,
       'style' => $this->style,
 
       'meta' => $this->metadata,

src/view/layout/AphrontSideNavFilterView.php

@@ -37,7 +37,7 @@ final class AphrontSideNavFilterView extends AphrontView {
   }
 
   public function __construct() {
-    $this->menu = new PhabricatorMenuView();
+    $this->menu = new PHUIListView();
   }
 
   public function addClass($class) {
@@ -45,7 +45,7 @@ final class AphrontSideNavFilterView extends AphrontView {
     return $this;
   }
 
-  public static function newFromMenu(PhabricatorMenuView $menu) {
+  public static function newFromMenu(PHUIListView $menu) {
     $object = new AphrontSideNavFilterView();
     $object->setBaseURI(new PhutilURI('/'));
     $object->menu = $menu;
@@ -80,7 +80,7 @@ final class AphrontSideNavFilterView extends AphrontView {
     return $this->menu;
   }
 
-  public function addMenuItem(PhabricatorMenuItemView $item) {
+  public function addMenuItem(PHUIListItemView $item) {
     $this->menu->addMenuItem($item);
     return $this;
   }
@@ -91,12 +91,12 @@ final class AphrontSideNavFilterView extends AphrontView {
 
   public function addFilter($key, $name, $uri = null) {
     return $this->addThing(
-      $key, $name, $uri, PhabricatorMenuItemView::TYPE_LINK);
+      $key, $name, $uri, PHUIListItemView::TYPE_LINK);
   }
 
   public function addButton($key, $name, $uri = null) {
     return $this->addThing(
-      $key, $name, $uri, PhabricatorMenuItemView::TYPE_BUTTON);
+      $key, $name, $uri, PHUIListItemView::TYPE_BUTTON);
   }
 
   private function addThing(
@@ -105,7 +105,7 @@ final class AphrontSideNavFilterView extends AphrontView {
     $uri = null,
     $type) {
 
-    $item = id(new PhabricatorMenuItemView())
+    $item = id(new PHUIListItemView())
       ->setName($name)
       ->setType($type);
 
@@ -128,16 +128,16 @@ final class AphrontSideNavFilterView extends AphrontView {
 
   public function addCustomBlock($block) {
     $this->menu->addMenuItem(
-      id(new PhabricatorMenuItemView())
-        ->setType(PhabricatorMenuItemView::TYPE_CUSTOM)
+      id(new PHUIListItemView())
+        ->setType(PHUIListItemView::TYPE_CUSTOM)
         ->appendChild($block));
     return $this;
   }
 
   public function addLabel($name) {
     return $this->addMenuItem(
-      id(new PhabricatorMenuItemView())
-        ->setType(PhabricatorMenuItemView::TYPE_LABEL)
+      id(new PHUIListItemView())
+        ->setType(PHUIListItemView::TYPE_LABEL)
         ->setName($name));
   }
 
@@ -175,7 +175,7 @@ final class AphrontSideNavFilterView extends AphrontView {
     if ($this->selectedFilter !== null) {
       $selected_item = $this->menu->getItem($this->selectedFilter);
       if ($selected_item) {
-        $selected_item->addClass('phabricator-menu-item-selected');
+        $selected_item->addClass('phui-list-item-selected');
       }
     }
 

src/view/layout/PhabricatorCrumbsView.php

@@ -15,7 +15,7 @@ final class PhabricatorCrumbsView extends AphrontView {
     return $this;
   }
 
-  public function addAction(PhabricatorMenuItemView $action) {
+  public function addAction(PHUIListItemView $action) {
     $this->actions[] = $action;
     return $this;
   }

src/view/layout/PhabricatorObjectItemView.php

@@ -77,7 +77,7 @@ final class PhabricatorObjectItemView extends AphrontTagView {
     return $this;
   }
 
-  public function addAction(PhabricatorMenuItemView $action) {
+  public function addAction(PHUIListItemView $action) {
     if (count($this->actions) >= 3) {
       throw new Exception("Limit 3 actions per item.");
     }
@@ -412,7 +412,7 @@ final class PhabricatorObjectItemView extends AphrontTagView {
         $actions[] = $action;
       }
       $actions = phutil_tag(
-        'div',
+        'ul',
         array(
           'class' => 'phabricator-object-item-actions',
         ),

src/view/layout/PhabricatorWorkpanelView.php

@@ -22,7 +22,7 @@ final class PhabricatorWorkpanelView extends AphrontView {
     return $this;
   }
 
-  public function setFooterAction(PhabricatorMenuItemView $footer_action) {
+  public function setFooterAction(PHUIListItemView $footer_action) {
     $this->footerAction = $footer_action;
     return $this;
   }
@@ -34,7 +34,7 @@ final class PhabricatorWorkpanelView extends AphrontView {
     if ($this->footerAction) {
       $footer_tag = $this->footerAction;
       $footer = phutil_tag(
-        'div',
+        'ul',
           array(
             'class' => 'phabricator-workpanel-footer-action mst ps'
           ),

src/view/layout/__tests__/PHUIListViewTestCase.php

@@ -1,6 +1,6 @@
 <?php
 
-final class PhabricatorMenuViewTestCase extends PhabricatorTestCase {
+final class PHUIListViewTestCase extends PhabricatorTestCase {
 
   public function testAppend() {
     $menu = $this->newABCMenu();
@@ -73,7 +73,7 @@ final class PhabricatorMenuViewTestCase extends PhabricatorTestCase {
   }
 
   public function testAppendLabel() {
-    $menu = new PhabricatorMenuView();
+    $menu = new PHUIListView();
     $menu->addMenuItem($this->newLabel('fruit'));
     $menu->addMenuItem($this->newLabel('animals'));
 
@@ -107,21 +107,21 @@ final class PhabricatorMenuViewTestCase extends PhabricatorTestCase {
   }
 
   private function newLink($key) {
-    return id(new PhabricatorMenuItemView())
+    return id(new PHUIListItemView())
       ->setKey($key)
       ->setHref('#')
       ->setName('Link');
   }
 
   private function newLabel($key) {
-    return id(new PhabricatorMenuItemView())
-      ->setType(PhabricatorMenuItemView::TYPE_LABEL)
+    return id(new PHUIListItemView())
+      ->setType(PHUIListItemView::TYPE_LABEL)
       ->setKey($key)
       ->setName('Label');
   }
 
   private function newABCMenu() {
-    $menu = new PhabricatorMenuView();
+    $menu = new PHUIListView();
 
     $menu->addMenuItem($this->newLink('a'));
     $menu->addMenuItem($this->newLink('b'));
@@ -130,7 +130,7 @@ final class PhabricatorMenuViewTestCase extends PhabricatorTestCase {
     return $menu;
   }
 
-  private function assertMenuKeys(array $expect, PhabricatorMenuView $menu) {
+  private function assertMenuKeys(array $expect, PHUIListView $menu) {
     $items = $menu->getItems();
     $keys = mpull($items, 'getKey');
     $keys = array_values($keys);

src/view/page/PhabricatorStandardPageView.php

@@ -18,7 +18,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
   private $pageObjects = array();
   private $applicationMenu;
 
-  public function setApplicationMenu(PhabricatorMenuView $application_menu) {
+  public function setApplicationMenu(PHUIListView $application_menu) {
     $this->applicationMenu = $application_menu;
     return $this;
   }

src/view/page/menu/PhabricatorMainMenuView.php

@@ -6,7 +6,7 @@ final class PhabricatorMainMenuView extends AphrontView {
   private $controller;
   private $applicationMenu;
 
-  public function setApplicationMenu(PhabricatorMenuView $application_menu) {
+  public function setApplicationMenu(PHUIListView $application_menu) {
     $this->applicationMenu = $application_menu;
     return $this;
   }
@@ -106,7 +106,7 @@ final class PhabricatorMainMenuView extends AphrontView {
     Javelin::initBehavior('phabricator-keyboard-shortcuts', $keyboard_config);
 
     if ($result) {
-      $result = id(new PhabricatorMenuItemView())
+      $result = id(new PHUIListItemView())
         ->addClass('phabricator-main-menu-search')
         ->appendChild($result);
     }
@@ -157,7 +157,7 @@ final class PhabricatorMainMenuView extends AphrontView {
     $view = $this->getApplicationMenu();
 
     if (!$view) {
-      $view = new PhabricatorMenuView();
+      $view = new PHUIListView();
     }
 
     $view->addClass('phabricator-dark-menu');
@@ -165,9 +165,9 @@ final class PhabricatorMainMenuView extends AphrontView {
 
     if ($actions) {
       $view->addMenuItem(
-        id(new PhabricatorMenuItemView())
+        id(new PHUIListItemView())
           ->addClass('phabricator-core-item-device')
-          ->setType(PhabricatorMenuItemView::TYPE_LABEL)
+          ->setType(PHUIListItemView::TYPE_LABEL)
           ->setName(pht('Actions')));
       foreach ($actions as $action) {
         $icon = $action->getIcon();
@@ -184,8 +184,8 @@ final class PhabricatorMainMenuView extends AphrontView {
 
     if ($user->isLoggedIn()) {
       $view->addMenuItem(
-        id(new PhabricatorMenuItemView())
-          ->addClass('phabricator-menu-item-type-link')
+        id(new PHUIListItemView())
+          ->addClass('phui-list-item-type-link')
           ->addClass('phabricator-core-menu-item')
           ->setName(pht('Log Out'))
           ->setHref('/logout/')
@@ -221,7 +221,7 @@ final class PhabricatorMainMenuView extends AphrontView {
 
   private function renderPhabricatorSearchMenu() {
 
-    $view = new PhabricatorMenuView();
+    $view = new PHUIListView();
     $view->addClass('phabricator-dark-menu');
     $view->addClass('phabricator-search-menu');
 

src/view/phui/PHUIDocumentView.php

@@ -3,12 +3,44 @@
 final class PHUIDocumentView extends AphrontTagView {
 
   private $offset;
+  private $header;
+  private $sidenav;
+  private $topnav;
+  private $crumbs;
+  private $bookname;
+  private $bookdescription;
 
   public function setOffset($offset) {
     $this->offset = $offset;
     return $this;
   }
 
+  public function setHeader(PhabricatorHeaderView $header) {
+    $this->header = $header;
+    return $this;
+  }
+
+  public function setSideNav(PHUIListView $list) {
+    $this->sidenav = $list;
+    return $this;
+  }
+
+  public function setTopNav(PHUIListView $list) {
+    $this->topnav = $list;
+    return $this;
+  }
+
+  public function setCrumbs(PHUIListView $list) {
+    $this->crumbs  = $list;
+    return $this;
+  }
+
+  public function setBook($name, $description) {
+    $this->bookname = $name;
+    $this->bookdescription = $description;
+    return $this;
+  }
+
   public function getTagAttributes() {
     $classes = array();
 
@@ -24,17 +56,94 @@ final class PHUIDocumentView extends AphrontTagView {
   public function getTagContent() {
     require_celerity_resource('phui-document-view-css');
 
-    return phutil_tag(
-      'div',
-      array(
-        'class' => 'phui-document-view',
-      ),
-      phutil_tag(
+    $classes = array();
+    $classes[] = 'phui-document-view';
+    if ($this->offset) {
+      $classes[] = 'phui-offset-view';
+    }
+    if ($this->sidenav) {
+      $classes[] = 'phui-sidenav-view';
+    }
+
+    $sidenav = null;
+    if ($this->sidenav) {
+      $sidenav = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-document-sidenav'
+        ),
+        $this->sidenav);
+    }
+
+    $book = null;
+    if ($this->bookname) {
+      $book = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-document-bookname grouped'
+        ),
+        array(
+          phutil_tag(
+            'span',
+            array('class' => 'bookname'),
+            $this->bookname),
+          phutil_tag(
+            'span',
+            array('class' => 'bookdescription'),
+          $this->bookdescription)));
+    }
+
+    $topnav = null;
+    if ($this->topnav) {
+      $topnav = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-document-topnav'
+        ),
+        $this->topnav);
+    }
+
+    $crumbs = null;
+    if ($this->crumbs) {
+      $crumbs = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-document-crumbs'
+        ),
+        $this->bookName);
+    }
+
+    $content_inner = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-document-inner',
+        ),
+        array(
+          $book,
+          $this->header,
+          $topnav,
+          $this->renderChildren(),
+          $crumbs
+        ));
+
+    $content = phutil_tag(
         'div',
         array(
           'class' => 'phui-document-content',
         ),
-        $this->renderChildren()));
+        array(
+          $sidenav,
+          $content_inner
+        ));
+
+    $view = phutil_tag(
+      'div',
+      array(
+        'class' => implode(' ', $classes),
+      ),
+      $content);
+
+    return $view;
   }
 
 }

src/view/phui/PHUIListItemView.php

@@ -1,12 +1,14 @@
 <?php
 
-final class PhabricatorMenuItemView extends AphrontTagView {
+final class PHUIListItemView extends AphrontTagView {
 
   const TYPE_LINK     = 'type-link';
   const TYPE_SPACER   = 'type-spacer';
   const TYPE_LABEL    = 'type-label';
   const TYPE_BUTTON   = 'type-button';
   const TYPE_CUSTOM   = 'type-custom';
+  const TYPE_DIVIDER  = 'type-divider';
+  const TYPE_ICON     = 'type-icon';
 
   private $name;
   private $href;
@@ -15,6 +17,7 @@ final class PhabricatorMenuItemView extends AphrontTagView {
   private $key;
   private $icon;
   private $selected;
+  private $containerAttrs;
 
   public function setProperty($property) {
     $this->property = $property;
@@ -88,18 +91,34 @@ final class PhabricatorMenuItemView extends AphrontTagView {
     return $this->isExternal;
   }
 
+  // Maybe should be add ?
+  public function setContainerAttrs($attrs) {
+    $this->containerAttrs = $attrs;
+    return $this;
+  }
+
   protected function getTagName() {
     return $this->href ? 'a' : 'div';
   }
 
+  protected function renderTagContainer($tag) {
+    $classes = array(
+      'phui-list-item-view',
+      'phui-list-item-'.$this->type,
+      $this->icon ? 'phui-list-item-has-icon' : null,
+      $this->selected ? 'phui-list-item-selected' : null
+    );
+
+    // This is derptastical
+    $this->containerAttrs['class'] = implode(' ', array_filter($classes));
+
+    return phutil_tag('li', $this->containerAttrs, $tag);
+  }
+
   protected function getTagAttributes() {
     return array(
-      'class' => array(
-        'phabricator-menu-item-view',
-        'phabricator-menu-item-'.$this->type,
-      ),
-      'href' => $this->href,
-    );
+      'class' => $this->href ? 'phui-list-item-href' : '',
+      'href' => $this->href);
   }
 
   protected function getTagContent() {
@@ -115,7 +134,7 @@ final class PhabricatorMenuItemView extends AphrontTagView {
       $name = phutil_tag(
         'span',
         array(
-          'class' => 'phabricator-menu-item-name',
+          'class' => 'phui-list-item-name',
         ),
         array(
           $this->name,
@@ -125,7 +144,7 @@ final class PhabricatorMenuItemView extends AphrontTagView {
 
     if ($this->icon) {
       $icon = id(new PHUIIconView())
-        ->addClass('phabricator-menu-item-icon')
+        ->addClass('phui-list-item-icon')
         ->setSpriteSheet(PHUIIconView::SPRITE_ICONS)
         ->setSpriteIcon($this->icon);
     }

src/view/phui/PHUIListView.php

@@ -1,6 +1,6 @@
 <?php
 
-final class PhabricatorMenuView extends AphrontTagView {
+final class PHUIListView extends AphrontTagView {
 
   private $items = array();
 
@@ -9,8 +9,8 @@ final class PhabricatorMenuView extends AphrontTagView {
   }
 
   public function newLabel($name, $key = null) {
-    $item = id(new PhabricatorMenuItemView())
-      ->setType(PhabricatorMenuItemView::TYPE_LABEL)
+    $item = id(new PHUIListItemView())
+      ->setType(PHUIListItemView::TYPE_LABEL)
       ->setName($name);
 
     if ($key !== null) {
@@ -23,8 +23,8 @@ final class PhabricatorMenuView extends AphrontTagView {
   }
 
   public function newLink($name, $href, $key = null) {
-    $item = id(new PhabricatorMenuItemView())
-      ->setType(PhabricatorMenuItemView::TYPE_LINK)
+    $item = id(new PHUIListItemView())
+      ->setType(PHUIListItemView::TYPE_LINK)
       ->setName($name)
       ->setHref($href);
 
@@ -38,8 +38,8 @@ final class PhabricatorMenuView extends AphrontTagView {
   }
 
   public function newButton($name, $href) {
-    $item = id(new PhabricatorMenuItemView())
-      ->setType(PhabricatorMenuItemView::TYPE_BUTTON)
+    $item = id(new PHUIListItemView())
+      ->setType(PHUIListItemView::TYPE_BUTTON)
       ->setName($name)
       ->setHref($href);
 
@@ -48,11 +48,11 @@ final class PhabricatorMenuView extends AphrontTagView {
     return $item;
   }
 
-  public function addMenuItem(PhabricatorMenuItemView $item) {
+  public function addMenuItem(PHUIListItemView $item) {
     return $this->addMenuItemAfter(null, $item);
   }
 
-  public function addMenuItemAfter($key, PhabricatorMenuItemView $item) {
+  public function addMenuItemAfter($key, PHUIListItemView $item) {
     if ($key === null) {
       $this->items[] = $item;
       return $this;
@@ -75,7 +75,7 @@ final class PhabricatorMenuView extends AphrontTagView {
     return $this;
   }
 
-  public function addMenuItemBefore($key, PhabricatorMenuItemView $item) {
+  public function addMenuItemBefore($key, PHUIListItemView $item) {
     if ($key === null) {
       array_unshift($this->items, $item);
       return $this;
@@ -95,11 +95,11 @@ final class PhabricatorMenuView extends AphrontTagView {
     return $this;
   }
 
-  public function addMenuItemToLabel($key, PhabricatorMenuItemView $item) {
+  public function addMenuItemToLabel($key, PHUIListItemView $item) {
     $this->requireKey($key);
 
     $other = $this->getItem($key);
-    if ($other->getType() != PhabricatorMenuItemView::TYPE_LABEL) {
+    if ($other->getType() != PHUIListItemView::TYPE_LABEL) {
       throw new Exception(pht("Menu item '%s' is not a label!", $key));
     }
 
@@ -111,7 +111,7 @@ final class PhabricatorMenuView extends AphrontTagView {
           $seen = true;
         }
       } else {
-        if ($other->getType() == PhabricatorMenuItemView::TYPE_LABEL) {
+        if ($other->getType() == PHUIListItemView::TYPE_LABEL) {
           break;
         }
       }
@@ -161,9 +161,13 @@ final class PhabricatorMenuView extends AphrontTagView {
     }
   }
 
+  public function getTagName() {
+    return 'ul';
+  }
+
   protected function getTagAttributes() {
     return array(
-      'class' => 'phabricator-menu-view',
+      'class' => 'phui-list-view',
     );
   }
 

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

@@ -274,31 +274,24 @@
 */
 
 .device .phabricator-dark-menu,
-.device .phabricator-dark-menu a.phabricator-menu-item-type-link {
+.device .phabricator-dark-menu a.phui-list-item-href {
   color: #fff;
-
 }
 
-.device .phabricator-dark-menu .phabricator-menu-item-type-label {
+.device .phabricator-dark-menu .phui-list-item-type-label {
   text-transform: uppercase;
   font-size: 12px;
   background-color: #151719;
-  padding: 0 0 0 12px;
-  height: 25px;
+  padding: 5px 0;
+  display: block;
   font-weight: bold;
 }
 
-.device .phabricator-dark-menu .phabricator-menu-item-type-label
-  .phabricator-menu-item-name {
-  display: block;
-  padding: 6px 0 0;
-}
-
-.device .phabricator-dark-menu .phabricator-menu-item-type-link {
+.device .phabricator-dark-menu .phui-list-item-href {
   border-width: 1px 0;
   border-style: solid;
   border-color: #34373b transparent #282c2d;
-  background-image: url(/rsrc/image/texture/dark-menu.png);
+  background-image: url(/res/41ee673a/rsrc/image/texture/dark-menu.png);
   padding: 4px 0;
   display: block;
 }
@@ -328,15 +321,15 @@
   padding-top: 44px;
 }
 
-.device .phabricator-dark-menu .phabricator-menu-item-type-link {
+.device .phabricator-dark-menu .phui-list-item-type-link {
   font-size: 15px;
   min-height: 30px;
   line-height: 28px;
 }
 
-.device .phabricator-menu-item-type-link
-  .phabricator-core-menu-icon + .phabricator-menu-item-name {
-  margin-left: 36px;
+.device .phui-list-item-type-link
+  .phabricator-core-menu-icon + .phui-list-item-name {
+  margin-left: 30px;
 }
 
 .device-desktop .phabricator-application-menu {
@@ -346,22 +339,22 @@
   vertical-align: top;
 }
 
-.device-desktop .phabricator-application-menu a.phabricator-menu-item-view,
-.device-desktop .phabricator-application-menu .phabricator-menu-item-name {
+.device-desktop .phabricator-application-menu a.phui-list-item-view,
+.device-desktop .phabricator-application-menu .phui-list-item-name {
   display: none;
 }
 
 .device-desktop .phabricator-application-menu
-  a.phabricator-menu-item-view.phabricator-core-menu-item {
+  a.phui-list-item-view.phabricator-core-menu-item {
   display: block;
 }
 
 .device-desktop .phabricator-application-menu
-  a.phabricator-menu-item-view.phabricator-core-menu-item:hover {
+  a.phui-list-item-view.phabricator-core-menu-item:hover {
   background-color: #1e2225;
 }
 
-.device-desktop .phabricator-application-menu .phabricator-menu-item-view {
+.device-desktop .phabricator-application-menu .phui-list-item-view {
   display: block;
   float: left;
   position: relative;
@@ -401,10 +394,10 @@
 }
 
 .device .phabricator-application-menu,
-.device-desktop .phabricator-dark-menu .phabricator-menu-item-type-label {
+.device-desktop .phabricator-dark-menu .phui-list-item-type-label {
   display: none;
 }
 
-.phabricator-application-menu .phabricator-menu-item-name {
+.phabricator-application-menu .phui-list-item-name {
   padding-left: 12px;
 }

webroot/rsrc/css/core/spacing.css

@@ -3,129 +3,129 @@
  */
 
 .pl {
-  padding: 20px;
+  padding: 16px;
 }
 
 .pm {
-  padding: 10px;
+  padding: 8px;
 }
 
 .ps {
-  padding: 5px;
+  padding: 4px;
 }
 
 .ml {
-  margin: 20px;
+  margin: 16px;
 }
 
 .mm {
-  margin: 10px;
+  margin: 8px;
 }
 
 .ms {
-  margin: 5px;
+  margin: 4px;
 }
 
 /* left */
 
 .pll {
-  padding-left: 20px;
+  padding-left: 16px;
 }
 
 .pml {
-  padding-left: 10px
+  padding-left: 8px
 }
 
 .psl {
-  padding-left: 5px;
+  padding-left: 4px;
 }
 
 .mll {
-  margin-left: 20px;
+  margin-left: 16px;
 }
 
 .mml {
-  margin-left: 10px;
+  margin-left: 8px;
 }
 
 .msl {
-  margin-left: 5px;
+  margin-left: 4px;
 }
 
 /* Right */
 
 .plr {
-  padding-right: 20px;
+  padding-right: 16px;
 }
 
 .pmr {
-  padding-right: 10px;
+  padding-right: 8px;
 }
 
 .psr {
-  padding-right: 5px;
+  padding-right: 4px;
 }
 
 .mlr {
-  margin-right: 20px;
+  margin-right: 16px;
 }
 
 .mmr {
-  margin-right: 10px;
+  margin-right: 8px;
 }
 
 .msr {
-  margin-right: 5px;
+  margin-right: 4px;
 }
 
 /* Bottom */
 
 .plb {
-  padding-bottom: 20px;
+  padding-bottom: 16px;
 }
 
 .pmb {
-  padding-bottom: 10px;
+  padding-bottom: 8px;
 }
 
 .psb {
-  padding-bottom: 5px;
+  padding-bottom: 4px;
 }
 
 .mlb {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 .mmb {
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 
 .msb {
-  margin-bottom: 5px;
+  margin-bottom: 4px;
 }
 
 /* Top */
 
 .plt {
-  padding-top: 20px;
+  padding-top: 16px;
 }
 
 .pmt {
-  padding-top: 10px;
+  padding-top: 8px;
 }
 
 .pst {
-  padding-top: 5px;
+  padding-top: 4px;
 }
 
 .mlt {
-  margin-top: 20px;
+  margin-top: 16px;
 }
 
 .mmt {
-  margin-top: 10px;
+  margin-top: 8px;
 }
 
 .mst {
-  margin-top: 5px;
+  margin-top: 4px;
 }

webroot/rsrc/css/layout/phabricator-object-item-list-view.css

@@ -98,7 +98,7 @@
   box-shadow: inset 1px 0 1px 0px rgba(0, 0, 0, 0.07);
 }
 
-.phabricator-object-item-actions .phabricator-menu-item-view {
+.phabricator-object-item-actions .phui-list-item-view {
   float: right;
   height: 100%;
   width: 24px;
@@ -106,16 +106,23 @@
   position: relative;
 }
 
-.phabricator-object-item-actions .phabricator-menu-item-view +
-.phabricator-menu-item-view {
+.phabricator-object-item-actions .phui-list-item-view +
+.phui-list-item-view {
   border-right: 1px solid #d6d6e9;
 }
 
-.phabricator-object-item-actions .phabricator-menu-item-view:hover {
+.phabricator-object-item-actions .phui-list-item-href {
+  display: inline-block;
+  position: relative;
+  width: 24px;
+  height: 100%;
+}
+
+.phabricator-object-item-actions .phui-list-item-href:hover {
   background: #e9e9f9;
 }
 
-.phabricator-object-item-actions .phabricator-menu-item-icon {
+.phabricator-object-item-actions .phui-list-item-icon {
   width: 14px;
   height: 14px;
   position: absolute;
@@ -125,7 +132,7 @@
   left: 5px;
 }
 
-.phabricator-object-item-actions .phabricator-menu-item-name {
+.phabricator-object-item-actions .phui-list-item-name {
   display: none;
 }
 

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

@@ -2,27 +2,28 @@
  * @provides phabricator-side-menu-view-css
  */
 
-.phabricator-side-menu .phabricator-menu-item-view {
+.phabricator-side-menu .phui-list-item-view {
   display: block;
   white-space: nowrap;
   text-decoration: none;
   font-size: 13px;
 }
 
-.phabricator-side-menu .phabricator-menu-item-type-link {
+.phabricator-side-menu .phui-list-item-href {
+  display: block;
   padding: 6px 8px 6px 24px;
   color: #e1e2e5;
   text-shadow: rgba(0, 0, 0, 1) 0px 1px 1px;
 }
 
-.phabricator-side-menu .phabricator-menu-item-selected,
-.device-desktop .phabricator-side-menu
- .phabricator-menu-item-selected.phabricator-menu-item-type-link:hover {
+.phabricator-side-menu .phui-list-item-selected,
+.device-desktop .phui-side-menu
+ .phui-list-item-selected.phui-list-item-href:hover {
   background-color: #305c85;
   color: #fff;
 }
 
-.phabricator-side-menu .phabricator-menu-item-type-label {
+.phabricator-side-menu .phui-list-item-type-label {
   padding: 6px 8px 4px 12px;
   color: #f7f7f7;
   text-transform: uppercase;
@@ -32,8 +33,8 @@
   background-color: #000;
 }
 
-.phabricator-dark-menu .phabricator-menu-item-type-button,
-.phabricator-side-menu .phabricator-menu-item-type-button {
+.phabricator-dark-menu .phui-list-item-type-button,
+.phabricator-side-menu .phui-list-item-type-button {
   width: 50%;
   padding: 5px 8px;
   display: block;
@@ -47,11 +48,11 @@
   text-align: center;
 }
 
-.phabricator-side-menu .phabricator-menu-item-type-button:hover {
+.phabricator-side-menu .phui-list-item-type-button:hover {
   background-color: #1e2225;
 }
 
-.device-desktop .phabricator-side-menu a.phabricator-menu-item-type-link:hover {
+.device-desktop .phabricator-side-menu a.phui-list-item-href:hover {
   text-decoration: none;
   background-color: #1e2225;
 }

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

@@ -32,13 +32,13 @@
  border-radius: 3px;
 }
 
-.phabricator-workpanel-view .phabricator-menu-item-icon {
+.phabricator-workpanel-view .phui-list-item-icon {
   height: 12px;
   width: 12px;
   display: inline-block;
 }
 
-.phabricator-workpanel-view .phabricator-menu-item-name {
+.phabricator-workpanel-view .phui-list-item-name {
   padding-left: 5px;
   display: inline-block;
 }

webroot/rsrc/css/phui/phui-document.css

@@ -3,16 +3,68 @@
  */
 
 .phui-document-view {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
+  position: relative;
 }
 
 .device-desktop .phui-document-view {
-  position: relative;
   border-left: 1px solid #e7e7e7;
   border-right: 1px solid #e7e7e7;
   border-bottom: 1px solid #c0c5d1;
+  max-width: 960px;
+  margin: 16px auto;
+}
+
+.device-desktop .phui-document-view.phui-offset-view {
   max-width: 800px;
-  margin: 20px auto;
+}
+
+.phui-document-sidenav {
+  position:absolute;
+  width: 182px;
+  text-overflow: ellipsis;
+  padding: 6px 8px 8px 8px;
+  top: 0;
+  right: 0;
+}
+
+.phui-sidenav-view .phui-document-inner {
+  margin-right: 200px;
+  border-right: 1px solid #e7e7e7;
+  background: #fff;
+}
+
+.phui-document-bookname {
+  padding: 8px 16px;
+  color: #9ca5b5;
+}
+
+.phui-document-bookname .bookname {
+  font-size: 14px;
+  font-weight: bold;
+  float: left;
+}
+
+.phui-document-bookname .bookdescription {
+  font-size: 14px;
+  float: right;
+}
+
+.phui-document-content .phabricator-header-shell {
+  background-color: #f6f7f8;
+  border-top: 1px solid #e7e7e7;
+  border-bottom: 1px solid #e7e7e7;
+}
+
+.phui-document-content .phabricator-header-view {
+  padding: 16px;
+}
+
+.phui-document-content .phabricator-property-list-view {
+  border: none;
+  box-shadow: none;
+  margin: 0;
+  background-color: #f6f7f8;
 }
 
 .phui-document-content {
@@ -37,16 +89,12 @@
   background: #f7f7f7;
 }
 
-.phui-document-content .phabricator-header-shell {
-  border-top: none;
-}
-
 .phui-document-content .phabricator-remarkup {
-  padding: 20px;
+  padding: 16px;
 }
 
 .device-phone .phui-document-content .phabricator-remarkup {
-  padding: 10px;
+  padding: 8px;
 }
 
 .device-desktop .phui-document-content .phabricator-action-list-view {
@@ -70,9 +118,93 @@
 
 .phui-document-content .phabricator-remarkup .remarkup-code-block {
   clear: both;
-  margin: 20px 0;
+  margin: 16px 0;
 }
 
 .device-desktop .phui-document-offset {
   padding-right: 160px;
 }
+
+
+/* Sidenav */
+.phui-document-sidenav .phui-list-item-view {
+  line-height: 20px;
+}
+
+.phui-document-sidenav .phui-list-item-type-link {
+  margin-left: 8px;
+}
+
+.phui-document-sidenav .phui-list-item-type-label .phui-list-item-name {
+  font-size: 12px;
+  font-weight: bold;
+  color: #9ca5b5;
+  text-transform: uppercase;
+}
+
+.phui-document-sidenav .phui-list-item-type-divider {
+  margin: 8px 0;
+  border-bottom: 1px solid #e7e7e7;
+}
+
+.phui-document-sidenav .phui-list-item-icon {
+  height: 14px;
+  width: 14px;
+  display: inline-block;
+  position: absolute;
+  top: 2px;
+}
+
+.phui-document-sidenav .phui-list-item-icon + .phui-list-item-name {
+  padding-left: 20px;
+}
+
+.phui-document-sidenav .phui-list-item-has-icon {
+  margin: 0;
+  position: relative;
+}
+
+.phui-document-sidenav .phui-list-item-has-icon .phui-list-item-href {
+  color: #000;
+}
+
+/* Topnav */
+.phui-document-topnav .phui-list-view {
+  list-style: none;
+  overflow: hidden;
+  border-bottom: 1px solid #e7e7e7;
+}
+
+.phui-document-topnav .phui-list-view > li {
+  list-style: none;
+  float: left;
+  display: block;
+  border-right: 1px solid #e7e7e7;
+}
+
+.phui-document-topnav .phui-list-view > li > * {
+  display: block;
+}
+
+.phui-document-topnav .phui-list-item-href {
+ color: #9ca5b5;
+ padding: 8px 16px;
+ font-size: 12px;
+}
+
+.phui-document-topnav .phui-list-item-selected .phui-list-item-href {
+  background: #f6f7f8;
+  color: #555;
+}
+
+.phui-document-topnav .phui-list-item-href:hover {
+  background: #e8e9ec;
+  color: #555;
+  text-decoration: none;
+}
+
+.phui-document-topnav .phui-list-item-icon {
+  height: 14px;
+  width: 14px;
+  display: block;
+}

webroot/rsrc/css/phui/phui-list.css

@@ -0,0 +1,16 @@
+/**
+ * @provides phui-list-view-css
+ */
+
+.phui-list-item {
+  line-height: 16px;
+}
+
+.phui-list-item-header,
+.phui-list-item-header a {
+  color: #9ca5b5;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+  text-shadow: 0 1px 0 rgba(255,255,255,0.90);
+}

webroot/rsrc/css/sprite-gradient.css

@@ -3,7 +3,7 @@
  * @generated
  */
 
-.sprite-gradient, .phabricator-dark-menu .phabricator-menu-item-type-label, .phabricator-side-menu .phabricator-menu-item-type-label {
+.sprite-gradient, .phabricator-dark-menu .phui-list-item-type-label, .phabricator-side-menu .phui-list-item-type-label {
   background-image: url(/rsrc/image/sprite-gradient.png);
   background-repeat: repeat-x;
 }
@@ -23,7 +23,7 @@
   background-position: 0px -154px;
 }
 
-.gradient-dark-menu-label, .phabricator-dark-menu .phabricator-menu-item-type-label {
+.gradient-dark-menu-label, .phabricator-dark-menu .phui-list-item-type-label {
   background-position: 0px -25px;
 }
 
@@ -35,7 +35,7 @@
   background-position: 0px -296px;
 }
 
-.gradient-menu-label, .phabricator-side-menu .phabricator-menu-item-type-label {
+.gradient-menu-label, .phabricator-side-menu .phui-list-item-type-label {
   background-position: 0px 0px;
 }