Fix various app nav issues

Summary:
  - Fix width, corresponding to wider sprites.
  - Sprite the "Audit" icon.
  - Mark the meta-application as device-ready.
  - Fix some collapse/expand bugs with the draggable local navs.
  - Add texture to local nav.
  - Darken the application nav to make it more cohesive with the main nav. I think this is an improvement?

Test Plan: See screenshots.

Reviewers: chad, btrahan

Reviewed By: btrahan

CC: aran, netfoxcity

Maniphest Tasks: T1569

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

scripts/celerity/generate_sprites.php

@@ -108,7 +108,7 @@ $app_template_full = id(new PhutilSprite())
   ->setSourceSize(60, 60);
 
 $app_template_mini = id(new PhutilSprite())
-  ->setSourceFile($srcroot.'/application_normal_1x.png')
+  ->setSourceFile($srcroot.'/menu_normal_1x.png')
   ->setSourceSize(30, 30);
 
 $app_source_map = array(
@@ -139,6 +139,7 @@ $app_map = array(
   'conduit'         => array(7, 30),
   'feed'            => array(3, 11),
   'paste'           => array(9, 2),
+  'audit'           => array(8, 19),
 );
 
 $xadj = -1;

src/__celerity_resource_map__.php

@@ -65,8 +65,8 @@ celerity_register_resource_map(array(
   ),
   '/rsrc/image/autosprite.png' =>
   array(
-    'hash' => '08fb34fc4ce0cd3be882a3177423ad49',
+    'hash' => '5df245706c30b098cc45a5dc05775a65',
-    'uri' => '/res/08fb34fc/rsrc/image/autosprite.png',
+    'uri' => '/res/5df24570/rsrc/image/autosprite.png',
     'disk' => '/rsrc/image/autosprite.png',
     'type' => 'png',
   ),
@@ -126,6 +126,13 @@ celerity_register_resource_map(array(
     'disk' => '/rsrc/image/divot.png',
     'type' => 'png',
   ),
+  '/rsrc/image/glyphicons.png' =>
+  array(
+    'hash' => '564fc282dac06bf8bb839457adaa3718',
+    'uri' => '/res/564fc282/rsrc/image/glyphicons.png',
+    'disk' => '/rsrc/image/glyphicons.png',
+    'type' => 'png',
+  ),
   '/rsrc/image/grippy_texture.png' =>
   array(
     'hash' => 'a8945e12ceeaddd5b491a8d81cfa19c1',
@@ -448,6 +455,13 @@ celerity_register_resource_map(array(
     'disk' => '/rsrc/image/logo_grey.png',
     'type' => 'png',
   ),
+  '/rsrc/image/menu_texture.png' =>
+  array(
+    'hash' => '42193f24a52bd94be596c442d59a68ce',
+    'uri' => '/res/42193f24/rsrc/image/menu_texture.png',
+    'disk' => '/rsrc/image/menu_texture.png',
+    'type' => 'png',
+  ),
   '/rsrc/image/search.png' =>
   array(
     'hash' => 'ff7da044e6f923b8f569dec11f97e5e5',
@@ -643,7 +657,7 @@ celerity_register_resource_map(array(
   ),
   'autosprite-css' =>
   array(
-    'uri' => '/res/07043fce/rsrc/css/autosprite.css',
+    'uri' => '/res/27f100be/rsrc/css/autosprite.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -1468,7 +1482,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-phabricator-nav' =>
   array(
-    'uri' => '/res/cb8979b2/rsrc/js/application/core/behavior-phabricator-nav.js',
+    'uri' => '/res/2217e1e9/rsrc/js/application/core/behavior-phabricator-nav.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -2417,7 +2431,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-nav-view-css' =>
   array(
-    'uri' => '/res/ca2744bd/rsrc/css/aphront/phabricator-nav-view.css',
+    'uri' => '/res/3ee38144/rsrc/css/aphront/phabricator-nav-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -2457,7 +2471,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-object-item-list-view-css' =>
   array(
-    'uri' => '/res/7a31c016/rsrc/css/layout/phabricator-object-item-list-view.css',
+    'uri' => '/res/945fabe9/rsrc/css/layout/phabricator-object-item-list-view.css',
     'type' => 'css',
     'requires' =>
     array(

src/applications/audit/application/PhabricatorApplicationAudit.php

@@ -26,8 +26,8 @@ final class PhabricatorApplicationAudit extends PhabricatorApplication {
     return '/audit/';
   }
 
-  public function getIconURI() {
+  public function getAutospriteName() {
-    return celerity_get_resource_uri('/rsrc/image/app/app_audit.png');
+    return 'audit';
   }
 
   public function getRoutes() {

src/applications/meta/controller/PhabricatorApplicationsController.php

@@ -1,35 +0,0 @@
-<?php
-
-/*
- * Copyright 2012 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-abstract class PhabricatorApplicationsController extends PhabricatorController {
-
-  public function buildStandardPageResponse($view, array $data) {
-
-    $page = $this->buildStandardPageView();
-
-    $page->setApplicationName('Applications');
-    $page->setBaseURI('/applications/');
-    $page->setTitle(idx($data, 'title'));
-    $page->setGlyph("\xE0\xBC\x84");
-    $page->appendChild($view);
-
-    $response = new AphrontWebpageResponse();
-    return $response->setContent($page->render());
-
-  }
-}

src/applications/meta/controller/PhabricatorApplicationsListController.php

@@ -56,6 +56,7 @@ final class PhabricatorApplicationsListController
       $view,
       array(
         'title' => 'Applications',
+        'device' => true,
       ));
   }
 

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

@@ -12,8 +12,6 @@
   left: 0;
   bottom: 0;
 
-  border-right: 1px solid #999c9e;
-  box-shadow: inset -3px 0 4px rgba(0, 0, 0, 0.05);
 
   overflow-y: auto;
   overflow-x: hidden;
@@ -23,12 +21,24 @@
 
 .phabricator-nav-app {
   width: 149px;
-  background: #d2d2d2;
+  background: #33393d;
+  border-right: 1px solid #222222;
+  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
+  z-index: 6;
+}
+
+.device-desktop .phabricator-nav-app {
+  top: 43px;
+  padding-top: 4px;
 }
 
 .phabricator-nav-local {
   width: 179px;
   background: #ececec;
+
+  border-right: 1px solid #999c9e;
+  box-shadow: inset -3px 0 4px rgba(0, 0, 0, 0.05);
+  background-image: url(/rsrc/image/menu_texture.png);
 }
 
 .device-tablet .phabricator-nav-local,
@@ -39,7 +49,7 @@
 .phabricator-nav-drag {
   position: fixed;
   top: 44px;
-  left: 177px;
+  left: 327px;
   width: 7px;
   bottom: 0;
   z-index: 5;
@@ -62,6 +72,10 @@
   display: none;
 }
 
+.device-desktop .phabricator-nav-app-collapsed .phabricator-nav-drag {
+  left: 215px;
+}
+
 .phabricator-nav-col a,
 .phabricator-nav-col span {
   display: block;
@@ -72,7 +86,7 @@
 }
 
 .device-desktop .phabricator-nav-app-collapsed .phabricator-nav-local {
-  left: 34px;
+  left: 38px;
 }
 
 .phabricator-nav-content {
@@ -84,12 +98,12 @@
 }
 
 .device-desktop .phabricator-nav-app-collapsed .phabricator-nav-content {
-  margin-left: 32px;
+  margin-left: 36px;
 }
 
 .device-desktop .has-local-nav.phabricator-nav-app-collapsed
   .phabricator-nav-content {
-  margin-left: 212px;
+  margin-left: 216px;
 }
 
 .phabricator-nav-col span {
@@ -116,7 +130,7 @@
 }
 
 a.phabricator-nav-app-item {
-  color: #222222;
+  color: #e9e9e9;
   font-weight: normal;
   padding: 4px;
   padding-left: 40px;
@@ -124,17 +138,11 @@ a.phabricator-nav-app-item {
   line-height: 30px;
   height: 30px;
 
-  border-width: 1px 0px;
-  border-style: solid;
-  border-color: transparent;
-
   position: relative;
 }
 
 a.phabricator-nav-app-item-selected {
-  background-color: #f3f3f3;
+  background-color: #55595d;
-  box-shadow: inset -1px 0 3px rgba(0, 0, 0, 0.15);
-  border-color: #b0b0b0;
 }
 
 span.phabricator-nav-app-item-icon {
@@ -158,14 +166,14 @@ a.phabricator-nav-app-button-collapse {
   left: 0;
   bottom: 0;
   padding: 4px;
-  z-index: 2;
+  z-index: 7;
-  background: #d9d9d9;
+  background: #44494d;
   line-height: 14px;
-  border-top: 1px solid #a9a9a9;
+  border-top: 1px solid #222222;
   text-align: center;
   font-size: 11px;
   box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.1);
-  color: #696969;
+  color: #c0c0c0;
   text-decoration: none;
 }
 
@@ -174,7 +182,7 @@ a.phabricator-nav-app-button-collapse {
 }
 
 .phabricator-nav-app-button-expand {
-  width: 25px;
+  width: 29px;
   display: none;
 }
 
@@ -184,7 +192,7 @@ a.phabricator-nav-app-button-collapse {
 }
 
 .device-desktop .phabricator-nav-app-collapsed .phabricator-nav-app {
-  width: 33px;
+  width: 37px;
 }
 
 .phabricator-nav-app-collapsed .phabricator-nav-app-button-collapse {
@@ -245,13 +253,12 @@ a.phabricator-nav-app-button-collapse {
   display: block;
   position: relative;
   height: 43px;
-  background: #e6e6e6;
+  background: #fafafa;
   overflow: hidden;
-  border-bottom: 1px solid #9d9d9d;
+  border-bottom: 1px solid #5d5d5d;
   text-align: center;
-  box-shadow: inset 0 0px 3px rgba(0, 0, 0, 0.30),
+  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.10),
               0px 1px 2px rgba(0, 0, 0, 0.10);
-  z-index: 3;
 }
 
 .nav-button {

webroot/rsrc/css/autosprite.css

@@ -243,10 +243,18 @@
   background-position: 0px -2398px;
 }
 
-.action-file {
+.app-audit-full {
   background-position: 0px -2429px;
 }
 
-.action-fork {
+.app-audit {
-  background-position: 0px -2446px;
+  background-position: 0px -2490px;
+}
+
+.action-file {
+  background-position: 0px -2521px;
+}
+
+.action-fork {
+  background-position: 0px -2538px;
 }

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

@@ -8,7 +8,6 @@
 }
 
 .phabricator-object-item-list-header {
-  font-weight: normal;
   color: #333333;
   font-size: 15px;
   margin-bottom: 12px;

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

@@ -87,6 +87,24 @@ JX.behavior('phabricator-nav', function(config) {
 // - Application Menu Collapse/Expand ------------------------------------------
 
   function collapse(state, skip_save) {
+    // As necessary, adjust the drag bar and content positioning. Do this first,
+    // so we don't end up measuring things after the collapse takes effect.
+
+    // This is the difference between the widths of the uncollapsed application
+    // nav (150px) and the collapsed one (38px).
+    var delta = 112;
+    delta = state ? -delta : delta;
+    if (config.dragID) {
+      var drag = JX.$(config.dragID);
+      var p = JX.$V(drag);
+      p.x += delta;
+      p.y = null;
+      p.setPos(drag);
+    }
+
+    var c = parseInt(getComputedStyle(content).marginLeft, 10);
+    content.style.marginLeft = (c + delta) + 'px';
+
     JX.DOM.alterClass(
       JX.$(config.mainID),
       'phabricator-nav-app-collapsed',
@@ -133,7 +151,7 @@ JX.behavior('phabricator-nav', function(config) {
           scale: 1,
 
           width: JX.Vector.getDim(local).x,
-          minWidth: 150,
+          minWidth: 38,
           minScale: 1
         },
         {