Multicolor headers

Summary: This adds a handful of 'Main Header' colors to change the look of Phabricator very slightly. I know I would probably set my dev header to a different color.

Test Plan: Tested each css class and color, can add more in the future.

Reviewers: epriestley, btrahan

Reviewed By: btrahan

CC: Korvin, epriestley, aran

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

resources/sprite/manifest/main-header.json

@@ -0,0 +1,55 @@
+{
+  "version" : 1,
+  "sprites" : {
+    "main-header-applebloom"    : {
+      "name" : "main-header-applebloom",
+      "rule" : ".main-header-applebloom",
+      "hash" : "64822776b129e724709983db1ac5a712"
+    },
+    "main-header-blue"          : {
+      "name" : "main-header-blue",
+      "rule" : ".main-header-blue",
+      "hash" : "b5dd317b7bd35e0592b3f4b66267437c"
+    },
+    "main-header-dark"          : {
+      "name" : "main-header-dark",
+      "rule" : ".main-header-dark",
+      "hash" : "817815d84c0c935b4875f6ecc7dbb526"
+    },
+    "main-header-fluttershy"    : {
+      "name" : "main-header-fluttershy",
+      "rule" : ".main-header-fluttershy",
+      "hash" : "55d4e9f813cf354693290105cf83cf78"
+    },
+    "main-header-green"         : {
+      "name" : "main-header-green",
+      "rule" : ".main-header-green",
+      "hash" : "c230f09e307d167fab3ea0d8c3b33755"
+    },
+    "main-header-nightmaremoon" : {
+      "name" : "main-header-nightmaremoon",
+      "rule" : ".main-header-nightmaremoon",
+      "hash" : "9e7cc7b18d2132d2dd47586ba0cd6400"
+    },
+    "main-header-red"           : {
+      "name" : "main-header-red",
+      "rule" : ".main-header-red",
+      "hash" : "3f12cc098afddb8e6c830ef761dcaa61"
+    },
+    "main-header-scootaloo"     : {
+      "name" : "main-header-scootaloo",
+      "rule" : ".main-header-scootaloo",
+      "hash" : "8cedc359dccab1bbd49cbc69940f566a"
+    },
+    "main-header-yellow"        : {
+      "name" : "main-header-yellow",
+      "rule" : ".main-header-yellow",
+      "hash" : "d920e70a6d2662cfb83e1d7e4b4000fd"
+    }
+  },
+  "scales"  : [
+    1
+  ],
+  "header"  : "\/**\n * @provides sprite-main-header-css\n * @generated\n *\/\n\n.sprite-main-header {\n  background-image: url(\/rsrc\/image\/sprite-main-header.png);\n  background-repeat: repeat-x;\n}\n\n\n",
+  "type"    : "repeat-x"
+}

scripts/celerity/generate_sprites.php

