Config re-design

Summary:
This is a full UI pass at a cleaner "Config" application. The main idea is to simplify the UI, center it, and have a different feel than other UI, a sort of "manage" UI theme for objects with loads of settings. Also adds a new minimalistic "WHITE_CONFIG" box type which may get re-used in Diffusion settings. This is a 90% pass, I'll have a few follow up diffs. Specifically:

 - Build breadcrumbs as a flexible UI to go into headers.
 - One click ObjectItemView option, for hover states.
 - Sidenav doesn't always select (AphrontFilter issue)
 - Mobile touchups, though it's pretty reasonable.

Test Plan:
Click through every page here, edit options, see new navigation UI. Test a few various setup issue layouts including fatals.

{F5163228}

{F5163229}

{F5163230}

{F5163231}

{F5163232}

{F5163233}

{F5163234}

Reviewers: epriestley

Reviewed By: epriestley

Spies: Korvin, epriestley

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'e68cf1fa',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => '1071e7a2',
+    'core.pkg.css' => '042e1782',
     'core.pkg.js' => '6c085267',
     'darkconsole.pkg.js' => '1f9a31bc',
     'differential.pkg.css' => '45951e9e',
@@ -45,8 +45,7 @@ return array(
     'rsrc/css/application/base/standard-page-view.css' => '34ee718b',
     'rsrc/css/application/chatlog/chatlog.css' => 'd295b020',
     'rsrc/css/application/conduit/conduit-api.css' => '7bc725c4',
-    'rsrc/css/application/config/config-options.css' => 'd55ed093',
+    'rsrc/css/application/config/config-options.css' => '4615667b',
-    'rsrc/css/application/config/config-page.css' => 'c1d5121b',
     'rsrc/css/application/config/config-template.css' => '8f18fa41',
     'rsrc/css/application/config/setup-issue.css' => '7dae7f18',
     'rsrc/css/application/config/unhandled-exception.css' => '4c96257a',
@@ -132,7 +131,7 @@ return array(
     'rsrc/css/phui/calendar/phui-calendar-list.css' => '576be600',
     'rsrc/css/phui/calendar/phui-calendar-month.css' => '21154caf',
     'rsrc/css/phui/calendar/phui-calendar.css' => 'f1ddf11c',
-    'rsrc/css/phui/object-item/phui-oi-big-ui.css' => '19f9369b',
+    'rsrc/css/phui/object-item/phui-oi-big-ui.css' => '628f59de',
     'rsrc/css/phui/object-item/phui-oi-color.css' => 'cd2b9b77',
     'rsrc/css/phui/object-item/phui-oi-drag-ui.css' => '08f4ccc3',
     'rsrc/css/phui/object-item/phui-oi-flush-ui.css' => '9d9685d6',
@@ -143,7 +142,7 @@ return array(
     'rsrc/css/phui/phui-badge.css' => '22c0cf4f',
     'rsrc/css/phui/phui-basic-nav-view.css' => '98c11ab3',
     'rsrc/css/phui/phui-big-info-view.css' => 'acc3492c',
-    'rsrc/css/phui/phui-box.css' => '745e881d',
+    'rsrc/css/phui/phui-box.css' => '4165eb0d',
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
     'rsrc/css/phui/phui-cms.css' => '504b4b23',
     'rsrc/css/phui/phui-comment-form.css' => 'ac68149f',
@@ -158,7 +157,7 @@ return array(
     'rsrc/css/phui/phui-form-view.css' => 'ae9f8d16',
     'rsrc/css/phui/phui-form.css' => '7aaa04e3',
     'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
-    'rsrc/css/phui/phui-header-view.css' => '859c5150',
+    'rsrc/css/phui/phui-header-view.css' => '3c722648',
     'rsrc/css/phui/phui-hovercard.css' => 'f0592bcf',
     'rsrc/css/phui/phui-icon-set-selector.css' => '87db8fee',
     'rsrc/css/phui/phui-icon.css' => '5c4a5de6',
@@ -551,8 +550,7 @@ return array(
     'auth-css' => '0877ed6e',
     'bulk-job-css' => 'df9c1d4a',
     'conduit-api-css' => '7bc725c4',
-    'config-options-css' => 'd55ed093',
+    'config-options-css' => '4615667b',
-    'config-page-css' => 'c1d5121b',
     'conpherence-color-css' => 'abb4c358',
     'conpherence-durable-column-view' => '89ea6bef',
     'conpherence-header-pane-css' => 'cb6f4e19',
@@ -822,7 +820,7 @@ return array(
     'phui-badge-view-css' => '22c0cf4f',
     'phui-basic-nav-view-css' => '98c11ab3',
     'phui-big-info-view-css' => 'acc3492c',
-    'phui-box-css' => '745e881d',
+    'phui-box-css' => '4165eb0d',
     'phui-button-bar-css' => 'f1ff5494',
     'phui-button-css' => '1863cc6e',
     'phui-button-simple-css' => '8e1baf68',
@@ -845,7 +843,7 @@ return array(
     'phui-form-css' => '7aaa04e3',
     'phui-form-view-css' => 'ae9f8d16',
     'phui-head-thing-view-css' => 'fd311e5f',
-    'phui-header-view-css' => '859c5150',
+    'phui-header-view-css' => '3c722648',
     'phui-hovercard' => '1bd28176',
     'phui-hovercard-view-css' => 'f0592bcf',
     'phui-icon-set-selector-css' => '87db8fee',
@@ -858,7 +856,7 @@ return array(
     'phui-lightbox-css' => '0a035e40',
     'phui-list-view-css' => '38f8c9bd',
     'phui-object-box-css' => '9cff003c',
-    'phui-oi-big-ui-css' => '19f9369b',
+    'phui-oi-big-ui-css' => '628f59de',
     'phui-oi-color-css' => 'cd2b9b77',
     'phui-oi-drag-ui-css' => '08f4ccc3',
     'phui-oi-flush-ui-css' => '9d9685d6',
@@ -997,9 +995,6 @@ return array(
     '185bbd53' => array(
       'javelin-install',
     ),
-    '19f9369b' => array(
-      'phui-oi-list-view-css',
-    ),
     '1ad0a787' => array(
       'javelin-install',
       'javelin-reactor',
@@ -1366,6 +1361,9 @@ return array(
       'javelin-magical-init',
       'javelin-util',
     ),
+    '628f59de' => array(
+      'phui-oi-list-view-css',
+    ),
     '62dfea03' => array(
       'javelin-install',
       'javelin-util',

src/__phutil_library_map__.php

@@ -2445,7 +2445,6 @@ phutil_register_library_map(array(
     'PhabricatorConfigOption' => 'applications/config/option/PhabricatorConfigOption.php',
     'PhabricatorConfigOptionType' => 'applications/config/custom/PhabricatorConfigOptionType.php',
     'PhabricatorConfigPHIDModule' => 'applications/config/module/PhabricatorConfigPHIDModule.php',
-    'PhabricatorConfigPageView' => 'applications/config/view/PhabricatorConfigPageView.php',
     'PhabricatorConfigProxySource' => 'infrastructure/env/PhabricatorConfigProxySource.php',
     'PhabricatorConfigPurgeCacheController' => 'applications/config/controller/PhabricatorConfigPurgeCacheController.php',
     'PhabricatorConfigRegexOptionType' => 'applications/config/custom/PhabricatorConfigRegexOptionType.php',
@@ -7734,7 +7733,6 @@ phutil_register_library_map(array(
     ),
     'PhabricatorConfigOptionType' => 'Phobject',
     'PhabricatorConfigPHIDModule' => 'PhabricatorConfigModule',
-    'PhabricatorConfigPageView' => 'AphrontTagView',
     'PhabricatorConfigProxySource' => 'PhabricatorConfigSource',
     'PhabricatorConfigPurgeCacheController' => 'PhabricatorConfigController',
     'PhabricatorConfigRegexOptionType' => 'PhabricatorConfigJSONOptionType',

src/applications/config/constants/PhabricatorConfigGroupConstants.php

@@ -28,8 +28,17 @@ abstract class PhabricatorConfigGroupConstants
   public static function getGroupURI($group) {
     $map = array(
       self::GROUP_CORE  => '/',
-      self::GROUP_APPLICATION => pht('application/'),
+      self::GROUP_APPLICATION => 'application/',
-      self::GROUP_DEVELOPER => pht('developer/'),
+      self::GROUP_DEVELOPER => 'developer/',
+    );
+    return idx($map, $group, '#');
+  }
+
+  public static function getGroupFullURI($group) {
+    $map = array(
+      self::GROUP_CORE  => '/config/',
+      self::GROUP_APPLICATION => '/config/application/',
+      self::GROUP_DEVELOPER => '/config/developer/',
     );
     return idx($map, $group, '#');
   }

src/applications/config/controller/PhabricatorConfigAllController.php

@@ -49,29 +49,29 @@ final class PhabricatorConfigAllController
         ));
 
     $title = pht('Current Settings');
-
+    $header = $this->buildHeaderView($title);
-    $crumbs = $this
-      ->buildApplicationCrumbs()
-      ->addTextCrumb($title)
-      ->setBorder(true);
-
-    $header = id(new PHUIHeaderView())
-      ->setHeader($title)
-      ->setProfileHeader(true);
 
     $nav = $this->buildSideNavView();
     $nav->selectFilter('all/');
 
-    $content = id(new PhabricatorConfigPageView())
+    $view = $this->buildConfigBoxView(
+      pht('All Settings'),
+      $table);
+
+    $crumbs = $this->buildApplicationCrumbs()
+      ->addTextCrumb($title)
+      ->setBorder(true);
+
+    $content = id(new PHUITwoColumnView())
       ->setHeader($header)
-      ->setContent($table);
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn($view);
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
 
   }
 

src/applications/config/controller/PhabricatorConfigApplicationController.php

@@ -11,28 +11,25 @@ final class PhabricatorConfigApplicationController
 
     $groups = PhabricatorApplicationConfigOptions::loadAll();
     $apps_list = $this->buildConfigOptionsList($groups, 'apps');
+    $apps_list = $this->buildConfigBoxView(pht('Applications'), $apps_list);
 
     $title = pht('Application Settings');
+    $header = $this->buildHeaderView($title);
 
-    $header = id(new PHUIHeaderView())
+    $content = id(new PHUITwoColumnView())
-      ->setHeader($title)
-      ->setProfileHeader(true);
-
-    $crumbs = $this
-      ->buildApplicationCrumbs()
-      ->addTextCrumb(pht('Applications'))
-      ->setBorder(true);
-
-    $content = id(new PhabricatorConfigPageView())
       ->setHeader($header)
-      ->setContent($apps_list);
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn($apps_list);
+
+    $crumbs = $this->buildApplicationCrumbs()
+      ->addTextCrumb($title)
+      ->setBorder(true);
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
   }
 
   private function buildConfigOptionsList(array $groups, $type) {

src/applications/config/controller/PhabricatorConfigCacheController.php

@@ -9,16 +9,15 @@ final class PhabricatorConfigCacheController
     $nav = $this->buildSideNavView();
     $nav->selectFilter('cache/');
 
+    $purge_button = id(new PHUIButtonView())
+      ->setText(pht('Purge Caches'))
+      ->setHref('/config/cache/purge/')
+      ->setTag('a')
+      ->setWorkflow(true)
+      ->setIcon('fa-exclamation-triangle');
+
     $title = pht('Cache Status');
-
+    $header = $this->buildHeaderView($title, $purge_button);
-    $header = id(new PHUIHeaderView())
-      ->setHeader($title)
-      ->setProfileHeader(true);
-
-    $crumbs = $this
-      ->buildApplicationCrumbs()
-      ->addTextCrumb(pht('Cache Status'))
-      ->setBorder(true);
 
     $code_box = $this->renderCodeBox();
     $data_box = $this->renderDataBox();
@@ -28,40 +27,27 @@ final class PhabricatorConfigCacheController
       $data_box,
     );
 
-    $content = id(new PhabricatorConfigPageView())
+    $crumbs = $this->buildApplicationCrumbs()
+      ->addTextCrumb($title)
+      ->setBorder(true);
+
+    $content = id(new PHUITwoColumnView())
       ->setHeader($header)
-      ->setContent($page);
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn($page);
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
   }
 
   private function renderCodeBox() {
     $cache = PhabricatorOpcodeCacheSpec::getActiveCacheSpec();
-
     $properties = id(new PHUIPropertyListView());
-
     $this->renderCommonProperties($properties, $cache);
-
+    return $this->buildConfigBoxView(pht('Opcode Cache'), $properties);
-    $purge_button = id(new PHUIButtonView())
-      ->setText(pht('Purge Caches'))
-      ->setHref('/config/cache/purge/')
-      ->setTag('a')
-      ->setWorkflow(true)
-      ->setIcon('fa-exclamation-triangle');
-
-    $header = id(new PHUIHeaderView())
-      ->setHeader(pht('Opcode Cache'))
-      ->addActionLink($purge_button);
-
-    return id(new PHUIObjectBoxView())
-      ->setHeader($header)
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
-      ->addPropertyList($properties);
   }
 
   private function renderDataBox() {
@@ -109,11 +95,9 @@ final class PhabricatorConfigCacheController
           ));
     }
 
-    return id(new PHUIObjectBoxView())
+    $properties = $this->buildConfigBoxView(pht('Data Cache'), $properties);
-      ->setHeaderText(pht('Data Cache'))
+    $table = $this->buildConfigBoxView(pht('Cache Storage'), $table);
-      ->addPropertyList($properties)
+    return array($properties, $table);
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
-      ->setTable($table);
   }
 
   private function renderCommonProperties(

src/applications/config/controller/PhabricatorConfigClusterDatabasesController.php

@@ -9,34 +9,31 @@ final class PhabricatorConfigClusterDatabasesController
 
     $title = pht('Cluster Database Status');
     $doc_href = PhabricatorEnv::getDoclink('Cluster: Databases');
-
+    $button = id(new PHUIButtonView())
-    $header = id(new PHUIHeaderView())
-      ->setHeader($title)
-      ->setProfileHeader(true)
-      ->addActionLink(
-        id(new PHUIButtonView())
       ->setIcon('fa-book')
       ->setHref($doc_href)
       ->setTag('a')
-          ->setText(pht('Documentation')));
+      ->setText(pht('Documentation'));
 
-    $crumbs = $this
+    $header = $this->buildHeaderView($title, $button);
-      ->buildApplicationCrumbs()
+
+    $database_status = $this->buildClusterDatabaseStatus();
+    $status = $this->buildConfigBoxView(pht('Status'), $database_status);
+
+    $crumbs = $this->buildApplicationCrumbs()
       ->addTextCrumb($title)
       ->setBorder(true);
 
-    $database_status = $this->buildClusterDatabaseStatus();
+    $content = id(new PHUITwoColumnView())
-
-    $content = id(new PhabricatorConfigPageView())
       ->setHeader($header)
-      ->setContent($database_status);
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn($status);
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
   }
 
   private function buildClusterDatabaseStatus() {

src/applications/config/controller/PhabricatorConfigClusterNotificationsController.php

@@ -9,34 +9,33 @@ final class PhabricatorConfigClusterNotificationsController
 
     $title = pht('Cluster Notifications');
     $doc_href = PhabricatorEnv::getDoclink('Cluster: Notifications');
-
+    $button = id(new PHUIButtonView())
-    $header = id(new PHUIHeaderView())
-      ->setHeader($title)
-      ->setProfileHeader(true)
-      ->addActionLink(
-        id(new PHUIButtonView())
       ->setIcon('fa-book')
       ->setHref($doc_href)
       ->setTag('a')
-          ->setText(pht('Documentation')));
+      ->setText(pht('Documentation'));
 
-    $crumbs = $this
+    $header = $this->buildHeaderView($title, $button);
-      ->buildApplicationCrumbs()
+
+    $notification_status = $this->buildClusterNotificationStatus();
+    $status = $this->buildConfigBoxView(
+      pht('Notifications Status'),
+      $notification_status);
+
+    $crumbs = $this->buildApplicationCrumbs()
       ->addTextCrumb($title)
       ->setBorder(true);
 
-    $notification_status = $this->buildClusterNotificationStatus();
+    $content = id(new PHUITwoColumnView())
-
-    $content = id(new PhabricatorConfigPageView())
       ->setHeader($header)
-      ->setContent($notification_status);
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn($status);
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
   }
 
   private function buildClusterNotificationStatus() {

src/applications/config/controller/PhabricatorConfigClusterRepositoriesController.php

@@ -10,39 +10,39 @@ final class PhabricatorConfigClusterRepositoriesController
     $title = pht('Cluster Repository Status');
 
     $doc_href = PhabricatorEnv::getDoclink('Cluster: Repositories');
-
+    $button = id(new PHUIButtonView())
-    $header = id(new PHUIHeaderView())
-      ->setHeader($title)
-      ->setProfileHeader(true)
-      ->addActionLink(
-        id(new PHUIButtonView())
       ->setIcon('fa-book')
       ->setHref($doc_href)
       ->setTag('a')
-          ->setText(pht('Documentation')));
+      ->setText(pht('Documentation'));
 
-    $crumbs = $this
+    $header = $this->buildHeaderView($title, $button);
-      ->buildApplicationCrumbs()
-      ->addTextCrumb(pht('Repository Servers'))
-      ->setBorder(true);
 
     $repository_status = $this->buildClusterRepositoryStatus();
-    $repository_errors = $this->buildClusterRepositoryErrors();
+    $repo_status = $this->buildConfigBoxView(
+      pht('Repository Status'), $repository_status);
 
-    $content = id(new PhabricatorConfigPageView())
+    $repository_errors = $this->buildClusterRepositoryErrors();
+    $repo_errors = $this->buildConfigBoxView(
+      pht('Repository Errors'), $repository_errors);
+
+    $crumbs = $this->buildApplicationCrumbs()
+      ->addTextCrumb($title)
+      ->setBorder(true);
+
+    $content = id(new PHUITwoColumnView())
       ->setHeader($header)
-      ->setContent(
+      ->setNavigation($nav)
-        array(
+      ->setFixed(true)
-          $repository_status,
+      ->setMainColumn(array(
-          $repository_errors,
+        $repo_status,
+        $repo_errors,
       ));
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
   }
 
   private function buildClusterRepositoryStatus() {

src/applications/config/controller/PhabricatorConfigClusterSearchController.php

@@ -10,33 +10,30 @@ final class PhabricatorConfigClusterSearchController
     $title = pht('Cluster Search');
     $doc_href = PhabricatorEnv::getDoclink('Cluster: Search');
 
-    $header = id(new PHUIHeaderView())
+    $button = id(new PHUIButtonView())
-      ->setHeader($title)
-      ->setProfileHeader(true)
-      ->addActionLink(
-        id(new PHUIButtonView())
       ->setIcon('fa-book')
       ->setHref($doc_href)
       ->setTag('a')
-          ->setText(pht('Documentation')));
+      ->setText(pht('Documentation'));
 
-    $crumbs = $this
+    $header = $this->buildHeaderView($title, $button);
-      ->buildApplicationCrumbs($nav)
-      ->addTextCrumb($title)
-      ->setBorder(true);
 
     $search_status = $this->buildClusterSearchStatus();
 
-    $content = id(new PhabricatorConfigPageView())
+    $crumbs = $this->buildApplicationCrumbs()
+      ->addTextCrumb($title)
+      ->setBorder(true);
+
+    $content = id(new PHUITwoColumnView())
       ->setHeader($header)
-      ->setContent($search_status);
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn($search_status);
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
   }
 
   private function buildClusterSearchStatus() {
@@ -105,15 +102,16 @@ final class PhabricatorConfigClusterSearchController
       ->setNoDataString(pht('No search servers are configured.'))
       ->setHeaders($head);
 
-    $view = id(new PHUIObjectBoxView())
+    $view = $this->buildConfigBoxView(pht('Search Servers'), $table);
-      ->setHeaderText($service->getDisplayName())
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
-      ->setTable($table);
 
-    if ($stats_view) {
+    $stats = null;
-      $view->addPropertyList($stats_view);
+    if ($stats_view->hasAnyProperties()) {
+      $stats = $this->buildConfigBoxView(
+        pht('%s Stats', $service->getDisplayName()),
+        $stats_view);
     }
-    return $view;
+
+    return array($stats, $view);
   }
 
   private function renderIndexStats($stats) {

src/applications/config/controller/PhabricatorConfigController.php

@@ -8,10 +8,10 @@ abstract class PhabricatorConfigController extends PhabricatorController {
 
   public function buildSideNavView($filter = null, $for_app = false) {
 
+
     $guide_href = new PhutilURI('/guides/');
     $nav = new AphrontSideNavFilterView();
     $nav->setBaseURI(new PhutilURI($this->getApplicationURI()));
-    $nav->addLabel(pht('Configuration'));
     $nav->addFilter('/',
       pht('Core Settings'), null, 'fa-gear');
     $nav->addFilter('application/',
@@ -46,7 +46,6 @@ abstract class PhabricatorConfigController extends PhabricatorController {
       pht('Search Servers'), null, 'fa-search');
     $nav->addLabel(pht('Modules'));
 
-
     $modules = PhabricatorConfigModule::getAllModules();
     foreach ($modules as $key => $module) {
       $nav->addFilter('module/'.$key.'/',
@@ -60,4 +59,37 @@ abstract class PhabricatorConfigController extends PhabricatorController {
     return $this->buildSideNavView(null, true)->getMenu();
   }
 
+  public function buildHeaderView($text, $action = null) {
+    $viewer = $this->getViewer();
+
+    $file = PhabricatorFile::loadBuiltin($viewer, 'projects/v3/manage.png');
+    $image = $file->getBestURI($file);
+    $header = id(new PHUIHeaderView())
+      ->setHeader($text)
+      ->setProfileHeader(true)
+      ->setImage($image);
+
+    if ($action) {
+      $header->addActionLink($action);
+    }
+
+    return $header;
+  }
+
+  public function buildConfigBoxView($title, $content, $action = null) {
+    $header = id(new PHUIHeaderView())
+      ->setHeader($title);
+
+    if ($action) {
+      $header->addActionItem($action);
+    }
+
+    $view = id(new PHUIObjectBoxView())
+      ->setHeader($header)
+      ->appendChild($content)
+      ->setBackground(PHUIObjectBoxView::WHITE_CONFIG);
+
+    return $view;
+  }
+
 }

src/applications/config/controller/PhabricatorConfigDatabaseIssueController.php

@@ -12,10 +12,6 @@ final class PhabricatorConfigDatabaseIssueController
     $expect = $query->loadExpectedSchemata();
     $comp_servers = $query->buildComparisonSchemata($expect, $actual);
 
-    $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->addTextCrumb(pht('Database Issues'));
-    $crumbs->setBorder(true);
-
     // Collect all open issues.
     $issues = array();
     foreach ($comp_servers as $ref_name => $comp) {
@@ -158,24 +154,27 @@ final class PhabricatorConfigDatabaseIssueController
     }
 
     $title = pht('Database Issues');
-
+    $header = $this->buildHeaderView($title);
-    $header = id(new PHUIHeaderView())
-      ->setHeader($title)
-      ->setProfileHeader(true);
 
     $nav = $this->buildSideNavView();
     $nav->selectFilter('dbissue/');
 
-    $content = id(new PhabricatorConfigPageView())
+    $view = $this->buildConfigBoxView(pht('Issues'), $table);
+
+    $crumbs = $this->buildApplicationCrumbs()
+      ->addTextCrumb($title)
+      ->setBorder(true);
+
+    $content = id(new PHUITwoColumnView())
       ->setHeader($header)
-      ->setContent($table);
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn($view);
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
   }
 
 }

src/applications/config/controller/PhabricatorConfigDatabaseStatusController.php

@@ -132,27 +132,24 @@ final class PhabricatorConfigDatabaseStatusController
     }
 
     $doc_link = PhabricatorEnv::getDoclink('Managing Storage Adjustments');
-
+    $button = id(new PHUIButtonView())
-    $header = id(new PHUIHeaderView())
-      ->setHeader($title)
-      ->setProfileHeader(true)
-      ->addActionLink(
-        id(new PHUIButtonView())
       ->setTag('a')
       ->setIcon('fa-book')
       ->setHref($doc_link)
-          ->setText(pht('Learn More')));
+      ->setText(pht('Documentation'));
 
-    $content = id(new PhabricatorConfigPageView())
+    $header = $this->buildHeaderView($title, $button);
+
+    $content = id(new PHUITwoColumnView())
       ->setHeader($header)
-      ->setContent($body);
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn($body);
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
   }
 
 
@@ -221,11 +218,12 @@ final class PhabricatorConfigDatabaseStatusController
         ));
 
     $title = pht('Database Status');
-
     $properties = $this->buildProperties(
       array(
       ),
       $comp->getIssues());
+    $properties = $this->buildConfigBoxView(pht('Properties'), $properties);
+    $table = $this->buildConfigBoxView(pht('Database'), $table);
 
     return $this->buildResponse($title, array($properties, $table));
   }
@@ -280,7 +278,7 @@ final class PhabricatorConfigDatabaseStatusController
           null,
         ));
 
-    $title = pht('Database: %s', $database_name);
+    $title = $database_name;
 
     $actual_database = $actual->getDatabase($database_name);
     if ($actual_database) {
@@ -325,6 +323,9 @@ final class PhabricatorConfigDatabaseStatusController
       ),
       $database->getIssues());
 
+    $properties = $this->buildConfigBoxView(pht('Properties'), $properties);
+    $table = $this->buildConfigBoxView(pht('Database'), $table);
+
     return $this->buildResponse($title, array($properties, $table));
   }
 
@@ -503,7 +504,7 @@ final class PhabricatorConfigDatabaseStatusController
           null,
         ));
 
-    $title = pht('Database: %s.%s', $database_name, $table_name);
+    $title = pht('%s.%s', $database_name, $table_name);
 
     if ($actual_table) {
       $actual_collation = $actual_table->getCollation();
@@ -534,8 +535,14 @@ final class PhabricatorConfigDatabaseStatusController
       ),
       $table->getIssues());
 
