Solidify PHUITwoColumnView as a page layout

Summary:
Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications:

 - Ponder
 - Paste
 - Slowvote
 - Countdown
 - Projects
 - Profile
 - Passphrase

This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages.

Test Plan:
Test each of the applications on mobile, tablet, and desktop breakpoints.

{F1135705}

{F1135706}

{F1135707}

{F1135708}

{F1135709}

{F1135710}

{F1135711}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

Author: chadlittle

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '76a3afdf',
+    'core.pkg.css' => 'e50c063a',
     'core.pkg.js' => '7d8faf57',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -52,7 +52,7 @@
     'rsrc/css/application/conpherence/update.css' => 'faf6be09',
     'rsrc/css/application/conpherence/widget-pane.css' => '775eaaba',
     'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
-    'rsrc/css/application/countdown/timer.css' => 'e7544472',
+    'rsrc/css/application/countdown/timer.css' => '96696f21',
     'rsrc/css/application/daemon/bulk-job.css' => 'df9c1d4a',
     'rsrc/css/application/dashboard/dashboard.css' => 'eb458607',
     'rsrc/css/application/diff/inline-comment-summary.css' => '51efda3a',
@@ -79,7 +79,7 @@
     'rsrc/css/application/maniphest/task-summary.css' => '11cc5344',
     'rsrc/css/application/objectselector/object-selector.css' => '85ee8ce6',
     'rsrc/css/application/owners/owners-path-editor.css' => '2f00933b',
-    'rsrc/css/application/paste/paste.css' => 'a5157c48',
+    'rsrc/css/application/paste/paste.css' => '1898e534',
     'rsrc/css/application/people/people-profile.css' => '2473d929',
     'rsrc/css/application/phame/phame.css' => '737792d6',
     'rsrc/css/application/pholio/pholio-edit.css' => '3ad9d1ee',
@@ -92,18 +92,18 @@
     'rsrc/css/application/policy/policy-edit.css' => '815c66f7',
     'rsrc/css/application/policy/policy-transaction-detail.css' => '82100a43',
     'rsrc/css/application/policy/policy.css' => '957ea14c',
-    'rsrc/css/application/ponder/ponder-view.css' => '212495e0',
+    'rsrc/css/application/ponder/ponder-view.css' => '4e321d68',
     'rsrc/css/application/project/project-card-view.css' => '9418c97d',
-    'rsrc/css/application/project/project-view.css' => '298b7c5b',
+    'rsrc/css/application/project/project-view.css' => '9ce99f21',
     'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733',
     'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5',
     'rsrc/css/application/releeph/releeph-request-differential-create-dialog.css' => '8d8b92cd',
     'rsrc/css/application/releeph/releeph-request-typeahead.css' => '667a48ae',
     'rsrc/css/application/search/search-results.css' => '7dea472c',
-    'rsrc/css/application/slowvote/slowvote.css' => 'da0afb1b',
+    'rsrc/css/application/slowvote/slowvote.css' => 'a94b7230',
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
-    'rsrc/css/core/core.css' => '5b3563c8',
+    'rsrc/css/core/core.css' => 'd0801452',
     'rsrc/css/core/remarkup.css' => 'fc228f08',
     'rsrc/css/core/syntax.css' => '9fd11da8',
     'rsrc/css/core/z-index.css' => '5b6fcf3f',
@@ -123,8 +123,8 @@
     'rsrc/css/phui/phui-action-panel.css' => '91c7b835',
     'rsrc/css/phui/phui-badge.css' => 'f25c3476',
     'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
-    'rsrc/css/phui/phui-box.css' => 'dd1294d3',
-    'rsrc/css/phui/phui-button.css' => 'edf464e9',
+    'rsrc/css/phui/phui-box.css' => '348bd872',
+    'rsrc/css/phui/phui-button.css' => 'c096e4e9',
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
     'rsrc/css/phui/phui-crumbs-view.css' => '79d536e5',
     'rsrc/css/phui/phui-document-pro.css' => '92d5b648',
