PHUITimelineView

Summary:
Updates PhabricatorTimeline to PHUITimeline. Uses standard colors and spacing, softens up the actors, and reduces visual spacing of action-only events.

- Also updated some 2x sprite images.

Test Plan: Tested Tasks Paste and Pholio in my sandbox.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, epriestley, aran

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => '71e0a12a',
+    'core.pkg.css' => '00031c1d',
     'core.pkg.js' => 'c7854cc5',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => '5a65a762',
@@ -116,7 +116,7 @@ return array(
     'rsrc/css/core/core.css' => 'da26ddb2',
     'rsrc/css/core/remarkup.css' => 'ca7f2265',
     'rsrc/css/core/syntax.css' => '3c18c1cb',
-    'rsrc/css/core/z-index.css' => '1bbbd4f1',
+    'rsrc/css/core/z-index.css' => '0fd29d49',
     'rsrc/css/diviner/diviner-shared.css' => 'be90f718',
     'rsrc/css/layout/phabricator-action-header-view.css' => 'cc654b91',
     'rsrc/css/layout/phabricator-action-list-view.css' => '81383e25',
@@ -125,7 +125,6 @@ return array(
     'rsrc/css/layout/phabricator-hovercard-view.css' => '67c12b16',
     'rsrc/css/layout/phabricator-side-menu-view.css' => '503699d0',
     'rsrc/css/layout/phabricator-source-code-view.css' => '62a99814',
-    'rsrc/css/layout/phabricator-timeline-view.css' => 'f4f846c4',
     'rsrc/css/phui/phui-box.css' => '6c21bd6a',
     'rsrc/css/phui/phui-button.css' => '8784a966',
     'rsrc/css/phui/phui-document.css' => '143b2ac8',
@@ -145,6 +144,7 @@ return array(
     'rsrc/css/phui/phui-status.css' => '2f562399',
     'rsrc/css/phui/phui-tag-view.css' => '295d81c4',
     'rsrc/css/phui/phui-text.css' => '23e9b4b7',
+    'rsrc/css/phui/phui-timeline-view.css' => '84766e6b',
     'rsrc/css/phui/phui-workboard-view.css' => 'bf70dd2e',
     'rsrc/css/phui/phui-workpanel-view.css' => '6f8527f6',
     'rsrc/css/sprite-actions.css' => '4557baf8',
@@ -155,7 +155,7 @@ return array(
     'rsrc/css/sprite-conpherence.css' => '084b1f13',
     'rsrc/css/sprite-docs.css' => '7ea4927e',
     'rsrc/css/sprite-gradient.css' => 'a10def53',
-    'rsrc/css/sprite-icons.css' => 'ce73ef3e',
+    'rsrc/css/sprite-icons.css' => 'a92a018c',
     'rsrc/css/sprite-login.css' => 'fa00ebdc',
     'rsrc/css/sprite-main-header.css' => 'ba949d0d',
     'rsrc/css/sprite-menu.css' => '9db4da0b',
@@ -313,8 +313,8 @@ return array(
     'rsrc/image/sprite-docs-X2.png' => '520858fa',
     'rsrc/image/sprite-docs.png' => '4636297f',
     'rsrc/image/sprite-gradient.png' => '4ece0b62',
-    'rsrc/image/sprite-icons-X2.png' => '2e9bb665',
+    'rsrc/image/sprite-icons-X2.png' => '4072ceaf',
-    'rsrc/image/sprite-icons.png' => 'edbe6b0d',
+    'rsrc/image/sprite-icons.png' => '19d9974a',
     'rsrc/image/sprite-login-X2.png' => 'd2132242',
     'rsrc/image/sprite-login.png' => '7f878f1d',
     'rsrc/image/sprite-main-header.png' => 'bca643fc',
@@ -714,7 +714,6 @@ return array(
     'phabricator-source-code-view-css' => '62a99814',
     'phabricator-standard-page-view' => '517cdfb1',
     'phabricator-textareautils' => 'b3ec3cfc',
-    'phabricator-timeline-view-css' => 'f4f846c4',
     'phabricator-tooltip' => '0a81ea29',
     'phabricator-transaction-view-css' => 'ce491938',
     'phabricator-ui-example-css' => '4741b891',
@@ -728,7 +727,7 @@ return array(
     'phabricator-uiexample-reactor-select' => '189e4fe3',
     'phabricator-uiexample-reactor-sendclass' => 'bf97561d',
     'phabricator-uiexample-reactor-sendproperties' => '551add57',
-    'phabricator-zindex-css' => '1bbbd4f1',
+    'phabricator-zindex-css' => '0fd29d49',
     'phame-css' => '450826e1',
     'pholio-css' => 'd23ace50',
     'pholio-edit-css' => 'b9e59b6d',
@@ -756,6 +755,7 @@ return array(
     'phui-status-list-view-css' => '2f562399',
     'phui-tag-view-css' => '295d81c4',
     'phui-text-css' => '23e9b4b7',
+    'phui-timeline-view-css' => '84766e6b',
     'phui-workboard-view-css' => 'bf70dd2e',
     'phui-workpanel-view-css' => '6f8527f6',
     'policy-css' => '957ea14c',
@@ -785,7 +785,7 @@ return array(
     'sprite-conpherence-css' => '084b1f13',
     'sprite-docs-css' => '7ea4927e',
     'sprite-gradient-css' => 'a10def53',
-    'sprite-icons-css' => 'ce73ef3e',
+    'sprite-icons-css' => 'a92a018c',
     'sprite-login-css' => 'fa00ebdc',
     'sprite-main-header-css' => 'ba949d0d',
     'sprite-menu-css' => '9db4da0b',

resources/sprite/manifest/icons.json

@@ -109,17 +109,17 @@
     "icons-check"                         : {
       "name" : "icons-check",
       "rule" : ".icons-check",
-      "hash" : "b03d6fa96c04b167c63caee7044458c1"
+      "hash" : "7701c38eecdd9773b84323a617d33575"
     },
     "icons-check-grey"                    : {
       "name" : "icons-check-grey",
       "rule" : ".icons-check-grey",
-      "hash" : "78c47d2a98af61cd3cf7cad4135a7a65"
+      "hash" : "f2c970a7f729f56277eadb1ab3f140da"
     },
     "icons-check-white"                   : {
       "name" : "icons-check-white",
       "rule" : ".icons-check-white, .device-desktop .phabricator-action-view:hover .icons-check, .device-desktop .phui-list-sidenav .phui-list-item-href:hover .icons-check",
-      "hash" : "1f8c0e0638b6366a5b35244768098749"
+      "hash" : "ed946142aa107d1a21d72519172f6cad"
     },
     "icons-comment"                       : {
       "name" : "icons-comment",
@@ -154,17 +154,17 @@
     "icons-create"                        : {
       "name" : "icons-create",
       "rule" : ".icons-create",
-      "hash" : "d5263d054d6a0b4e1507dcb4722744ad"
+      "hash" : "6ba3bec5c18c5de1f1795ff63ac880f6"
     },
     "icons-create-grey"                   : {
       "name" : "icons-create-grey",
       "rule" : ".icons-create-grey",
-      "hash" : "701c5f704f426728a6e9a21d93ec480c"
+      "hash" : "f81118913df8d426c8a2889d909d0168"
     },
     "icons-create-white"                  : {
       "name" : "icons-create-white",
       "rule" : ".icons-create-white, .device-desktop .phabricator-action-view:hover .icons-create, .device-desktop .phui-list-sidenav .phui-list-item-href:hover .icons-create",
-      "hash" : "3b2d0928b2c867a65b95d12177ad8705"
+      "hash" : "fbb29390e3f8bd5a6e0d809463aeeb40"
     },
     "icons-data"                          : {
       "name" : "icons-data",

src/__phutil_library_map__.php

@@ -1020,6 +1020,9 @@ phutil_register_library_map(array(
     'PHUITagView' => 'view/phui/PHUITagView.php',
     'PHUITextExample' => 'applications/uiexample/examples/PHUITextExample.php',
     'PHUITextView' => 'view/phui/PHUITextView.php',
+    'PHUITimelineEventView' => 'view/phui/PHUITimelineEventView.php',
+    'PHUITimelineExample' => 'applications/uiexample/examples/PHUITimelineExample.php',
+    'PHUITimelineView' => 'view/phui/PHUITimelineView.php',
     'PHUIWorkboardExample' => 'applications/uiexample/examples/PHUIWorkboardExample.php',
     'PHUIWorkboardView' => 'view/phui/PHUIWorkboardView.php',
     'PHUIWorkpanelView' => 'view/phui/PHUIWorkpanelView.php',
@@ -2092,9 +2095,6 @@ phutil_register_library_map(array(
     'PhabricatorTime' => 'infrastructure/time/PhabricatorTime.php',
     'PhabricatorTimeGuard' => 'infrastructure/time/PhabricatorTimeGuard.php',
     'PhabricatorTimeTestCase' => 'infrastructure/time/__tests__/PhabricatorTimeTestCase.php',
-    'PhabricatorTimelineEventView' => 'view/layout/PhabricatorTimelineEventView.php',
-    'PhabricatorTimelineExample' => 'applications/uiexample/examples/PhabricatorTimelineExample.php',
-    'PhabricatorTimelineView' => 'view/layout/PhabricatorTimelineView.php',
     'PhabricatorToken' => 'applications/tokens/storage/PhabricatorToken.php',
     'PhabricatorTokenController' => 'applications/tokens/controller/PhabricatorTokenController.php',
     'PhabricatorTokenCount' => 'applications/tokens/storage/PhabricatorTokenCount.php',
@@ -3649,6 +3649,9 @@ phutil_register_library_map(array(
     'PHUITagView' => 'AphrontView',
     'PHUITextExample' => 'PhabricatorUIExample',
     'PHUITextView' => 'AphrontTagView',
+    'PHUITimelineEventView' => 'AphrontView',
+    'PHUITimelineExample' => 'PhabricatorUIExample',
+    'PHUITimelineView' => 'AphrontView',
     'PHUIWorkboardExample' => 'PhabricatorUIExample',
     'PHUIWorkboardView' => 'AphrontTagView',
     'PHUIWorkpanelView' => 'AphrontTagView',
@@ -4867,9 +4870,6 @@ phutil_register_library_map(array(
     'PhabricatorTestStorageEngine' => 'PhabricatorFileStorageEngine',
     'PhabricatorTestWorker' => 'PhabricatorWorker',
     'PhabricatorTimeTestCase' => 'PhabricatorTestCase',
-    'PhabricatorTimelineEventView' => 'AphrontView',
-    'PhabricatorTimelineExample' => 'PhabricatorUIExample',
-    'PhabricatorTimelineView' => 'AphrontView',
     'PhabricatorToken' =>
     array(
       0 => 'PhabricatorTokenDAO',

src/applications/transactions/response/PhabricatorApplicationTransactionResponse.php

@@ -78,7 +78,7 @@ final class PhabricatorApplicationTransactionResponse
 
     $content = array(
       'xactions' => $xactions,
-      'spacer'   => PhabricatorTimelineView::renderSpacer(),
+      'spacer'   => PHUITimelineView::renderSpacer(),
     );
 
     return $this->getProxy()->setContent($content);

src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php

@@ -181,7 +181,7 @@ class PhabricatorApplicationTransactionCommentView extends AphrontView {
 
   private function renderPreviewPanel() {
 
-    $preview = id(new PhabricatorTimelineView())
+    $preview = id(new PHUITimelineView())
       ->setID($this->getPreviewTimelineID());
 
     return phutil_tag(

src/applications/transactions/view/PhabricatorApplicationTransactionView.php

@@ -91,7 +91,7 @@ class PhabricatorApplicationTransactionView extends AphrontView {
       throw new Exception("Call setObjectPHID() before render()!");
     }
 
-    $view = new PhabricatorTimelineView();
+    $view = new PHUITimelineView();
     $events = $this->buildEvents();
     foreach ($events as $event) {
       $view->addEvent($event);
@@ -176,7 +176,7 @@ class PhabricatorApplicationTransactionView extends AphrontView {
       'div',
       array(
         'id'    => $content_id,
-        'class' => 'phabricator-timeline-change-details',
+        'class' => 'phui-timeline-change-details',
       ),
       $xaction->renderChangeDetails($this->getUser()));
 
@@ -293,7 +293,7 @@ class PhabricatorApplicationTransactionView extends AphrontView {
     $anchor) {
     $viewer = $this->getUser();
 
-    $event = id(new PhabricatorTimelineEventView())
+    $event = id(new PHUITimelineEventView())
       ->setUser($viewer)
       ->setTransactionPHID($xaction->getPHID())
       ->setUserHandle($xaction->getHandle($xaction->getAuthorPHID()))

src/applications/uiexample/examples/PHUITimelineExample.php

@@ -1,6 +1,6 @@
 <?php
 
-final class PhabricatorTimelineExample extends PhabricatorUIExample {
+final class PHUITimelineExample extends PhabricatorUIExample {
 
   public function getName() {
     return 'Timeline View';
@@ -8,7 +8,7 @@ final class PhabricatorTimelineExample extends PhabricatorUIExample {
 
   public function getDescription() {
     return hsprintf(
-      'Use <tt>PhabricatorTimelineView</tt> to comments and transactions.');
+      'Use <tt>PHUITimelineView</tt> to comments and transactions.');
   }
 
   public function renderExample() {
@@ -22,64 +22,64 @@ final class PhabricatorTimelineExample extends PhabricatorUIExample {
 
     $events = array();
 
-    $events[] = id(new PhabricatorTimelineEventView())
+    $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
       ->setTitle('A major event.')
       ->appendChild('This is a major timeline event.');
 
-    $events[] = id(new PhabricatorTimelineEventView())
+    $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
       ->setTitle('A minor event.');
 
-    $events[] = id(new PhabricatorTimelineEventView())
+    $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
       ->appendChild('A major event with no title.');
 
-    $events[] = id(new PhabricatorTimelineEventView())
+    $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
       ->setTitle('Another minor event.');
 
-    $events[] = id(new PhabricatorTimelineEventView())
+    $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle);
 
-    $events[] = id(new PhabricatorTimelineEventView())
+    $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
       ->setTitle('Major Red Event')
       ->setIcon('love')
       ->appendChild('This event is red!')
       ->setColor(PhabricatorTransactions::COLOR_RED);
 
-    $events[] = id(new PhabricatorTimelineEventView())
+    $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
       ->setTitle('Minor Red Event')
       ->setColor(PhabricatorTransactions::COLOR_RED);
 
-    $events[] = id(new PhabricatorTimelineEventView())
+    $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
       ->setTitle('Minor Not-Red Event');
 
-    $events[] = id(new PhabricatorTimelineEventView())
+    $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
       ->setTitle('Minor Red Event')
       ->setColor(PhabricatorTransactions::COLOR_RED);
 
-    $events[] = id(new PhabricatorTimelineEventView())
+    $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
       ->setTitle('Minor Not-Red Event');
 
-    $events[] = id(new PhabricatorTimelineEventView())
+    $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
       ->setTitle('Major Green Event')
       ->appendChild('This event is green!')
       ->setColor(PhabricatorTransactions::COLOR_GREEN);
 
-    $events[] = id(new PhabricatorTimelineEventView())
+    $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
       ->setTitle(str_repeat('Long Text Title ', 64))
       ->appendChild(str_repeat('Long Text Body ', 64))
       ->setColor(PhabricatorTransactions::COLOR_ORANGE);
 
-    $events[] = id(new PhabricatorTimelineEventView())
+    $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
       ->setTitle(str_repeat('LongTextEventNoSpaces', 1024))
       ->appendChild(str_repeat('LongTextNoSpaces', 1024))
@@ -98,13 +98,13 @@ final class PhabricatorTimelineExample extends PhabricatorUIExample {
       PhabricatorTransactions::COLOR_BLACK,
     );
 
-    $events[] = id(new PhabricatorTimelineEventView())
+    $events[] = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
       ->setTitle("Colorless")
       ->setIcon('lock');
 
     foreach ($colors as $color) {
-      $events[] = id(new PhabricatorTimelineEventView())
+      $events[] = id(new PHUITimelineEventView())
         ->setUserHandle($handle)
         ->setTitle("Color '{$color}'")
         ->setIcon('lock')
@@ -113,45 +113,45 @@ final class PhabricatorTimelineExample extends PhabricatorUIExample {
 
     $vhandle = $handle->renderLink();
 
-    $group_event = id(new PhabricatorTimelineEventView())
+    $group_event = id(new PHUITimelineEventView())
       ->setUserHandle($handle)
       ->setTitle(pht('%s went to the store.', $vhandle));
 
     $group_event->addEventToGroup(
-      id(new PhabricatorTimelineEventView())
+      id(new PHUITimelineEventView())
         ->setUserHandle($handle)
         ->setTitle(pht('%s bought an apple.', $vhandle))
         ->setColor('green')
         ->setIcon('check'));
 
     $group_event->addEventToGroup(
-      id(new PhabricatorTimelineEventView())
+      id(new PHUITimelineEventView())
         ->setUserHandle($handle)
         ->setTitle(pht('%s bought a banana.', $vhandle))
         ->setColor('yellow')
         ->setIcon('check'));
 
     $group_event->addEventToGroup(
-      id(new PhabricatorTimelineEventView())
+      id(new PHUITimelineEventView())
         ->setUserHandle($handle)
         ->setTitle(pht('%s bought a cherry.', $vhandle))
         ->setColor('red')
         ->setIcon('check'));
 
     $group_event->addEventToGroup(
-      id(new PhabricatorTimelineEventView())
+      id(new PHUITimelineEventView())
         ->setUserHandle($handle)
         ->setTitle(pht('%s paid for his goods.', $vhandle)));
 
     $group_event->addEventToGroup(
-      id(new PhabricatorTimelineEventView())
+      id(new PHUITimelineEventView())
         ->setUserHandle($handle)
         ->setTitle(pht('%s returned home.', $vhandle))
         ->setIcon('home')
         ->setColor('blue'));
 
     $group_event->addEventToGroup(
-      id(new PhabricatorTimelineEventView())
+      id(new PHUITimelineEventView())
         ->setUserHandle($handle)
         ->setTitle(pht('%s related on his adventures.', $vhandle))
         ->appendChild(
@@ -171,7 +171,7 @@ final class PhabricatorTimelineExample extends PhabricatorUIExample {
       }
     }
 
-    $timeline = id(new PhabricatorTimelineView());
+    $timeline = id(new PHUITimelineView());
     foreach ($events as $event) {
       $timeline->addEvent($event);
     }

src/view/phui/PHUITimelineEventView.php

@@ -1,6 +1,6 @@
 <?php
 
-final class PhabricatorTimelineEventView extends AphrontView {
+final class PHUITimelineEventView extends AphrontView {
 
   private $userHandle;
   private $title;
@@ -104,7 +104,7 @@ final class PhabricatorTimelineEventView extends AphrontView {
     return array_merge(array($this), $this->eventGroup);
   }
 
-  public function addEventToGroup(PhabricatorTimelineEventView $event) {
+  public function addEventToGroup(PHUITimelineEventView $event) {
     $this->eventGroup[] = $event;
     return $this;
   }
@@ -127,7 +127,7 @@ final class PhabricatorTimelineEventView extends AphrontView {
       $extra = phutil_tag(
         'span',
         array(
-          'class' => 'phabricator-timeline-extra',
+          'class' => 'phui-timeline-extra',
         ),
         phutil_implode_html(" \xC2\xB7 ", $extra));
     } else {
@@ -136,18 +136,18 @@ final class PhabricatorTimelineEventView extends AphrontView {
 
     if ($title !== null || $extra) {
       $title_classes = array();
-      $title_classes[] = 'phabricator-timeline-title';
+      $title_classes[] = 'phui-timeline-title';
 
       $icon = null;
       if ($this->icon || $force_icon) {
-        $title_classes[] = 'phabricator-timeline-title-with-icon';
+        $title_classes[] = 'phui-timeline-title-with-icon';
       }
 
       if ($this->icon) {
         $fill_classes = array();
-        $fill_classes[] = 'phabricator-timeline-icon-fill';
+        $fill_classes[] = 'phui-timeline-icon-fill';
         if ($this->color) {
-          $fill_classes[] = 'phabricator-timeline-icon-fill-'.$this->color;
+          $fill_classes[] = 'phui-timeline-icon-fill-'.$this->color;
         }
 
         $icon = phutil_tag(
@@ -158,7 +158,7 @@ final class PhabricatorTimelineEventView extends AphrontView {
           phutil_tag(
             'span',
             array(
-              'class' => 'phabricator-timeline-icon sprite-icons '.
+              'class' => 'phui-timeline-icon sprite-icons '.
                          'icons-'.$this->icon.'-white',
             ),
             ''));
@@ -203,7 +203,7 @@ final class PhabricatorTimelineEventView extends AphrontView {
     $wedge = phutil_tag(
       'div',
       array(
-        'class' => 'phabricator-timeline-wedge phabricator-timeline-border',
+        'class' => 'phui-timeline-wedge phui-timeline-border',
       ),
       '');
 
@@ -212,40 +212,40 @@ final class PhabricatorTimelineEventView extends AphrontView {
       'div',
       array(
         'style' => 'background-image: url('.$image_uri.')',
-        'class' => 'phabricator-timeline-image',
+        'class' => 'phui-timeline-image',
       ),
       '');
 
     $content_classes = array();
-    $content_classes[] = 'phabricator-timeline-content';
+    $content_classes[] = 'phui-timeline-content';
 
     $classes = array();
-    $classes[] = 'phabricator-timeline-event-view';
+    $classes[] = 'phui-timeline-event-view';
     if ($group_children) {
-      $classes[] = 'phabricator-timeline-major-event';
+      $classes[] = 'phui-timeline-major-event';
       $content = phutil_tag(
         'div',
         array(
-          'class' => 'phabricator-timeline-inner-content',
+          'class' => 'phui-timeline-inner-content',
         ),
         array(
           $group_titles,
           phutil_tag(
             'div',
             array(
-              'class' => 'phabricator-timeline-core-content',
+              'class' => 'phui-timeline-core-content',
             ),
             $group_children),
         ));
     } else {
-      $classes[] = 'phabricator-timeline-minor-event';
+      $classes[] = 'phui-timeline-minor-event';
       $content = $group_titles;
     }
 
     $content = phutil_tag(
       'div',
       array(
-        'class' => 'phabricator-timeline-group phabricator-timeline-border',
+        'class' => 'phui-timeline-group phui-timeline-border',
       ),
       $content);
 
@@ -257,7 +257,7 @@ final class PhabricatorTimelineEventView extends AphrontView {
       array($image, $wedge, $content));
 
     $outer_classes = $this->classes;
-    $outer_classes[] = 'phabricator-timeline-shell';
+    $outer_classes[] = 'phui-timeline-shell';
     $color = null;
     foreach ($this->getEventGroup() as $event) {
       if ($event->color) {
@@ -267,7 +267,7 @@ final class PhabricatorTimelineEventView extends AphrontView {
     }
 
     if ($color) {
-      $outer_classes[] = 'phabricator-timeline-'.$color;
+      $outer_classes[] = 'phui-timeline-'.$color;
     }
 
     $sigil = null;

src/view/phui/PHUITimelineView.php

@@ -1,6 +1,6 @@
 <?php
 
-final class PhabricatorTimelineView extends AphrontView {
+final class PHUITimelineView extends AphrontView {
 
   private $events = array();
   private $id;
@@ -10,13 +10,13 @@ final class PhabricatorTimelineView extends AphrontView {
     return $this;
   }
 
-  public function addEvent(PhabricatorTimelineEventView $event) {
+  public function addEvent(PHUITimelineEventView $event) {
     $this->events[] = $event;
     return $this;
   }
 
   public function render() {
-    require_celerity_resource('phabricator-timeline-view-css');
+    require_celerity_resource('phui-timeline-view-css');
 
     $spacer = self::renderSpacer();
 
@@ -30,7 +30,7 @@ final class PhabricatorTimelineView extends AphrontView {
     return phutil_tag(
       'div',
       array(
-        'class' => 'phabricator-timeline-view',
+        'class' => 'phui-timeline-view',
         'id' => $this->id,
       ),
       $events);
@@ -40,8 +40,8 @@ final class PhabricatorTimelineView extends AphrontView {
     return phutil_tag(
       'div',
       array(
-        'class' => 'phabricator-timeline-event-view '.
+        'class' => 'phui-timeline-event-view '.
-                   'phabricator-timeline-spacer',
+                   'phui-timeline-spacer',
       ),
       '');
   }

webroot/rsrc/css/core/z-index.css

@@ -6,7 +6,7 @@
   z-index: 1;
 }
 
-.device-desktop .phabricator-timeline-minor-event .phabricator-timeline-image {
+.device-desktop .phui-timeline-minor-event .phui-timeline-image {
   z-index: 2;
 }
 
@@ -30,7 +30,7 @@
   z-index: 3;
 }
 
-.phabricator-timeline-icon-fill {
+.phui-timeline-icon-fill {
   z-index: 3;
 }
 

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

@@ -1,259 +0,0 @@
-/**
- * @provides phabricator-timeline-view-css
- */
-
-.phabricator-timeline-view {
-  padding: 0 16px;
-}
-
-.device-phone .phabricator-timeline-view {
-  padding: 0;
-}
-
-.phabricator-timeline-group {
-  border-width: 0 3px;
-  border-style: solid;
-  border-color: #c0c5d1;
-}
-
-.device-desktop .phabricator-timeline-event-view {
-  margin-left: 70px;
-  position: relative;
-}
-
-.device-desktop .phabricator-timeline-spacer {
-  min-height: 20px;
-  border-width: 0 0 0 3px;
-  border-style: solid;
-  border-color: #c0c5d1;
-}
-
-.device-desktop .phabricator-timeline-major-event,
-.device-desktop .phabricator-timeline-minor-event {
-  border-right-width: 3px;
-}
-
-.device-desktop .phabricator-timeline-wedge {
-  border-bottom: 3px solid #c0c5d1;
-  position: absolute;
-  width: 20px;
-}
-
-.phabricator-timeline-content {
-  background: #ffffff;
-  border-style: solid;
-  border-color: #c0c5d1;
-  border-width: 1px 0;
-}
-
-.phabricator-timeline-title {
-  line-height: 18px;
-  min-height: 18px;
-  position: relative;
-}
-
-.phabricator-timeline-title a {
-  font-weight: bold;
-}
-
-.device-desktop .phabricator-timeline-wedge {
-  left: -20px;
-}
-.device-desktop .phabricator-timeline-major-event .phabricator-timeline-wedge {
-  top: 24px;
-}
-
-.device-desktop .phabricator-timeline-minor-event .phabricator-timeline-wedge {
-  top: 12px;
-}
-
-.phabricator-timeline-image {
-  background-repeat: no-repeat;
-  position: absolute;
-}
-
-.device-desktop .phabricator-timeline-major-event .phabricator-timeline-image {
-  width: 50px;
-  height: 50px;
-  top: 0px;
-  left: -70px;
-}
-
-.device-desktop .phabricator-timeline-minor-event .phabricator-timeline-image {
-  width: 30px;
-  height: 30px;
-  background-size: 30px auto;
-  left: -45px;
-}
-
-.phabricator-timeline-major-event .phabricator-timeline-title {
-  background: {$lightgreybackground};
-  min-height: 18px;
-}
-
-.phabricator-timeline-title {
-  padding: 5px;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.phabricator-timeline-title-with-icon {
-  padding-left: 33px;
-}
-
-.phabricator-timeline-major-event .phabricator-timeline-content
-  .phabricator-timeline-core-content {
-  padding: 12px;
-}
-
-.phabricator-timeline-core-content {
-  overflow-x: auto;
-}
-
-.device .phabricator-timeline-event-view {
-  min-height: 23px;
-  position: relative;
-  margin-left: 3px;
-  margin-right: 3px;
-}
-
-.device .phabricator-timeline-image {
-  display: none;
-}
-
-.device .phabricator-timeline-spacer {
-  min-height: 8px;
-  border-width: 0;
-}
-
-.phabricator-timeline-icon-fill {
-  position: absolute;
-  width: 30px;
-  height: 30px;
-  background-color: #c0c5d1;
-  top: -1px;
-  left: -3px;
-}
-
-.phabricator-timeline-icon {
-  position: absolute;
-  left: 9px;
-  top: 8px;
-  height: 14px;
-  width: 14px;
-}
-
-.phabricator-timeline-extra, .phabricator-timeline-extra a {
-  font-size: 11px;
-  font-weight: normal;
-  color: {$lightgreytext};
-}
-
-.device-desktop .phabricator-timeline-extra {
-  float: right;
-}
-
-.device .phabricator-timeline-extra {
-  display: inline-block;
-  line-height: 16px;
-  margin-left: 8px;
-}
-
-.phabricator-timeline-red .phabricator-timeline-border {
-  border-color: {$red};
-}
-
-.phabricator-timeline-orange .phabricator-timeline-border {
-  border-color: {$orange};
-}
-
-.phabricator-timeline-yellow .phabricator-timeline-border {
-  border-color: {$yellow};
-}
-
-.phabricator-timeline-green .phabricator-timeline-border {
-  border-color: {$green};
-}
-
-.phabricator-timeline-sky .phabricator-timeline-border {
-  border-color: {$sky};
-}
-
-.phabricator-timeline-blue .phabricator-timeline-border {
-  border-color: {$blue};
-}
-
-.phabricator-timeline-indigo .phabricator-timeline-border {
-  border-color: {$indigo};
-}
-
-.phabricator-timeline-violet .phabricator-timeline-border {
-  border-color: {$violet};
-}
-
-.phabricator-timeline-grey .phabricator-timeline-border {
-  border-color: #888;
-}
-
-.phabricator-timeline-black .phabricator-timeline-border {
-  border-color: #333;
-}
-
-.phabricator-timeline-icon-fill-red {
-  background-color: {$red};
-}
-
-.phabricator-timeline-icon-fill-orange {
-  background-color: {$orange};
-}
-
-.phabricator-timeline-icon-fill-yellow {
-  background-color: {$yellow};
-}
-
-.phabricator-timeline-icon-fill-green {
-  background-color: {$green};
-}
-
-.phabricator-timeline-icon-fill-sky {
-  background-color: {$sky};
-}
-
-.phabricator-timeline-icon-fill-blue {
-  background-color: {$blue};
-}
-
-.phabricator-timeline-icon-fill-indigo {
-  background-color: {$indigo};
-}
-
-.phabricator-timeline-icon-fill-violet {
-  background-color: {$violet};
-}
-
-.phabricator-timeline-icon-fill-grey {
-  background-color: #888;
-}
-
-.phabricator-timeline-icon-fill-black {
-  background-color: #333;
-}
-
-.phabricator-timeline-shell.anchor-target {
-  background: rgba(255, 255, 0, 0.50);
-  box-shadow: 0 0 3px 6px rgba(255, 255, 0, 0.50);
-}
-
-.phabricator-timeline-preview-header {
-  background: #e0e3ec;
-  color: {$darkgreytext};
-  padding: 4px 1.25%;
-  border: solid #c0c5d1 1px 0;
-}
-
-.phabricator-timeline-change-details {
-  padding: 10px 0;
-  border-style: solid;
-  border-color: #efefef;
-  border-width: 1px 0;
-}

webroot/rsrc/css/phui/phui-timeline-view.css

@@ -0,0 +1,243 @@
+/**
+ * @provides phui-timeline-view-css
+ */
+
+.phui-timeline-view {
+  padding: 0 16px;
+}
+
+.phui-timeline-major-event .phui-timeline-group {
+  border-left: 1px solid {$lightblueborder};
+  border-right: 1px solid {$lightblueborder};
+}
+
+.device-desktop .phui-timeline-event-view {
+  margin-left: 62px;
+  position: relative;
+}
+
+.device-desktop .phui-timeline-event-view.phui-timeline-minor-event {
+  margin-left: 65px;
+}
+
+.device-desktop .phui-timeline-spacer {
+  min-height: 16px;
+  border-width: 0 0 0 1px;
+  border-style: solid;
+  border-color: {$lightblueborder};
+  margin-left: 78px;
+}
+
+.device-desktop .phui-timeline-wedge {
+  border-bottom: 1px solid {$lightblueborder};
+  position: absolute;
+  width: 12px;
+}
+
+.phui-timeline-major-event .phui-timeline-content {
+  border-top: 1px solid {$lightblueborder};
+  border-bottom: 1px solid {$lightblueborder};
+}
+
+.phui-timeline-title {
+  line-height: 18px;
+  min-height: 18px;
+  position: relative;
+  color: {$darkbluetext};
+}
+
+.phui-timeline-minor-event .phui-timeline-title {
+  padding: 4px 8px 4px 33px;
+  color: {$bluetext};
+}
+
+.phui-timeline-title a {
+  font-weight: bold;
+}
+
+.phui-timeline-title a.phui-link-person {
+  color: {$darkbluetext};
+}
+
+.device-desktop .phui-timeline-wedge {
+  left: -12px;
+}
+
+.device-desktop .phui-timeline-major-event .phui-timeline-wedge {
+  top: 24px;
+}
+
+.device-desktop .phui-timeline-minor-event .phui-timeline-wedge {
+  top: 12px;
+  left: -18px;
+  width: 20px;
+}
+
+.phui-timeline-image {
+  background-repeat: no-repeat;
+  position: absolute;
+  border-radius: 3px;
+}
+
+.device-desktop .phui-timeline-major-event .phui-timeline-image {
+  width: 50px;
+  height: 50px;
+  top: 0px;
+  left: -62px;
+}
+
+.device-desktop .phui-timeline-minor-event .phui-timeline-image {
+  width: 26px;
+  height: 26px;
+  background-size: 26px auto;
+  left: -41px;
+}
+
+.phui-timeline-major-event .phui-timeline-title {
+  background: {$lightgreybackground};
+  min-height: 18px;
+}
+
+.phui-timeline-title {
+  padding: 5px 8px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.phui-timeline-title-with-icon {
+  padding-left: 38px;
+}
+
+.phui-timeline-major-event .phui-timeline-content
+  .phui-timeline-core-content {
+  padding: 16px 12px;
+  line-height: 18px;
+  background: #fff;
+}
+
+.phui-timeline-core-content {
+  overflow-x: auto;
+}
+
+.device .phui-timeline-event-view {
+  min-height: 23px;
+  position: relative;
+  margin-left: 3px;
+  margin-right: 3px;
+}
+
+.device .phui-timeline-image {
+  display: none;
+}
+
+.device .phui-timeline-spacer {
+  min-height: 8px;
+  border-width: 0;
+}
+
+.phui-timeline-icon-fill {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  background-color: {$lightblueborder};
+  top: 0;
+  left: 0;
+}
+
+.phui-timeline-icon {
+  position: absolute;
+  left: 8px;
+  top: 8px;
+  height: 14px;
+  width: 14px;
+}
+
+.phui-timeline-minor-event .phui-timeline-icon-fill {
+  height: 26px;
+  width: 26px;
+  border-radius: 3px;
+}
+
+.phui-timeline-minor-event .phui-timeline-icon {
+  top: 6px;
+  left: 6px;
+}
+
+.phui-timeline-extra, .phui-timeline-extra a {
+  font-size: 11px;
+  font-weight: normal;
+}
+
+.device-desktop .phui-timeline-extra {
+  float: right;
+}
+
+.device .phui-timeline-extra {
+  display: inline-block;
+  line-height: 16px;
+  margin-left: 8px;
+}
+
+.phui-timeline-icon-fill-red {
+  background-color: {$red};
+}
+
+.phui-timeline-icon-fill-orange {
+  background-color: {$orange};
+}
+
+.phui-timeline-icon-fill-yellow {
+  background-color: {$yellow};
+}
+
+.phui-timeline-icon-fill-green {
+  background-color: {$green};
+}
+
+.phui-timeline-icon-fill-sky {
+  background-color: {$sky};
+}
+
+.phui-timeline-icon-fill-blue {
+  background-color: {$blue};
+}
+
+.phui-timeline-icon-fill-indigo {
+  background-color: {$indigo};
+}
+
+.phui-timeline-icon-fill-violet {
+  background-color: {$violet};
+}
+
+.phui-timeline-icon-fill-grey {
+  background-color: #888;
+}
+
+.phui-timeline-icon-fill-black {
+  background-color: #333;
+}
+
+.phui-timeline-shell.anchor-target {
+  background: rgba(255, 255, 0, 0.50);
+  box-shadow: 0 0 3px 6px rgba(255, 255, 0, 0.50);
+}
+
+.phui-timeline-preview-header {
+  background: #e0e3ec;
+  color: {$darkgreytext};
+  padding: 4px 1.25%;
+  border: solid {$blueborder} 1px 0;
+}
+
+.phui-timeline-change-details {
+  padding: 10px 0;
+  border-style: solid;
+  border-color: #efefef;
+  border-width: 1px 0;
+}
+
+.phui-timeline-extra .phabricator-content-source-view,
+.phui-timeline-extra a {
+  color: {$lightbluetext};
+}