+    $box_header = pht('%s.%s', $database_name, $table_name);
+
+    $properties = $this->buildConfigBoxView(pht('Properties'), $properties);
+    $table = $this->buildConfigBoxView(pht('Database'), $table_view);
+    $keys = $this->buildConfigBoxView(pht('Keys'), $keys_view);
+
     return $this->buildResponse(
-      $title, array($properties, $table_view, $keys_view));
+      $title, array($properties, $table, $keys));
   }
 
   private function renderColumn(
@@ -613,7 +620,7 @@ final class PhabricatorConfigDatabaseStatusController
 
 
     $title = pht(
-      'Database Status: %s.%s.%s',
+      '%s.%s.%s',
       $database_name,
       $table_name,
       $column_name);
@@ -671,6 +678,8 @@ final class PhabricatorConfigDatabaseStatusController
       ),
       $column->getIssues());
 
+    $properties = $this->buildConfigBoxView(pht('Properties'), $properties);
+
     return $this->buildResponse($title, $properties);
   }
 
@@ -734,7 +743,7 @@ final class PhabricatorConfigDatabaseStatusController
     }
 
     $title = pht(
-      'Database Status: %s.%s (%s)',
+      '%s.%s (%s)',
       $database_name,
       $table_name,
       $key_name);
@@ -764,6 +773,8 @@ final class PhabricatorConfigDatabaseStatusController
       ),
       $key->getIssues());
 
