Roughly style the new "flank" paths UI

Summary: Ref T13516. Apply basic UI styling to the new UI and make some more interaction work.

Test Plan: {F7374096}

Maniphest Tasks: T13516

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

webroot/rsrc/js/application/diff/DiffPathView.js

@@ -9,19 +9,25 @@ JX.install('DiffPathView', {
   construct: function() {
   },
 
-  properties: {
-    changeset: null
-  },
-
   members: {
     _node: null,
     _path: null,
     _depth: 0,
     _selected: false,
+    _focused: false,
+    _icon: null,
+
+    _indentNode: null,
+    _pathNode: null,
+    _changeset: null,
 
     getNode: function() {
       if (!this._node) {
-        this._node = JX.$N('li');
+        var attrs = {
+          className: 'diff-tree-path'
+        };
+
+        this._node = JX.$N('li', attrs, this._getIndentNode());
 
         var onclick = JX.bind(this, this._onclick);
         JX.DOM.listen(this._node, 'click', null, onclick);
@@ -29,25 +35,62 @@ JX.install('DiffPathView', {
       return this._node;
     },
 
+    getIcon: function() {
+      if (!this._icon) {
+        this._icon = new JX.PHUIXIconView();
+      }
+      return this._icon;
+    },
+
     setPath: function(path) {
       this._path = path;
-      this._redraw();
+
+      var display = this._path[this._path.length - 1];
+      JX.DOM.setContent(this._getPathNode(), display);
+
       return this;
     },
 
+    setChangeset: function(changeset) {
+      this._changeset = changeset;
+
+      var node = this.getNode();
+      JX.DOM.alterClass(node, 'diff-tree-path-changeset', !!changeset);
+
+      return this;
+    },
+
+    getChangeset: function() {
+      return this._changeset;
+    },
+
     getPath: function() {
       return this._path;
     },
 
     setDepth: function(depth) {
       this._depth = depth;
-      this._redraw();
+
+      this._getIndentNode().style.marginLeft = (8 * this._depth) + 'px';
+
       return this;
     },
 
     setIsSelected: function(selected) {
       this._selected = selected;
-      this._redraw();
+
+      var node = this.getNode();
+      JX.DOM.alterClass(node, 'diff-tree-path-selected', this._selected);
+
+      return this;
+    },
+
+    setIsFocused: function(focused) {
+      this._focused = focused;
+
+      var node = this.getNode();
+      JX.DOM.alterClass(node, 'diff-tree-path-focused', this._focused);
+
       return this;
     },
 
@@ -64,18 +107,37 @@ JX.install('DiffPathView', {
       e.kill();
     },
 
-    _redraw: function() {
-      var node = this.getNode();
+    _getIndentNode: function() {
+      if (!this._indentNode) {
+        var content = [
+          this._getIconNode(),
+          this._getPathNode(),
+        ];
 
-      node.style.paddingLeft = (8 * this._depth) + 'px';
-
-      var display = this._path[this._path.length - 1];
-
-      if (this._selected) {
-        display = ['*', display];
+        this._indentNode = JX.$N('div', {}, content);
       }
 
-      JX.DOM.setContent(node, display);
+      return this._indentNode;
+    },
+
+    _getPathNode: function() {
+      if (!this._pathNode) {
+        var attrs = {
+          className: 'diff-tree-path-name'
+        };
+        this._pathNode = JX.$N('div', attrs);
+      }
+      return this._pathNode;
+    },
+
+    _getIconNode: function() {
+      if (!this._iconNode) {
+        var attrs = {
+          className: 'diff-tree-path-icon',
+        };
+        this._iconNode = JX.$N('div', attrs, this.getIcon().getNode());
+      }
+      return this._iconNode;
     }
 
   }