Make profile menu full-height

Summary:
Ref T10054. This makes the profile menu full-height. It uses two pieces of dark magic:

  - `calc()`, which allows you to do math in CSS.
  - The `vh` unit, which is CSS for "viewport height".

Apparently this kind of stuff just works now? CSS got good at some point?

Test Plan:
  - Page looks correct in Safari, Chrome, Firefox.
  - Checked `caniuse.com` for `vh` and `calc()`, saw they're supported?

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T10054

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'e9eca0fd',
+    'core.pkg.css' => '97da8581',
     'core.pkg.js' => '1f5f365a',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -143,7 +143,7 @@ return array(
     'rsrc/css/phui/phui-object-item-list-view.css' => '26c30d3f',
     'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
-    'rsrc/css/phui/phui-profile-menu.css' => '5a1644af',
+    'rsrc/css/phui/phui-profile-menu.css' => '213398e6',
     'rsrc/css/phui/phui-property-list-view.css' => '27b2849e',
     'rsrc/css/phui/phui-remarkup-preview.css' => '1a8f2591',
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
@@ -822,7 +822,7 @@ return array(
     'phui-object-item-list-view-css' => '26c30d3f',
     'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
-    'phui-profile-menu-css' => '5a1644af',
+    'phui-profile-menu-css' => '213398e6',
     'phui-property-list-view-css' => '27b2849e',
     'phui-remarkup-preview-css' => '1a8f2591',
     'phui-spacing-css' => '042804d6',

src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php

@@ -197,6 +197,8 @@ final class CelerityDefaultPostprocessor
       'menu.profile.icon' => '#ffffff',
       'menu.profile.icon.disabled' => '#b9bcc2',
 
+      'menu.main.height' => '44px',
+
     );
   }
 

src/view/layout/AphrontSideNavFilterView.php

@@ -29,11 +29,13 @@ final class AphrontSideNavFilterView extends AphrontView {
   private $menuID;
   private $iconNav;
   private $isProfileMenu;
+  private $footer = array();
 
   public function setMenuID($menu_id) {
     $this->menuID = $menu_id;
     return $this;
   }
+
   public function getMenuID() {
     return $this->menuID;
   }
@@ -187,6 +189,11 @@ final class AphrontSideNavFilterView extends AphrontView {
     return $this->selectedFilter;
   }
 
+  public function appendFooter($footer) {
+    $this->footer[] = $footer;
+    return $this;
+  }
+
   public function render() {
     if ($this->menu->getItems()) {
       if (!$this->baseURI) {
@@ -220,7 +227,7 @@ final class AphrontSideNavFilterView extends AphrontView {
 
     if ($this->getIsProfileMenu()) {
       require_celerity_resource('phui-profile-menu-css');
-      $nav_classes[] = 'phui-profile-menu';
+      // No class, we're going to put it on the shell instead.
     } else if ($this->iconNav) {
       $nav_classes[] = 'phabricator-icon-nav';
     } else {
@@ -301,7 +308,17 @@ final class AphrontSideNavFilterView extends AphrontView {
 
     $nav_classes = array_merge($nav_classes, $this->classes);
 
-    return phutil_tag(
+    $footer = $this->footer;
+
+    if ($this->getIsProfileMenu()) {
+      $internal_footer = $footer;
+      $external_footer = null;
+    } else {
+      $internal_footer = null;
+      $external_footer = $footer;
+    }
+
+    $menu = phutil_tag(
       'div',
       array(
         'class' => implode(' ', $nav_classes),
@@ -319,8 +336,27 @@ final class AphrontSideNavFilterView extends AphrontView {
           array(
             $crumbs,
             $this->renderChildren(),
+            $internal_footer,
           )),
       ));
+
+    if ($this->getIsProfileMenu()) {
+      $shell = phutil_tag(
+        'div',
+        array(
+          'class' => 'phui-navigation-shell phui-profile-menu',
+        ),
+        array(
+          $menu,
+        ));
+    } else {
+      $shell = array(
+        $menu,
+        $external_footer,
+      );
+    }
+
+    return $shell;
   }
 
 }

src/view/page/PhabricatorStandardPageView.php

@@ -478,6 +478,8 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView
 
     $body = parent::getBody();
 
+    $footer = $this->renderFooter();
+
     $nav = $this->getNavigation();
     if ($nav) {
       $crumbs = $this->getCrumbs();
@@ -485,18 +487,25 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView
         $nav->setCrumbs($crumbs);
       }
       $nav->appendChild($body);
-      $body = phutil_implode_html('', array($nav->render()));
+      $nav->appendFooter($footer);
+      $content = phutil_implode_html('', array($nav->render()));
     } else {
+      $contnet = array();
+
       $crumbs = $this->getCrumbs();
       if ($crumbs) {
-        $body = phutil_implode_html('', array($crumbs, $body));
+        $content[] = $crumbs;
       }
+
+      $content[] = $body;
+      $content[] = $footer;
+
+      $content = phutil_implode_html('', $content);
     }
 
     return array(
       ($console ? hsprintf('<darkconsole />') : null),
-      $body,
+      $content,
-      $this->renderFooter(),
     );
   }
 

webroot/rsrc/css/phui/phui-profile-menu.css

@@ -2,24 +2,34 @@
  * @provides phui-profile-menu-css
  */
 
+.device-desktop .phui-navigation-shell.phui-profile-menu {
+  display: table;
+  height: calc(100vh - {$menu.main.height});
+}
+
+.device-desktop .phui-profile-menu .phabricator-nav {
+  display: table-row;
+}
+
+.device-desktop .phui-profile-menu .phabricator-nav-local {
+  display: table-cell;
+  position: relative;
+  vertical-align: top;
+  width: 240px;
+  margin-top: 0;
+}
+
+.device-desktop .phui-profile-menu .phabricator-nav-content {
+  display: table-cell;
+  margin-left: 0;
+}
+
 .phui-profile-menu .phabricator-side-menu {
   background: {$menu.profile.background};
   box-shadow: inset -2px 0 2px rgba(0, 0, 0, 0.150);
   width: 240px;
 }
 
-.phui-profile-menu .phabricator-nav-local {
-  margin-top: 0;
-}
-
-.device-desktop .phui-profile-menu .phabricator-nav-content {
-  margin-left: 240px;
-}
-
-.device-desktop .phui-profile-menu + .phabricator-standard-page-footer {
-  margin-left: 256px;
-}
-
 .phui-profile-menu .phabricator-side-menu .phui-list-item-view {
   position: relative;
 }