+    $properties = $this->buildConfigBoxView(pht('Properties'), $properties);
+
     return $this->buildResponse($title, $properties);
   }
 

src/applications/config/controller/PhabricatorConfigEditController.php

@@ -7,7 +7,6 @@ final class PhabricatorConfigEditController
     $viewer = $request->getViewer();
     $key = $request->getURIData('key');
 
-
     $options = PhabricatorApplicationConfigOptions::loadAllOptions();
     if (empty($options[$key])) {
       $ancient = PhabricatorExtraConfigSetupCheck::getAncientConfig();
@@ -104,29 +103,10 @@ final class PhabricatorConfigEditController
     $error_view = null;
     if ($errors) {
       $error_view = id(new PHUIInfoView())
+        ->setSeverity(PHUIInfoView::SEVERITY_ERROR)
         ->setErrors($errors);
     }
 
-    $status_items = array();
-    if ($option->getHidden()) {
-      $message = pht(
-        'This configuration is hidden and can not be edited or viewed from '.
-        'the web interface.');
-
-      $status_items[] = id(new PHUIStatusItemView())
-        ->setIcon('fa-eye-slash red')
-        ->setTarget(phutil_tag('strong', array(), pht('Configuration Hidden')))
-        ->setNote($message);
-    } else if ($option->getLocked()) {
-      $message = $option->getLockedMessage();
-
-      $status_items[] = id(new PHUIStatusItemView())
-        ->setIcon('fa-lock red')
-        ->setTarget(phutil_tag('strong', array(), pht('Configuration Locked')))
-        ->setNote($message);
-    }
-
-    if ($status_items) {
     $doc_href = PhabricatorEnv::getDoclink(
         'Configuration Guide: Locked and Hidden Configuration');
 
@@ -136,12 +116,32 @@ final class PhabricatorConfigEditController
         'href' => $doc_href,
         'target' => '_blank',
       ),
-        pht('Configuration Guide: Locked and Hidden Configuration'));
+      pht('Learn more about locked and hidden options.'));
 