@@ -134,15 +134,16 @@
     'rsrc/css/phui/phui-fontkit.css' => '9cda225e',
     'rsrc/css/phui/phui-form-view.css' => '4a1a0f5e',
     'rsrc/css/phui/phui-form.css' => 'aac1d51d',
-    'rsrc/css/phui/phui-header-view.css' => 'a6d7b20d',
+    'rsrc/css/phui/phui-head-thing.css' => '11731da0',
+    'rsrc/css/phui/phui-header-view.css' => 'b541cc78',
     'rsrc/css/phui/phui-hovercard.css' => 'de1a2119',
     'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad',
     'rsrc/css/phui/phui-icon.css' => '3f33ab57',
     'rsrc/css/phui/phui-image-mask.css' => 'a8498f9c',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => '6d7c3509',
     'rsrc/css/phui/phui-list.css' => '9da2aa00',
-    'rsrc/css/phui/phui-object-box.css' => '407eaf5a',
+    'rsrc/css/phui/phui-object-box.css' => '91628842',
     'rsrc/css/phui/phui-object-item-list-view.css' => '18b2ce8e',
     'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
@@ -154,7 +155,7 @@
     'rsrc/css/phui/phui-status.css' => '888cedb8',
     'rsrc/css/phui/phui-tag-view.css' => '9d5d4400',
     'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
-    'rsrc/css/phui/phui-two-column-view.css' => 'a317616a',
+    'rsrc/css/phui/phui-two-column-view.css' => '7c5d0741',
     'rsrc/css/phui/workboards/phui-workboard-color.css' => 'ac6fe6a7',
     'rsrc/css/phui/workboards/phui-workboard.css' => 'e6d89647',
     'rsrc/css/phui/workboards/phui-workcard.css' => '3646fb96',
@@ -740,16 +741,16 @@
     'multirow-row-manager' => 'b5d57730',
     'owners-path-editor' => 'aa1733d0',
     'owners-path-editor-css' => '2f00933b',
-    'paste-css' => 'a5157c48',
+    'paste-css' => '1898e534',
     'path-typeahead' => 'f7fc67ec',
     'people-profile-css' => '2473d929',
     'phabricator-action-list-view-css' => 'c5eba19d',
     'phabricator-application-launch-view-css' => '95351601',
     'phabricator-busy' => '59a7976a',
     'phabricator-chatlog-css' => 'd295b020',
     'phabricator-content-source-view-css' => '4b8b05d4',
-    'phabricator-core-css' => '5b3563c8',
-    'phabricator-countdown-css' => 'e7544472',
+    'phabricator-core-css' => 'd0801452',
+    'phabricator-countdown-css' => '96696f21',
     'phabricator-dashboard-css' => 'eb458607',
     'phabricator-drag-and-drop-file-upload' => '81f182b5',
     'phabricator-draggable-list' => '5a13c79f',
@@ -772,7 +773,7 @@
     'phabricator-search-results-css' => '7dea472c',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-side-menu-view-css' => '3a3d9f41',
-    'phabricator-slowvote-css' => 'da0afb1b',
+    'phabricator-slowvote-css' => 'a94b7230',
     'phabricator-source-code-view-css' => 'cbeef983',
     'phabricator-standard-page-view' => 'e709f6d0',
     'phabricator-textareautils' => '5813016a',
@@ -802,8 +803,8 @@
     'phui-action-panel-css' => '91c7b835',
     'phui-badge-view-css' => 'f25c3476',
     'phui-big-info-view-css' => 'bd903741',
-    'phui-box-css' => 'dd1294d3',
-    'phui-button-css' => 'edf464e9',
+    'phui-box-css' => '348bd872',
+    'phui-button-css' => 'c096e4e9',
     'phui-calendar-css' => 'ccabe893',
     'phui-calendar-day-css' => 'd1cf6f93',
     'phui-calendar-list-css' => 'c1c7f338',
@@ -818,7 +819,8 @@
     'phui-fontkit-css' => '9cda225e',
     'phui-form-css' => 'aac1d51d',
     'phui-form-view-css' => '4a1a0f5e',
