[Redesign] Clean up AphrontDialog

Summary: Ref T8099, Cleans up UI issues, adds `appendList` and renders lists and paragraphs with Remarkup UI.

Test Plan: Test Policy Dialogs, other various dialogs.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Maniphest Tasks: T8099

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'a24d5624',
+    'core.pkg.css' => '49de1b2f',
     'core.pkg.js' => 'a590b451',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '1b36e899',
@@ -18,7 +18,7 @@ return array(
     'maniphest.pkg.js' => '2f4f52c2',
     'rsrc/css/aphront/aphront-bars.css' => '231ac33c',
     'rsrc/css/aphront/dark-console.css' => '6378ef3d',
-    'rsrc/css/aphront/dialog-view.css' => '8ea1b9cc',
+    'rsrc/css/aphront/dialog-view.css' => 'fe58b18d',
     'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d',
     'rsrc/css/aphront/list-filter-view.css' => 'aa5ffcb9',
     'rsrc/css/aphront/multi-column.css' => 'fd18389d',
@@ -485,7 +485,7 @@ return array(
     'almanac-css' => 'dbb9b3af',
     'aphront-bars' => '231ac33c',
     'aphront-dark-console-css' => '6378ef3d',
-    'aphront-dialog-view-css' => '8ea1b9cc',
+    'aphront-dialog-view-css' => 'fe58b18d',
     'aphront-list-filter-view-css' => 'aa5ffcb9',
     'aphront-multi-column-view-css' => 'fd18389d',
     'aphront-panel-view-css' => '8427b78d',

src/aphront/configuration/AphrontDefaultApplicationConfiguration.php

@@ -173,13 +173,11 @@ class AphrontDefaultApplicationConfiguration
           $ex->getRejection()),
       );
 
+      $list = null;
       if ($ex->getCapabilityName()) {
         $list = $ex->getMoreInfo();
         foreach ($list as $key => $item) {
-          $list[$key] = phutil_tag('li', array(), $item);
+          $list[$key] = $item;
-        }
-        if ($list) {
-          $list = phutil_tag('ul', array(), $list);
         }
 
         $content[] = phutil_tag(
@@ -189,7 +187,6 @@ class AphrontDefaultApplicationConfiguration
           ),
           pht('Users with the "%s" capability:', $ex->getCapabilityName()));
 
-        $content[] = $list;
       }
 
       $dialog = id(new AphrontDialogView())
@@ -198,6 +195,10 @@ class AphrontDefaultApplicationConfiguration
         ->setUser($user)
         ->appendChild($content);
 
+      if ($list) {
+        $dialog->appendList($list);
+      }
+
       if ($this->getRequest()->isAjax()) {
         $dialog->addCancelButton('/', pht('Close'));
       } else {

src/applications/policy/controller/PhabricatorPolicyExplainController.php

@@ -47,13 +47,6 @@ final class PhabricatorPolicyExplainController
       $auto_info);
     $auto_info = array_filter($auto_info);
 
-    foreach ($auto_info as $key => $info) {
-      $auto_info[$key] = phutil_tag('li', array(), $info);
-    }
-    if ($auto_info) {
-      $auto_info = phutil_tag('ul', array(), $auto_info);
-    }
-
     $capability_name = $capability;
     $capobj = PhabricatorPolicyCapability::getCapabilityByKey($capability);
     if ($capobj) {
@@ -78,9 +71,12 @@ final class PhabricatorPolicyExplainController
     $dialog
       ->setTitle(pht('Policy Details: %s', $object_name))
       ->appendParagraph($intro)
-      ->appendChild($auto_info)
       ->addCancelButton($object_uri, pht('Done'));
 
+    if ($auto_info) {
+      $dialog->appendList($auto_info);
+    }
+
     $this->appendStrengthInformation($dialog, $object, $policy, $capability);
 
     return $dialog;

src/applications/transactions/response/PhabricatorApplicationTransactionNoEffectResponse.php

@@ -66,13 +66,12 @@ final class PhabricatorApplicationTransactionNoEffectResponse
 
     $list = array();
     foreach ($xactions as $xaction) {
-      $list[] = phutil_tag(
+      $list[] = $xaction->getNoEffectDescription();
-        'li',
-        array(),
-        $xaction->getNoEffectDescription());
     }
 
-    $dialog->appendChild(phutil_tag('ul', array(), $list));
+    if ($list) {
+      $dialog->appendList($list);
+    }
     $dialog->appendChild($tail);
 
     if ($continue) {

src/applications/transactions/response/PhabricatorApplicationTransactionValidationResponse.php

@@ -34,13 +34,10 @@ final class PhabricatorApplicationTransactionValidationResponse
 
     $list = array();
     foreach ($ex->getErrors() as $error) {
-      $list[] = phutil_tag(
+      $list[] = $error->getMessage();
-        'li',
-        array(),
-        $error->getMessage());
     }
 
-    $dialog->appendChild(phutil_tag('ul', array(), $list));
+    $dialog->appendList($list);
     $dialog->addCancelButton($this->cancelURI);
 
     return $this->getProxy()->setDialog($dialog);

src/view/AphrontDialogView.php

@@ -140,6 +140,25 @@ final class AphrontDialogView extends AphrontView {
         $paragraph));
   }
 
+  public function appendList(array $items) {
+    $listitems = array();
+    foreach ($items as $item) {
+      $listitems[] = phutil_tag(
+        'li',
+        array(
+          'class' => 'remarkup-list-item',
+        ),
+        $item);
+    }
+    return $this->appendChild(
+      phutil_tag(
+        'ul',
+        array(
+          'class' => 'remarkup-list',
+        ),
+        $listitems));
+  }
+
   public function appendForm(AphrontFormView $form) {
     return $this->appendChild($form->buildLayoutView());
   }
@@ -332,7 +351,7 @@ final class AphrontDialogView extends AphrontView {
         $header),
       phutil_tag('div',
         array(
-          'class' => 'aphront-dialog-body grouped',
+          'class' => 'aphront-dialog-body phabricator-remarkup grouped',
         ),
         $children),
       $tail,

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

@@ -7,6 +7,7 @@
   margin: 32px auto 16px;
   border: 1px solid {$lightblueborder};
   border-radius: 3px;
+  background-color: #fff;
 }
 
 .device-phone .aphront-dialog-view {
@@ -20,9 +21,6 @@
 
 .aphront-dialog-head {
   padding: 12px 12px 0 12px;
-  background: #fff;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
 }
 
 .aphront-dialog-flush .aphront-dialog-body {
@@ -48,13 +46,13 @@
   background: {$lightgreybackground};
   padding: 8px 16px;
   border-top: 1px solid {$thinblueborder};
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
 }
 
 .aphront-dialog-foot {
   padding: 6px 0;
   float: left;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
 }
 
 .aphront-dialog-tail button,