-      $status_items[] = id(new PHUIStatusItemView())
+    $status_items = array();
-        ->setIcon('fa-book')
+    $tag = null;
-        ->setTarget(phutil_tag('strong', array(), pht('Learn More')))
+    if ($option->getHidden()) {
-        ->setNote($doc_link);
+      $tag = id(new PHUITagView())
+        ->setName(pht('Hidden'))
+        ->setColor(PHUITagView::COLOR_GREY)
+        ->setBorder(PHUITagView::BORDER_NONE)
+        ->setType(PHUITagView::TYPE_SHADE);
+
+      $message = pht(
+        'This configuration is hidden and can not be edited or viewed from '.
+        'the web interface.');
+      $status_items[] = id(new PHUIInfoView())
+        ->appendChild(array($message, ' ', $doc_link));
+    } else if ($option->getLocked()) {
+      $tag = id(new PHUITagView())
+        ->setName(pht('Locked'))
+        ->setColor(PHUITagView::COLOR_RED)
+        ->setBorder(PHUITagView::BORDER_NONE)
+        ->setType(PHUITagView::TYPE_SHADE);
+
+      $message = $option->getLockedMessage();
+      $status_items[] = id(new PHUIInfoView())
+        ->appendChild(array($message, ' ', $doc_link));
     }
 
     if ($option->getHidden() || $option->getLocked()) {
@@ -168,18 +168,6 @@ final class PhabricatorConfigEditController
       ->setUser($viewer)
       ->addHiddenInput('issue', $request->getStr('issue'));
 
-    if ($status_items) {
-      $status_view = id(new PHUIStatusListView());
-
-      foreach ($status_items as $status_item) {
-        $status_view->addItem($status_item);
-      }
-
-      $form->appendControl(
-        id(new AphrontFormMarkupControl())
-          ->setValue($status_view));
-    }
-
     $description = $option->getDescription();
     if (strlen($description)) {
       $description_view = new PHUIRemarkupView($viewer, $description);
@@ -213,56 +201,66 @@ final class PhabricatorConfigEditController
           ->setValue(pht('Save Config Entry')));
     }
 
