[Redesign] Remove gradient headers

Summary: Ref T8099, this removes the gradient headers and their edge cases in Pinboard View, Setup Issues, Exceptions, and Document Heiriarchy.

Test Plan:
Tested each of these, grep for "gradient" and verify all states are gone.

{F410708}

{F410709}

{F410710}

{F410714}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T8099

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'a16eb6ed',
+    'core.pkg.css' => 'df06e8ae',
     'core.pkg.js' => 'f3e08b38',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'bb338e4b',
@@ -43,8 +43,8 @@ return array(
     'rsrc/css/application/config/config-options.css' => '7fedf08b',
     'rsrc/css/application/config/config-template.css' => '8e6c6fcd',
     'rsrc/css/application/config/config-welcome.css' => '6abd79be',
-    'rsrc/css/application/config/setup-issue.css' => '22270af2',
+    'rsrc/css/application/config/setup-issue.css' => '631c4e92',
-    'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
+    'rsrc/css/application/config/unhandled-exception.css' => '4c96257a',
     'rsrc/css/application/conpherence/durable-column.css' => 'd1e796f0',
     'rsrc/css/application/conpherence/menu.css' => 'f9f1d143',
     'rsrc/css/application/conpherence/message-pane.css' => '7cbf4cbb',
@@ -133,7 +133,7 @@ return array(
     'rsrc/css/phui/phui-fontkit.css' => '489a1341',
     'rsrc/css/phui/phui-form-view.css' => 'e1abbe8e',
     'rsrc/css/phui/phui-form.css' => 'f535f938',
-    'rsrc/css/phui/phui-header-view.css' => '2ad5de97',
+    'rsrc/css/phui/phui-header-view.css' => '3c91963d',
     'rsrc/css/phui/phui-icon.css' => '88ba9081',
     'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
@@ -141,7 +141,7 @@ return array(
     'rsrc/css/phui/phui-list.css' => 'e448b6ba',
     'rsrc/css/phui/phui-object-box.css' => 'c8d82bfe',
     'rsrc/css/phui/phui-object-item-list-view.css' => '4be0645f',
-    'rsrc/css/phui/phui-pinboard-view.css' => 'eaab2b1b',
+    'rsrc/css/phui/phui-pinboard-view.css' => '22891c15',
     'rsrc/css/phui/phui-property-list-view.css' => 'd2d143ea',
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
     'rsrc/css/phui/phui-spacing.css' => '042804d6',
@@ -151,7 +151,6 @@ return array(
     'rsrc/css/phui/phui-timeline-view.css' => 'a85542c8',
     'rsrc/css/phui/phui-workboard-view.css' => '38446bc3',
     'rsrc/css/phui/phui-workpanel-view.css' => 'e6435408',
-    'rsrc/css/sprite-gradient.css' => '4bdb98a7',
     'rsrc/css/sprite-login.css' => 'a3526809',
     'rsrc/css/sprite-main-header.css' => '28d01b0b',
     'rsrc/css/sprite-menu.css' => '02aa815a',
@@ -303,7 +302,6 @@ return array(
     'rsrc/image/people/washington.png' => '40dd301c',
     'rsrc/image/phrequent_active.png' => 'a466a8ed',
     'rsrc/image/phrequent_inactive.png' => 'bfc15a69',
-    'rsrc/image/sprite-gradient.png' => 'ec15a417',
     'rsrc/image/sprite-login-X2.png' => 'a15918f0',
     'rsrc/image/sprite-login.png' => '8cee4f6e',
     'rsrc/image/sprite-main-header.png' => '39419fa6',
@@ -767,7 +765,7 @@ return array(
     'phui-fontkit-css' => '489a1341',
     'phui-form-css' => 'f535f938',
     'phui-form-view-css' => 'e1abbe8e',
-    'phui-header-view-css' => '2ad5de97',
+    'phui-header-view-css' => '3c91963d',
     'phui-icon-view-css' => '88ba9081',
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',
@@ -776,7 +774,7 @@ return array(
     'phui-list-view-css' => 'e448b6ba',
     'phui-object-box-css' => 'c8d82bfe',
     'phui-object-item-list-view-css' => '4be0645f',
-    'phui-pinboard-view-css' => 'eaab2b1b',
+    'phui-pinboard-view-css' => '22891c15',
     'phui-property-list-view-css' => 'd2d143ea',
     'phui-remarkup-preview-css' => '19ad512b',
     'phui-spacing-css' => '042804d6',
@@ -804,8 +802,7 @@ return array(
     'releeph-preview-branch' => 'b7a6f4a5',
     'releeph-request-differential-create-dialog' => '8d8b92cd',
     'releeph-request-typeahead-css' => '667a48ae',
-    'setup-issue-css' => '22270af2',
+    'setup-issue-css' => '631c4e92',
-    'sprite-gradient-css' => '4bdb98a7',
     'sprite-login-css' => 'a3526809',
     'sprite-main-header-css' => '28d01b0b',
     'sprite-menu-css' => '02aa815a',
@@ -814,7 +811,7 @@ return array(
     'syntax-highlighting-css' => '6b7b24d9',
     'tokens-css' => '3d0f239e',
     'typeahead-browse-css' => 'd8581d2c',
-    'unhandled-exception-css' => '37d4f9a2',
+    'unhandled-exception-css' => '4c96257a',
   ),
   'requires' => array(
     '029a133d' => array(
@@ -2039,7 +2036,6 @@ return array(
       'aphront-tooltip-css',
       'phabricator-flag-css',
       'phui-info-view-css',
-      'sprite-gradient-css',
       'sprite-menu-css',
       'phabricator-main-menu-view',
       'phabricator-notification-css',

resources/celerity/packages.php

@@ -100,8 +100,6 @@ return array(
     'aphront-tooltip-css',
     'phabricator-flag-css',
     'phui-info-view-css',
-
-    'sprite-gradient-css',
     'sprite-menu-css',
 
     'phabricator-main-menu-view',

resources/sprite/manifest/gradient.json

@@ -1,40 +0,0 @@
-{
-  "version" : 1,
-  "sprites" : {
-    "gradient-dark-grey-header"   : {
-      "name" : "gradient-dark-grey-header",
-      "rule" : ".gradient-dark-grey-header",
-      "hash" : "e8762dd2849410a7e4fba8f972f946ff"
-    },
-    "gradient-grey-header"        : {
-      "name" : "gradient-grey-header",
-      "rule" : ".gradient-grey-header",
-      "hash" : "1c8f8d61984e3fc5a7e528b9bd4d484a"
-    },
-    "gradient-lightblue-header"   : {
-      "name" : "gradient-lightblue-header",
-      "rule" : ".gradient-lightblue-header",
-      "hash" : "e7753a6ce63c6822a559266eef9e255b"
-    },
-    "gradient-lightgreen-header"  : {
-      "name" : "gradient-lightgreen-header",
-      "rule" : ".gradient-lightgreen-header",
-      "hash" : "87b5c391ea4ea84dd8531fb0f199cbeb"
-    },
-    "gradient-lightred-header"    : {
-      "name" : "gradient-lightred-header",
-      "rule" : ".gradient-lightred-header",
-      "hash" : "a367ea9163aa15f52c105b5805cf493e"
-    },
-    "gradient-lightviolet-header" : {
-      "name" : "gradient-lightviolet-header",
-      "rule" : ".gradient-lightviolet-header",
-      "hash" : "e17e05135e53e1258340cfc27f96f23f"
-    }
-  },
-  "scales"  : [
-    1
-  ],
-  "header"  : "\/**\n * @provides sprite-gradient-css\n * @generated\n *\/\n\n.sprite-gradient {\n  background-image: url(\/rsrc\/image\/sprite-gradient.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(),
-  'gradient' => $generator->buildGradientSheet(),
   'main-header' => $generator->buildMainHeaderSheet(),
   'login' => $generator->buildLoginSheet(),
   'projects' => $generator->buildProjectsSheet(),

src/applications/celerity/CeleritySpriteGenerator.php

@@ -144,45 +144,6 @@ final class CeleritySpriteGenerator {
     return $sheet;
   }
 
-  public function buildGradientSheet() {
-    $gradients = $this->getDirectoryList('gradients');
-
-    $template = new PhutilSprite();
-
-    $unusual_heights = array(
-      'breadcrumbs'     => 31,
-      'grey-header'     => 70,
-      'dark-grey-header' => 70,
-      'lightblue-header' => 240,
-      'lightgreen-header' => 240,
-      'lightviolet-header' => 240,
-      'lightred-header' => 240,
-    );
-
-    $sprites = array();
-    foreach ($gradients as $gradient) {
-      $path = $this->getPath('gradients/'.$gradient.'.png');
-      $sprite = id(clone $template)
-        ->setName('gradient-'.$gradient)
-        ->setSourceFile($path)
-        ->setTargetCSS('.gradient-'.$gradient);
-
-      $sprite->setSourceSize(4, idx($unusual_heights, $gradient, 26));
-
-      $sprites[] = $sprite;
-    }
-
-    $sheet = $this->buildSheet(
-      'gradient',
-      false,
-      PhutilSpriteSheet::TYPE_REPEAT_X);
-    foreach ($sprites as $sprite) {
-      $sheet->addSprite($sprite);
-    }
-
-    return $sheet;
-  }
-
   public function buildMainHeaderSheet() {
     $gradients = $this->getDirectoryList('main_header');
     $template = new PhutilSprite();

src/applications/phriction/controller/PhrictionDocumentController.php

@@ -391,13 +391,13 @@ final class PhrictionDocumentController
 
     $list = array();
     foreach ($children_dicts as $child) {
-      $list[] = hsprintf('<li>');
+      $list[] = hsprintf('<li class="remarkup-list-item">');
       $list[] = $this->renderChildDocumentLink($child);
       $grand = idx($grandchildren_dicts, $child['slug'], array());
       if ($grand) {
-        $list[] = hsprintf('<ul>');
+        $list[] = hsprintf('<ul class="remarkup-list">');
         foreach ($grand as $grandchild) {
-          $list[] = hsprintf('<li>');
+          $list[] = hsprintf('<li class="remarkup-list-item">');
           $list[] = $this->renderChildDocumentLink($grandchild);
           $list[] = hsprintf('</li>');
         }
@@ -406,27 +406,30 @@ final class PhrictionDocumentController
       $list[] = hsprintf('</li>');
     }
     if ($more_children) {
-      $list[] = phutil_tag('li', array(), pht('More...'));
+      $list[] = phutil_tag(
+        'li',
+        array(
+          'class' => 'remarkup-list-item',
+        ),
+        pht('More...'));
     }
 
-    $content = array(
+    $header = id(new PHUIHeaderView())
-      phutil_tag(
+      ->setHeader(pht('Document Hierarchy'));
-        'div',
-        array(
-          'class' => 'phriction-children-header '.
-            'sprite-gradient gradient-lightblue-header',
-        ),
-        pht('Document Hierarchy')),
-      phutil_tag(
-        'div',
-        array(
-          'class' => 'phriction-children',
-        ),
-        phutil_tag('ul', array(), $list)),
-    );
 
     return id(new PHUIDocumentView())
-      ->appendChild($content);
+      ->setHeader($header)
+      ->appendChild(phutil_tag(
+        'div',
+        array(
+          'class' => 'phabricator-remarkup',
+        ),
+        phutil_tag(
+          'ul',
+          array(
+            'class' => 'remarkup-list',
+          ),
+          $list)));
   }
 
   private function renderChildDocumentLink(array $info) {

src/view/page/PhabricatorStandardPageView.php

@@ -170,7 +170,6 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
     require_celerity_resource('phui-button-css');
     require_celerity_resource('phui-spacing-css');
     require_celerity_resource('phui-form-css');
-    require_celerity_resource('sprite-gradient-css');
     require_celerity_resource('phabricator-standard-page-view');
     require_celerity_resource('conpherence-durable-column-view');
 

src/view/phui/PHUIPinboardItemView.php

@@ -46,16 +46,14 @@ final class PHUIPinboardItemView extends AphrontView {
     require_celerity_resource('phui-pinboard-view-css');
     $header = null;
     if ($this->header) {
+      $header_color = null;
       if ($this->disabled) {
-        $header_color = 'gradient-lightgrey-header';
+        $header_color = 'phui-pinboard-disabled';
-      } else {
-        $header_color = 'gradient-lightblue-header';
       }
       $header = phutil_tag(
         'div',
         array(
-          'class' => 'phui-pinboard-item-header '.
+          'class' => 'phui-pinboard-item-header '.$header_color,
-            'sprite-gradient '.$header_color,
         ),
         phutil_tag('a', array('href' => $this->uri), $this->header));
     }

webroot/rsrc/css/application/config/setup-issue.css

@@ -1,8 +1,6 @@
 /**
  * @provides setup-issue-css
  */
-
-
 .setup-issue-background {
   padding: 12px 0;
 }
@@ -15,7 +13,8 @@
 .setup-issue {
   background: #fff;
   border: 1px solid #BFCFDA;
-  border-bottom: 1px solid #8C98B8;
+  padding: 8px;
+  border-radius: 3px;
 }
 
 .setup-issue p {
@@ -78,13 +77,10 @@
 
 .setup-issue-name {
   color: #464C5C;
-  text-shadow: 0 1px #fff;
+  padding: 4px 8px 12px;
-  padding: 16px 12px;
   border-bottom: 1px solid #BFCFDA;
   font-size: 15px;
-  font-weight: bold;
+  font-weight: 500;
-  background-image: url(/rsrc/image/lightblue-header.png);
-  background-repeat: repeat-x;
 }
 
 .setup-issue-tail {
@@ -92,17 +88,20 @@
 }
 
 .setup-issue-status {
+  margin: 12px 4px 0;
   padding: 12px;
   background: #FDF5D4;
   color: #bc7837;
-  border-bottom: 1px solid #BFCFDA;
+  border: 1px solid #bc7837;
+  border-radius: 3px;
 }
 
 .setup-issue-actions {
-  padding: 12px;
+  padding: 8px 12px;
-  background: #f3f3f3;
   border-top: 1px solid #dfdfdf;
+  background-color: #f7f7f7;
   overflow: hidden;
+  margin: 0 -8px -8px -8px;
 }
 
 .setup-issue-next {
@@ -115,8 +114,7 @@
 }
 
 .setup-issue-config {
-  padding: 0 12px;
+  padding: 8px 12px;
-  background: #fff;
 }
 
 .setup-issue ul {

webroot/rsrc/css/application/config/unhandled-exception.css

@@ -6,19 +6,17 @@
   max-width: 760px;
   margin: 24px auto;
   background: #fff;
-  border: 1px solid #f4c6c6;
+  border: 1px solid #c0392b;
-  border-bottom: 1px solid #eb9797;
+  border-radius: 3px;
+  padding: 0 8px;
 }
 
 .unhandled-exception-detail .unhandled-exception-title {
-  color: #802b2b;
+  color: #c0392b;
-  text-shadow: 0 1px #fff;
+  padding: 12px 8px;
-  padding: 16px 12px;
+  border-bottom: 1px solid #f4dddb;
-  border-bottom: 1px solid #f4c6c6;
+  font-size: 16px;
-  font-size: 15px;
+  font-weight: 500;
-  font-weight: bold;
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAADwCAIAAABHUjkYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEpJREFUeNrs0TEKADAIBEER//9aa00bmzTGNNnrBhEO1ayxcJctKjUmmaf5a5tEtPazt/+67/Q/bvfr3nu6D8YYY4wxxvgfLwEGAIQkJawSMraKAAAAAElFTkSuQmCC');
-  background-repeat: repeat-x;
   margin: 0;
 }
 

webroot/rsrc/css/phui/phui-header-view.css

@@ -7,10 +7,6 @@
   overflow: hidden;
 }
 
-.phui-header-shell.sprite-gradient.gradient-white-header {
-  background: transparent;
-}
-
 body .phui-header-shell.phui-header-no-backgound {
   background-color: transparent;
   border: none;

webroot/rsrc/css/phui/phui-pinboard-view.css

@@ -17,7 +17,6 @@
   background: #ffffff;
   border-radius: 3px;
   border: 1px solid {$lightblueborder};
-  border-bottom: 1px solid {$blueborder};
   text-align: left;
   width: 288px;
 }
@@ -27,7 +26,11 @@
 }
 
 .device-desktop .phui-pinboard-item-view:hover {
-  box-shadow: {$dropshadow};
+  border-color: {$blue};
+}
+
+.device-desktop .phui-pinboard-item-view:hover .phui-pinboard-item-header a {
+  color: {$blue};
 }
 
 /* On phones, show a single column of items. */
@@ -42,13 +45,13 @@
   font-weight: bold;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
-  border-bottom: 1px solid {$lightblueborder};
+  border-bottom: 1px solid {$thinblueborder};
   white-space: nowrap;
   overflow: hidden;
 }
 
 .phui-pinboard-item-header a {
-  color: {$bluetext};
+  color: {$darkbluetext};
 }
 
 .phui-pinboard-item-image-link {

webroot/rsrc/css/sprite-gradient.css

@@ -1,36 +0,0 @@
-/**
- * @provides sprite-gradient-css
- * @generated
- */
-
-.sprite-gradient {
-  background-image: url(/rsrc/image/sprite-gradient.png);
-  background-repeat: repeat-x;
-}
-
-
-
-
-.gradient-dark-grey-header {
-  background-position: 0px 0px;
-}
-
-.gradient-grey-header {
-  background-position: 0px -71px;
-}
-
-.gradient-lightblue-header {
-  background-position: 0px -142px;
-}
-
-.gradient-lightgreen-header {
-  background-position: 0px -383px;
-}
-
-.gradient-lightred-header {
-  background-position: 0px -624px;
-}
-
-.gradient-lightviolet-header {
-  background-position: 0px -865px;
-}