Make AphrontErrorView work on devices

Summary:
This is the last Paste UI element that doesn't work properly on tablets/phones. Make it flexible.

Also add empty states to Paste.

Test Plan: Viewed various errors, and `/uiexample/errors/`.

Reviewers: btrahan

Reviewed By: btrahan

CC: aran

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

src/__celerity_resource_map__.php

@@ -553,7 +553,7 @@ celerity_register_resource_map(array(
   ),
   'aphront-error-view-css' =>
   array(
-    'uri' => '/res/369e35eb/rsrc/css/aphront/error-view.css',
+    'uri' => '/res/7c143698/rsrc/css/aphront/error-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -2944,7 +2944,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    'ba3255ee' =>
+    '1db83c80' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -2973,7 +2973,7 @@ celerity_register_resource_map(array(
         21 => 'phabricator-flag-css',
         22 => 'aphront-error-view-css',
       ),
-      'uri' => '/res/pkg/ba3255ee/core.pkg.css',
+      'uri' => '/res/pkg/1db83c80/core.pkg.css',
       'type' => 'css',
     ),
     '3a455e4f' =>
@@ -3140,20 +3140,20 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => '7839ae2d',
-    'aphront-crumbs-view-css' => 'ba3255ee',
+    'aphront-crumbs-view-css' => '1db83c80',
-    'aphront-dialog-view-css' => 'ba3255ee',
+    'aphront-dialog-view-css' => '1db83c80',
-    'aphront-error-view-css' => 'ba3255ee',
+    'aphront-error-view-css' => '1db83c80',
-    'aphront-form-view-css' => 'ba3255ee',
+    'aphront-form-view-css' => '1db83c80',
     'aphront-headsup-action-list-view-css' => '2ba14b3d',
-    'aphront-headsup-view-css' => 'ba3255ee',
+    'aphront-headsup-view-css' => '1db83c80',
-    'aphront-list-filter-view-css' => 'ba3255ee',
+    'aphront-list-filter-view-css' => '1db83c80',
-    'aphront-pager-view-css' => 'ba3255ee',
+    'aphront-pager-view-css' => '1db83c80',
-    'aphront-panel-view-css' => 'ba3255ee',
+    'aphront-panel-view-css' => '1db83c80',
-    'aphront-side-nav-view-css' => 'ba3255ee',
+    'aphront-side-nav-view-css' => '1db83c80',
-    'aphront-table-view-css' => 'ba3255ee',
+    'aphront-table-view-css' => '1db83c80',
-    'aphront-tokenizer-control-css' => 'ba3255ee',
+    'aphront-tokenizer-control-css' => '1db83c80',
-    'aphront-tooltip-css' => 'ba3255ee',
+    'aphront-tooltip-css' => '1db83c80',
-    'aphront-typeahead-control-css' => 'ba3255ee',
+    'aphront-typeahead-control-css' => '1db83c80',
     'differential-changeset-view-css' => '2ba14b3d',
     'differential-core-view-css' => '2ba14b3d',
     'differential-inline-comment-editor' => '670ad7f1',
@@ -3219,15 +3219,15 @@ celerity_register_resource_map(array(
     'javelin-workflow' => '3a455e4f',
     'maniphest-task-summary-css' => '7839ae2d',
     'maniphest-transaction-detail-css' => '7839ae2d',
-    'phabricator-app-buttons-css' => 'ba3255ee',
+    'phabricator-app-buttons-css' => '1db83c80',
     'phabricator-content-source-view-css' => '2ba14b3d',
-    'phabricator-core-buttons-css' => 'ba3255ee',
+    'phabricator-core-buttons-css' => '1db83c80',
-    'phabricator-core-css' => 'ba3255ee',
+    'phabricator-core-css' => '1db83c80',
-    'phabricator-directory-css' => 'ba3255ee',
+    'phabricator-directory-css' => '1db83c80',
     'phabricator-drag-and-drop-file-upload' => '670ad7f1',
     'phabricator-dropdown-menu' => '3a455e4f',
-    'phabricator-flag-css' => 'ba3255ee',
+    'phabricator-flag-css' => '1db83c80',
-    'phabricator-jump-nav' => 'ba3255ee',
+    'phabricator-jump-nav' => '1db83c80',
     'phabricator-keyboard-shortcut' => '3a455e4f',
     'phabricator-keyboard-shortcut-manager' => '3a455e4f',
     'phabricator-menu-item' => '3a455e4f',
@@ -3235,11 +3235,11 @@ celerity_register_resource_map(array(
     'phabricator-paste-file-upload' => '3a455e4f',
     'phabricator-prefab' => '3a455e4f',
     'phabricator-project-tag-css' => '7839ae2d',
-    'phabricator-remarkup-css' => 'ba3255ee',
+    'phabricator-remarkup-css' => '1db83c80',
     'phabricator-shaped-request' => '670ad7f1',
-    'phabricator-standard-page-view' => 'ba3255ee',
+    'phabricator-standard-page-view' => '1db83c80',
     'phabricator-tooltip' => '3a455e4f',
-    'phabricator-transaction-view-css' => 'ba3255ee',
+    'phabricator-transaction-view-css' => '1db83c80',
-    'syntax-highlighting-css' => 'ba3255ee',
+    'syntax-highlighting-css' => '1db83c80',
   ),
 ));

src/applications/differential/controller/DifferentialRevisionViewController.php

@@ -184,7 +184,6 @@ final class DifferentialRevisionViewController extends DifferentialController {
       $warning = new AphrontErrorView();
       $warning->setTitle('Very Large Diff');
       $warning->setSeverity(AphrontErrorView::SEVERITY_WARNING);
-      $warning->setWidth(AphrontErrorView::WIDTH_WIDE);
       $warning->appendChild(
         "<p>This diff is very large and affects {$count} files. Load ".
         "each file individually. ".

src/applications/differential/field/specification/DifferentialLintFieldSpecification.php

@@ -247,7 +247,6 @@ final class DifferentialLintFieldSpecification
       }
       $lint_warning = id(new AphrontErrorView())
         ->setSeverity(AphrontErrorView::SEVERITY_ERROR)
-        ->setWidth(AphrontErrorView::WIDTH_WIDE)
         ->appendChild($content)
         ->setTitle(idx($titles, $diff->getLintStatus(), 'Warning'));
     }

src/applications/differential/field/specification/DifferentialUnitFieldSpecification.php

@@ -222,7 +222,6 @@ final class DifferentialUnitFieldSpecification
       }
       $unit_warning = id(new AphrontErrorView())
         ->setSeverity(AphrontErrorView::SEVERITY_ERROR)
-        ->setWidth(AphrontErrorView::WIDTH_WIDE)
         ->appendChild($content)
         ->setTitle(idx($titles, $diff->getUnitStatus(), 'Warning'));
     }

src/applications/differential/view/DifferentialAddCommentView.php

@@ -64,7 +64,6 @@ final class DifferentialAddCommentView extends AphrontView {
 
     $warning = new AphrontErrorView();
     $warning->setSeverity(AphrontErrorView::SEVERITY_ERROR);
-    $warning->setWidth(AphrontErrorView::WIDTH_WIDE);
     $warning->setID($id);
     $warning->appendChild($content);
     $warning->setTitle(idx($titles, $status, 'Warning'));

src/applications/diffusion/controller/DiffusionCommitController.php

@@ -72,7 +72,6 @@ final class DiffusionCommitController extends DiffusionController {
       $subpath = $commit_data->getCommitDetail('svn-subpath');
 
       $error_panel = new AphrontErrorView();
-      $error_panel->setWidth(AphrontErrorView::WIDTH_WIDE);
       $error_panel->setTitle('Commit Not Tracked');
       $error_panel->setSeverity(AphrontErrorView::SEVERITY_WARNING);
       $error_panel->appendChild(
@@ -156,7 +155,6 @@ final class DiffusionCommitController extends DiffusionController {
     $pane_id = null;
     if ($bad_commit) {
       $error_panel = new AphrontErrorView();
-      $error_panel->setWidth(AphrontErrorView::WIDTH_WIDE);
       $error_panel->setTitle('Bad Commit');
       $error_panel->appendChild(
         phutil_escape_html($bad_commit['description']));
@@ -166,7 +164,6 @@ final class DiffusionCommitController extends DiffusionController {
       // Don't render anything else.
     } else if (!count($changes)) {
       $no_changes = new AphrontErrorView();
-      $no_changes->setWidth(AphrontErrorView::WIDTH_WIDE);
       $no_changes->setSeverity(AphrontErrorView::SEVERITY_WARNING);
       $no_changes->setTitle('Not Yet Parsed');
       // TODO: This can also happen with weird SVN changes that don't do

src/applications/paste/controller/PhabricatorPasteListController.php

@@ -37,10 +37,12 @@ final class PhabricatorPasteListController extends PhabricatorPasteController {
     switch ($filter) {
       case 'my':
         $query->withAuthorPHIDs(array($user->getPHID()));
-        $title = 'My Pastes';
+        $title = pht('My Pastes');
+        $nodata = pht("You haven't created any Pastes yet.");
         break;
       case 'all':
-        $title = 'All Pastes';
+        $title = pht('All Pastes');
+        $nodata = pht("There are no Pastes yet.");
         break;
     }
 
@@ -48,10 +50,10 @@ final class PhabricatorPasteListController extends PhabricatorPasteController {
     $pager->readFromRequest($request);
     $pastes = $query->executeWithCursorPager($pager);
 
-
     $list = $this->buildPasteList($pastes);
     $list->setHeader($title);
     $list->setPager($pager);
+    $list->setNoDataString($nodata);
 
     $nav->appendChild($list);
 

src/applications/project/controller/PhabricatorProjectCreateController.php

@@ -105,11 +105,6 @@ final class PhabricatorProjectCreateController
           ->setValue($profile->getBlurb()));
 
     if ($request->isAjax()) {
-
-      if ($error_view) {
-        $error_view->setWidth(AphrontErrorView::WIDTH_DIALOG);
-      }
-
       $dialog = id(new AphrontDialogView())
         ->setUser($user)
         ->setWidth(AphrontDialogView::WIDTH_FORM)

src/applications/settings/panel/PhabricatorSettingsPanelEmailAddresses.php

@@ -222,7 +222,6 @@ final class PhabricatorSettingsPanelEmailAddresses
 
     if ($errors) {
       $errors = id(new AphrontErrorView())
-        ->setWidth(AphrontErrorView::WIDTH_DIALOG)
         ->setErrors($errors);
     }
 

src/view/form/AphrontErrorView.php

@@ -23,14 +23,9 @@ final class AphrontErrorView extends AphrontView {
   const SEVERITY_NOTICE = 'notice';
   const SEVERITY_NODATA = 'nodata';
 
-  const WIDTH_DEFAULT = 'default';
-  const WIDTH_WIDE = 'wide';
-  const WIDTH_DIALOG = 'dialog';
-
   private $title;
   private $errors;
   private $severity;
-  private $width;
   private $id;
 
   public function setTitle($title) {
@@ -48,11 +43,6 @@ final class AphrontErrorView extends AphrontView {
     return $this;
   }
 
-  public function setWidth($width) {
-    $this->width = $width;
-    return $this;
-  }
-
   public function setID($id) {
     $this->id = $id;
     return $this;
@@ -71,24 +61,32 @@ final class AphrontErrorView extends AphrontView {
           array(),
           phutil_escape_html($error));
       }
-      $list = '<ul>'.implode("\n", $list).'</ul>';
+      $list = phutil_render_tag(
+        'ul',
+        array(
+          'class' => 'aphront-error-view-list',
+        ),
+        implode("\n", $list));
     } else {
       $list = null;
     }
 
     $title = $this->title;
     if (strlen($title)) {
-      $title = '<h1>'.phutil_escape_html($title).'</h1>';
+      $title = phutil_render_tag(
+        'h1',
+        array(
+          'class' => 'aphront-error-view-head',
+        ),
+        phutil_escape_html($title));
     } else {
       $title = null;
     }
 
     $this->severity = nonempty($this->severity, self::SEVERITY_ERROR);
-    $this->width = nonempty($this->width, self::WIDTH_DEFAULT);
 
     $more_classes = array();
     $more_classes[] = 'aphront-error-severity-'.$this->severity;
-    $more_classes[] = 'aphront-error-width-'.$this->width;
     $more_classes = implode(' ', $more_classes);
 
     return

src/view/layout/PhabricatorObjectItemListView.php

@@ -21,6 +21,7 @@ final class PhabricatorObjectItemListView extends AphrontView {
   private $header;
   private $items;
   private $pager;
+  private $noDataString;
 
   public function setHeader($header) {
     $this->header = $header;
@@ -32,6 +33,11 @@ final class PhabricatorObjectItemListView extends AphrontView {
     return $this;
   }
 
+  public function setNoDataString($no_data_string) {
+    $this->noDataString = $no_data_string;
+    return $this;
+  }
+
   public function addItem(PhabricatorObjectItemView $item) {
     $this->items[] = $item;
     return $this;
@@ -46,7 +52,16 @@ final class PhabricatorObjectItemListView extends AphrontView {
         'class' => 'phabricator-object-item-list-header',
       ),
       phutil_escape_html($this->header));
-    $items = $this->renderSingleView($this->items);
+
+    if ($this->items) {
+      $items = $this->renderSingleView($this->items);
+    } else {
+      $string = nonempty($this->noDataString, pht('No data.'));
+      $items = id(new AphrontErrorView())
+        ->setSeverity(AphrontErrorView::SEVERITY_NODATA)
+        ->appendChild(phutil_escape_html($string))
+        ->render();
+    }
 
     $pager = null;
     if ($this->pager) {

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

@@ -3,11 +3,10 @@
  */
 
 .aphront-error-view {
-  margin: 1em auto;
+  margin: 1em 2%;
-
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+  border-style: solid;
-  -mox-box-shadow:    1px 1px 2px rgba(0, 0, 0, 0.1);
+  border-width: 1px;
-  box-shadow:         1px 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .aphront-error-view-body {
@@ -16,68 +15,54 @@
   line-height: 1.6em;
 }
 
-.aphront-error-view h1 {
+.aphront-error-view-head {
   font-size: 13px;
   padding: 0.5em 1em;
   font-weight: bold;
   color: #333333;
 }
 
-.aphront-error-view-body ul {
+.aphront-error-view-list {
   margin: 0.2em 0 0.2em 2em;
   list-style: disc;
 }
 
-.aphront-error-width-default {
-  width: 720px;
-}
-
-.aphront-error-width-dialog {
-  width: 300px;
-}
-
-.aphront-error-width-wide {
-  width: 95%;
-}
-
 .aphront-error-severity-error {
-  border: 1px solid #aa0000;
+  border-color: #aa0000;
   background: #fff3f3;
 }
 
-.aphront-error-severity-error h1 {
+.aphront-error-severity-error .aphront-error-view-head {
   background: #ffe3e3;
 }
 
 .aphront-error-severity-warning {
-  border: 1px solid #888800;
+  border-color: #888800;
   background: #ffffee;
 }
 
-.aphront-error-severity-warning h1 {
+.aphront-error-severity-warning .aphront-error-view-head {
   background: #ffffcc;
 }
 
 .aphront-error-severity-notice {
-  border: 1px solid #000088;
+  border-color: #000088;
   background: #f3f3ff;
 }
 
-.aphront-error-severity-notice h1 {
+.aphront-error-severity-notice .aphront-error-view-head {
   background: #e3e3ff;
 }
 
 .aphront-error-severity-nodata {
-  border: 1px solid #dfdfdf;
+  border-color: #dfdfdf;
   background: #f3f3f3;
 
   color: #666666;
 
-  -webkit-box-shadow: 0px 0px 0px #000;
-  -mox-box-shadow:    0px 0px 0px #000;
   box-shadow:         0px 0px 0px #000;
 }
 
-.aphront-error-severity-nodata h1 {
+.aphront-error-severity-nodata .aphront-error-view-head {
   background: #e3e3e3;
 }