+    $current_config = null;
     if (!$option->getHidden()) {
-      $form->appendChild(
+      $current_config = $this->renderDefaults($option, $config_entry);
-        id(new AphrontFormMarkupControl())
+      $current_config = $this->buildConfigBoxView(
-          ->setLabel(pht('Current Configuration'))
+        pht('Current Configuration'),
-          ->setValue($this->renderDefaults($option, $config_entry)));
+        $current_config);
     }
 
     $examples = $this->renderExamples($option);
     if ($examples) {
-      $form->appendChild(
+      $examples = $this->buildConfigBoxView(
-        id(new AphrontFormMarkupControl())
+        pht('Examples'),
-          ->setLabel(pht('Examples'))
+        $examples);
-          ->setValue($examples));
     }
 
-    $title = pht('Edit Option: %s', $key);
+    $title = $key;
-    $header_icon = 'fa-pencil';
-    $short = pht('Edit');
 
-    $form_box = id(new PHUIObjectBoxView())
+    $box_header = array();
-      ->setHeaderText(pht('Config Option'))
+    if ($group) {
-      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      $box_header[] = phutil_tag(
-      ->setForm($form);
+        'a',
-
+        array(
-    if ($error_view) {
+          'href' => $group_uri,
-      $form_box->setInfoView($error_view);
+        ),
+        $group->getName());
+      $box_header[] = " \xC2\xBB ";
     }
+    $box_header[] = $key;
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb(pht('Config'), $this->getApplicationURI());
-
     if ($group) {
       $crumbs->addTextCrumb($group->getName(), $group_uri);
     }
-
     $crumbs->addTextCrumb($key, '/config/edit/'.$key);
     $crumbs->setBorder(true);
 
+    $form_box = $this->buildConfigBoxView($box_header, $form, $tag);
+
     $timeline = $this->buildTransactionTimeline(
       $config_entry,
       new PhabricatorConfigTransactionQuery());
     $timeline->setShouldTerminate(true);
 
-    $header = id(new PHUIHeaderView())
+    $nav = $this->buildSideNavView();
-      ->setHeader($title)
+    $nav->selectFilter($group_uri);
-      ->setHeaderIcon($header_icon);
+
+    $header = $this->buildHeaderView($title);
 
     $view = id(new PHUITwoColumnView())
       ->setHeader($header)
-      ->setFooter($form_box);
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn(array(
+        $error_view,
+        $form_box,
+        $status_items,
+        $examples,
+        $current_config,
+      ));
 
     return $this->newPage()
       ->setTitle($title)
@@ -426,7 +424,7 @@ final class PhabricatorConfigEditController
         }
       }
 