-    'phui-header-view-css' => 'a6d7b20d',
+    'phui-head-thing-view-css' => '11731da0',
+    'phui-header-view-css' => 'b541cc78',
     'phui-hovercard' => '1bd28176',
     'phui-hovercard-view-css' => 'de1a2119',
     'phui-icon-set-selector-css' => '1ab67aad',
@@ -828,7 +830,7 @@
     'phui-info-view-css' => '6d7c3509',
     'phui-inline-comment-view-css' => '0fdb3667',
     'phui-list-view-css' => '9da2aa00',
-    'phui-object-box-css' => '407eaf5a',
+    'phui-object-box-css' => '91628842',
     'phui-object-item-list-view-css' => '18b2ce8e',
     'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
@@ -841,7 +843,7 @@
     'phui-tag-view-css' => '9d5d4400',
     'phui-theme-css' => '027ba77e',
     'phui-timeline-view-css' => '2efceff8',
-    'phui-two-column-view-css' => 'a317616a',
+    'phui-two-column-view-css' => '7c5d0741',
     'phui-workboard-color-css' => 'ac6fe6a7',
     'phui-workboard-view-css' => 'e6d89647',
     'phui-workcard-view-css' => '3646fb96',
@@ -855,9 +857,9 @@
     'policy-css' => '957ea14c',
     'policy-edit-css' => '815c66f7',
     'policy-transaction-detail-css' => '82100a43',
-    'ponder-view-css' => '212495e0',
+    'ponder-view-css' => '4e321d68',
     'project-card-view-css' => '9418c97d',
-    'project-view-css' => '298b7c5b',
+    'project-view-css' => '9ce99f21',
     'releeph-core' => '9b3c5733',
     'releeph-preview-branch' => 'b7a6f4a5',
     'releeph-request-differential-create-dialog' => '8d8b92cd',

src/__phutil_library_map__.php

@@ -1524,6 +1524,7 @@
     'PHUIHandleListView' => 'applications/phid/view/PHUIHandleListView.php',
     'PHUIHandleTagListView' => 'applications/phid/view/PHUIHandleTagListView.php',
     'PHUIHandleView' => 'applications/phid/view/PHUIHandleView.php',
+    'PHUIHeadThingView' => 'view/phui/PHUIHeadThingView.php',
     'PHUIHeaderView' => 'view/phui/PHUIHeaderView.php',
     'PHUIHovercardUIExample' => 'applications/uiexample/examples/PHUIHovercardUIExample.php',
     'PHUIHovercardView' => 'view/phui/PHUIHovercardView.php',
@@ -5758,6 +5759,7 @@
     'PHUIHandleListView' => 'AphrontTagView',
     'PHUIHandleTagListView' => 'AphrontTagView',
     'PHUIHandleView' => 'AphrontView',
+    'PHUIHeadThingView' => 'AphrontTagView',
     'PHUIHeaderView' => 'AphrontTagView',
     'PHUIHovercardUIExample' => 'PhabricatorUIExample',
     'PHUIHovercardView' => 'AphrontTagView',
@@ -6380,7 +6382,7 @@
     'PhabricatorCountdownTransaction' => 'PhabricatorApplicationTransaction',
     'PhabricatorCountdownTransactionComment' => 'PhabricatorApplicationTransactionComment',
     'PhabricatorCountdownTransactionQuery' => 'PhabricatorApplicationTransactionQuery',
-    'PhabricatorCountdownView' => 'AphrontTagView',
+    'PhabricatorCountdownView' => 'AphrontView',
     'PhabricatorCountdownViewController' => 'PhabricatorCountdownController',
     'PhabricatorCredentialsUsedByObjectEdgeType' => 'PhabricatorEdgeType',
     'PhabricatorCursorPagedPolicyAwareQuery' => 'PhabricatorPolicyAwareQuery',

src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php

