Remove header gradients for flat colors

Summary: Removes header gradient images for flat, CSS controlled colors. I didn't convert the "pony" colors over, going with few options for easier theme-ability.

Test Plan:
Test each color choice.

{F1063828}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '9d3a79f4',
+    'core.pkg.css' => 'c61091b0',
     'core.pkg.js' => '573e6664',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -32,10 +32,10 @@ return array(
     'rsrc/css/aphront/typeahead.css' => '0e403212',
     'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af',
     'rsrc/css/application/auth/auth.css' => '0877ed6e',
-    'rsrc/css/application/base/main-menu-view.css' => '2f670a96',
+    'rsrc/css/application/base/main-menu-view.css' => 'd00a795a',
     'rsrc/css/application/base/notification-menu.css' => 'f31c0bde',
     'rsrc/css/application/base/phabricator-application-launch-view.css' => '95351601',
-    'rsrc/css/application/base/phui-theme.css' => '6b451f24',
+    'rsrc/css/application/base/phui-theme.css' => '981a58f8',
     'rsrc/css/application/base/standard-page-view.css' => '7b0d68d8',
     'rsrc/css/application/chatlog/chatlog.css' => 'd295b020',
     'rsrc/css/application/conduit/conduit-api.css' => '7bc725c4',
@@ -155,7 +155,6 @@ return array(
     'rsrc/css/phui/phui-workboard-view.css' => '95a54f74',
     'rsrc/css/phui/phui-workpanel-view.css' => 'adec7699',
     'rsrc/css/sprite-login.css' => '60e8560e',
-    'rsrc/css/sprite-main-header.css' => 'f07bbb87',
     'rsrc/css/sprite-menu.css' => '9dd65b92',
     'rsrc/css/sprite-projects.css' => 'e5ad842a',
     'rsrc/css/sprite-tokens.css' => '4f399012',
@@ -336,7 +335,6 @@ return array(
     'rsrc/image/phrequent_inactive.png' => 'bfc15a69',
     'rsrc/image/sprite-login-X2.png' => 'e3991e37',
     'rsrc/image/sprite-login.png' => '03d5af29',
-    'rsrc/image/sprite-main-header.png' => '3673af44',
     'rsrc/image/sprite-menu-X2.png' => 'cfd8fca5',
     'rsrc/image/sprite-menu.png' => 'd7a99faa',
     'rsrc/image/sprite-projects-X2.png' => '853552c7',
@@ -753,7 +751,7 @@ return array(
     'phabricator-hovercard-view-css' => '1239cd52',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'c1700f6f',
-    'phabricator-main-menu-view' => '2f670a96',
+    'phabricator-main-menu-view' => 'd00a795a',
     'phabricator-nav-view-css' => 'a24cb589',
     'phabricator-notification' => 'ccf1cbf8',
     'phabricator-notification-css' => '9c279160',
@@ -829,7 +827,7 @@ return array(
     'phui-status-list-view-css' => '888cedb8',
     'phui-tag-view-css' => 'e60e227b',
     'phui-text-css' => 'cf019f54',
-    'phui-theme-css' => '6b451f24',
+    'phui-theme-css' => '981a58f8',
     'phui-timeline-view-css' => '2efceff8',
     'phui-two-column-view-css' => '39ecafb1',
     'phui-workboard-view-css' => '95a54f74',
@@ -853,7 +851,6 @@ return array(
     'releeph-request-typeahead-css' => '667a48ae',
     'setup-issue-css' => 'db7e9c40',
     'sprite-login-css' => '60e8560e',
-    'sprite-main-header-css' => 'f07bbb87',
     'sprite-menu-css' => '9dd65b92',
     'sprite-projects-css' => 'e5ad842a',
     'sprite-tokens-css' => '4f399012',
@@ -1054,9 +1051,6 @@ return array(
       'javelin-install',
       'javelin-event',
     ),
-    '2f670a96' => array(
-      'phui-theme-css',
-    ),
     '327a00d1' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1852,6 +1846,9 @@ return array(
       'javelin-workflow',
       'phabricator-drag-and-drop-file-upload',
     ),
+    'd00a795a' => array(
+      'phui-theme-css',
+    ),
     'd19198c8' => array(
       'javelin-install',
       'javelin-dom',

resources/sprite/manifest/main-header.json

@@ -1,70 +0,0 @@
-{
-  "version": 1,
-  "sprites": {
-    "main-header-applebloom": {
-      "name": "main-header-applebloom",
-      "rule": ".phui-theme-applebloom .phabricator-main-menu-background",
-      "hash": "64822776b129e724709983db1ac5a712"
-    },
-    "main-header-blindigo": {
-      "name": "main-header-blindigo",
-      "rule": ".phui-theme-blindigo .phabricator-main-menu-background",
-      "hash": "8c4f5b1f1f3faceb6ca6e8278a1b082f"
-    },
-    "main-header-blue": {
-      "name": "main-header-blue",
-      "rule": ".phui-theme-blue .phabricator-main-menu-background",
-      "hash": "b5dd317b7bd35e0592b3f4b66267437c"
-    },
-    "main-header-dark": {
-      "name": "main-header-dark",
-      "rule": ".phui-theme-dark .phabricator-main-menu-background",
-      "hash": "817815d84c0c935b4875f6ecc7dbb526"
-    },
-    "main-header-fluttershy": {
-      "name": "main-header-fluttershy",
-      "rule": ".phui-theme-fluttershy .phabricator-main-menu-background",
-      "hash": "55d4e9f813cf354693290105cf83cf78"
-    },
-    "main-header-green": {
-      "name": "main-header-green",
-      "rule": ".phui-theme-green .phabricator-main-menu-background",
-      "hash": "c230f09e307d167fab3ea0d8c3b33755"
-    },
-    "main-header-indigo": {
-      "name": "main-header-indigo",
-      "rule": ".phui-theme-indigo .phabricator-main-menu-background",
-      "hash": "a27394ff1eff4d24398ec57e54d7f5fd"
-    },
-    "main-header-light": {
-      "name": "main-header-light",
-      "rule": ".phui-theme-light .phabricator-main-menu-background",
-      "hash": "3c41fbfbe13cae2451467a1e307115aa"
-    },
-    "main-header-nightmaremoon": {
-      "name": "main-header-nightmaremoon",
-      "rule": ".phui-theme-nightmaremoon .phabricator-main-menu-background",
-      "hash": "9e7cc7b18d2132d2dd47586ba0cd6400"
-    },
-    "main-header-red": {
-      "name": "main-header-red",
-      "rule": ".phui-theme-red .phabricator-main-menu-background",
-      "hash": "3f12cc098afddb8e6c830ef761dcaa61"
-    },
-    "main-header-scootaloo": {
-      "name": "main-header-scootaloo",
-      "rule": ".phui-theme-scootaloo .phabricator-main-menu-background",
-      "hash": "8cedc359dccab1bbd49cbc69940f566a"
-    },
-    "main-header-yellow": {
-      "name": "main-header-yellow",
-      "rule": ".phui-theme-yellow .phabricator-main-menu-background",
-      "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

@@ -29,7 +29,6 @@ $generator = new CeleritySpriteGenerator();
 $sheets = array(
   'menu' => $generator->buildMenuSheet(),
   'tokens' => $generator->buildTokenSheet(),
-  'main-header' => $generator->buildMainHeaderSheet(),
   'login' => $generator->buildLoginSheet(),
   'projects' => $generator->buildProjectsSheet(),
 );

src/applications/celerity/CeleritySpriteGenerator.php

@@ -150,33 +150,6 @@ final class CeleritySpriteGenerator extends Phobject {
     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('.phui-theme-'.$gradient.
-          ' .phabricator-main-menu-background');
-      $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;
-  }
-
   private function getPath($to_path = null) {
     $root = dirname(phutil_get_library_root('phabricator'));
     return $root.'/resources/sprite/'.$to_path;

src/applications/config/option/PhabricatorUIConfigOptions.php

@@ -20,15 +20,18 @@ final class PhabricatorUIConfigOptions
   }
 
   public function getOptions() {
-    $manifest = PHUIIconView::getSheetManifest('main-header');
     $custom_header_example =
       PhabricatorCustomHeaderConfigType::getExampleConfig();
     $experimental_link = 'https://secure.phabricator.com/T4214';
-    $options = array();
-    foreach (array_keys($manifest) as $sprite_name) {
-      $key = substr($sprite_name, strlen('main-header-'));
-      $options[$key] = $key;
-    }
+    $options = array(
+      'blindigo' => 'blindigo',
+      'light' => 'light',
+      'red' => 'red',
+      'blue' => 'blue',
+      'green' => 'green',
+      'indigo' => 'indigo',
+      'dark' => 'dark',
+    );
 
     $example = <<<EOJSON
 [

src/view/page/menu/PhabricatorMainMenuView.php

@@ -27,7 +27,6 @@ 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();
     $menu_bar = array();
@@ -137,7 +136,7 @@ final class PhabricatorMainMenuView extends AphrontView {
 
     $application_menu = $this->renderApplicationMenu($bar_items);
     $classes = array();
-    $classes[] = 'phabricator-main-menu sprite-main-header';
+    $classes[] = 'phabricator-main-menu';
     $classes[] = 'phabricator-main-menu-background';
 
     return phutil_tag(

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

@@ -16,13 +16,11 @@
 }
 
 .phabricator-main-menu-background {
-  min-height: 43px;
-  background-color: #ebecee;
-  border-bottom: 1px solid rgba(0,0,0,.1);
+  min-height: 44px;
 }
 
 .device-desktop .phabricator-main-menu {
-  height: 43px;
+  height: 44px;
   padding-right: 4px;
 }
 

webroot/rsrc/css/application/base/phui-theme.css

@@ -2,11 +2,39 @@
  * @provides phui-theme-css
  */
 
- .phui-theme-light button.phabricator-main-menu-search-dropdown .caret:before {
+/*--- Base Colors ------------------------------------------------------------*/
+
+.phui-theme-blindigo .phabricator-main-menu-background {
+  background: #41506e;
+}
+
+.phui-theme-dark .phabricator-main-menu-background {
+  background: #171c20;
+}
+
+.phui-theme-indigo .phabricator-main-menu-background {
+  background: #4a2b85;
+}
+
+.phui-theme-red .phabricator-main-menu-background {
+  background: #650404;
+}
+
+.phui-theme-blue .phabricator-main-menu-background {
+  background: #004377;
+}
+
+.phui-theme-green .phabricator-main-menu-background {
+  background: #124A1B;
+}
+
+/*--- Light Colors -----------------------------------------------------------*/
+
+.phui-theme-light button.phabricator-main-menu-search-dropdown .caret:before {
   color: {$lightbluetext};
 }
 
- .phui-theme-light .phabricator-main-menu-search
+.phui-theme-light .phabricator-main-menu-search
   button.phabricator-main-menu-search-dropdown .phui-icon-view {
   color: {$lightbluetext};
   text-shadow: {$whitetextshadow};

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

@@ -1,60 +0,0 @@
-/**
- * @provides sprite-main-header-css
- * @generated
- */
-
-.sprite-main-header {
-  background-image: url(/rsrc/image/sprite-main-header.png);
-  background-repeat: repeat-x;
-}
-
-
-
-
-.phui-theme-applebloom .phabricator-main-menu-background {
-  background-position: 0px 0px;
-}
-
-.phui-theme-blindigo .phabricator-main-menu-background {
-  background-position: 0px -45px;
-}
-
-.phui-theme-blue .phabricator-main-menu-background {
-  background-position: 0px -90px;
-}
-
-.phui-theme-dark .phabricator-main-menu-background {
-  background-position: 0px -135px;
-}
-
-.phui-theme-fluttershy .phabricator-main-menu-background {
-  background-position: 0px -180px;
-}
-
-.phui-theme-green .phabricator-main-menu-background {
-  background-position: 0px -225px;
-}
-
-.phui-theme-indigo .phabricator-main-menu-background {
-  background-position: 0px -270px;
-}
-
-.phui-theme-light .phabricator-main-menu-background {
-  background-position: 0px -315px;
-}
-
-.phui-theme-nightmaremoon .phabricator-main-menu-background {
-  background-position: 0px -360px;
-}
-
-.phui-theme-red .phabricator-main-menu-background {
-  background-position: 0px -405px;
-}
-
-.phui-theme-scootaloo .phabricator-main-menu-background {
-  background-position: 0px -450px;
-}
-
-.phui-theme-yellow .phabricator-main-menu-background {
-  background-position: 0px -495px;
-}