[Redesign] Update Inline Comment UI

Summary: Ref T8099, Simplifies the button bar with a `borderless` option and implements in Differential Inline Commenting.

Test Plan:
Review new and old comments, submitted, unsubmitted, ghosts, done.

{F562765}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Maniphest Tasks: T8099

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

src/applications/uiexample/examples/PHUIButtonBarExample.php

@@ -61,6 +61,20 @@ final class PHUIButtonBarExample extends PhabricatorUIExample {
       $button_bar3->addButton($button);
     }
 
+    $button_bar4 = new PHUIButtonBarView();
+    $button_bar4->setBorderless(true);
+    foreach ($icons as $text => $icon) {
+      $image = id(new PHUIIconView())
+          ->setIconFont($icon);
+      $button = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setTitle($text)
+        ->setTooltip($text)
+        ->setIcon($image);
+
+      $button_bar4->addButton($button);
+    }
+
     $layout1 = id(new PHUIBoxView())
       ->appendChild($button_bar1)
       ->addClass('ml');
@@ -73,11 +87,16 @@ final class PHUIButtonBarExample extends PhabricatorUIExample {
       ->appendChild($button_bar3)
       ->addClass('mlr mll mlb');
 
+    $layout4 = id(new PHUIBoxView())
+      ->appendChild($button_bar4)
+      ->addClass('mlr mll mlb');
+
     $wrap1 = id(new PHUIObjectBoxView())
       ->setHeaderText(pht('Button Bar Example'))
       ->appendChild($layout1)
       ->appendChild($layout2)
-      ->appendChild($layout3);
+      ->appendChild($layout3)
+      ->appendChild($layout4);
 
     return array($wrap1);
   }

src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php

@@ -191,16 +191,17 @@ final class PHUIDiffInlineCommentDetailView
     }
 
     $action_buttons = new PHUIButtonBarView();
-    $action_buttons->addClass('mml');
+    $action_buttons->setBorderless(true);
+    $action_buttons->addClass('inline-button-divider');
     $nextprev = null;
     if (!$this->preview) {
       $nextprev = new PHUIButtonBarView();
-      $nextprev->addClass('mml');
+      $nextprev->setBorderless(true);
+      $nextprev->addClass('inline-button-divider');
 
 
       $up = id(new PHUIButtonView())
         ->setTag('a')
-        ->setColor(PHUIButtonView::SIMPLE)
         ->setTooltip(pht('Previous'))
         ->setIconFont('fa-chevron-up')
         ->addSigil('differential-inline-prev')
@@ -208,7 +209,6 @@ final class PHUIDiffInlineCommentDetailView
 
       $down = id(new PHUIButtonView())
         ->setTag('a')
-        ->setColor(PHUIButtonView::SIMPLE)
         ->setTooltip(pht('Next'))
         ->setIconFont('fa-chevron-down')
         ->addSigil('differential-inline-next')
@@ -216,7 +216,6 @@ final class PHUIDiffInlineCommentDetailView
 
       $hide = id(new PHUIButtonView())
         ->setTag('a')
-        ->setColor(PHUIButtonView::SIMPLE)
         ->setTooltip(pht('Hide Comment'))
         ->setIconFont('fa-times')
         ->addSigil('hide-inline')
@@ -240,7 +239,6 @@ final class PHUIDiffInlineCommentDetailView
 
           $reply_button = id(new PHUIButtonView())
             ->setTag('a')
-            ->setColor(PHUIButtonView::SIMPLE)
             ->setIconFont('fa-reply')
             ->setTooltip(pht('Reply'))
             ->addSigil('differential-inline-reply')
@@ -256,7 +254,6 @@ final class PHUIDiffInlineCommentDetailView
     if ($this->editable && !$this->preview) {
       $edit_button = id(new PHUIButtonView())
         ->setTag('a')
-        ->setColor(PHUIButtonView::SIMPLE)
         ->setIconFont('fa-pencil')
         ->setTooltip(pht('Edit'))
         ->addSigil('differential-inline-edit')
@@ -265,7 +262,6 @@ final class PHUIDiffInlineCommentDetailView
 
       $delete_button = id(new PHUIButtonView())
         ->setTag('a')
-        ->setColor(PHUIButtonView::SIMPLE)
         ->setIconFont('fa-trash-o')
         ->setTooltip(pht('Delete'))
         ->addSigil('differential-inline-delete')
@@ -276,7 +272,7 @@ final class PHUIDiffInlineCommentDetailView
       $links[] = javelin_tag(
         'a',
         array(
-          'class' => 'button simple msl',
+          'class' => 'inline-button-divider pml msl',
           'meta'        => array(
             'anchor' => $anchor_name,
           ),
@@ -286,7 +282,6 @@ final class PHUIDiffInlineCommentDetailView
 
       $delete_button = id(new PHUIButtonView())
         ->setTag('a')
-        ->setColor(PHUIButtonView::SIMPLE)
         ->setTooltip(pht('Delete'))
         ->setIconFont('fa-trash-o')
         ->addSigil('differential-inline-delete')

src/view/phui/PHUIButtonBarView.php

@@ -3,14 +3,25 @@
 final class PHUIButtonBarView extends AphrontTagView {
 
   private $buttons = array();
+  private $borderless;
 
   public function addButton($button) {
     $this->buttons[] = $button;
     return $this;
   }
 
+  public function setBorderless($borderless) {
+    $this->borderless = $borderless;
+    return $this;
+  }
+
   protected function getTagAttributes() {
-    return array('class' => 'phui-button-bar');
+    $classes = array();
+    $classes[] = 'phui-button-bar';
+    if ($this->borderless) {
+      $classes[] = 'phui-button-bar-borderless';
+    }
+    return array('class' => implode(' ', $classes));
   }
 
   protected function getTagName() {