Update form styles, implement in many places

Summary:
This creates a common form look and feel across the site. I spent a bit of time working out a number of kinks in our various renderings. Some things:

- Font Styles are correctly applied for form elements now.
- Everything lines up!
- Selects are larger, easier to read, interact.
- Inputs have been squared.
- Consistant CSS applied glow (try it!)
- Improved Mobile Responsiveness
- CSS applied to all form elements, not just Aphront
- Many other minor tweaks.

I tried to hit as many high profile forms as possible in an effort to increase consistency. Stopped for now and will follow up after this lands. I know Evan is not a super fan of the glow, but after working with it for a week, it's way cleaner and responsive than the OS controls. Give it a try.

Test Plan: Tested many applications, forms, mobile and tablet.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

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

src/__celerity_resource_map__.php

@@ -786,7 +786,7 @@ celerity_register_resource_map(array(
   ),
   'aphront-form-view-css' =>
   array(
-    'uri' => '/res/ed8c70fa/rsrc/css/aphront/form-view.css',
+    'uri' => '/res/d82ea207/rsrc/css/aphront/form-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -858,7 +858,7 @@ celerity_register_resource_map(array(
   ),
   'aphront-tokenizer-control-css' =>
   array(
-    'uri' => '/res/6e14867e/rsrc/css/aphront/tokenizer.css',
+    'uri' => '/res/db2c0f0e/rsrc/css/aphront/tokenizer.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -895,7 +895,7 @@ celerity_register_resource_map(array(
   ),
   'config-options-css' =>
   array(
-    'uri' => '/res/01892229/rsrc/css/application/config/config-options.css',
+    'uri' => '/res/be77d5a6/rsrc/css/application/config/config-options.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -1099,7 +1099,7 @@ celerity_register_resource_map(array(
   ),
   'herald-rule-editor' =>
   array(
-    'uri' => '/res/f35d7e23/rsrc/js/application/herald/HeraldRuleEditor.js',
+    'uri' => '/res/f8ee0e9c/rsrc/js/application/herald/HeraldRuleEditor.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -2846,7 +2846,7 @@ celerity_register_resource_map(array(
   ),
   'owners-path-editor-css' =>
   array(
-    'uri' => '/res/4fcaabf6/rsrc/css/application/owners/owners-path-editor.css',
+    'uri' => '/res/1b9b5456/rsrc/css/application/owners/owners-path-editor.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3058,7 +3058,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-form-view-css' =>
   array(
-    'uri' => '/res/676b1ad2/rsrc/css/layout/phabricator-form-view.css',
+    'uri' => '/res/ba05f8ba/rsrc/css/layout/phabricator-form-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3099,7 +3099,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-jump-nav' =>
   array(
-    'uri' => '/res/745c0e89/rsrc/css/application/directory/phabricator-jump-nav.css',
+    'uri' => '/res/37ab43b8/rsrc/css/application/directory/phabricator-jump-nav.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3134,7 +3134,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-main-menu-view' =>
   array(
-    'uri' => '/res/63316e1a/rsrc/css/application/base/main-menu-view.css',
+    'uri' => '/res/f4cfb781/rsrc/css/application/base/main-menu-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3213,7 +3213,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-object-selector-css' =>
   array(
-    'uri' => '/res/7eb4c705/rsrc/css/application/objectselector/object-selector.css',
+    'uri' => '/res/502f1bb9/rsrc/css/application/objectselector/object-selector.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3297,7 +3297,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-remarkup-css' =>
   array(
-    'uri' => '/res/f9bbca2f/rsrc/css/core/remarkup.css',
+    'uri' => '/res/07cab525/rsrc/css/core/remarkup.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3684,6 +3684,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/phui/phui-feed-story.css',
   ),
+  'phui-form-css' =>
+  array(
+    'uri' => '/res/e29e84fb/rsrc/css/phui/phui-form.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/phui/phui-form.css',
+  ),
   'phui-icon-view-css' =>
   array(
     'uri' => '/res/2aa71cc6/rsrc/css/phui/phui-icon.css',
@@ -4002,7 +4011,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    '25d66007' =>
+    '56e0b740' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -4044,7 +4053,7 @@ celerity_register_resource_map(array(
         34 => 'phabricator-object-item-list-view-css',
         35 => 'global-drag-and-drop-css',
       ),
-      'uri' => '/res/pkg/25d66007/core.pkg.css',
+      'uri' => '/res/pkg/56e0b740/core.pkg.css',
       'type' => 'css',
     ),
     '26980a1c' =>
@@ -4102,7 +4111,7 @@ celerity_register_resource_map(array(
       'uri' => '/res/pkg/4ccfeb47/darkconsole.pkg.js',
       'type' => 'js',
     ),
-    '8aaacd1b' =>
+    '19d2a41f' =>
     array(
       'name' => 'differential.pkg.css',
       'symbols' =>
@@ -4121,7 +4130,7 @@ celerity_register_resource_map(array(
         11 => 'differential-local-commits-view-css',
         12 => 'inline-comment-summary-css',
       ),
-      'uri' => '/res/pkg/8aaacd1b/differential.pkg.css',
+      'uri' => '/res/pkg/19d2a41f/differential.pkg.css',
       'type' => 'css',
     ),
     '27c55b30' =>
@@ -4235,31 +4244,31 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => '6b1fccc6',
-    'aphront-dialog-view-css' => '25d66007',
+    'aphront-dialog-view-css' => '56e0b740',
-    'aphront-error-view-css' => '25d66007',
+    'aphront-error-view-css' => '56e0b740',
-    'aphront-form-view-css' => '25d66007',
+    'aphront-form-view-css' => '56e0b740',
-    'aphront-list-filter-view-css' => '25d66007',
+    'aphront-list-filter-view-css' => '56e0b740',
-    'aphront-pager-view-css' => '25d66007',
+    'aphront-pager-view-css' => '56e0b740',
-    'aphront-panel-view-css' => '25d66007',
+    'aphront-panel-view-css' => '56e0b740',
-    'aphront-table-view-css' => '25d66007',
+    'aphront-table-view-css' => '56e0b740',
-    'aphront-tokenizer-control-css' => '25d66007',
+    'aphront-tokenizer-control-css' => '56e0b740',
-    'aphront-tooltip-css' => '25d66007',
+    'aphront-tooltip-css' => '56e0b740',
-    'aphront-typeahead-control-css' => '25d66007',
+    'aphront-typeahead-control-css' => '56e0b740',
-    'differential-changeset-view-css' => '8aaacd1b',
+    'differential-changeset-view-css' => '19d2a41f',
-    'differential-core-view-css' => '8aaacd1b',
+    'differential-core-view-css' => '19d2a41f',
     'differential-inline-comment-editor' => '27c55b30',
-    'differential-local-commits-view-css' => '8aaacd1b',
+    'differential-local-commits-view-css' => '19d2a41f',
-    'differential-results-table-css' => '8aaacd1b',
+    'differential-results-table-css' => '19d2a41f',
-    'differential-revision-add-comment-css' => '8aaacd1b',
+    'differential-revision-add-comment-css' => '19d2a41f',
-    'differential-revision-comment-css' => '8aaacd1b',
+    'differential-revision-comment-css' => '19d2a41f',
-    'differential-revision-comment-list-css' => '8aaacd1b',
+    'differential-revision-comment-list-css' => '19d2a41f',
-    'differential-revision-history-css' => '8aaacd1b',
+    'differential-revision-history-css' => '19d2a41f',
-    'differential-revision-list-css' => '8aaacd1b',
+    'differential-revision-list-css' => '19d2a41f',
-    'differential-table-of-contents-css' => '8aaacd1b',
+    'differential-table-of-contents-css' => '19d2a41f',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => '25d66007',
+    'global-drag-and-drop-css' => '56e0b740',
-    'inline-comment-summary-css' => '8aaacd1b',
+    'inline-comment-summary-css' => '19d2a41f',
     'javelin-aphlict' => '26980a1c',
     'javelin-behavior' => '7d174323',
     'javelin-behavior-aphlict-dropdown' => '26980a1c',
@@ -4330,48 +4339,48 @@ celerity_register_resource_map(array(
     'javelin-util' => '7d174323',
     'javelin-vector' => '7d174323',
     'javelin-workflow' => '7d174323',
-    'lightbox-attachment-css' => '25d66007',
+    'lightbox-attachment-css' => '56e0b740',
     'maniphest-task-summary-css' => '6b1fccc6',
     'maniphest-transaction-detail-css' => '6b1fccc6',
     'phabricator-busy' => '26980a1c',
-    'phabricator-content-source-view-css' => '8aaacd1b',
+    'phabricator-content-source-view-css' => '19d2a41f',
-    'phabricator-core-buttons-css' => '25d66007',
+    'phabricator-core-buttons-css' => '56e0b740',
-    'phabricator-core-css' => '25d66007',
+    'phabricator-core-css' => '56e0b740',
-    'phabricator-crumbs-view-css' => '25d66007',
+    'phabricator-crumbs-view-css' => '56e0b740',
-    'phabricator-directory-css' => '25d66007',
+    'phabricator-directory-css' => '56e0b740',
     'phabricator-drag-and-drop-file-upload' => '27c55b30',
     'phabricator-dropdown-menu' => '26980a1c',
     'phabricator-file-upload' => '26980a1c',
-    'phabricator-filetree-view-css' => '25d66007',
+    'phabricator-filetree-view-css' => '56e0b740',
-    'phabricator-flag-css' => '25d66007',
+    'phabricator-flag-css' => '56e0b740',
-    'phabricator-form-view-css' => '25d66007',
+    'phabricator-form-view-css' => '56e0b740',
-    'phabricator-header-view-css' => '25d66007',
+    'phabricator-header-view-css' => '56e0b740',
-    'phabricator-jump-nav' => '25d66007',
+    'phabricator-jump-nav' => '56e0b740',
     'phabricator-keyboard-shortcut' => '26980a1c',
     'phabricator-keyboard-shortcut-manager' => '26980a1c',
-    'phabricator-main-menu-view' => '25d66007',
+    'phabricator-main-menu-view' => '56e0b740',
     'phabricator-menu-item' => '26980a1c',
-    'phabricator-nav-view-css' => '25d66007',
+    'phabricator-nav-view-css' => '56e0b740',
     'phabricator-notification' => '26980a1c',
-    'phabricator-notification-css' => '25d66007',
+    'phabricator-notification-css' => '56e0b740',
-    'phabricator-notification-menu-css' => '25d66007',
+    'phabricator-notification-menu-css' => '56e0b740',
-    'phabricator-object-item-list-view-css' => '25d66007',
+    'phabricator-object-item-list-view-css' => '56e0b740',
-    'phabricator-object-selector-css' => '8aaacd1b',
+    'phabricator-object-selector-css' => '19d2a41f',
     'phabricator-phtize' => '26980a1c',
     'phabricator-prefab' => '26980a1c',
     'phabricator-project-tag-css' => '6b1fccc6',
-    'phabricator-remarkup-css' => '25d66007',
+    'phabricator-remarkup-css' => '56e0b740',
     'phabricator-shaped-request' => '27c55b30',
-    'phabricator-side-menu-view-css' => '25d66007',
+    'phabricator-side-menu-view-css' => '56e0b740',
-    'phabricator-standard-page-view' => '25d66007',
+    'phabricator-standard-page-view' => '56e0b740',
     'phabricator-textareautils' => '26980a1c',
     'phabricator-tooltip' => '26980a1c',
-    'phabricator-transaction-view-css' => '25d66007',
+    'phabricator-transaction-view-css' => '56e0b740',
-    'phabricator-zindex-css' => '25d66007',
+    'phabricator-zindex-css' => '56e0b740',
-    'sprite-apps-large-css' => '25d66007',
+    'sprite-apps-large-css' => '56e0b740',
-    'sprite-gradient-css' => '25d66007',
+    'sprite-gradient-css' => '56e0b740',
-    'sprite-icon-css' => '25d66007',
+    'sprite-icon-css' => '56e0b740',
-    'sprite-menu-css' => '25d66007',
+    'sprite-menu-css' => '56e0b740',
-    'syntax-highlighting-css' => '25d66007',
+    'syntax-highlighting-css' => '56e0b740',
   ),
 ));

src/applications/differential/controller/DifferentialDiffCreateController.php

@@ -28,6 +28,7 @@ final class DifferentialDiffCreateController extends DifferentialController {
     }
 
     $form = new AphrontFormView();
+    $form->setFlexible(true);
     $arcanist_href = PhabricatorEnv::getDoclink(
       'article/Arcanist_User_Guide.html');
     $arcanist_link = phutil_tag(
@@ -63,12 +64,6 @@ final class DifferentialDiffCreateController extends DifferentialController {
         id(new AphrontFormSubmitControl())
           ->setValue(pht("Create Diff \xC2\xBB")));
 
-    $panel = new AphrontPanelView();
-    $panel->setHeader(pht('Create New Diff'));
-    $panel->setNoBackground();
-    $panel->appendChild($form);
-    $panel->setWidth(AphrontPanelView::WIDTH_FORM);
-
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addCrumb(
       id(new PhabricatorCrumbView())
@@ -78,11 +73,12 @@ final class DifferentialDiffCreateController extends DifferentialController {
     return $this->buildApplicationPage(
       array(
         $crumbs,
-        $panel
+        $form
       ),
       array(
         'title' => pht('Create Diff'),
         'device' => true,
+        'dust' => true,
       ));
   }
 

src/applications/differential/controller/DifferentialRevisionEditController.php

@@ -82,6 +82,7 @@ final class DifferentialRevisionEditController extends DifferentialController {
 
     $form = new AphrontFormView();
     $form->setUser($request->getUser());
+    $form->setFlexible(true);
     if ($diff) {
       $form->addHiddenInput('diffID', $diff->getID());
     }
@@ -131,25 +132,39 @@ final class DifferentialRevisionEditController extends DifferentialController {
 
     $form->appendChild($submit);
 
-    $panel = new AphrontPanelView();
+    $crumbs = $this->buildApplicationCrumbs();
     if ($revision->getID()) {
       if ($diff) {
-        $panel->setHeader(pht('Update Differential Revision'));
+        $title = pht('Update Differential Revision');
+        $crumbs->addCrumb(
+          id(new PhabricatorCrumbView())
+            ->setName('D'.$revision->getID())
+            ->setHref('/differential/diff/'.$diff->getID().'/'));
       } else {
-        $panel->setHeader(pht('Edit Differential Revision'));
+        $title = pht('Edit Differential Revision');
+        $crumbs->addCrumb(
+          id(new PhabricatorCrumbView())
+            ->setName('D'.$revision->getID())
+            ->setHref('/D'.$revision->getID()));
       }
     } else {
-      $panel->setHeader(pht('Create New Differential Revision'));
+      $title = pht('Create New Differential Revision');
     }
 
-    $panel->appendChild($form);
+    $crumbs->addCrumb(
-    $panel->setWidth(AphrontPanelView::WIDTH_FORM);
+      id(new PhabricatorCrumbView())
-    $panel->setNoBackground();
+        ->setName($title)
+        ->setHref(''));
 
-    return $this->buildStandardPageResponse(
+    return $this->buildApplicationPage(
-      array($error_view, $panel),
       array(
-        'title' => pht('Edit Differential Revision'),
+        $crumbs,
+        $error_view,
+        $form),
+      array(
+        'title' => $title,
+        'device' => true,
+        'dust' => true,
       ));
   }
 

src/applications/directory/controller/PhabricatorDirectoryMainController.php

@@ -353,12 +353,10 @@ final class PhabricatorDirectoryMainController
       ));
 
     $panel = new AphrontPanelView();
-    $panel->setHeader('Jump Nav');
     $panel->setNoBackground();
     // $panel->appendChild();
 
     $list_filter = new AphrontListFilterView();
-    $list_filter->appendChild(phutil_tag('h1', array(), 'Jump Nav'));
     $list_filter->appendChild($form);
 
     $container = phutil_tag('div',

src/applications/herald/controller/HeraldNewController.php

@@ -57,6 +57,7 @@ final class HeraldNewController extends HeraldController {
     $form = id(new AphrontFormView())
       ->setUser($user)
       ->setAction('/herald/rule/')
+      ->setFlexible(true)
       ->appendChild(
         id(new AphrontFormSelectControl())
           ->setLabel(pht('New rule for'))
@@ -69,20 +70,20 @@ final class HeraldNewController extends HeraldController {
           ->setValue(pht('Create Rule'))
           ->addCancelButton('/herald/view/'.$this->contentType.'/'));
 
-    $panel = new AphrontPanelView();
+    $header = new PhabricatorHeaderView();
-    $panel->setHeader(pht('Create New Herald Rule'));
+    $header->setHeader(pht('Create New Herald Rule'));
-    $panel->setWidth(AphrontPanelView::WIDTH_FULL);
-    $panel->appendChild($form);
-    $panel->setNoBackground();
 
     $nav = $this->renderNav();
     $nav->selectFilter('new');
-    $nav->appendChild($panel);
+    $nav->appendChild($header);
+    $nav->appendChild($form);
 
-    return $this->buildStandardPageResponse(
+    return $this->buildApplicationPage(
       $nav,
       array(
-        'title' => 'Create Herald Rule',
+        'title' => pht('Create Herald Rule'),
+        'device' => true,
+        'dust' => true,
       ));
   }
 

src/applications/herald/controller/HeraldRuleController.php

@@ -171,13 +171,11 @@ final class HeraldRuleController extends HeraldController {
 
     $this->setupEditorBehavior($rule, $handles);
 
-    $panel = new AphrontPanelView();
+    $header = new PhabricatorHeaderView();
-    $panel->setHeader(
+    $header->setHeader(
       $rule->getID()
         ? pht('Edit Herald Rule')
         : pht('Create Herald Rule'));
-    $panel->appendChild($form);
-    $panel->setNoBackground();
 
     $nav = $this->renderNav();
     $nav->selectFilter(
@@ -185,13 +183,14 @@ final class HeraldRuleController extends HeraldController {
     $nav->appendChild(
       array(
         $error_view,
-        $panel,
+        $header,
+        $form,
       ));
 
-    return $this->buildStandardPageResponse(
+    return $this->buildApplicationPage(
       $nav,
       array(
-        'title' => 'Edit Rule',
+        'title' => pht('Edit Rule'),
       ));
   }
 

src/applications/herald/controller/HeraldTestConsoleController.php

@@ -111,18 +111,12 @@ final class HeraldTestConsoleController extends HeraldController {
         id(new AphrontFormSubmitControl())
           ->setValue(pht('Test Rules')));
 
-    $panel = new AphrontPanelView();
-    $panel->setHeader(pht('Test Herald Rules'));
-    $panel->setWidth(AphrontPanelView::WIDTH_FULL);
-    $panel->appendChild($form);
-    $panel->setNoBackground();
-
     $nav = $this->renderNav();
     $nav->selectFilter('test');
     $nav->appendChild(
       array(
         $error_view,
-        $panel,
+        $form,
       ));
 
     $crumbs = id($this->buildApplicationCrumbs())
@@ -135,10 +129,12 @@ final class HeraldTestConsoleController extends HeraldController {
           ->setName(pht('Test Console')));
     $nav->setCrumbs($crumbs);
 
-    return $this->buildStandardPageResponse(
+    return $this->buildApplicationPage(
       $nav,
       array(
-        'title' => 'Test Console',
+        'title' => pht('Test Console'),
+        'dust' => true,
+        'device' => true,
       ));
   }
 

src/applications/mailinglists/controller/PhabricatorMailingListsEditController.php

@@ -114,34 +114,28 @@ final class PhabricatorMailingListsEditController
           ->setValue(pht('Save'))
           ->addCancelButton($this->getApplicationURI()));
 
-    $panel = new AphrontPanelView();
     if ($list->getID()) {
-      $panel->setHeader(pht('Edit Mailing List'));
       $crumbs->addCrumb(
         id(new PhabricatorCrumbView())
           ->setName(pht('Edit Mailing List'))
           ->setHref($this->getApplicationURI('/edit/'.$list->getID().'/')));
     } else {
-      $panel->setHeader(pht('Create Mailing List'));
       $crumbs->addCrumb(
         id(new PhabricatorCrumbView())
           ->setName(pht('Create Mailing List'))
           ->setHref($this->getApplicationURI('/edit/')));
     }
 
-    $panel->appendChild($form);
-    $panel->setWidth(AphrontPanelView::WIDTH_FORM);
-    $panel->setNoBackground();
-
     return $this->buildApplicationPage(
       array(
         $crumbs,
         $error_view,
-        $panel,
+        $form,
       ),
       array(
         'title' => pht('Edit Mailing List'),
         'device' => true,
+        'dust' => true,
       ));
   }
 

src/applications/maniphest/controller/ManiphestTaskEditController.php

@@ -355,6 +355,7 @@ final class ManiphestTaskEditController extends ManiphestController {
     $project_tokenizer_id = celerity_generate_unique_node_id();
 
     $form = new AphrontFormView();
+    $form->setFlexible(true);
     $form
       ->setUser($user)
       ->setAction($request->getRequestURI()->getPath())
@@ -499,11 +500,6 @@ final class ManiphestTaskEditController extends ManiphestController {
           ->addCancelButton($cancel_uri)
           ->setValue($button_name));
 
-    $panel = new AphrontPanelView();
-    $panel->setWidth(AphrontPanelView::WIDTH_FULL);
-    $panel->setHeader($header_name);
-    $panel->appendChild($form);
-    $panel->setNoBackground();
     $inst1 = pht('Description Preview');
     $inst2 = pht('Loading preview...');
 
@@ -550,7 +546,7 @@ final class ManiphestTaskEditController extends ManiphestController {
       array(
         $crumbs,
         $error_view,
-        $panel,
+        $form,
         $description_preview_panel,
       ),
       array(

src/applications/owners/controller/PhabricatorOwnersEditController.php

@@ -134,10 +134,10 @@ final class PhabricatorOwnersEditController
     $token_all_owners = mpull($token_all_owners, 'getFullName');
 
     if ($package->getID()) {
-      $title = 'Edit Package';
+      $title = pht('Edit Package');
       $side_nav_filter = 'edit/'.$this->id;
     } else {
-      $title = 'New Package';
+      $title = pht('New Package');
       $side_nav_filter = 'new';
     }
     $this->setSideNavFilter($side_nav_filter);
@@ -181,6 +181,7 @@ final class PhabricatorOwnersEditController
 
     $form = id(new AphrontFormView())
       ->setUser($user)
+      ->setFlexible(true)
       ->appendChild(
         id(new AphrontFormTextControl())
           ->setLabel('Name')
@@ -249,16 +250,18 @@ final class PhabricatorOwnersEditController
           ->addCancelButton($cancel_uri)
           ->setValue('Save Package'));
 
-    $panel = new AphrontPanelView();
+    $header = id(new PhabricatorHeaderView())
-    $panel->setHeader($title);
+      ->setHeader($title);
-    $panel->setWidth(AphrontPanelView::WIDTH_WIDE);
-    $panel->appendChild($error_view);
-    $panel->appendChild($form);
 
-    return $this->buildStandardPageResponse(
+    return $this->buildApplicationPage(
-      $panel,
+      array(
+        $error_view,
+        $header,
+        $form,
+      ),
       array(
         'title' => $title,
+        'dust' => true,
       ));
   }
 

src/applications/phame/controller/blog/PhameBlogEditController.php

@@ -171,9 +171,6 @@ final class PhameBlogEditController
       $error_view = null;
     }
 
-    $header = id(new PhabricatorHeaderView())
-      ->setHeader($page_title);
-
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addCrumb(
       id(new PhabricatorCrumbView())
@@ -185,7 +182,6 @@ final class PhameBlogEditController
     $nav->appendChild(
       array(
         $crumbs,
-        $header,
         $error_view,
         $form,
       ));

src/applications/phame/controller/post/PhamePostEditController.php

@@ -166,8 +166,6 @@ final class PhamePostEditController
         'uri'         => '/phame/post/preview/',
       ));
 
-    $header = id(new PhabricatorHeaderView())->setHeader($page_title);
-
     if ($errors) {
       $error_view = id(new AphrontErrorView())
         ->setTitle(pht('Errors saving post.'))
@@ -186,7 +184,6 @@ final class PhamePostEditController
     $nav->appendChild(
       array(
         $crumbs,
-        $header,
         $error_view,
         $form,
         $preview_panel,

src/applications/phame/controller/post/PhamePostNewController.php

@@ -75,9 +75,6 @@ final class PhamePostNewController extends PhameController {
         ->setHref($view_uri));
     $nav->appendChild($crumbs);
 
-    $nav->appendChild(
-      id(new PhabricatorHeaderView())->setHeader($title));
-
     if (!$blogs) {
       $notification = id(new AphrontErrorView())
         ->setSeverity(AphrontErrorView::SEVERITY_NODATA)

src/applications/phriction/controller/PhrictionEditController.php

@@ -226,10 +226,8 @@ final class PhrictionEditController
           ->addCancelButton($cancel_uri)
           ->setValue($submit_button));
 
-    $panel = id(new AphrontPanelView())
+    $header = id(new PhabricatorHeaderView())
-      ->setNoBackground()
+      ->setHeader($panel_header);
-      ->setHeader($panel_header)
-      ->appendChild($form);
 
     $preview_panel = hsprintf(
       '<div class="phriction-wrap">
@@ -255,7 +253,8 @@ final class PhrictionEditController
       array(
         $draft_note,
         $error_view,
-        $panel,
+        $header,
+        $form,
         $preview_panel,
       ),
       array(

src/applications/project/controller/PhabricatorProjectCreateController.php

@@ -107,13 +107,6 @@ final class PhabricatorProjectCreateController
             ->setValue(pht('Create'))
             ->addCancelButton('/project/'));
 
-      $panel = new AphrontPanelView();
-      $panel
-        ->setWidth(AphrontPanelView::WIDTH_FORM)
-        ->setHeader(pht('Create a New Project'))
-        ->setNoBackground()
-        ->appendChild($form);
-
       $crumbs = $this->buildApplicationCrumbs($this->buildSideNavView());
       $crumbs->addCrumb(
         id(new PhabricatorCrumbView())
@@ -124,11 +117,12 @@ final class PhabricatorProjectCreateController
         array(
           $crumbs,
           $error_view,
-          $panel,
+          $form,
         ),
         array(
           'title' => pht('Create New Project'),
-          'device' => true
+          'device' => true,
+          'dust' => true,
         ));
     }
   }

src/applications/project/controller/PhabricatorProjectMembersEditController.php

@@ -91,6 +91,7 @@ final class PhabricatorProjectMembersEditController
     $form = new AphrontFormView();
     $form
       ->setUser($user)
+      ->setFlexible(true)
       ->appendChild(
         id(new AphrontFormTokenizerControl())
           ->setName('phids')
@@ -101,24 +102,21 @@ final class PhabricatorProjectMembersEditController
           ->addCancelButton('/project/view/'.$project->getID().'/')
           ->setValue(pht('Add Members')));
     $faux_form = id(new AphrontFormLayoutView())
-      ->setBackgroundShading(true)
-      ->setPadded(true)
       ->appendChild(
         id(new AphrontFormInsetView())
           ->setTitle(pht('Current Members (%d)', count($handles)))
           ->appendChild($list));
 
-    $panel = new AphrontPanelView();
+    $box = new PHUIBoxView();
-    $panel->setHeader($header_name);
+    $box->appendChild($faux_form);
-    $panel->setWidth(AphrontPanelView::WIDTH_FORM);
+    $box->setShadow(true);
-    $panel->setNoBackground();
+    $box->addPadding(PHUI::PADDING_LARGE);
-    $panel->appendChild($form);
+    $box->addMargin(PHUI::MARGIN_LARGE);
-    $panel->appendChild(phutil_tag('br'));
-    $panel->appendChild($faux_form);
 
     $nav = $this->buildLocalNavigation($project);
     $nav->selectFilter('members');
-    $nav->appendChild($panel);
+    $nav->appendChild($form);
+    $nav->appendChild($box);
 
     $crumbs = $this->buildApplicationCrumbs($this->buildSideNavView());
     $crumbs->addCrumb(
@@ -136,6 +134,7 @@ final class PhabricatorProjectMembersEditController
       array(
         'title' => $title,
         'device' => true,
+        'dust' => true,
       ));
   }
 

src/applications/project/controller/PhabricatorProjectProfileEditController.php

@@ -151,6 +151,7 @@ final class PhabricatorProjectProfileEditController
       ->setUser($user)
       ->setAction($action)
       ->setEncType('multipart/form-data')
+      ->setFlexible(true)
       ->appendChild(
         id(new AphrontFormTextControl())
           ->setLabel(pht('Name'))
@@ -219,18 +220,12 @@ final class PhabricatorProjectProfileEditController
           ->addCancelButton('/project/view/'.$project->getID().'/')
           ->setValue(pht('Save')));
 
-    $panel = new AphrontPanelView();
-    $panel->setHeader($header_name);
-    $panel->setWidth(AphrontPanelView::WIDTH_FORM);
-    $panel->setNoBackground();
-    $panel->appendChild($form);
-
     $nav = $this->buildLocalNavigation($project);
     $nav->selectFilter('edit');
     $nav->appendChild(
       array(
         $error_view,
-        $panel,
+        $form,
       ));
 
     $crumbs = $this->buildApplicationCrumbs($this->buildSideNavView());

src/applications/repository/controller/PhabricatorRepositoryCreateController.php

@@ -71,6 +71,7 @@ final class PhabricatorRepositoryCreateController
     $form
       ->setUser($user)
       ->setAction('/repository/create/')
+      ->setFlexible(true)
       ->appendChild(
         id(new AphrontFormTextControl())
           ->setLabel('Name')
@@ -102,19 +103,19 @@ final class PhabricatorRepositoryCreateController
           ->setValue('Create Repository')
           ->addCancelButton('/repository/'));
 
-    $panel = new AphrontPanelView();
+    $header = id(new PhabricatorHeaderView())
-    $panel->setHeader('Create Repository');
+      ->setHeader(pht('Create Repository'));
-    $panel->appendChild($form);
-    $panel->setWidth(AphrontPanelView::WIDTH_FORM);
-    $panel->setNoBackground();
 
-    return $this->buildStandardPageResponse(
+    return $this->buildApplicationPage(
       array(
         $error_view,
-        $panel,
+        $header,
+        $form,
       ),
       array(
-        'title' => 'Create Repository',
+        'title' => pht('Create Repository'),
+        'device' => true,
+        'dust' => true,
       ));
   }
 

src/applications/repository/controller/PhabricatorRepositoryEditController.php

@@ -153,21 +153,21 @@ final class PhabricatorRepositoryEditController
         id(new AphrontFormSubmitControl())
           ->setValue('Save'));
 
-    $panel = new AphrontPanelView();
-    $panel->setHeader('Edit Repository');
-    $panel->appendChild($form);
-    $panel->setWidth(AphrontPanelView::WIDTH_FORM);
-    $panel->setNoBackground();
-
     $nav = $this->sideNav;
 
-    $nav->appendChild($error_view);
+    $header = id(new PhabricatorHeaderView())
-    $nav->appendChild($panel);
+      ->setHeader(pht('Edit Repository'));
 
-    return $this->buildStandardPageResponse(
+    $nav->appendChild($error_view);
+    $nav->appendChild($header);
+    $nav->appendChild($form);
+
+    return $this->buildApplicationPage(
       $nav,
       array(
-        'title' => 'Edit Repository',
+        'title' => pht('Edit Repository'),
+        'device' => true,
+        'dust' => true,
       ));
   }
 
@@ -359,6 +359,7 @@ final class PhabricatorRepositoryEditController
     $form
       ->setUser($user)
       ->setAction('/repository/edit/'.$repository->getID().'/tracking/')
+      ->setFlexible(true)
       ->appendChild(hsprintf(
         '<p class="aphront-form-instructions">Phabricator can track '.
         'repositories, importing commits as they happen and notifying '.
@@ -675,20 +676,18 @@ final class PhabricatorRepositoryEditController
         id(new AphrontFormSubmitControl())
           ->setValue('Save Configuration'));
 
-    $panel = new AphrontPanelView();
+    $header = id(new PhabricatorHeaderView())
-    $panel->setHeader('Repository Tracking');
+      ->setHeader(pht('Edit Repository Tracking'));
-    $panel->appendChild($form);
-    $panel->setWidth(AphrontPanelView::WIDTH_WIDE);
-    $panel->setNoBackground();
 
     $nav = $this->sideNav;
     $nav->appendChild($error_view);
-    $nav->appendChild($panel);
+    $nav->appendChild($header);
+    $nav->appendChild($form);
 
-    return $this->buildStandardPageResponse(
+    return $this->buildApplicationPage(
       $nav,
       array(
-        'title' => 'Edit Repository Tracking',
+        'title' => pht('Edit Repository Tracking'),
       ));
   }
 

src/view/control/PhabricatorObjectSelectorDialog.php

@@ -124,8 +124,15 @@ final class PhabricatorObjectSelectorDialog {
             <td class="phabricator-object-selector-search-text">%s</td>
           </tr>
         </table>',
-        phutil_tag('select', array('id' => $filter_id), $options),
+        phutil_tag(
-        phutil_tag('input', array('id' => $query_id))));
+          'select',
+            array('id' => $filter_id),
+          $options),
+        phutil_tag(
+          'input',
+            array(
+              'id' => $query_id,
+              'type' => 'text'))));
 
     $result_box = phutil_tag(
       'div',

src/view/page/PhabricatorStandardPageView.php

@@ -115,6 +115,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
     require_celerity_resource('phabricator-zindex-css');
     require_celerity_resource('phabricator-core-buttons-css');
     require_celerity_resource('spacing-css');
+    require_celerity_resource('phui-form-css'); // Evan will hate this
     require_celerity_resource('sprite-gradient-css');
     require_celerity_resource('phabricator-standard-page-view');
 

webroot/rsrc/css/aphront/form-view.css

@@ -15,13 +15,14 @@
 }
 
 .aphront-form-view label.aphront-form-label {
-  padding-top: 4px;
+  padding-top: 5px;
   width: 19%;
   float: left;
   text-align: right;
   font-weight: bold;
   font-size: 13px;
-  color: #666;
+  color: #757c88;
+  text-shadow: 0 1px rgba(255,255,255,1);
 }
 
 .device-phone .aphront-form-view label.aphront-form-label {
@@ -29,14 +30,13 @@
   float: none;
   text-align: left;
   width: 100%;
-  color: #777;
   margin-bottom: 3px;
 }
 
 .aphront-form-input {
   margin-left: 20%;
-  margin-right: 25%;
+  margin-right: 20%;
-  width: 55%;
+  width: 60%;
 }
 
 .device-phone .aphront-form-input {
@@ -45,20 +45,8 @@
   width: 100%;
 }
 
-.aphront-form-control-text .aphront-form-input input,
-.aphront-form-control-password .aphront-form-input input {
-  font-size: 13px;
-  padding: 4px 4px;
-  color: #333;
-  vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid #96A6C5;
-  border-radius: 3px;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
 .aphront-form-error {
-  width: 23%;
+  width: 18%;
   float: right;
   color: #aa0000;
   font-weight: bold;
@@ -80,16 +68,14 @@
   font-size: 11px;
 }
 
-.aphront-form-input input,
+.aphront-form-input input {
+  width: 100%;
+}
+
 .aphront-form-input textarea {
-  font-size: 13px;
   display: block;
   width: 100%;
   box-sizing: border-box;
-}
-
-
-.aphront-form-input textarea {
   height: 12em;
 }
 
@@ -104,10 +90,7 @@
 }
 
 .aphront-form-control-textarea textarea.aphront-textarea-very-short {
-  height: 3em;
+  height: 44px;
-  border: 1px solid #96A6C5;
-  border-radius: 3px;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 
 .aphront-form-control-textarea textarea.aphront-textarea-very-tall {
@@ -118,13 +101,12 @@
   padding-top: 2px;
 }
 
-
 .aphront-form-view .aphront-form-caption {
   font-size: 12px;
   color: #888;
   padding: 2px;
   text-align: right;
-  margin-right: 25%;
+  margin-right: 20%;
   margin-left: 20%;
 }
 
@@ -138,7 +120,14 @@
 }
 
 .aphront-form-instructions {
-  margin: 0.75em 3% 1.25em;
+  width: 60%;
+  margin-left: 20%;
+  padding: 10px 4px;
+}
+
+.device .aphront-form-instructions {
+  width: 100%;
+  margin: 0;
 }
 
 .aphront-form-important {
@@ -152,10 +141,9 @@
   margin: .5em 2em;
 }
 
-
 .aphront-form-control-static .aphront-form-input,
 .aphront-form-control-markup .aphront-form-input {
-  padding-top: 4px;
+  padding-top: 6px;
   font-size: 13px;
 }
 
@@ -205,10 +193,16 @@ table.aphront-form-control-checkbox-layout th {
 }
 
 .aphront-form-inset {
-  margin: 0 0 1em;
+  margin: 0 0 10px;
-  padding: .75em;
+  padding: 10px;
-  background: #f3f3f3;
+  background: #fff;
-  border: 1px solid #afafaf;
+  border: 1px solid #d4dae0;
+}
+
+.aphront-form-inset h1 {
+  color: #777;
+  font-weight: normal;
+  padding-bottom: 10px;
 }
 
 .aphront-form-drag-and-drop-file-list {

webroot/rsrc/css/aphront/tokenizer.css

@@ -3,25 +3,17 @@
  * @requires aphront-typeahead-control-css
  */
 
-div.jx-tokenizer {
+body div.jx-tokenizer {
   background: transparent;
   position: relative;
-  display: block;
   width: 100%;
 }
 
-div.jx-tokenizer-container {
+body div.jx-tokenizer-container {
-  background: #fff;
-  border: 1px solid #96A6C5;
   position: relative;
-  width: 100%;
+  display: block;
-  padding: 0 2px;
+  padding: 0;
-  border-radius: 3px;
+  height: 30px;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
-div.jx-tokenizer-container-focused {
-  border-color: #0099ff;
 }
 
 var.jx-tokenizer-metrics {
@@ -30,44 +22,53 @@ var.jx-tokenizer-metrics {
   top: 20px;
 }
 
-input.jx-tokenizer-input {
+body input.jx-tokenizer-input {
   border: 1px solid transparent;
   border-width: 1px 0px;
   padding: 3px;
   outline: none;
   float: left;
+  width: 100%;
+  border-shadow: none;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  font-size: 13px;
+  color: #777;
+  height: 26px;
 }
 
-span.jx-tokenizer-x-placeholder {
+body input.jx-tokenizer-input:focus {
-  padding: 0 2px;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  border-color: transparent;
+}
+
+.jx-typeahead-placeholder {
+  margin-left: 4px;
+}
+
+a.jx-tokenizer-x {
+  padding-left: 4px;
+}
+
+a.jx-tokenizer-x:hover {
+  color: #000;
+  text-decoration: none;
 }
 
 a.jx-tokenizer-token {
-  padding: 2px 0 2px 5px;
+  padding: 2px 6px 3px;
   border:  1px solid #a4bdec;
   margin: 3px 2px 0 4px;
   background: #dee7f8;
   float: left;
-  cursor: text;
+  cursor: pointer;
-  font-size: 12px;
   border-radius: 3px;
+  color: #333;
+
 }
 
 a.jx-tokenizer-token:hover {
   text-decoration: none;
   background: #bbcef1;
-  cursor: text;
 }
-
-a.jx-tokenizer-token a.jx-tokenizer-x {
-  color: #627aad;
-  font-family: Arial, sans-serif;
-  font-weight: normal;
-  cursor: pointer;
-  padding: 0 4px;
-}
-
-a.jx-tokenizer-token a.jx-tokenizer-x:hover {
-  text-decoration: none;
-}
-

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

@@ -134,18 +134,20 @@
   margin: 0 8px 0 52px;
 }
 
-.phabricator-main-menu-search input {
+.phabricator-main-menu .phabricator-main-menu-search input {
   outline: 0;
   margin: 0;
+  box-shadow: none;
+  transition: none;
 
   width: 100%;
   right: 0;
   position: absolute;
-
+  font-size: 13px;
-  border: 1px solid #333333;
+  border: 1px solid #333;
   border-radius: 12px;
-  background: #555555;
+  background-color: #555;
-  height: 12px;
+  height: 26px;
   line-height: 12px;
   box-shadow: 0px 1px 1px rgba(128, 128, 128, 0.25);
   padding: 6px 32px 6px 10px;
@@ -157,8 +159,9 @@
   border-radius: 15px;
 }
 
-.phabricator-main-menu-search input:focus {
+.phabricator-main-menu .phabricator-main-menu-search input:focus {
   background: #c9c9c9;
+  border: none;
 }
 
 .phabricator-main-menu-search input.jx-typeahead-placeholder {

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

@@ -6,6 +6,7 @@
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #cccccc;
+  background: #fff;
 }
 
 .config-option-table th,

webroot/rsrc/css/application/directory/phabricator-jump-nav.css

@@ -8,13 +8,9 @@
   margin: 0;
 }
 
-.phabricator-jump-nav {
+input.phabricator-jump-nav[type='text'] {
   font-size: 16px;
   width: 100%;
-  padding: 4px;
-  border-radius: 3px;
-  border: 1px solid #96A6C5;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 
 .phabricator-jump-nav-caption {

webroot/rsrc/css/application/objectselector/object-selector.css

@@ -18,6 +18,7 @@
 
 .phabricator-object-selector-search td {
   padding: 4px 8px;
+  vertical-align: middle;
 }
 
 td.phabricator-object-selector-search-text {

webroot/rsrc/css/application/owners/owners-path-editor.css

@@ -8,6 +8,7 @@
 
 .owners-path-editor-table td {
   padding: 2px 4px;
+  vertical-align: middle;
 }
 
 .owners-path-editor-table select.owners-repo {
@@ -15,11 +16,10 @@
 }
 
 .owners-path-editor-table input {
-  width: 450px;
+  width: 400px;
 }
 
 .owners-path-editor-table div.error-display {
-  width: 200px;
   padding: 4px 12px 0;
 }
 

webroot/rsrc/css/core/remarkup.css

@@ -256,21 +256,30 @@
 
 
 .remarkup-assist-textarea {
-  border-width: 1px;
+  border-left-color: #96A6C5;
-  border-color: #e5e5e5 #999999 #999999;
+  border-right-color: #96A6C5;
+  border-bottom-color: #96A6C5;
+  border-top-color: #c9d4e9;
+  border-radius: 0;
 
   /* Prevent Safari and Chrome users from dragging the textarea any wider,
      because the top bar won't resize along with it. */
   resize: vertical;
 }
 
+.remarkup-assist-textarea:focus {
+  border: 1px solid rgba(82, 168, 236, 0.8);
+}
+
 .remarkup-assist-bar {
   height: 27px;
   padding: 0 2px;
 
   border-width: 1px 1px 0;
   border-style: solid;
-  border-color: #737373 #999999;
+  border-top-color: #96A6C5;
+  border-left-color: #96A6C5;
+  border-right-color: #96A6C5;
 
   background: #f5f5f5;
   overflow: hidden;

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

@@ -3,11 +3,15 @@
  */
 
 .phabricator-form-view {
-  padding: .75em;
+  padding: 20px;
-  background: #f9f9f9;
+  background: #f4f5f8;
   border-width: 1px 0;
   border-style: solid;
-  border-color: #dbdbdb;
+  border-color: rgb(199, 201, 214);
+}
+
+.device-phone .phabricator-form-view {
+  padding: 10px 5px 10px 10px;
 }
 
 .device .phabricator-form-view .aphront-form-control .aphront-form-label {

webroot/rsrc/css/phui/phui-form.css

@@ -0,0 +1,126 @@
+/**
+ * @provides phui-form-css
+ */
+
+select,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+div.jx-tokenizer-container {
+  display: inline-block;
+  height: 28px;
+  line-height: 18px;
+  color: #555555;
+  vertical-align: middle;
+  font: 13px 'Helvetica Neue', Arial, sans-serif;
+}
+
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+div.jx-tokenizer-container {
+  padding: 4px 6px;
+  background-color: #ffffff;
+  border: 1px solid #96A6C5;
+
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+
+  -webkit-transition: border linear .05s, box-shadow linear .05s;
+  -moz-transition: border linear .05s, box-shadow linear .05s;
+  -o-transition: border linear .05s, box-shadow linear .05s;
+  transition: border linear .05s, box-shadow linear .05s;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+textarea:focus,
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="date"]:focus,
+input[type="month"]:focus,
+input[type="time"]:focus,
+input[type="week"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus,
+input[type="url"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="color"]:focus,
+div.jx-tokenizer-container-focused {
+  border-color: rgba(82, 168, 236, 0.8);
+  outline: 0;
+  outline: thin dotted \9;
+  /* IE6-9 */
+
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
+  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
+}
+input[type="radio"],
+input[type="checkbox"] {
+  margin: 4px 0 0;
+  margin-top: 1px \9;
+  /* IE8-9 */
+  line-height: normal;
+}
+
+select {
+  height: 24px;
+  line-height: 24px;
+  border: 1px solid #a1a5a9;
+  background-color: #ffffff;
+}
+select[multiple],
+select[size] {
+  height: auto;
+}
+select:focus,
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: #999999;
+}
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  color: #999999;
+}
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  color: #999999;
+}

webroot/rsrc/js/application/herald/HeraldRuleEditor.js

@@ -232,7 +232,7 @@ JX.install('HeraldRuleEditor', {
           set_fn(this._config.template.defaultColor);
           break;
         default:
-          input = JX.$N('input');
+          input = JX.$N('input', {type: 'text'});
           get_fn = function() { return input.value; };
           set_fn = function(v) { input.value = v; };
           break;