Improve handle/status list display on devices in commit graph lists

Summary: Ref T13552. Provide a richer handle/status list item for commit lists.

Test Plan: Viewed commits in various interfaces, saw richer information.

Maniphest Tasks: T13552

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

resources/celerity/map.php

@@ -122,8 +122,9 @@ return array(
     'rsrc/css/font/font-lato.css' => '23631304',
     'rsrc/css/font/phui-font-icon-base.css' => '303c9b87',
     'rsrc/css/fuel/fuel-grid.css' => '66697240',
+    'rsrc/css/fuel/fuel-handle-list.css' => '2c4cbeca',
     'rsrc/css/fuel/fuel-map.css' => 'd6e31510',
-    'rsrc/css/fuel/fuel-menu.css' => 'cb35abe3',
+    'rsrc/css/fuel/fuel-menu.css' => '21f5d199',
     'rsrc/css/layout/phabricator-source-code-view.css' => '03d7ac28',
     'rsrc/css/phui/button/phui-button-bar.css' => 'a4aa75c4',
     'rsrc/css/phui/button/phui-button-simple.css' => '1ff278aa',
@@ -578,8 +579,9 @@ return array(
     'font-fontawesome' => '3883938a',
     'font-lato' => '23631304',
     'fuel-grid-css' => '66697240',
+    'fuel-handle-list-css' => '2c4cbeca',
     'fuel-map-css' => 'd6e31510',
-    'fuel-menu-css' => 'cb35abe3',
+    'fuel-menu-css' => '21f5d199',
     'global-drag-and-drop-css' => '1d2713a4',
     'harbormaster-css' => '8dfe16b2',
     'herald-css' => '648d39e2',

src/__phutil_library_map__.php

@@ -1309,6 +1309,8 @@ phutil_register_library_map(array(
     'FuelGridCellView' => 'view/fuel/FuelGridCellView.php',
     'FuelGridRowView' => 'view/fuel/FuelGridRowView.php',
     'FuelGridView' => 'view/fuel/FuelGridView.php',
+    'FuelHandleListItemView' => 'view/fuel/FuelHandleListItemView.php',
+    'FuelHandleListView' => 'view/fuel/FuelHandleListView.php',
     'FuelMapItemView' => 'view/fuel/FuelMapItemView.php',
     'FuelMapView' => 'view/fuel/FuelMapView.php',
     'FuelMenuItemView' => 'view/fuel/FuelMenuItemView.php',
@@ -7452,6 +7454,8 @@ phutil_register_library_map(array(
     'FuelGridCellView' => 'FuelComponentView',
     'FuelGridRowView' => 'FuelView',
     'FuelGridView' => 'FuelComponentView',
+    'FuelHandleListItemView' => 'FuelView',
+    'FuelHandleListView' => 'FuelComponentView',
     'FuelMapItemView' => 'AphrontView',
     'FuelMapView' => 'FuelComponentView',
     'FuelMenuItemView' => 'FuelView',

src/applications/diffusion/view/DiffusionCommitGraphView.php

@@ -122,8 +122,16 @@ final class DiffusionCommitGraphView
       }
     }
 
+    $commits = $this->getCommitMap();
+
+    foreach ($commits as $commit) {
+      $author_phid = $commit->getAuthorDisplayPHID();
+      if ($author_phid !== null) {
+        $phids[] = $author_phid;
+      }
+    }
+
     if ($show_auditors) {
-      $commits = $this->getCommitMap();
       foreach ($commits as $commit) {
         $audits = $commit->getAudits();
         foreach ($audits as $auditor) {
@@ -188,12 +196,12 @@ final class DiffusionCommitGraphView
         if ($commit) {
           $revisions = $this->getRevisions($commit);
           if ($revisions) {
-            $revision = head($revisions);
-            $handle = $handles[$revision->getPHID()];
+            $list_view = $handles->newSublist(mpull($revisions, 'getPHID'))
+              ->newListView();
 
             $property_list->newItem()
-              ->setName(pht('Revision'))
-              ->setValue($handle->renderLink());
+              ->setName(pht('Revisions'))
+              ->setValue($list_view);
           }
         }
       }
@@ -422,6 +430,12 @@ final class DiffusionCommitGraphView
 
     $viewer = $this->getViewer();
 
+    $author_phid = $commit->getAuthorDisplayPHID();
+    if ($author_phid) {
+      return $viewer->loadHandles(array($author_phid))
+        ->newListView();
+    }
+
     return $commit->newCommitAuthorView($viewer);
   }
 
@@ -504,12 +518,16 @@ final class DiffusionCommitGraphView
       $status = $commit->getAuditStatusObject();
 
       $text = $status->getName();
-      $color = $status->getColor();
       $icon = $status->getIcon();
 
-      $uri = $commit->getURI();
-
-      $is_disabled = false;
+      $is_disabled = $status->isNoAudit();
+      if ($is_disabled) {
+        $uri = null;
+        $color = 'grey';
+      } else {
+        $color = $status->getColor();
+        $uri = $commit->getURI();
+      }
     } else {
       $text = pht('No Audit');
       $color = 'grey';
@@ -616,8 +634,7 @@ final class DiffusionCommitGraphView
 
     $auditor_phids = mpull($auditors, 'getAuditorPHID');
     $auditor_list = $handles->newSublist($auditor_phids)
-      ->renderList()
-      ->setAsInline(true);
+      ->newListView();
 
     return $auditor_list;
   }

src/applications/phid/handle/pool/PhabricatorHandleList.php

@@ -104,6 +104,10 @@ final class PhabricatorHandleList
       ->setHandleList($this);
   }
 
+  public function newListView() {
+    return id(new FuelHandleListView())
+      ->addHandleList($this);
+  }
 
   /**
    * Return a @{class:PHUIHandleView} which can render a specific handle.

src/view/fuel/FuelHandleListItemView.php

@@ -0,0 +1,99 @@
+<?php
+
+final class FuelHandleListItemView
+  extends FuelView {
+
+  private $handle;
+
+  public function setHandle(PhabricatorObjectHandle $handle) {
+    $this->handle = $handle;
+    return $this;
+  }
+
+  public function render() {
+    $cells = array();
+
+    $cells[] = phutil_tag(
+      'div',
+      array(
+        'class' => 'fuel-handle-list-item-cell fuel-handle-list-item-icon',
+      ),
+      $this->newIconView());
+
+    $cells[] = phutil_tag(
+      'div',
+      array(
+        'class' => 'fuel-handle-list-item-cell fuel-handle-list-item-handle',
+      ),
+      $this->newHandleView());
+
+    $cells[] = phutil_tag(
+      'div',
+      array(
+        'class' => 'fuel-handle-list-item-cell fuel-handle-list-item-note',
+      ),
+      $this->newNoteView());
+
+    return phutil_tag(
+      'div',
+      array(
+        'class' => 'fuel-handle-list-item',
+      ),
+      $cells);
+  }
+
+
+  private function newIconView() {
+    $icon_icon = null;
+    $icon_image = null;
+    $icon_color = null;
+
+    $handle = $this->handle;
+    if ($handle) {
+      $icon_image = $handle->getImageURI();
+      if (!$icon_image) {
+        $icon_icon = $handle->getIcon();
+        $icon_color = $handle->getIconColor();
+      }
+    }
+
+    if ($icon_image === null && $icon_icon === null) {
+      return null;
+    }
+
+    $view = new PHUIIconView();
+
+    if ($icon_image !== null) {
+      $view->setImage($icon_image);
+    } else {
+      if ($icon_color === null) {
+        $icon_color = 'bluegrey';
+      }
+
+      if ($icon_icon !== null) {
+        $view->setIcon($icon_icon);
+      }
+
+      if ($icon_color !== null) {
+        $view->setColor($icon_color);
+      }
+    }
+
+
+    return $view;
+  }
+
+  private function newHandleView() {
+    $handle = $this->handle;
+    if ($handle) {
+      return $handle->renderLink();
+    }
+
+    return null;
+  }
+
+  private function newNoteView() {
+    return null;
+  }
+
+}

src/view/fuel/FuelHandleListView.php

@@ -0,0 +1,58 @@
+<?php
+
+final class FuelHandleListView
+  extends FuelComponentView {
+
+  private $items = array();
+
+  public function addHandleList(PhabricatorHandleList $list) {
+    $this->items[] = array(
+      'type' => 'list',
+      'item' => $list,
+    );
+    return $this;
+  }
+
+  public function render() {
+    require_celerity_resource('fuel-handle-list-css');
+
+    $items = $this->items;
+
+    $item_views = array();
+    foreach ($items as $item) {
+      $item_type = $item['type'];
+      $item_item = $item['item'];
+
+      switch ($item_type) {
+        case 'list':
+          foreach ($item_item as $handle) {
+            $item_views[] = id(new FuelHandleListItemView())
+              ->setHandle($handle);
+          }
+          break;
+      }
+    }
+
+    $body = phutil_tag(
+      'div',
+      array(
+        'class' => 'fuel-handle-list-body',
+      ),
+      $item_views);
+
+    $list = phutil_tag(
+      'div',
+      array(
+        'class' => 'fuel-handle-list',
+      ),
+      $body);
+
+    return $this->newComponentTag(
+      'div',
+      array(
+        'class' => 'fuel-handle-list-component',
+      ),
+      $list);
+  }
+
+}

webroot/rsrc/css/fuel/fuel-handle-list.css

@@ -0,0 +1,33 @@
+/**
+ * @provides fuel-handle-list-css
+ */
+
+.fuel-handle-list {
+  display: table;
+  max-width: 100%;
+}
+
+.fuel-handle-list-body {
+  display: table-row-group;
+}
+
+.fuel-handle-list-item {
+  display: table-row;
+}
+
+.fuel-handle-list-item-cell {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.fuel-handle-list-item-icon {
+  padding-right: 4px;
+}
+
+.fuel-handle-list-item-icon > .phui-icon-view {
+  width: 18px;
+  height: 18px;
+  text-align: center;
+  display: inline-block;
+  background-size: 100%;
+}

webroot/rsrc/css/fuel/fuel-menu.css

@@ -23,15 +23,15 @@
   border-radius: 3px;
 }
 
-.fuel-menu-item.disabled > .fuel-menu-item-link {
-  color: {$lightgreytext};
-}
-
 .fuel-menu-item.has-link > .fuel-menu-item-link {
   color: {$darkbluetext};
   cursor: pointer;
 }
 
+.fuel-menu-item.disabled > .fuel-menu-item-link {
+  color: {$lightgreytext};
+}
+
 .device-desktop .fuel-menu-item > .fuel-menu-item-link:hover {
   text-decoration: none;
 }