Make closed vs open objects in object graphs more obvious

Summary: Ref T4788. It's not easy to tell at a glance which objects are open vs closed. Try to make that a bit more clear. This could probably use some more tweaking.

Test Plan: {F1708330}

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T4788

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '2cc8508b',
+    'core.pkg.css' => '93eb0544',
     'core.pkg.js' => 'f2139810',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '3e81ae60',
@@ -25,7 +25,7 @@ return array(
     'rsrc/css/aphront/notification.css' => '3f6c89c9',
     'rsrc/css/aphront/panel-view.css' => '8427b78d',
     'rsrc/css/aphront/phabricator-nav-view.css' => 'ac79a758',
-    'rsrc/css/aphront/table-view.css' => '9258e19f',
+    'rsrc/css/aphront/table-view.css' => '2596314c',
     'rsrc/css/aphront/tokenizer.css' => '056da01b',
     'rsrc/css/aphront/tooltip.css' => '1a07aea8',
     'rsrc/css/aphront/typeahead-browse.css' => '8904346a',
@@ -536,7 +536,7 @@ return array(
     'aphront-list-filter-view-css' => '5d6f0526',
     'aphront-multi-column-view-css' => 'fd18389d',
     'aphront-panel-view-css' => '8427b78d',
-    'aphront-table-view-css' => '9258e19f',
+    'aphront-table-view-css' => '2596314c',
     'aphront-tokenizer-control-css' => '056da01b',
     'aphront-tooltip-css' => '1a07aea8',
     'aphront-typeahead-control-css' => 'd4f16145',

src/infrastructure/graph/DifferentialRevisionGraph.php

@@ -18,6 +18,10 @@ final class DifferentialRevisionGraph
     return new DifferentialRevisionQuery();
   }
 
+  protected function isClosed($object) {
+    return $object->isClosed();
+  }
+
   protected function newTableRow($phid, $object, $trace) {
     $viewer = $this->getViewer();
 
@@ -68,9 +72,9 @@ final class DifferentialRevisionGraph
       ->setColumnClasses(
         array(
           'threads',
+          'graph-status',
           null,
-          null,
+          'wide object-link',
-          'wide',
         ));
   }
 

src/infrastructure/graph/ManiphestTaskGraph.php

@@ -18,6 +18,10 @@ final class ManiphestTaskGraph
     return new ManiphestTaskQuery();
   }
 
+  protected function isClosed($object) {
+    return $object->isClosed();
+  }
+
   protected function newTableRow($phid, $object, $trace) {
     $viewer = $this->getViewer();
 
@@ -78,9 +82,9 @@ final class ManiphestTaskGraph
       ->setColumnClasses(
         array(
           'threads',
+          'graph-status',
           null,
-          null,
+          'wide object-link',
-          'wide',
         ));
   }
 

src/infrastructure/graph/PhabricatorObjectGraph.php

@@ -28,6 +28,7 @@ abstract class PhabricatorObjectGraph
   abstract protected function newQuery();
   abstract protected function newTableRow($phid, $object, $trace);
   abstract protected function newTable(AphrontTableView $table);
+  abstract protected function isClosed($object);
 
   final public function setSeedPHID($phid) {
     $this->seedPHID = $phid;
@@ -132,14 +133,28 @@ abstract class PhabricatorObjectGraph
       $object = idx($objects, $phid);
       $rows[] = $this->newTableRow($phid, $object, $traces[$ii++]);
 
+      $classes = array();
       if ($phid == $this->seedPHID) {
-        $rowc[] = 'highlighted';
+        $classes[] = 'highlighted';
-      } else {
+      }
-        $rowc[] = null;
+
+      if ($object) {
+        if ($this->isClosed($object)) {
+          $classes[] = 'closed';
         }
       }
 
+      if ($classes) {
+        $classes = implode(' ', $classes);
+      } else {
+        $classes = null;
+      }
+
+      $rowc[] = $classes;
+    }
+
     $table = id(new AphrontTableView($rows))
+      ->setClassName('object-graph-table')
       ->setRowClasses($rowc);
 
     $this->objects = $objects;

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

@@ -228,6 +228,21 @@ span.single-display-line-content {
   position: static;
 }
 
+.aphront-table-view tr.closed td.object-link a,
+.aphront-table-view tr.alt-closed td.object-link a {
+  text-decoration: line-through;
+  color: rgba({$alphablack}, 0.5);
+}
+
+.aphront-table-view tr.closed td.graph-status,
+.aphront-table-view tr.alt-closed td.graph-status {
+  opacity: 0.5;
+}
+
+.object-graph-table em {
+  color: {$lightgreytext};
+}
+
 .aphront-table-view tr.highlighted {
   background: #fdf9e4;
 }