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

Author: epriestley

scripts/celerity/generate_sprites.php

@@ -108,7 +108,7 @@ function gly($y) {
   ->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 @@ function gly($y) {
   '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 @@
   ),
   '/rsrc/image/autosprite.png' =>
   array(
-    'hash' => '08fb34fc4ce0cd3be882a3177423ad49',
-    'uri' => '/res/08fb34fc/rsrc/image/autosprite.png',
+    'hash' => '5df245706c30b098cc45a5dc05775a65',
+    'uri' => '/res/5df24570/rsrc/image/autosprite.png',
     'disk' => '/rsrc/image/autosprite.png',
     'type' => 'png',
   ),
@@ -126,6 +126,13 @@
     '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 @@
     '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 @@
   ),
   '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 @@
   ),
   '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 @@
   ),
   '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 @@
   ),
   '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 @@ public function getBaseURI() {
     return '/audit/';
   }
 
-  public function getIconURI() {
-    return celerity_get_resource_uri('/rsrc/image/app/app_audit.png');
+  public function getAutospriteName() {
+    return 'audit';
   }
 
   public function getRoutes() {

src/applications/meta/controller/PhabricatorApplicationsController.php

@@ -56,6 +56,7 @@ public function processRequest() {
       $view,
       array(
         'title' => 'Applications',
+        'device' => true,
       ));
   }
 

src/applications/meta/controller/PhabricatorApplicationsListController.php

@@ -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,25 +130,19 @@
 }
 
 a.phabricator-nav-app-item {
-  color: #222222;
+  color: #e9e9e9;
   font-weight: normal;
   padding: 4px;
   padding-left: 40px;
   vertical-align: middle;
   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;
-  box-shadow: inset -1px 0 3px rgba(0, 0, 0, 0.15);
-  border-color: #b0b0b0;
+  background-color: #55595d;
 }
 
 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;
-  background: #d9d9d9;
+  z-index: 7;
+  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/aphront/phabricator-nav-view.css

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

webroot/rsrc/css/autosprite.css

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