@@ -192,10 +192,7 @@ public function buildVariables() {
       'sh-disabledbackground'   => '#f3f3f3',
 
       // Background color for "most" themes.
-      'page.background' => '#f1f1f4',
-
-      // Background color for "dark" themes.
-      'page.background.dark' => '#ebecee',
+      'page.background' => '#f8f8fb',
 
       'menu.profile.text' => 'rgba(255,255,255,.8)',
       'menu.profile.text.selected' => 'rgba(255,255,255,1)',

src/applications/countdown/controller/PhabricatorCountdownViewController.php

@@ -21,15 +21,15 @@ public function handleRequest(AphrontRequest $request) {
 
     $countdown_view = id(new PhabricatorCountdownView())
       ->setUser($viewer)
-      ->setCountdown($countdown)
-      ->setHeadless(true);
+      ->setCountdown($countdown);
 
     $id = $countdown->getID();
     $title = $countdown->getTitle();
 
     $crumbs = $this
       ->buildApplicationCrumbs()
-      ->addTextCrumb("C{$id}");
+      ->addTextCrumb("C{$id}")
+      ->setBorder(true);
 
     $epoch = $countdown->getEpoch();
     if ($epoch >= PhabricatorTime::getNow()) {
@@ -49,19 +49,26 @@ public function handleRequest(AphrontRequest $request) {
       ->setStatus($icon, $color, $status);
 
     $actions = $this->buildActionListView($countdown);
-    $properties = $this->buildPropertyListView($countdown, $actions);
-
-    $object_box = id(new PHUIObjectBoxView())
-      ->setHeader($header)
-      ->addPropertyList($properties);
+    $properties = $this->buildPropertyListView($countdown);
+    $subheader = $this->buildSubheaderView($countdown);
 
     $timeline = $this->buildTransactionTimeline(
       $countdown,
       new PhabricatorCountdownTransactionQuery());
-
     $add_comment = $this->buildCommentForm($countdown);
 
+    $content = array(
+      $countdown_view,
+      $timeline,
+      $add_comment,
+    );
 
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setSubheader($subheader)
+      ->setMainColumn($content)
+      ->setPropertyList($properties)
+      ->setActionList($actions);
 
     return $this->newPage()
       ->setTitle($title)
@@ -72,10 +79,7 @@ public function handleRequest(AphrontRequest $request) {
         ))
       ->appendChild(
         array(
-          $object_box,
-          $countdown_view,
-          $timeline,
-          $add_comment,
+          $view,
         ));
   }
 
@@ -114,32 +118,38 @@ private function buildActionListView(PhabricatorCountdown $countdown) {
   }
 
   private function buildPropertyListView(
-    PhabricatorCountdown $countdown,
-    PhabricatorActionListView $actions) {
-
+    PhabricatorCountdown $countdown) {
     $viewer = $this->getViewer();
-
     $view = id(new PHUIPropertyListView())
       ->setUser($viewer)
-      ->setObject($countdown)
-      ->setActionList($actions);
+      ->setObject($countdown);
+    $view->invokeWillRenderEvent();
+    return $view;
+  }
 
-    $view->addProperty(
-      pht('Author'),
-      $viewer->renderHandle($countdown->getAuthorPHID()));
+  private function buildSubheaderView(
+    PhabricatorCountdown $countdown) {
+    $viewer = $this->getViewer();
 
-        $view->invokeWillRenderEvent();
+    $author = $viewer->renderHandle($countdown->getAuthorPHID())->render();
+    $date = phabricator_datetime($countdown->getDateCreated(), $viewer);
+    $author = phutil_tag('strong', array(), $author);
 
-    $description = $countdown->getDescription();
-    if (strlen($description)) {
-      $description = new PHUIRemarkupView($viewer, $description);
-      $view->addSectionHeader(
-        pht('Description'),
-        PHUIPropertyListView::ICON_SUMMARY);
-      $view->addTextContent($description);
-    }
+    $person = id(new PhabricatorPeopleQuery())
+      ->setViewer($viewer)
+      ->withPHIDs(array($countdown->getAuthorPHID()))
+      ->needProfileImage(true)
+      ->executeOne();
 
-    return $view;
+    $image_uri = $person->getProfileImageURI();
+    $image_href = '/p/'.$person->getUsername();
+
+    $content = pht('Authored by %s on %s.', $author, $date);
+
+    return id(new PHUIHeadThingView())
+      ->setImage($image_uri)
+      ->setImageHref($image_href)
+      ->setContent($content);
   }
 
   private function buildCommentForm(PhabricatorCountdown $countdown) {