More Diviner style updates

Summary: This adds a number of new styles for Diviner documentation. Not sure I've covered all the bases or wrote this in the most efficient manner, but passing it along now for early review before tightening everything up.

Test Plan: Review various class pages.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, aran

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

src/__celerity_resource_map__.php

@@ -1149,7 +1149,7 @@ celerity_register_resource_map(array(
   ),
   'diviner-shared-css' =>
   array(
-    'uri' => '/res/582ff299/rsrc/css/diviner/diviner-shared.css',
+    'uri' => '/res/cf15b860/rsrc/css/diviner/diviner-shared.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3182,7 +3182,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-header-view-css' =>
   array(
-    'uri' => '/res/016b9d83/rsrc/css/layout/phabricator-header-view.css',
+    'uri' => '/res/83d195c2/rsrc/css/layout/phabricator-header-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3774,7 +3774,7 @@ celerity_register_resource_map(array(
   ),
   'phui-document-view-css' =>
   array(
-    'uri' => '/res/dd1ef24b/rsrc/css/phui/phui-document.css',
+    'uri' => '/res/23e84bdc/rsrc/css/phui/phui-document.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -4171,7 +4171,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    '5e2ee206' =>
+    '1cb4ed1d' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -4218,7 +4218,7 @@ celerity_register_resource_map(array(
         39 => 'phabricator-property-list-view-css',
         40 => 'phabricator-tag-view-css',
       ),
-      'uri' => '/res/pkg/5e2ee206/core.pkg.css',
+      'uri' => '/res/pkg/1cb4ed1d/core.pkg.css',
       'type' => 'css',
     ),
     '8977e356' =>
@@ -4409,15 +4409,15 @@ celerity_register_resource_map(array(
   ),
   'reverse' =>
   array(
-    'aphront-dialog-view-css' => '5e2ee206',
+    'aphront-dialog-view-css' => '1cb4ed1d',
-    'aphront-error-view-css' => '5e2ee206',
+    'aphront-error-view-css' => '1cb4ed1d',
-    'aphront-list-filter-view-css' => '5e2ee206',
+    'aphront-list-filter-view-css' => '1cb4ed1d',
-    'aphront-pager-view-css' => '5e2ee206',
+    'aphront-pager-view-css' => '1cb4ed1d',
-    'aphront-panel-view-css' => '5e2ee206',
+    'aphront-panel-view-css' => '1cb4ed1d',
-    'aphront-table-view-css' => '5e2ee206',
+    'aphront-table-view-css' => '1cb4ed1d',
-    'aphront-tokenizer-control-css' => '5e2ee206',
+    'aphront-tokenizer-control-css' => '1cb4ed1d',
-    'aphront-tooltip-css' => '5e2ee206',
+    'aphront-tooltip-css' => '1cb4ed1d',
-    'aphront-typeahead-control-css' => '5e2ee206',
+    'aphront-typeahead-control-css' => '1cb4ed1d',
     'differential-changeset-view-css' => '44bfe40c',
     'differential-core-view-css' => '44bfe40c',
     'differential-inline-comment-editor' => 'd07a3bc2',
@@ -4431,7 +4431,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => '44bfe40c',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => '5e2ee206',
+    'global-drag-and-drop-css' => '1cb4ed1d',
     'inline-comment-summary-css' => '44bfe40c',
     'javelin-aphlict' => '8977e356',
     'javelin-behavior' => '2dbbb7d1',
@@ -4504,55 +4504,55 @@ celerity_register_resource_map(array(
     'javelin-util' => '2dbbb7d1',
     'javelin-vector' => '2dbbb7d1',
     'javelin-workflow' => '2dbbb7d1',
-    'lightbox-attachment-css' => '5e2ee206',
+    'lightbox-attachment-css' => '1cb4ed1d',
     'maniphest-task-summary-css' => '0a9e494f',
     'maniphest-transaction-detail-css' => '0a9e494f',
-    'phabricator-action-list-view-css' => '5e2ee206',
+    'phabricator-action-list-view-css' => '1cb4ed1d',
-    'phabricator-application-launch-view-css' => '5e2ee206',
+    'phabricator-application-launch-view-css' => '1cb4ed1d',
     'phabricator-busy' => '8977e356',
     'phabricator-content-source-view-css' => '44bfe40c',
-    'phabricator-core-css' => '5e2ee206',
+    'phabricator-core-css' => '1cb4ed1d',
-    'phabricator-crumbs-view-css' => '5e2ee206',
+    'phabricator-crumbs-view-css' => '1cb4ed1d',
     'phabricator-drag-and-drop-file-upload' => 'd07a3bc2',
     'phabricator-dropdown-menu' => '8977e356',
     'phabricator-file-upload' => '8977e356',
-    'phabricator-filetree-view-css' => '5e2ee206',
+    'phabricator-filetree-view-css' => '1cb4ed1d',
-    'phabricator-flag-css' => '5e2ee206',
+    'phabricator-flag-css' => '1cb4ed1d',
-    'phabricator-header-view-css' => '5e2ee206',
+    'phabricator-header-view-css' => '1cb4ed1d',
     'phabricator-hovercard' => '8977e356',
-    'phabricator-jump-nav' => '5e2ee206',
+    'phabricator-jump-nav' => '1cb4ed1d',
     'phabricator-keyboard-shortcut' => '8977e356',
     'phabricator-keyboard-shortcut-manager' => '8977e356',
-    'phabricator-main-menu-view' => '5e2ee206',
+    'phabricator-main-menu-view' => '1cb4ed1d',
     'phabricator-menu-item' => '8977e356',
-    'phabricator-nav-view-css' => '5e2ee206',
+    'phabricator-nav-view-css' => '1cb4ed1d',
     'phabricator-notification' => '8977e356',
-    'phabricator-notification-css' => '5e2ee206',
+    'phabricator-notification-css' => '1cb4ed1d',
-    'phabricator-notification-menu-css' => '5e2ee206',
+    'phabricator-notification-menu-css' => '1cb4ed1d',
-    'phabricator-object-item-list-view-css' => '5e2ee206',
+    'phabricator-object-item-list-view-css' => '1cb4ed1d',
     'phabricator-object-selector-css' => '44bfe40c',
     'phabricator-phtize' => '8977e356',
     'phabricator-prefab' => '8977e356',
     'phabricator-project-tag-css' => '0a9e494f',
-    'phabricator-property-list-view-css' => '5e2ee206',
+    'phabricator-property-list-view-css' => '1cb4ed1d',
-    'phabricator-remarkup-css' => '5e2ee206',
+    'phabricator-remarkup-css' => '1cb4ed1d',
     'phabricator-shaped-request' => 'd07a3bc2',
-    'phabricator-side-menu-view-css' => '5e2ee206',
+    'phabricator-side-menu-view-css' => '1cb4ed1d',
-    'phabricator-standard-page-view' => '5e2ee206',
+    'phabricator-standard-page-view' => '1cb4ed1d',
-    'phabricator-tag-view-css' => '5e2ee206',
+    'phabricator-tag-view-css' => '1cb4ed1d',
     'phabricator-textareautils' => '8977e356',
     'phabricator-tooltip' => '8977e356',
-    'phabricator-transaction-view-css' => '5e2ee206',
+    'phabricator-transaction-view-css' => '1cb4ed1d',
-    'phabricator-zindex-css' => '5e2ee206',
+    'phabricator-zindex-css' => '1cb4ed1d',
-    'phui-button-css' => '5e2ee206',
+    'phui-button-css' => '1cb4ed1d',
-    'phui-form-css' => '5e2ee206',
+    'phui-form-css' => '1cb4ed1d',
-    'phui-form-view-css' => '5e2ee206',
+    'phui-form-view-css' => '1cb4ed1d',
-    'phui-icon-view-css' => '5e2ee206',
+    'phui-icon-view-css' => '1cb4ed1d',
-    'phui-spacing-css' => '5e2ee206',
+    'phui-spacing-css' => '1cb4ed1d',
-    'sprite-apps-large-css' => '5e2ee206',
+    'sprite-apps-large-css' => '1cb4ed1d',
-    'sprite-gradient-css' => '5e2ee206',
+    'sprite-gradient-css' => '1cb4ed1d',
-    'sprite-icons-css' => '5e2ee206',
+    'sprite-icons-css' => '1cb4ed1d',
-    'sprite-menu-css' => '5e2ee206',
+    'sprite-menu-css' => '1cb4ed1d',
-    'syntax-highlighting-css' => '5e2ee206',
+    'syntax-highlighting-css' => '1cb4ed1d',
   ),
 ));

src/__phutil_library_map__.php

@@ -542,6 +542,7 @@ phutil_register_library_map(array(
     'DivinerRemarkupRuleSymbol' => 'applications/diviner/markup/DivinerRemarkupRuleSymbol.php',
     'DivinerRenderer' => 'applications/diviner/renderer/DivinerRenderer.php',
     'DivinerReturnTableView' => 'applications/diviner/view/DivinerReturnTableView.php',
+    'DivinerSectionView' => 'applications/diviner/view/DivinerSectionView.php',
     'DivinerStaticPublisher' => 'applications/diviner/publisher/DivinerStaticPublisher.php',
     'DivinerWorkflow' => 'applications/diviner/workflow/DivinerWorkflow.php',
     'DoorkeeperBridge' => 'applications/doorkeeper/bridge/DoorkeeperBridge.php',
@@ -2577,6 +2578,7 @@ phutil_register_library_map(array(
     'DivinerPublishCache' => 'DivinerDiskCache',
     'DivinerRemarkupRuleSymbol' => 'PhutilRemarkupRule',
     'DivinerReturnTableView' => 'AphrontTagView',
+    'DivinerSectionView' => 'AphrontTagView',
     'DivinerStaticPublisher' => 'DivinerPublisher',
     'DivinerWorkflow' => 'PhutilArgumentWorkflow',
     'DoorkeeperBridge' => 'Phobject',

src/applications/diviner/controller/DivinerAtomController.php

@@ -135,9 +135,8 @@ final class DivinerAtomController extends DivinerController {
       if ($tasks) {
         $methods_by_task = igroup($methods, 'task');
 
-        $document->appendChild(
+        $section = id(new DivinerSectionView())
-          id(new PhabricatorHeaderView())
+          ->setHeader(pht('Tasks'));
-            ->setHeader(pht('Tasks')));
 
         if (isset($methods_by_task[''])) {
           $tasks[''] = array(
@@ -148,31 +147,40 @@ final class DivinerAtomController extends DivinerController {
         }
 
         foreach ($tasks as $spec) {
-          $document->appendChild(
+          $section->addContent(
             id(new PhabricatorHeaderView())
+              ->setNoBackground(true)
               ->setHeader($spec['title']));
 
           $task_methods = idx($methods_by_task, $spec['name'], array());
-          if ($task_methods) {
+            $inner_box = id(new PHUIBoxView())
-            $document->appendChild(hsprintf('<ul>'));
+              ->addPadding(PHUI::PADDING_LARGE_LEFT)
+              ->addPadding(PHUI::PADDING_LARGE_RIGHT)
+              ->addPadding(PHUI::PADDING_LARGE_BOTTOM);
+            if ($task_methods) {
+            $inner_box->appendChild(hsprintf('<ul class="diviner-list">'));
             foreach ($task_methods as $task_method) {
               $atom = last($task_method['atoms']);
-              $document->appendChild(
+              $inner_box->appendChild(
                 hsprintf('<li>%s()</li>', $atom->getName()));
             }
-            $document->appendChild(hsprintf('</ul>'));
+            $inner_box->appendChild(hsprintf('</ul>'));
           } else {
-            $document->appendChild("No methods for this task.");
+            $no_methods = pht('No methods for this task.');
+            $inner_box->appendChild(hsprintf('<em>%s</em>', $no_methods));
           }
+          $section->addContent($inner_box);
         }
+        $document->appendChild($section);
       }
 
-      $document->appendChild(
+      $section = id(new DivinerSectionView())
-        id(new PhabricatorHeaderView())
+          ->setHeader(pht('Methods'));
-          ->setHeader(pht('Methods')));
+
       foreach ($methods as $spec) {
         $matom = last($spec['atoms']);
         $method_header = id(new PhabricatorHeaderView())
+          ->setNoBackground(true)
           ->setHeader($matom->getName());
 
         $inherited = $spec['inherited'];
@@ -187,13 +195,14 @@ final class DivinerAtomController extends DivinerController {
         $method_header->setSubheader(
           $this->renderFullSignature($matom));
 
-        $document->appendChild(
+        $section->addContent(
           array(
             $method_header,
             $this->renderMethodDocumentationText($symbol, $spec, $engine),
             $this->buildParametersAndReturn($spec['atoms']),
           ));
       }
+      $document->appendChild($section);
     }
 
     if ($toc) {
@@ -534,9 +543,11 @@ final class DivinerAtomController extends DivinerController {
     } else {
       $atom = $symbol->getAtom();
       $undoc = DivinerAtom::getThisAtomIsNotDocumentedString($atom->getType());
-      $content = id(new AphrontErrorView())
+      $content = id(new PHUIBoxView())
-        ->appendChild($undoc)
+        ->addPadding(PHUI::PADDING_LARGE_LEFT)
-        ->setSeverity(AphrontErrorView::SEVERITY_NODATA);
+        ->addPadding(PHUI::PADDING_LARGE_BOTTOM)
+        ->addPadding(PHUI::PADDING_LARGE_RIGHT)
+        ->appendChild(hsprintf('<em>%s</em>', $undoc));
     }
 
     return $content;
@@ -559,15 +570,19 @@ final class DivinerAtomController extends DivinerController {
         if (!strlen(trim($symbol->getMarkupText($field)))) {
           continue;
         }
-        $out[] = phutil_tag(
+        $out[] = id(new PHUIBoxView())
-          'div',
+          ->addPadding(PHUI::PADDING_LARGE_LEFT)
-          array(),
+          ->addPadding(PHUI::PADDING_LARGE_RIGHT)
-          pht('From parent implementation in %s:', $impl->getName()));
+          ->addClass('diviner-method-implementation-header')
+          ->appendChild(
+            pht('From parent implementation in %s:', $impl->getName()));
       } else if ($out) {
-        $out[] = phutil_tag(
+        $out[] = id(new PHUIBoxView())
-          'div',
+          ->addPadding(PHUI::PADDING_LARGE_LEFT)
-          array(),
+          ->addPadding(PHUI::PADDING_LARGE_RIGHT)
-          pht('From this implementation:'));
+          ->addClass('diviner-method-implementation-header')
+          ->appendChild(
+            pht('From this implementation:'));
       }
       $out[] = $this->renderDocumentationText($symbol, $engine);
     }

src/applications/diviner/view/DivinerSectionView.php

@@ -0,0 +1,43 @@
+<?php
+
+final class DivinerSectionView extends AphrontTagView {
+
+  private $header;
+  private $content;
+
+  public function addContent($content) {
+    $this->content[] = $content;
+    return $this;
+  }
+
+  public function setHeader($text) {
+    $this->header = $text;
+    return $this;
+  }
+
+  public function getTagName() {
+    return 'div';
+  }
+
+  public function getTagAttributes() {
+    return array(
+      'class' => 'diviner-document-section',
+    );
+  }
+
+  public function getTagContent() {
+    require_celerity_resource('diviner-shared-css');
+
+    $header = id(new PhabricatorHeaderView())
+      ->setBleedHeader(true)
+      ->setHeader($this->header);
+
+    $content = id(new PHUIBoxView())
+      ->addPadding(PHUI::PADDING_LARGE_LEFT)
+      ->addPadding(PHUI::PADDING_LARGE_RIGHT)
+      ->appendChild($this->content);
+
+    return array($header, $content);
+  }
+
+}

src/applications/uiexample/examples/PHUIColorPalletteExample.php

@@ -43,6 +43,7 @@ final class PHUIColorPalletteExample extends PhabricatorUIExample {
     );
 
     $blues = array(
+      'DDE8EF' => 'Thin Blue Border {$thinblueborder}',
       'BFCFDA' => 'Light Blue Border {$lightblueborder}',
       '95A6C5' => 'Blue Border {$blueborder}',
       '626E82' => 'Dark Blue Border {$darkblueborder}',

src/infrastructure/celerity/CelerityResourceTransformer.php

@@ -160,6 +160,7 @@ final class CelerityResourceTransformer {
       'greybackground'      => '#EBECEE',
 
       // Base Blues
+      'thinblueborder'      => '#DDE8EF',
       'lightblueborder'     => '#BFCFDA',
       'blueborder'          => '#8C98B8',
       'darkblueborder'      => '#626E82',

src/view/layout/PhabricatorHeaderView.php

@@ -8,6 +8,8 @@ final class PhabricatorHeaderView extends AphrontView {
   private $image;
   private $subheader;
   private $gradient;
+  private $noBackground;
+  private $bleedHeader;
 
   public function setHeader($header) {
     $this->header = $header;
@@ -19,6 +21,11 @@ final class PhabricatorHeaderView extends AphrontView {
     return $this;
   }
 
+  public function setNoBackground($nada) {
+    $this->noBackground = $nada;
+    return $this;
+  }
+
   public function addTag(PhabricatorTagView $tag) {
     $this->tags[] = $tag;
     return $this;
@@ -34,6 +41,11 @@ final class PhabricatorHeaderView extends AphrontView {
     return $this;
   }
 
+  public function setBleedHeader($bleed) {
+    $this->bleedHeader = $bleed;
+    return $this;
+  }
+
   public function setGradient($gradient) {
     $this->gradient = $gradient;
     return $this;
@@ -45,6 +57,14 @@ final class PhabricatorHeaderView extends AphrontView {
     $classes = array();
     $classes[] = 'phabricator-header-shell';
 
+    if ($this->noBackground) {
+      $classes[] = 'phabricator-header-no-backgound';
+    }
+
+    if ($this->bleedHeader) {
+      $classes[] = 'phabricator-bleed-header';
+    }
+
     if ($this->gradient) {
       $classes[] = 'sprite-gradient';
       $classes[] = 'gradient-'.$this->gradient.'-header';

webroot/rsrc/css/diviner/diviner-shared.css

@@ -56,3 +56,20 @@
   width: 80%;
   background-color: #fff;
 }
+
+.diviner-document-section {
+  padding: 0 0 16px 0;
+}
+
+.device-phone .diviner-document-section {
+  padding: 0 8px 16px 0;
+}
+
+.diviner-document-section em {
+  color: {$lightgreytext};
+  text-decoration: italic;
+}
+
+.diviner-method-implementation-header {
+  color: {$lightgreytext};
+}

webroot/rsrc/css/layout/phabricator-header-view.css

@@ -10,6 +10,25 @@
   overflow: hidden;
 }
 
+body .phabricator-header-shell.phabricator-header-no-backgound {
+  background-color: transparent;
+  border: none;
+}
+
+body .phabricator-header-shell.phabricator-bleed-header {
+  background-color: {$lightgreybackground};
+  border-top: 1px solid {$thinblueborder};
+  border-bottom: none;
+  width: auto;
+  margin-bottom: 16px;
+}
+
+body .phabricator-header-shell.phabricator-bleed-header
+  .phabricator-header-view {
+  padding: 8px 24px 8px 16px;
+  font-size: 18px;
+}
+
 .phabricator-header-shell + .phabricator-form-view {
   border-top-width: 0;
 }

webroot/rsrc/css/phui/phui-document.css

@@ -67,6 +67,19 @@
   border-bottom: 1px solid #BFCFDA;
 }
 
+.phui-document-content
+  .phabricator-header-shell.phabricator-header-no-backgound {
+  border-bottom: 1px solid {$thinblueborder};
+  margin: 0 0 16px 0;
+}
+
+.phui-document-content
+  .phabricator-header-shell.phabricator-header-no-backgound
+  .phabricator-header-view {
+ padding: 8px 0 4px;
+ font-size: 14px;
+}
+
 .phui-document-content .phabricator-header-view {
   padding: 16px;
   color: #6b748c;