-      $table[] = phutil_tag('tr', array(), array(
+      $table[] = phutil_tag('tr', array('class' => 'column-labels'), array(
         phutil_tag('th', array(), $description),
         phutil_tag('td', array(), $value),
       ));
@@ -438,6 +436,8 @@ final class PhabricatorConfigEditController
       'table',
       array(
         'class' => 'config-option-table',
+        'cellspacing' => '0',
+        'cellpadding' => '0',
       ),
       $table);
   }
@@ -497,6 +497,8 @@ final class PhabricatorConfigEditController
       'table',
       array(
         'class' => 'config-option-table',
+        'cellspacing' => '0',
+        'cellpadding' => '0',
       ),
       $table);
   }

src/applications/config/controller/PhabricatorConfigGroupController.php

@@ -13,7 +13,7 @@ final class PhabricatorConfigGroupController
       return new Aphront404Response();
     }
 
-    $group_uri = PhabricatorConfigGroupConstants::getGroupURI(
+    $group_uri = PhabricatorConfigGroupConstants::getGroupFullURI(
       $options->getGroup());
     $group_name = PhabricatorConfigGroupConstants::getGroupShortName(
       $options->getGroup());
@@ -22,28 +22,28 @@ final class PhabricatorConfigGroupController
     $nav->selectFilter($group_uri);
 
     $title = pht('%s Configuration', $options->getName());
+    $header = $this->buildHeaderView($title);
     $list = $this->buildOptionList($options->getOptions());
+    $group_url = phutil_tag('a', array('href' => $group_uri), $group_name);
 
-    $crumbs = $this
+    $box_header = pht("%s \xC2\xBB %s", $group_url, $options->getName());
-      ->buildApplicationCrumbs()
+    $view = $this->buildConfigBoxView($box_header, $list);
+
+    $crumbs = $this->buildApplicationCrumbs()
       ->addTextCrumb($group_name, $this->getApplicationURI($group_uri))
       ->addTextCrumb($options->getName())
       ->setBorder(true);
 
-    $header = id(new PHUIHeaderView())
+    $content = id(new PHUITwoColumnView())
-      ->setHeader($title)
-      ->setProfileHeader(true);
-
-    $content = id(new PhabricatorConfigPageView())
       ->setHeader($header)
-      ->setContent($list);
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn($view);
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
   }
 
   private function buildOptionList(array $options) {
@@ -77,13 +77,11 @@ final class PhabricatorConfigGroupController
         ->setHref('/config/edit/'.$option->getKey().'/')
         ->addAttribute($summary);
 
-      $label = pht('Current Value:');
       $color = null;
       $db_value = idx($db_values, $option->getKey());
       if ($db_value && !$db_value->getIsDeleted()) {
         $item->setEffect('visited');
         $color = 'violet';
-        $label = pht('Customized Value:');
       }
 
       if ($option->getHidden()) {
@@ -91,6 +89,8 @@ final class PhabricatorConfigGroupController
         $item->setDisabled(true);
       } else if ($option->getLocked()) {
         $item->setStatusIcon('fa-lock '.$color, pht('Locked'));
+      } else if ($color) {
+        $item->setStatusIcon('fa-pencil '.$color, pht('Editable'));
       } else {
         $item->setStatusIcon('fa-pencil-square-o '.$color, pht('Editable'));
       }
@@ -102,14 +102,13 @@ final class PhabricatorConfigGroupController
         $current_value = phutil_tag(
           'div',
           array(
-            'class' => 'config-options-current-value',
+            'class' => 'config-options-current-value '.$color,
           ),
           array(
-            phutil_tag('span', array(), $label),
+            $current_value,
-            ' '.$current_value,
           ));
 
-        $item->appendChild($current_value);
+        $item->setSideColumn($current_value);
       }
 
       $list->addItem($item);

src/applications/config/controller/PhabricatorConfigHistoryController.php

@@ -29,28 +29,25 @@ final class PhabricatorConfigHistoryController
     $object->willRenderTimeline($timeline, $this->getRequest());
 
     $title = pht('Settings History');
