Revamp inline commenting UI

Summary:
Rebuilds the UI in Differential commenting. Specifically we look at the following design patterns:

**To the author:**
 - The author of the diff should be able to easily identify what comments are done and not done.
 - We keep undone comments yellow
 - Clicking done turns comment block into 'unsubmitted state'

**To the reviewer:**
 - Easier understanding of unsubmitted states
 - All conversations to be yellow/important

**Todo**
 - Not all color CSS states correct
 - Unpulished checkbox support

Test Plan:
Test leaving comments, published and unpublished. Checking Done, unpublished and published. Check delete states.

From the Diff Author's perspective:
{F352094}

For a Diff commenter's perspective:
{F352095}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T1460, T7660, T7503

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

resources/celerity/map.php

@@ -7,10 +7,10 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '1601392f',
+    'core.pkg.css' => '2ff29d1d',
     'core.pkg.js' => '75599122',
     'darkconsole.pkg.js' => '8ab24e01',
-    'differential.pkg.css' => '5a0b221c',
+    'differential.pkg.css' => '571b1cc1',
     'differential.pkg.js' => 'e324301d',
     'diffusion.pkg.css' => '591664fa',
     'diffusion.pkg.js' => 'bfc0737b',
@@ -54,11 +54,12 @@ return array(
     'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
     'rsrc/css/application/dashboard/dashboard.css' => '17937d22',
     'rsrc/css/application/diff/inline-comment-summary.css' => 'eb5f8e8c',
-    'rsrc/css/application/differential/add-comment.css' => 'c478bcaa',
+    'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
-    'rsrc/css/application/differential/changeset-view.css' => 'c5d1e738',
+    'rsrc/css/application/differential/changeset-view.css' => 'f36406b1',
     'rsrc/css/application/differential/core.css' => '7ac3cabc',
+    'rsrc/css/application/differential/phui-inline-comment.css' => '17e89126',
     'rsrc/css/application/differential/results-table.css' => '181aa9d9',
-    'rsrc/css/application/differential/revision-comment.css' => '64603753',
+    'rsrc/css/application/differential/revision-comment.css' => '024dda6b',
     'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
     'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
     'rsrc/css/application/differential/table-of-contents.css' => '63f3ef4a',
@@ -124,7 +125,7 @@ return array(
     'rsrc/css/phui/phui-action-list.css' => '9ee9910a',
     'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5',
     'rsrc/css/phui/phui-box.css' => '7b3a2eed',
-    'rsrc/css/phui/phui-button.css' => '57eaddc9',
+    'rsrc/css/phui/phui-button.css' => '53f55a72',
     'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
     'rsrc/css/phui/phui-document.css' => '0f83a7df',
     'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
@@ -520,12 +521,12 @@ return array(
     'conpherence-thread-manager' => 'bb928342',
     'conpherence-update-css' => '1099a660',
     'conpherence-widget-pane-css' => '1979ee8c',
-    'differential-changeset-view-css' => 'c5d1e738',
+    'differential-changeset-view-css' => 'f36406b1',
     'differential-core-view-css' => '7ac3cabc',
     'differential-inline-comment-editor' => 'b3412377',
     'differential-results-table-css' => '181aa9d9',
-    'differential-revision-add-comment-css' => 'c478bcaa',
+    'differential-revision-add-comment-css' => 'c47f8c40',
-    'differential-revision-comment-css' => '64603753',
+    'differential-revision-comment-css' => '024dda6b',
     'differential-revision-history-css' => '0e8eb855',
     'differential-revision-list-css' => 'f3c47d33',
     'differential-table-of-contents-css' => '63f3ef4a',
@@ -772,7 +773,7 @@ return array(
     'phui-action-header-view-css' => '89c497e7',
     'phui-action-panel-css' => '3ee9afd5',
     'phui-box-css' => '7b3a2eed',
-    'phui-button-css' => '57eaddc9',
+    'phui-button-css' => '53f55a72',
     'phui-calendar-css' => '8675968e',
     'phui-calendar-day-css' => 'de035c8a',
     'phui-calendar-list-css' => 'c1d0ca59',
@@ -789,6 +790,7 @@ return array(
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',
     'phui-info-view-css' => 'c6f0aef8',
+    'phui-inline-comment-view-css' => '17e89126',
     'phui-list-view-css' => '2e25ebfb',
     'phui-object-box-css' => 'd68ce5dc',
     'phui-object-item-list-view-css' => '9db65899',
@@ -1921,6 +1923,9 @@ return array(
       'multirow-row-manager',
       'javelin-json',
     ),
+    'f36406b1' => array(
+      'phui-inline-comment-view-css',
+    ),
     'f36e01af' => array(
       'javelin-behavior',
       'javelin-behavior-device',

src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php

@@ -71,20 +71,14 @@ final class PHUIDiffInlineCommentDetailView
     return $this->objectOwnerPHID;
   }
 
-
-
   public function render() {
 
+    require_celerity_resource('phui-inline-comment-view-css');
     $inline = $this->inlineComment;
 
-    $start = $inline->getLineNumber();
+    $classes = array(
-    $length = $inline->getLineLength();
+      'differential-inline-comment',
-    if ($length) {
+    );
-      $end = $start + $length;
-      $line = 'Lines '.number_format($start).'-'.number_format($end);
-    } else {
-      $line = 'Line '.number_format($start);
-    }
 
     $metadata = array(
       'id' => $inline->getID(),
@@ -117,40 +111,54 @@ final class PHUIDiffInlineCommentDetailView
       $is_synthetic = true;
     }
 
-    $is_draft = false;
+    $draft_text = null;
-    if ($inline->isDraft() && !$is_synthetic) {
+    if (!$is_synthetic) {
-      $links[] = pht('Not Submitted Yet');
+      // This display is controlled by CSS
-      $is_draft = true;
+      $draft_text = id(new PHUITagView())
+        ->setType(PHUITagView::TYPE_SHADE)
+        ->setName(pht('Unsubmitted'))
+        ->setSlimShady(true)
+        ->setShade(PHUITagView::COLOR_RED)
+        ->addClass('mml inline-draft-text');
     }
 
-
+    // I think this is unused
-    // TODO: This stuff is nonfinal, just making it do something.
     if ($inline->getHasReplies()) {
-      $links[] = pht('Has Reply');
+      $classes[] = 'inline-comment-has-reply';
-      $classes[] = 'inline-has-reply';
     }
+    // I think this is unused
     if ($inline->getReplyToCommentPHID()) {
-      $links[] = pht('Is Reply');
+      $classes[] = 'inline-comment-is-reply';
+    }
+    // Might break?
+    if ($this->getCanMarkDone()) {
+      $classes[] = 'viewer-is-diff-author';
     }
 
+    $action_buttons = new PHUIButtonBarView();
+    $action_buttons->addClass('mml');
+    $nextprev = null;
     if (!$this->preview) {
-      $links[] = javelin_tag(
+      $nextprev = new PHUIButtonBarView();
-        'a',
+      $nextprev->addClass('mml');
-        array(
+      $up = id(new PHUIButtonView())
-          'href'  => '#',
+        ->setTag('a')
-          'mustcapture' => true,
+        ->setColor(PHUIButtonView::SIMPLE)
-          'sigil' => 'differential-inline-prev',
+        ->setTooltip(pht('Previous'))
-        ),
+        ->setIconFont('fa-chevron-up')
-        pht('Previous'));
+        ->addSigil('differential-inline-prev')
+        ->setMustCapture(true);
 
-      $links[] = javelin_tag(
+      $down = id(new PHUIButtonView())
-        'a',
+        ->setTag('a')
-        array(
+        ->setColor(PHUIButtonView::SIMPLE)
-          'href'  => '#',
+        ->setTooltip(pht('Next'))
-          'mustcapture' => true,
+        ->setIconFont('fa-chevron-down')
-          'sigil' => 'differential-inline-next',
+        ->addSigil('differential-inline-next')
-        ),
+        ->setMustCapture(true);
-        pht('Next'));
+
+      $nextprev->addButton($up);
+      $nextprev->addButton($down);
 
       if ($this->allowReply) {
 
@@ -161,14 +169,14 @@ final class PHUIDiffInlineCommentDetailView
           // file/line information, and synthetic comments don't have an inline
           // comment ID.
 
-          $links[] = javelin_tag(
+          $reply_button = id(new PHUIButtonView())
-            'a',
+            ->setTag('a')
-            array(
+            ->setColor(PHUIButtonView::SIMPLE)
-              'href'        => '#',
+            ->setIconFont('fa-reply')
-              'mustcapture' => true,
+            ->setTooltip(pht('Reply'))
-              'sigil'       => 'differential-inline-reply',
+            ->addSigil('differential-inline-reply')
-            ),
+            ->setMustCapture(true);
-            pht('Reply'));
+          $action_buttons->addButton($reply_button);
         }
 
       }
@@ -177,42 +185,48 @@ final class PHUIDiffInlineCommentDetailView
     $anchor_name = 'inline-'.$inline->getID();
 
     if ($this->editable && !$this->preview) {
-      $links[] = javelin_tag(
+      $edit_button = id(new PHUIButtonView())
-        'a',
+        ->setTag('a')
-        array(
+        ->setColor(PHUIButtonView::SIMPLE)
-          'href'        => '#',
+        ->setIconFont('fa-pencil')
-          'mustcapture' => true,
+        ->setTooltip(pht('Edit'))
-          'sigil'       => 'differential-inline-edit',
+        ->addSigil('differential-inline-edit')
-        ),
+        ->setMustCapture(true);
-        pht('Edit'));
+      $action_buttons->addButton($edit_button);
-      $links[] = javelin_tag(
+
-        'a',
+      $delete_button = id(new PHUIButtonView())
-        array(
+        ->setTag('a')
-          'href'        => '#',
+        ->setColor(PHUIButtonView::SIMPLE)
-          'mustcapture' => true,
+        ->setIconFont('fa-trash-o')
-          'sigil'       => 'differential-inline-delete',
+        ->setTooltip(pht('Delete'))
-        ),
+        ->addSigil('differential-inline-delete')
-        pht('Delete'));
+        ->setMustCapture(true);
+      $action_buttons->addButton($delete_button);
+
     } else if ($this->preview) {
       $links[] = javelin_tag(
         'a',
         array(
+          'class' => 'button simple',
           'meta'        => array(
             'anchor' => $anchor_name,
           ),
           'sigil'       => 'differential-inline-preview-jump',
         ),
         pht('Not Visible'));
-      $links[] = javelin_tag(
+
-        'a',
+      $delete_button = id(new PHUIButtonView())
-        array(
+        ->setTag('a')
-          'href'        => '#',
+        ->setColor(PHUIButtonView::SIMPLE)
-          'mustcapture' => true,
+        ->setTooltip(pht('Delete'))
-          'sigil'       => 'differential-inline-delete',
+        ->setIconFont('fa-trash-o')
-        ),
+        ->addSigil('differential-inline-delete')
-        pht('Delete'));
+        ->setMustCapture(true);
+      $action_buttons->addButton($delete_button);
     }
 
+    $done_button = null;
+
     if (!$is_synthetic) {
       $draft_state = false;
       switch ($inline->getFixedState()) {
@@ -241,7 +255,7 @@ final class PHUIDiffInlineCommentDetailView
         $classes[] = 'inline-state-is-draft';
       }
 
-      $links[] = javelin_tag(
+      $done_input = javelin_tag(
         'input',
         array(
           'type' => 'checkbox',
@@ -250,15 +264,16 @@ final class PHUIDiffInlineCommentDetailView
           'class' => 'differential-inline-done',
           'sigil' => 'differential-inline-done',
         ));
-    }
+      $done_button = phutil_tag(
-
+        'label',
-    if ($links) {
+        array(
-      $links = phutil_tag(
+          'class' => 'differential-inline-done-label '.
-        'span',
+                      ($this->getCanMarkDone() ? null : 'done-is-disabled'),
-        array('class' => 'differential-inline-comment-links'),
+        ),
-        phutil_implode_html(" \xC2\xB7 ", $links));
+        array(
-    } else {
+          $done_input,
-      $links = null;
+          pht('Done'),
+        ));
     }
 
     $content = $this->markupEngine->getOutput(
@@ -278,7 +293,7 @@ final class PHUIDiffInlineCommentDetailView
         '');
     }
 
-    if ($is_draft) {
+    if ($inline->isDraft() && !$is_synthetic) {
       $classes[] = 'differential-inline-comment-unsaved-draft';
     }
     if ($is_synthetic) {
@@ -286,16 +301,44 @@ final class PHUIDiffInlineCommentDetailView
     }
     $classes = implode(' ', $classes);
 
+    $author_owner = null;
     if ($is_synthetic) {
       $author = $inline->getSyntheticAuthor();
     } else {
       $author = $handles[$inline->getAuthorPHID()]->getName();
+      if ($inline->getAuthorPHID() == $this->objectOwnerPHID) {
+        $author_owner = id(new PHUITagView())
+          ->setType(PHUITagView::TYPE_SHADE)
+          ->setName(pht('Author'))
+          ->setSlimShady(true)
+          ->setShade(PHUITagView::COLOR_YELLOW)
+          ->addClass('mml');
+      }
     }
 
-    $line = phutil_tag(
+    $group_left = phutil_tag(
-      'span',
+      'div',
-      array('class' => 'differential-inline-comment-line'),
+      array(
-      $line);
+        'class' => 'inline-head-left',
+      ),
+      array(
+        $author,
+        $author_owner,
+        $draft_text,
+      ));
+
+    $group_right = phutil_tag(
+      'div',
+      array(
+        'class' => 'inline-head-right',
+      ),
+      array(
+        $anchor,
+        $links,
+        $nextprev,
+        $action_buttons,
+        $done_button,
+      ));
 
     $markup = javelin_tag(
       'div',
@@ -305,13 +348,9 @@ final class PHUIDiffInlineCommentDetailView
         'meta'  => $metadata,
       ),
       array(
-        phutil_tag_div('differential-inline-comment-head', array(
+        phutil_tag_div('differential-inline-comment-head grouped', array(
-          $anchor,
+          $group_left,
-          $links,
+          $group_right,
-          ' ',
-          $line,
-          ' ',
-          $author,
         )),
         phutil_tag_div(
           'differential-inline-comment-content',

src/infrastructure/diff/view/PHUIDiffInlineCommentEditView.php

@@ -122,7 +122,7 @@ final class PHUIDiffInlineCommentEditView
   private function renderBody() {
     $buttons = array();
 
-    $buttons[] = phutil_tag('button', array(), pht('Ready'));
+    $buttons[] = phutil_tag('button', array(), pht('Save Draft'));
     $buttons[] = javelin_tag(
       'button',
       array(
@@ -148,11 +148,10 @@ final class PHUIDiffInlineCommentEditView
     $edit = phutil_tag(
       'div',
       array(
-        'class' => 'differential-inline-comment-edit-buttons',
+        'class' => 'differential-inline-comment-edit-buttons grouped',
       ),
       array(
         $buttons,
-        phutil_tag('div', array('style' => 'clear: both'), ''),
       ));
 
     return javelin_tag(

src/view/phui/PHUIButtonBarView.php

@@ -14,7 +14,7 @@ final class PHUIButtonBarView extends AphrontTagView {
   }
 
   protected function getTagName() {
-    return 'div';
+    return 'span';
   }
 
   protected function getTagContent() {

webroot/rsrc/css/application/differential/add-comment.css

@@ -3,6 +3,15 @@
  */
 
 #inline-comment-preview {
-  margin-left: 60px;
+  margin-left: 62px;
-  width: 550px;
+  width: 640px;
+}
+
+#inline-comment-preview .differential-inline-comment {
+  margin: 12px 0;
+}
+
+#inline-comment-preview
+  .differential-inline-comment + .differential-inline-comment {
+  margin: 0 0 12px 0;
 }

webroot/rsrc/css/application/differential/changeset-view.css

@@ -1,5 +1,6 @@
 /**
  * @provides differential-changeset-view-css
+ * @requires phui-inline-comment-view-css
  */
 
 .differential-changeset {
@@ -63,6 +64,10 @@
   padding: 0 4px 1px;
 }
 
+.device .differential-diff .inline td {
+  padding: 4px;
+}
+
 .differential-diff td .zwsp {
   position: absolute;
   width: 0;
@@ -86,7 +91,7 @@
 }
 
 .differential-diff th.selected {
-  background: {$hovergrey};
+  background-color: {$sh-yellowbackground};
 }
 
 .differential-changeset-immutable .differential-diff th {
@@ -244,9 +249,9 @@ td.cov-I {
 }
 
 .differential-meta-notice {
-  border-top: 1px solid {$yellow};
+  border-top: 1px solid {$sh-lightyellowborder};
-  border-bottom: 1px solid {$yellow};
+  border-bottom: 1px solid {$sh-lightyellowborder};
-  background-color: {$lightyellow};
+  background-color: {$sh-yellowbackground};
   padding: 12px;
 }
 
@@ -266,90 +271,48 @@ td.cov-I {
 }
 
 .differential-reticle {
-  background: {$lightyellow};
+  background-color: {$sh-yellowbackground};
-  border: 1px solid {$yellow};
+  border: 1px solid {$sh-yellowborder};
   position: absolute;
   opacity: 0.5;
-  top: 0px;
+  top: 0;
-  left: 0px;
+  left: 0;
   box-sizing: border-box;
 }
 
-.differential-inline-comment,
+.differential-diff .inline td {
-.differential-inline-comment-edit {
+  padding: 8px 12px;
-  background:         #ffffee;
-  border:             1px solid #ccccaa;
-  font:               {$basefont};
-  font-size:          12px;
-  margin:             6px 0px;
-  padding:            8px 10px;
-  width:              100%;
-  -moz-box-sizing:    border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing:         border-box;
-  overflow:           hidden;
-  white-space:        normal;
 }
 
-.differential-inline-comment-edit .aphront-form-control-textarea {
+.differential-loading {
-  padding: 0;
+  border-top: 1px solid {$yellow};
+  border-bottom: 1px solid {$yellow};
+  background-color: {$lightyellow};
+  padding: 12px;
+  text-align: center;
 }
 
-.differential-inline-comment-unsaved-draft {
+.differential-collapse-undo {
-  background: #f1f1f1;
+  color: {$darkbluetext};
-  border: 1px dashed {$greytext};
+  padding: 12px;
-}
-
-.differential-inline-comment-head {
-  font-weight:  bold;
-  color:        #333333;
-  border-bottom:  1px solid rgba(204,204,170,0.37);
-  padding-bottom: 4px;
-  margin-bottom:  8px;
-}
-
-.differential-inline-comment-unsaved-draft .differential-inline-comment-head {
-  border-bottom: 1px solid #aaaaaa;
-}
-
-.differential-inline-comment-synthetic {
-  background: {$lightblue};
   border: 1px solid {$blue};
+  text-align: center;
+  background-color: {$lightblue};
 }
 
-.differential-inline-comment-synthetic .differential-inline-comment-head {
+.differential-collapse-undo a {
-  border-bottom: 1px solid {$blueborder};
+  font-weight: bold;
 }
 
-
+.differential-file-icon-header .phui-icon-view {
-.differential-inline-comment-links,
+  display: inline-block;
-.differential-inline-comment-line {
+  margin: 0 6px 2px 0;
-  font-weight:  normal;
+  vertical-align: middle;
-  font-style:   italic;
+  font-size: 14px;
-  color:        {$greytext};
-  float:        right;
-  white-space:  nowrap;
 }
 
-.differential-inline-comment-links {
+.device-phone .differential-file-icon-header .phui-icon-view {
-  margin-left:  8px;
+  display: none;
-  font-style:   normal;
-}
-
-input.differential-inline-done[type="checkbox"] {
-  margin: 0;
-  display: inline;
-  cursor: pointer;
-}
-
-input.differential-inline-done[disabled="disabled"] {
-  cursor: auto;
-}
-
-
-.differential-inline-comment-edit-body .aphront-form-input {
-  margin: 0;
-  width: 100%;
 }
 
 .differential-changeset-buttons {
@@ -387,55 +350,6 @@ input.differential-inline-done[disabled="disabled"] {
   width: 50%;
 }
 
-.differential-inline-undo {
-  padding: 4px;
-  text-align: center;
-  background: {$lightyellow};
-  border: 1px solid {$yellow};
-  margin: 3px 0 1px;
-  color: {$darkgreytext};
-  font: {$basefont};
-  font-size: 12px;
-}
-
-.differential-inline-undo a {
-  font-weight: bold;
-}
-
-.differential-inline-comment-edit {
-  padding: 10px;
-}
-
-.differential-inline-comment-edit-buttons {
-  padding: 4px 0 0 0;
-}
-
-.differential-inline-comment-edit-buttons button {
-  float: right;
-  margin-left: 6px;
-}
-
-.differential-inline-comment-edit-title {
-  font-weight:    bold;
-  color:          #333333;
-  padding-bottom: 2px;
-  margin-bottom:  6px;
-}
-
-/*  When the inline editor is active, disable all the other inline comment links
-    on the page ("Edit", "Reply", "Delete", etc). The goal here is to prevent
-    issues where you open up multiple editors and run into problems with
-    assumptions about modalness. They are disabled explicitly by the JS, but
-    render them in a disabled state as well.
-*/
-.inline-editor-active .differential-inline-comment-links a,
-.inline-editor-active .differential-inline-comment-links a:hover,
-.inline-editor-active .differential-inline-comment-links a:active {
-  color: {$lightgreytext};
-  cursor: normal;
-  text-decoration: none;
-}
-
 tr.differential-inline-hidden {
   display: none;
 }
@@ -443,57 +357,3 @@ tr.differential-inline-hidden {
 tr.differential-inline-loading {
   opacity: 0.5;
 }
-
-
-/*  In the document, the anchor is positioned inside the inline comment, but
-    this makes the browser jump into the comment so the top isn't visible.
-    Instead, artificially position it a bit above the comment so we'll jump a
-    bit before the comment. This allows us to see the entire comment (and
-    generally the commented-on lines, at least in the case of one or two-line
-    comments) after the jump.
-*/
-.differential-inline-comment-anchor {
-  position: absolute;
-  display: block;
-  margin-top: -72px;
-}
-
-.differential-loading {
-  border-top: 1px solid {$yellow};
-  border-bottom: 1px solid {$yellow};
-  background-color: {$lightyellow};
-  padding: 12px;
-  text-align: center;
-}
-
-.differential-collapse-undo {
-  background: #FFE;
-  color: #000;
-  padding: 1em 0em;
-  border: 1px solid #CCA;
-  text-align: center;
-  background-color: #FFE;
-}
-
-.differential-collapse-undo a {
-  font-weight: bold;
-}
-
-.differential-file-icon-header .phui-icon-view {
-  display: inline-block;
-  margin: 0 6px 2px 0;
-  vertical-align: middle;
-  font-size: 14px;
-}
-
-.device-phone .differential-file-icon-header .phui-icon-view {
-  display: none;
-}
-
-.inline-is-done {
-  opacity: 0.75;
-}
-
-.inline-state-is-draft input.differential-inline-done[type="checkbox"] {
-  /* TODO: Possibly style this. */
-}

webroot/rsrc/css/application/differential/phui-inline-comment.css

@@ -0,0 +1,381 @@
+/**
+ * @provides phui-inline-comment-view-css
+ */
+
+.differential-comment-list .anchor-target {
+  background-color: #ffffdd;
+  border-color: #ffff00;
+}
+
+/*  In the document, the anchor is positioned inside the inline comment, but
+    this makes the browser jump into the comment so the top isn't visible.
+    Instead, artificially position it a bit above the comment so we'll jump a
+    bit before the comment. This allows us to see the entire comment (and
+    generally the commented-on lines, at least in the case of one or two-line
+    comments) after the jump.
+*/
+.differential-inline-comment-anchor {
+  position: absolute;
+  display: block;
+  margin-top: -72px;
+}
+
+.differential-inline-comment-content {
+  overflow: auto;
+}
+
+.differential-inline-comment,
+.differential-inline-comment-edit {
+  background: #fff;
+  border: 1px solid {$sh-yellowborder};
+  font: {$basefont};
+  margin: 0;
+  width: 100%;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: normal;
+  border-radius: 3px;
+}
+
+.differential-inline-comment-unsaved-draft {
+  border: 1px solid {$lightgreyborder};
+}
+
+.differential-inline-comment-head {
+  font-weight:  bold;
+  color: {$darkbluetext};
+  border-bottom: 1px solid {$sh-lightyellowborder};
+  padding: 4px 5px 2px 12px;
+  background-color: {$sh-yellowbackground};
+}
+
+.device-desktop .differential-inline-comment .button.simple:hover
+  .phui-icon-view,
+.device-desktop .differential-inline-comment .button.simple:hover {
+  color: {$sky};
+}
+
+.differential-inline-comment-content {
+  padding: 12px;
+}
+
+.differential-inline-comment-unsaved-draft .differential-inline-comment-head {
+  border-bottom: 1px solid {$lightgreyborder};
+  background-color: {$lightgreybackground};
+}
+
+/* Tighten up spacing on replies */
+.differential-inline-comment.inline-comment-is-reply {
+  margin-top: -4px;
+}
+
+.differential-inline-comment .inline-head-right {
+  float: right;
+}
+
+.differential-inline-comment .inline-head-right .button {
+  vertical-align: top;
+}
+
+.differential-inline-comment .inline-head-left {
+  float: left;
+  padding: 5px 0;
+}
+
+.device-phone .differential-inline-comment .inline-head-left {
+  float: none;
+}
+
+.device-phone .differential-inline-comment .inline-head-right {
+  float: none;
+}
+
+.device-phone .differential-inline-comment .inline-head-right .mml {
+  margin: 0 4px 0 0;
+}
+
+.device-phone .differential-inline-comment .differential-inline-comment-head {
+  padding: 0px 0px 4px 8px;
+}
+
+
+/* - Sythetic Comment ---------------------------------------------------------
+
+  Comments left by our robot overlords.
+
+*/
+
+.differential-inline-comment.differential-inline-comment-synthetic {
+  border: 1px solid {$blue};
+}
+
+.differential-inline-comment.differential-inline-comment-synthetic
+  .differential-inline-comment-head {
+    border-bottom: 1px solid {$blueborder};
+    background-color: {$lightblue};
+}
+
+.differential-inline-comment.differential-inline-comment-synthetic
+  .button.simple {
+  border-color: {$blue};
+}
+
+.differential-inline-comment.differential-inline-comment-synthetic
+  .button.simple .phui-icon-view {
+  color: {$blue};
+}
+
+.differential-inline-comment.differential-inline-comment-synthetic
+  .differential-inline-comment-head {
+    padding-bottom: 4px;
+}
+
+
+/* - New/Edit Inline Comment --------------------------------------------------
+
+  Styles for when you are creating or editing an inline comment.
+
+*/
+
+.differential-inline-comment-edit-body .aphront-form-input {
+  margin: 0;
+  width: 100%;
+}
+
+.differential-inline-comment-edit {
+  padding: 8px;
+}
+
+.differential-inline-comment-edit-buttons {
+  padding: 8px 0 0 0;
+}
+
+.differential-inline-comment-edit-buttons button {
+  float: right;
+  margin-left: 6px;
+}
+
+.differential-inline-comment-edit-title {
+  font-weight: bold;
+  color: {$darkbluetext};
+  padding: 4px 0 12px;
+  font-size: 14px;
+}
+
+.differential-inline-comment-unsaved-draft .phui-button-bar .button {
+  border-color: {$lightgreyborder};
+}
+
+.differential-inline-comment-unsaved-draft .phui-button-bar .phui-icon-view {
+  color: {$lightgreytext};
+}
+
+.differential-inline-comment-edit {
+  background-color: {$lightgreybackground};
+  border: 1px solid {$lightgreyborder};
+}
+
+.differential-inline-comment-edit .remarkup-assist-textarea {
+  border-left-color: {$lightgreyborder};
+  border-right-color: {$lightgreyborder};
+  border-bottom-color: {$greyborder};
+}
+
+.differential-inline-comment-edit .remarkup-assist-bar {
+  border-left-color: {$lightgreyborder};
+  border-right-color: {$lightgreyborder};
+  border-top-color: {$lightgreyborder};
+}
+
+.differential-inline-comment-edit .aphront-form-control-textarea {
+  padding: 0;
+}
+
+
+/* - Action Buttons -----------------------------------------------------------
+
+  Reply, Edit, Delete, View, Button Bars...
+
+*/
+
+.differential-inline-comment .differential-inline-done-label,
+.differential-inline-comment .button.simple {
+  border-color: {$sh-yellowborder};
+  color: {$sh-yellowicon};
+}
+
+.differential-inline-comment .button.simple .phui-icon-view {
+  color: {$sh-yellowicon};
+}
+
+.differential-inline-comment.differential-inline-comment-unsaved-draft
+  .differential-inline-done-label,
+.differential-inline-comment.differential-inline-comment-unsaved-draft
+  .button.simple {
+  border-color: {$lightgreyborder};
+  color: {$lightgreytext};
+}
+
+.differential-inline-comment.differential-inline-comment-unsaved-draft
+  .button.simple .phui-icon-view {
+  color: {$lightgreytext};
+}
+
+.device-desktop .differential-inline-comment-unsaved-draft
+  a.button.simple:hover {
+    border-color: {$lightgreyborder};
+}
+
+/* - Done Button --------------------------------------------------------------
+
+  Default colors, hovers, checked styles for the Done Button.
+
+*/
+
+.differential-inline-done-label {
+  border: 1px solid {$sh-yellowborder};
+  border-radius: 3px;
+  display: inline-block;
+  overflow: hidden;
+  margin-left: 8px;
+  padding: 3px 8px 4px;
+  cursor: pointer;
+}
+
+.differential-inline-done-label .differential-inline-done {
+  margin: 0 6px 0 0;
+  display: inline;
+  cursor: pointer;
+}
+
+input.differential-inline-done[disabled="disabled"] {
+  cursor: auto;
+}
+
+.device-desktop .differential-inline-comment.inline-is-done
+  .differential-inline-done-label:hover,
+.device-desktop .differential-inline-comment
+  .differential-inline-done-label:hover {
+    background-color: #fff;
+    color: {$sky};
+    border-color: {$lightblueborder};
+}
+
+.differential-inline-comment .differential-inline-comment-head
+  .differential-inline-done-label.done-is-disabled {
+  color: {$sh-yellowtext};
+  border-color: {$sh-yellowborder};
+  opacity: .5;
+}
+
+.differential-inline-comment.differential-inline-comment-unsaved-draft
+  .differential-inline-done-label.done-is-disabled {
+  color: {$lightgreytext};
+  border-color: {$lightgreyborder};
+  opacity: .5;
+}
+
+.device-desktop
+  .differential-inline-comment.differential-inline-comment-unsaved-draft
+  .differential-inline-done-label.done-is-disabled:hover {
+    background-color: transparent;
+    cursor: auto;
+}
+
+.differential-inline-comment
+  .differential-inline-done-label.done-is-disabled {
+    border-color: {$sh-lightyellowborder};
+    color: {$sh-yellowtext};
+}
+
+.device-desktop .differential-inline-comment
+  .differential-inline-done-label.done-is-disabled:hover {
+    background-color: transparent;
+    cursor: auto;
+}
+
+.differential-inline-comment.inline-is-done
+  .differential-inline-done-label {
+    background-color: #fff;
+    border-color: {$lightblueborder};
+    color: {$sky} !important;
+    opacity: 1;
+}
+
+.device-desktop .differential-inline-comment.inline-is-done
+  .differential-inline-done-label:hover {
+    background-color: #fff;
+    color: {$sky};
+}
+
+
+/* - Inline Is Done -----------------------------------------------------------
+
+  Is Done for Diff Author = grey, for Diff Viewer = yellow.
+
+*/
+
+.differential-inline-comment.inline-is-done {
+  border-color: {$lightgreyborder};
+}
+
+.differential-inline-comment.inline-is-done
+   .differential-inline-comment-head {
+    background-color: {$lightgreybackground};
+    border-bottom-color: {$lightgreyborder};
+}
+
+.differential-inline-comment.inline-is-done .differential-inline-comment-head
+  .button.simple,
+.differential-inline-comment.inline-is-done .differential-inline-comment-head
+  .differential-inline-done-label {
+    border-color: {$lightgreyborder};
+    color: {$lightgreytext};
+}
+
+.differential-inline-comment.inline-is-done
+  .button.simple .phui-icon-view {
+    color: {$lightgreytext};
+}
+
+
+
+/* - Unsaved Draft ------------------------------------------------------------
+
+  The Unsubmitted state of the comment / done checkbox styles.
+
+*/
+
+.differential-inline-comment .inline-draft-text {
+  display: none;
+}
+
+.differential-inline-comment.differential-inline-comment-unsaved-draft
+  .inline-draft-text {
+    display: inline-block;
+}
+
+
+/* - Undo ---------------------------------------------------------------------
+
+  A wild undo box appears!
+
+*/
+
+.differential-inline-undo {
+  padding: 8px;
+  text-align: center;
+  background: {$sh-yellowbackground};
+  border: 1px solid {$sh-yellowborder};
+  margin: 4px 0;
+  color: {$darkgreytext};
+  font: {$basefont};
+  font-size: 13px;
+  border-radius: 3px;
+}
+
+.differential-inline-undo a {
+  font-weight: bold;
+}

webroot/rsrc/css/application/differential/revision-comment.css

@@ -51,12 +51,3 @@
 .differential-haunt-mode-1 {
   padding-bottom: 250px;
 }
-
-.differential-comment-list .anchor-target {
-  background-color: #ffffdd;
-  border-color: #ffff00;
-}
-
-.differential-inline-comment-content {
-  overflow: auto;
-}

webroot/rsrc/css/phui/phui-button.css

@@ -132,6 +132,11 @@ button.simple:hover {
   background-image: none;
   border-bottom-color: {$darkblueborder};
   box-shadow: none;
+  text-decoration: none;
+}
+
+a.button.simple .phui-icon-view {
+  border: none;
 }
 
 a.button.simple.phuix-dropdown-open {
@@ -299,7 +304,7 @@ a.toggle-fixed {
 }
 
 .phui-button-bar .button .phui-icon-view {
-  left: 12px;
+  left: 9px;
 }
 
 .button.has-icon .phui-button-text {
@@ -332,7 +337,7 @@ a.toggle-fixed {
 .phui-button-bar a.button.has-icon {
   display: inline-block;
   height: 16px;
-  width: 12px;
+  width: 6px;
 }
 
 .phui-button-bar .phui-button-bar-first {