@@ -38,6 +38,7 @@ $sheets = array(
   'tokens' => $generator->buildTokenSheet(),
   'docs' => $generator->buildDocsSheet(),
   'gradient' => $generator->buildGradientSheet(),
+  'main-header' => $generator->buildMainHeaderSheet(),
   'login' => $generator->buildLoginSheet(),
   'status' => $generator->buildStatusSheet(),
   'projects' => $generator->buildProjectsSheet(),

src/__celerity_resource_map__.php

@@ -546,6 +546,13 @@ celerity_register_resource_map(array(
     'disk' => '/rsrc/image/phrequent_inactive.png',
     'type' => 'png',
   ),
+  '/rsrc/image/search-white.png' =>
+  array(
+    'hash' => '5d5236170c4097fa7e7cbb32e737c9d8',
+    'uri' => '/res/5d523617/rsrc/image/search-white.png',
+    'disk' => '/rsrc/image/search-white.png',
+    'type' => 'png',
+  ),
   '/rsrc/image/search.png' =>
   array(
     'hash' => 'ff7da044e6f923b8f569dec11f97e5e5',
@@ -665,6 +672,13 @@ celerity_register_resource_map(array(
     'disk' => '/rsrc/image/sprite-login.png',
     'type' => 'png',
   ),
+  '/rsrc/image/sprite-main-header.png' =>
+  array(
+    'hash' => 'a00aa3b33178899d6bd7979b475ae559',
+    'uri' => '/res/a00aa3b3/rsrc/image/sprite-main-header.png',
+    'disk' => '/rsrc/image/sprite-main-header.png',
+    'type' => 'png',
+  ),
   '/rsrc/image/sprite-menu-X2.png' =>
   array(
     'hash' => '63b649a6ccba7bf76bc9456dc5dfb12b',
@@ -3367,7 +3381,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-main-menu-view' =>
   array(
-    'uri' => '/res/95ff522a/rsrc/css/application/base/main-menu-view.css',
+    'uri' => '/res/44456bed/rsrc/css/application/base/main-menu-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -4268,6 +4282,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/sprite-login.css',
   ),
+  'sprite-main-header-css' =>
+  array(
+    'uri' => '/res/b788fd75/rsrc/css/sprite-main-header.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/sprite-main-header.css',
+  ),
   'sprite-menu-css' =>
   array(
     'uri' => '/res/764ab039/rsrc/css/sprite-menu.css',
@@ -4343,7 +4366,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    '152ef0e5' =>
+    '33d9080b' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -4392,7 +4415,7 @@ celerity_register_resource_map(array(
         41 => 'phabricator-tag-view-css',
         42 => 'phui-list-view-css',
       ),
-      'uri' => '/res/pkg/152ef0e5/core.pkg.css',
+      'uri' => '/res/pkg/33d9080b/core.pkg.css',
       'type' => 'css',
     ),
     '2c1dba03' =>
@@ -4584,15 +4607,15 @@ celerity_register_resource_map(array(
   ),
   'reverse' =>
   array(
-    'aphront-dialog-view-css' => '152ef0e5',
-    'aphront-error-view-css' => '152ef0e5',
-    'aphront-list-filter-view-css' => '152ef0e5',
-    'aphront-pager-view-css' => '152ef0e5',
-    'aphront-panel-view-css' => '152ef0e5',
-    'aphront-table-view-css' => '152ef0e5',
-    'aphront-tokenizer-control-css' => '152ef0e5',
-    'aphront-tooltip-css' => '152ef0e5',
-    'aphront-typeahead-control-css' => '152ef0e5',
+    'aphront-dialog-view-css' => '33d9080b',
+    'aphront-error-view-css' => '33d9080b',
+    'aphront-list-filter-view-css' => '33d9080b',
+    'aphront-pager-view-css' => '33d9080b',
+    'aphront-panel-view-css' => '33d9080b',
+    'aphront-table-view-css' => '33d9080b',
+    'aphront-tokenizer-control-css' => '33d9080b',
+    'aphront-tooltip-css' => '33d9080b',
+    'aphront-typeahead-control-css' => '33d9080b',
     'differential-changeset-view-css' => '67248472',
     'differential-core-view-css' => '67248472',
     'differential-inline-comment-editor' => '92f459f0',
@@ -4606,7 +4629,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => '67248472',
     'diffusion-commit-view-css' => '7aa115b4',
     'diffusion-icons-css' => '7aa115b4',
-    'global-drag-and-drop-css' => '152ef0e5',
+    'global-drag-and-drop-css' => '33d9080b',
     'inline-comment-summary-css' => '67248472',
     'javelin-aphlict' => '2c1dba03',
     'javelin-behavior' => '3e3be199',
@@ -4681,56 +4704,56 @@ celerity_register_resource_map(array(
     'javelin-util' => '3e3be199',
     'javelin-vector' => '3e3be199',
     'javelin-workflow' => '3e3be199',
-    'lightbox-attachment-css' => '152ef0e5',
+    'lightbox-attachment-css' => '33d9080b',
     'maniphest-task-summary-css' => '49898640',
-    'phabricator-action-list-view-css' => '152ef0e5',
-    'phabricator-application-launch-view-css' => '152ef0e5',
+    'phabricator-action-list-view-css' => '33d9080b',
+    'phabricator-application-launch-view-css' => '33d9080b',
     'phabricator-busy' => '2c1dba03',
     'phabricator-content-source-view-css' => '67248472',
-    'phabricator-core-css' => '152ef0e5',
-    'phabricator-crumbs-view-css' => '152ef0e5',
+    'phabricator-core-css' => '33d9080b',
+    'phabricator-crumbs-view-css' => '33d9080b',
     'phabricator-drag-and-drop-file-upload' => '92f459f0',
     'phabricator-dropdown-menu' => '2c1dba03',
     'phabricator-file-upload' => '2c1dba03',
-    'phabricator-filetree-view-css' => '152ef0e5',
-    'phabricator-flag-css' => '152ef0e5',
+    'phabricator-filetree-view-css' => '33d9080b',
+    'phabricator-flag-css' => '33d9080b',
     'phabricator-hovercard' => '2c1dba03',
-    'phabricator-jump-nav' => '152ef0e5',
+    'phabricator-jump-nav' => '33d9080b',
     'phabricator-keyboard-shortcut' => '2c1dba03',
     'phabricator-keyboard-shortcut-manager' => '2c1dba03',
-    'phabricator-main-menu-view' => '152ef0e5',
+    'phabricator-main-menu-view' => '33d9080b',
     'phabricator-menu-item' => '2c1dba03',
-    'phabricator-nav-view-css' => '152ef0e5',
+    'phabricator-nav-view-css' => '33d9080b',
     'phabricator-notification' => '2c1dba03',
-    'phabricator-notification-css' => '152ef0e5',
-    'phabricator-notification-menu-css' => '152ef0e5',
+    'phabricator-notification-css' => '33d9080b',
+    'phabricator-notification-menu-css' => '33d9080b',
     'phabricator-object-selector-css' => '67248472',
     'phabricator-phtize' => '2c1dba03',
     'phabricator-prefab' => '2c1dba03',
     'phabricator-project-tag-css' => '49898640',
-    'phabricator-remarkup-css' => '152ef0e5',
+    'phabricator-remarkup-css' => '33d9080b',
     'phabricator-shaped-request' => '92f459f0',
-    'phabricator-side-menu-view-css' => '152ef0e5',
-    'phabricator-standard-page-view' => '152ef0e5',
-    'phabricator-tag-view-css' => '152ef0e5',
+    'phabricator-side-menu-view-css' => '33d9080b',
+    'phabricator-standard-page-view' => '33d9080b',
+    'phabricator-tag-view-css' => '33d9080b',
     'phabricator-textareautils' => '2c1dba03',
     'phabricator-tooltip' => '2c1dba03',
-    'phabricator-transaction-view-css' => '152ef0e5',
-    'phabricator-zindex-css' => '152ef0e5',
-    'phui-button-css' => '152ef0e5',
-    'phui-form-css' => '152ef0e5',
-    'phui-form-view-css' => '152ef0e5',
-    'phui-header-view-css' => '152ef0e5',
-    'phui-icon-view-css' => '152ef0e5',
-    'phui-list-view-css' => '152ef0e5',
-    'phui-object-item-list-view-css' => '152ef0e5',
-    'phui-property-list-view-css' => '152ef0e5',
-    'phui-spacing-css' => '152ef0e5',
-    'sprite-apps-large-css' => '152ef0e5',
-    'sprite-gradient-css' => '152ef0e5',
-    'sprite-icons-css' => '152ef0e5',
-    'sprite-menu-css' => '152ef0e5',
-    'sprite-status-css' => '152ef0e5',
-    'syntax-highlighting-css' => '152ef0e5',
+    'phabricator-transaction-view-css' => '33d9080b',
+    'phabricator-zindex-css' => '33d9080b',
+    'phui-button-css' => '33d9080b',
+    'phui-form-css' => '33d9080b',
+    'phui-form-view-css' => '33d9080b',
+    'phui-header-view-css' => '33d9080b',
+    'phui-icon-view-css' => '33d9080b',
+    'phui-list-view-css' => '33d9080b',
+    'phui-object-item-list-view-css' => '33d9080b',
+    'phui-property-list-view-css' => '33d9080b',
+    'phui-spacing-css' => '33d9080b',
+    'sprite-apps-large-css' => '33d9080b',
+    'sprite-gradient-css' => '33d9080b',
+    'sprite-icons-css' => '33d9080b',
+    'sprite-menu-css' => '33d9080b',
+    'sprite-status-css' => '33d9080b',
+    'syntax-highlighting-css' => '33d9080b',
   ),
 ));

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -615,6 +615,33 @@ final class CeleritySpriteGenerator {
     return $sheet;
   }
 
+  public function buildMainHeaderSheet() {
+    $gradients = $this->getDirectoryList('main_header');
+    $template = new PhutilSprite();
+
+    $sprites = array();
+    foreach ($gradients as $gradient) {
+      $path = $this->getPath('main_header/'.$gradient.'.png');
+      $sprite = id(clone $template)
+        ->setName('main-header-'.$gradient)
+        ->setSourceFile($path)
+        ->setTargetCSS('.main-header-'.$gradient);
+      $sprite->setSourceSize(6, 44);
+      $sprites[] = $sprite;
+    }
+
+    $sheet = $this->buildSheet('main-header',
+      false,
+      PhutilSpriteSheet::TYPE_REPEAT_X);
+
+    foreach ($sprites as $sprite) {
+      $sheet->addSprite($sprite);
+    }
+
+    return $sheet;
+  }
+
+
   public function buildAppsSheet() {
     return $this->buildAppsSheetVariant(1);
   }

src/view/page/menu/PhabricatorMainMenuView.php

@@ -37,6 +37,7 @@ final class PhabricatorMainMenuView extends AphrontView {
     $user = $this->user;
 
     require_celerity_resource('phabricator-main-menu-view');
+    require_celerity_resource('sprite-main-header-css');
 
     $header_id = celerity_generate_unique_node_id();
     $menus = array();
@@ -64,11 +65,16 @@ final class PhabricatorMainMenuView extends AphrontView {
     }
 
     $application_menu = $this->renderApplicationMenu();
+    $classes = array();
+    $classes[] = 'phabricator-main-menu';
+    $classes[] = 'sprite-main-header';
+    // TODO: Let admins or users set header
+    $classes[] = 'main-header-dark';
 
     return phutil_tag(
       'div',
       array(
-        'class' => 'phabricator-main-menu',
+        'class' => implode(' ', $classes),
         'id'    => $header_id,
       ),
       array(
@@ -227,6 +233,8 @@ final class PhabricatorMainMenuView extends AphrontView {
   }
 
   private function renderPhabricatorLogo() {
+    $class = 'phabricator-main-menu-logo-image';
+
     return phutil_tag(
       'a',
       array(
@@ -236,7 +244,7 @@ final class PhabricatorMainMenuView extends AphrontView {
       phutil_tag(
         'span',
         array(
-          'class' => 'sprite-menu phabricator-main-menu-logo-image',
+          'class' => 'sprite-menu menu-logo-image '.$class,
         ),
         ''));
   }

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

@@ -12,7 +12,6 @@
 
 .phabricator-main-menu {
   background: #2d3236;
-  background-image: url(/rsrc/image/texture/phlnx-bg.png);
   background-repeat: repeat-x;
   position: relative;
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
@@ -49,11 +48,7 @@
   padding-left: 6px;
 }
 
-.device-desktop .phabricator-main-menu-logo:hover {
-  background-color: rgba(0,0,0,.6);
-}
-
-.phabricator-main-menu-logo-image {
+.menu-logo-image {
   position: absolute;
   width: 149px;
   height: 26px;
@@ -146,13 +141,18 @@
   font-size: 13px;
   border: 1px solid #333;
   border-radius: 12px;
-  background-color: #555;
+  background-color: #222;
+  opacity: .8;
   height: 26px;
   line-height: 12px;
   box-shadow: 0px 1px 1px rgba(128, 128, 128, 0.25);
   padding: 6px 32px 6px 10px;
 }
 
+.phabricator-main-menu.main-header-dark .phabricator-main-menu-search input {
+  background-color: #555;
+}
+
 .device .phabricator-main-menu-search input {
   height: 30px;
   font-size: 15px;
@@ -161,6 +161,7 @@
 
 .phabricator-main-menu .phabricator-main-menu-search input:focus {
   background: #fff;
+  opacity: 1;
   color: #333;
   border-color: #e7e7e7;
   box-shadow: none;
@@ -169,13 +170,13 @@
 }
 
 .phabricator-main-menu-search input.jx-typeahead-placeholder {
-  color: {$lightgreytext};
+  color: #fff;
 }
 
 .phabricator-main-menu-search button {
   position: absolute;
   color: transparent;
-  background: transparent 5px 6px url(/rsrc/image/search.png) no-repeat;
+  background: transparent 5px 6px url(/rsrc/image/search-white.png) no-repeat;
   border: none;
   outline: none;
   box-shadow: none;
@@ -353,11 +354,18 @@
   display: block;
 }
 
-.device-desktop .phabricator-application-menu
- .core-menu-item.phui-list-item-view:hover {
+.device-desktop .main-header-dark .phabricator-application-menu
+ .core-menu-item.phui-list-item-view:hover,
+.device-desktop .main-header-dark .phabricator-main-menu-logo:hover {
   background-color: rgba(0,0,0,.6);
 }
 
+.device-desktop .phabricator-application-menu
+ .core-menu-item.phui-list-item-view:hover,
+.device-desktop .phabricator-main-menu-logo:hover {
+  background-color: rgba(0,0,0,.3);
+}
+
 .device-desktop .phabricator-application-menu .phui-list-item-view {
   float: left;
   position: relative;

webroot/rsrc/css/sprite-main-header.css

@@ -0,0 +1,48 @@
+/**
+ * @provides sprite-main-header-css
+ * @generated
+ */
+
+.sprite-main-header {
+  background-image: url(/rsrc/image/sprite-main-header.png);
+  background-repeat: repeat-x;
+}
+
+
+
+
+.main-header-applebloom {
+  background-position: 0px 0px;
+}
+
+.main-header-blue {
+  background-position: 0px -45px;
+}
+
+.main-header-dark {
+  background-position: 0px -90px;
+}
+
+.main-header-fluttershy {
+  background-position: 0px -135px;
+}
+
+.main-header-green {
+  background-position: 0px -180px;
+}
+
+.main-header-nightmaremoon {
+  background-position: 0px -225px;
+}
+
+.main-header-red {
+  background-position: 0px -270px;
+}
+
+.main-header-scootaloo {
+  background-position: 0px -315px;
+}
+
+.main-header-yellow {
+  background-position: 0px -360px;
+}