-
+    $header = $this->buildHeaderView($title);
-    $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->addTextCrumb($title);
-    $crumbs->setBorder(true);
 
     $nav = $this->buildSideNavView();
     $nav->selectFilter('history/');
 
-    $header = id(new PHUIHeaderView())
+    $crumbs = $this->buildApplicationCrumbs()
-      ->setHeader($title)
+      ->addTextCrumb($title)
-      ->setProfileHeader(true);
+      ->setBorder(true);
 
-    $content = id(new PhabricatorConfigPageView())
+    $content = id(new PHUITwoColumnView())
       ->setHeader($header)
-      ->setContent($timeline);
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn($timeline);
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
   }
 
 }

src/applications/config/controller/PhabricatorConfigIssueListController.php

@@ -43,34 +43,34 @@ final class PhabricatorConfigIssueListController
     }
 
     $title = pht('Setup Issues');
+    $header = $this->buildHeaderView($title);
 
-    $header = id(new PHUIHeaderView())
+    $issue_list = array(
-      ->setHeader($title)
-      ->setProfileHeader(true);
-
-    $crumbs = $this
-      ->buildApplicationCrumbs()
-      ->addTextCrumb(pht('Setup Issues'))
-      ->setBorder(true);
-
-    $page = array(
-      $no_issues,
       $important,
       $php,
       $mysql,
       $other,
     );
 
-    $content = id(new PhabricatorConfigPageView())
+    $issue_list = $this->buildConfigBoxView(pht('Issues'), $issue_list);
+
+    $crumbs = $this->buildApplicationCrumbs()
+      ->addTextCrumb($title)
+      ->setBorder(true);
+
+    $content = id(new PHUITwoColumnView())
       ->setHeader($header)
-      ->setContent($page);
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn(array(
+        $no_issues,
+        $issue_list,
+      ));
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
   }
 
   private function buildIssueList(array $issues, $group, $fonticon) {

src/applications/config/controller/PhabricatorConfigIssueViewController.php

@@ -36,6 +36,8 @@ final class PhabricatorConfigIssueViewController
       $title = $issue->getShortName();
     }
 
+    $header = $this->buildHeaderView($title);
+
     $crumbs = $this
       ->buildApplicationCrumbs()
       ->setBorder(true)
@@ -43,12 +45,16 @@ final class PhabricatorConfigIssueViewController
       ->addTextCrumb($title, $request->getRequestURI())
       ->setBorder(true);
 
+    $content = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn($content);
+
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
   }
 
   private function renderIssue(PhabricatorSetupIssue $issue) {

src/applications/config/controller/PhabricatorConfigListController.php

@@ -11,28 +11,25 @@ final class PhabricatorConfigListController
 
     $groups = PhabricatorApplicationConfigOptions::loadAll();
     $core_list = $this->buildConfigOptionsList($groups, 'core');
+    $core_list = $this->buildConfigBoxView(pht('Core'), $core_list);
 
     $title = pht('Core Settings');
+    $header = $this->buildHeaderView($title);
 
-    $header = id(new PHUIHeaderView())
+    $crumbs = $this->buildApplicationCrumbs()
-      ->setHeader($title)
+      ->addTextCrumb($title)
-      ->setProfileHeader(true);
-
-    $crumbs = $this
-      ->buildApplicationCrumbs()
-      ->addTextCrumb(pht('Core'))
       ->setBorder(true);
 
-    $content = id(new PhabricatorConfigPageView())
+    $content = id(new PHUITwoColumnView())
       ->setHeader($header)
-      ->setContent($core_list);
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn($core_list);
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
   }
 
   private function buildConfigOptionsList(array $groups, $type) {

src/applications/config/controller/PhabricatorConfigModuleController.php

@@ -16,27 +16,26 @@ final class PhabricatorConfigModuleController
     $content = $module->renderModuleStatus($request);
     $title = $module->getModuleName();
 
-    $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->addTextCrumb($title);
-    $crumbs->setBorder(true);
-
     $nav = $this->buildSideNavView();
     $nav->selectFilter('module/'.$key.'/');
+    $header = $this->buildHeaderView($title);
 
-    $header = id(new PHUIHeaderView())
+    $view = $this->buildConfigBoxView($title, $content);
-      ->setHeader($title)
-      ->setProfileHeader(true);
 
-    $content = id(new PhabricatorConfigPageView())
+    $crumbs = $this->buildApplicationCrumbs()
+      ->addTextCrumb($title)
+      ->setBorder(true);
+
+    $content = id(new PHUITwoColumnView())
       ->setHeader($header)
-      ->setContent($content);
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn($view);
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
   }
 
 }

src/applications/config/controller/PhabricatorConfigVersionController.php

@@ -7,31 +7,30 @@ final class PhabricatorConfigVersionController
     $viewer = $request->getViewer();
 
     $title = pht('Version Information');
-
-    $crumbs = $this
-      ->buildApplicationCrumbs()
-      ->addTextCrumb($title)
-      ->setBorder(true);
-
     $versions = $this->renderModuleStatus($viewer);
 
     $nav = $this->buildSideNavView();
     $nav->selectFilter('version/');
+    $header = $this->buildHeaderView($title);
 
-    $header = id(new PHUIHeaderView())
+    $view = $this->buildConfigBoxView(
-      ->setHeader($title)
+      pht('Installed Versions'),
-      ->setProfileHeader(true);
+      $versions);
 
-    $content = id(new PhabricatorConfigPageView())
+    $crumbs = $this->buildApplicationCrumbs()
+      ->addTextCrumb($title)
+      ->setBorder(true);
+
+    $content = id(new PHUITwoColumnView())
       ->setHeader($header)
-      ->setContent($versions);
+      ->setNavigation($nav)
+      ->setFixed(true)
+      ->setMainColumn($view);
 
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
-      ->setNavigation($nav)
+      ->appendChild($content);
-      ->appendChild($content)
-      ->addClass('white-background');
 
   }
 

src/applications/config/view/PhabricatorConfigPageView.php

