Make the top nav non-fixed-position

Summary:
See some discussion in D1673.

  - There's a concrete (if minor) problem with this in Firefox with wrapping search.
  - People complain about how we're stealing all their pixels.
  - There isn't much of a functional purpose to it since all the operations are fairly rare.
  - This addresses the aesthetic purpose of the fixed-position nav (not making the side nav ugly) by making the side nav scroll up 44px and then stop.

Test Plan: Scrolled in desktop, tablet modes.

Reviewers: vrana

Reviewed By: vrana

CC: aran

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

src/__celerity_resource_map__.php

@@ -1032,7 +1032,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-device' =>
   array(
-    'uri' => '/res/7f09d952/rsrc/js/application/core/behavior-device.js',
+    'uri' => '/res/b6bd0c33/rsrc/js/application/core/behavior-device.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -1040,6 +1040,7 @@ celerity_register_resource_map(array(
       1 => 'javelin-stratcom',
       2 => 'javelin-dom',
       3 => 'javelin-vector',
+      4 => 'javelin-install',
     ),
     'disk' => '/rsrc/js/application/core/behavior-device.js',
   ),
@@ -1517,18 +1518,19 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-phabricator-nav' =>
   array(
-    'uri' => '/res/575be3cd/rsrc/js/application/core/behavior-phabricator-nav.js',
+    'uri' => '/res/dc349915/rsrc/js/application/core/behavior-phabricator-nav.js',
     'type' => 'js',
     'requires' =>
     array(
       0 => 'javelin-behavior',
-      1 => 'javelin-stratcom',
-      2 => 'javelin-dom',
-      3 => 'javelin-magical-init',
-      4 => 'javelin-vector',
-      5 => 'javelin-request',
-      6 => 'javelin-util',
-      7 => 'javelin-fx',
+      1 => 'javelin-behavior-device',
+      2 => 'javelin-stratcom',
+      3 => 'javelin-dom',
+      4 => 'javelin-magical-init',
+      5 => 'javelin-vector',
+      6 => 'javelin-request',
+      7 => 'javelin-util',
+      8 => 'javelin-fx',
     ),
     'disk' => '/rsrc/js/application/core/behavior-phabricator-nav.js',
   ),
@@ -2455,7 +2457,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-main-menu-view' =>
   array(
-    'uri' => '/res/bfd05b66/rsrc/css/application/base/main-menu-view.css',
+    'uri' => '/res/9fd2cece/rsrc/css/application/base/main-menu-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -2475,7 +2477,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-nav-view-css' =>
   array(
-    'uri' => '/res/075830ac/rsrc/css/aphront/phabricator-nav-view.css',
+    'uri' => '/res/289a0aed/rsrc/css/aphront/phabricator-nav-view.css',
     'type' => 'css',
     'requires' =>
     array(

src/view/page/PhabricatorStandardPageView.php

@@ -354,7 +354,6 @@ final class PhabricatorStandardPageView extends AphrontPageView {
           'class' => $classes,
         ),
         $header_chrome.
-        '<div class="phabricator-main-menu-spacer"></div>'.
         '<div class="phabricator-standard-page-body">'.
           ($console ? '<darkconsole />' : null).
           $developer_warning.

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

@@ -26,11 +26,6 @@
   box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
 }
 
-.device-desktop .phabricator-nav-app {
-  top: 43px;
-  padding-top: 2px;
-}
-
 .phabricator-nav-local {
   width: 179px;
   background: #ececec;
@@ -47,7 +42,7 @@
 
 .phabricator-nav-drag {
   position: fixed;
-  top: 44px;
+  top: 0;
   left: 327px;
   width: 7px;
   bottom: 0;

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

@@ -24,24 +24,10 @@
 
 .device-desktop .phabricator-main-menu {
   text-align: right;
-  position: fixed;
   width: 100%;
   z-index: 6;
-  top: 0;
-  padding-right: 44px;
 }
 
-.phabricator-main-menu-spacer {
-  display: none;
-}
-
-.device-desktop .phabricator-main-menu-spacer {
-  height: 44px;
-  position: relative;
-  display: block;
-}
-
-
 /* - Main Menu Group -----------------------------------------------------------
 
   Container representing a single item on the main menu. For desktops these lay

webroot/rsrc/js/application/core/behavior-device.js

@@ -4,11 +4,19 @@
  *           javelin-stratcom
  *           javelin-dom
  *           javelin-vector
+ *           javelin-install
  */
 
-JX.behavior('device', function(config) {
+JX.install('Device', {
+  statics : {
+    _device : null,
+    getDevice : function() {
+      return JX.Device._device;
+    }
+  }
+});
 
-  var current;
+JX.behavior('device', function(config) {
 
   function onresize() {
     var v = JX.Vector.getViewport();
@@ -21,11 +29,11 @@ JX.behavior('device', function(config) {
       device = 'phone';
     }
 
-    if (device == current) {
+    if (device == JX.Device.getDevice()) {
       return;
     }
 
-    current = device;
+    JX.Device._device = device;
 
     var e = JX.$(config.id);
     JX.DOM.alterClass(e, 'device-phone', (device == 'phone'));

webroot/rsrc/js/application/core/behavior-phabricator-nav.js

@@ -1,6 +1,7 @@
 /**
  * @provides javelin-behavior-phabricator-nav
  * @requires javelin-behavior
+ *           javelin-behavior-device
  *           javelin-stratcom
  *           javelin-dom
  *           javelin-magical-init
@@ -211,13 +212,33 @@ JX.behavior('phabricator-nav', function(config) {
   }
 
 
+// - Scroll --------------------------------------------------------------------
+
+  // When the user scrolls down on the desktop, we move the application and
+  // local navs up until they hit the top of the page.
+
+  JX.Stratcom.listen(['scroll', 'resize'], null, function(e) {
+    if (JX.Device.getDevice() != 'desktop') {
+      return;
+    }
+
+    var y = Math.max(0, 44 - JX.Vector.getScroll().y);
+    app.style.top = y + 'px';
+    if (local) {
+      local.style.top = y + 'px';
+    }
+  });
+
+
 // - Navigation Reset ----------------------------------------------------------
 
   JX.Stratcom.listen('phabricator-device-change', null, function(event) {
     app.style.left = '';
+    app.style.top = '';
     if (local) {
       local.style.left = '';
       local.style.width = '';
+      local.style.top = '';
     }
     if (drag) {
       drag.style.left = '';