@@ -1,60 +0,0 @@
-<?php
-
-final class PhabricatorConfigPageView extends AphrontTagView {
-
-  private $header;
-  private $content;
-  private $footer;
-
-  public function setHeader(PHUIHeaderView $header) {
-    $this->header = $header;
-    return $this;
-  }
-
-  public function setContent($content) {
-    $this->content = $content;
-    return $this;
-  }
-
-  public function setFooter($footer) {
-    $this->footer = $footer;
-    return $this;
-  }
-
-  protected function getTagName() {
-    return 'div';
-  }
-
-  protected function getTagAttributes() {
-    require_celerity_resource('config-page-css');
-
-    $classes = array();
-    $classes[] = 'config-page';
-
-    return array(
-      'class' => implode(' ', $classes),
-    );
-  }
-
-  protected function getTagContent() {
-
-    $header = null;
-    if ($this->header) {
-      $header = phutil_tag_div('config-page-header', $this->header);
-    }
-
-    $content = null;
-    if ($this->content) {
-      $content = phutil_tag_div('config-page-content', $this->content);
-    }
-
-    $footer = null;
-    if ($this->footer) {
-      $footer = phutil_tag_div('config-page-footer', $this->footer);
-    }
-
-    return array($header, $content, $footer);
-
-  }
-
-}

src/view/phui/PHUIObjectBoxView.php

@@ -35,6 +35,7 @@ final class PHUIObjectBoxView extends AphrontTagView {
 
   const BLUE = 'phui-box-blue';
   const BLUE_PROPERTY = 'phui-box-blue-property';
+  const WHITE_CONFIG = 'phui-box-white-config';
   const GREY = 'phui-box-grey';
 
   public function addPropertyList(PHUIPropertyListView $property_list) {

webroot/rsrc/css/application/config/config-options.css

@@ -5,20 +5,20 @@
 .config-option-table {
   width: 100%;
   border-collapse: collapse;
-  border: 1px solid {$thinblueborder};
+  border: none;
   background: {$page.content};
 }
 
 .config-option-table th,
 .config-option-table td {
-  padding: 4px 12px;
+  padding: 8px 12px;
-  border: 1px solid {$lightgreyborder};
+  border-bottom: 1px solid {$thinblueborder};
 }
 
 .config-option-table th {
   background: {$lightgreybackground};
   color: {$bluetext};
-  text-align: right;
+  text-align: left;
   white-space: nowrap;
 }
 
@@ -37,17 +37,19 @@
 .config-option-table .column-labels th {
   font-weight: bold;
   color: {$bluetext};
-  text-align: center;
+  background: {$lightgreybackground};
-  background: {$greybackground};
+  border-right: 1px solid {$thinblueborder};
 }
 
 .config-options-current-value {
-  padding: 0 8px 6px;
+  white-space: nowrap;
-  white-space: pre-wrap;
+  width: 200px;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
-.config-options-current-value span {
+.config-options-current-value.violet {
-  color: {$greytext};
+  color: {$violet};
 }
 
 .config-options-effective-value,

webroot/rsrc/css/application/config/config-page.css

@@ -1,77 +0,0 @@
-/**
- * @provides config-page-css
- */
-
-.config-page-header {
-  margin: 28px 24px 0;
-  padding-bottom: 28px;
-  border-bottom: 1px solid {$thinblueborder};
-}
-
-.device-phone .config-page-header {
-  margin: 4px 12px 0;
-  padding-bottom: 4px;
-}
-
-.config-page-header .phui-profile-header {
-  padding: 0;
-}
-
-.device-phone .config-page-header .phui-profile-header {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
-.config-page-header .phui-profile-header.phui-header-shell .phui-header-header {
-  font-size: 20px;
-}
-
-.device-phone .config-page-header .phui-profile-header.phui-header-shell
-  .phui-header-header {
-    font-size: 16px;
-}
-
-.config-page-content {
-  margin: 0 24px;
-}
-
-.device-phone .config-page-content {
-  margin: 0 4px;
-}
-
-.device-desktop .config-page-content .phui-oi-list-view {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.device-desktop .config-page-content .phui-document-fluid .phui-document-view {
-  padding: 16px 0;
-  margin: 0;
-}
-
-.config-page-content .aphront-table-view {
-  border: none;
-}
-
-.config-page-property {
-  padding-top: 4px;
-  border-bottom: 1px solid {$thinblueborder};
-}
-
-.config-page-content .aphront-table-notice {
-  padding: 0;
-}
-
-.config-page-content .aphront-table-notice .phui-info-view {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.config-page-content .aphront-table-wrap + .aphront-table-wrap {
-  margin-top: 20px;
-  border-top: 1px solid {$thinblueborder};
-}
-
-.config-page-content .phui-box.phui-box-blue-property {
-  margin-top: 16px;
-}

webroot/rsrc/css/phui/object-item/phui-oi-big-ui.css

@@ -31,7 +31,7 @@
 }
 
 .device-desktop .phui-oi-list-big .phui-oi {
-  margin-bottom: 8px;
+  margin-bottom: 4px;
 }
 
 .phui-oi-list-big .phui-oi-col0 {
@@ -46,3 +46,16 @@
 .phui-oi-list-big .phui-oi-visited a.phui-oi-link {
   color: {$violet};
 }
+
+.phui-box-white-config .phui-oi-list-big.phui-oi-list-view {
+  padding: 8px 8px 4px;
+}
+
+.phui-box-white-config .phui-oi-frame {
+  padding: 4px 8px 0;
+}
+
+.device-desktop .phui-box-white-config .phui-oi:hover .phui-oi-frame {
+  background-color: {$hoverblue};
+  border-radius: 3px;
+}

webroot/rsrc/css/phui/phui-box.css

@@ -115,3 +115,24 @@ body .phui-box-blue-property .phui-header-shell + .phui-object-box {
   .phui-header-shell {
     background: {$page.content};
 }
+
+/* Config Boxes */
+
+.phui-box-white-config.phui-box-border {
+  border-color: #e2e2e2;
+  border-radius: 5px;
+}
+
+.phui-box-white-config.phui-object-box {
+  padding: 16px 0 0 0;
+}
+
+.phui-box-white-config .phui-header-shell {
+  border-bottom: 1px solid #e2e2e2;
+  overflow: hidden;
+  padding: 0 16px 16px;
+}
+
+.phui-box-white-config .phui-header-header {
+  color: {$bluetext};
+}

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

@@ -34,10 +34,6 @@
   vertical-align: middle;
 }
 
-.device-phone .phui-header-col3 {
-  vertical-align: top;
-}
-
 body .phui-header-shell.phui-header-no-backgound {
   background-color: transparent;
   border: none;
@@ -341,6 +337,10 @@ body .phui-header-shell.phui-bleed-header
   color: {$blacktext};
 }
 
+.phui-profile-header .phui-header-col3 {
+  vertical-align: top;
+}
+
 .phui-header-view .phui-tag-indigo a {
   color: {$sh-indigotext};
 }