Add local navigation to Differential

Summary:
Adds a flexible navigation menu to diffs that shows you your current position in the diff.

Anticipating some "this is the best thing ever" and some "this is the wosrt thing ever" on this, but let's see how much pushback we get? It seems pretty good to me.

Test Plan: Will attach screenshots.

Reviewers: vrana, btrahan

Reviewed By: vrana

CC: aran

Maniphest Tasks: T1633, T1591

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

Author: epriestley

scripts/celerity_mapper.php

@@ -121,7 +121,6 @@
 
     'differential-inline-comment-editor',
     'javelin-behavior-differential-dropdown-menus',
-    'javelin-behavior-buoyant',
   ),
   'diffusion.pkg.css' => array(
     'diffusion-commit-view-css',

src/__phutil_library_map__.php

@@ -547,6 +547,7 @@
     'PhabricatorAccessLog' => 'infrastructure/PhabricatorAccessLog.php',
     'PhabricatorActionListView' => 'view/layout/PhabricatorActionListView.php',
     'PhabricatorActionView' => 'view/layout/PhabricatorActionView.php',
+    'PhabricatorAnchorView' => 'view/layout/PhabricatorAnchorView.php',
     'PhabricatorApplication' => 'applications/base/PhabricatorApplication.php',
     'PhabricatorApplicationApplications' => 'applications/meta/application/PhabricatorApplicationApplications.php',
     'PhabricatorApplicationAudit' => 'applications/audit/application/PhabricatorApplicationAudit.php',
@@ -1683,6 +1684,7 @@
     'Phabricator404Controller' => 'PhabricatorController',
     'PhabricatorActionListView' => 'AphrontView',
     'PhabricatorActionView' => 'AphrontView',
+    'PhabricatorAnchorView' => 'AphrontView',
     'PhabricatorApplicationApplications' => 'PhabricatorApplication',
     'PhabricatorApplicationAudit' => 'PhabricatorApplication',
     'PhabricatorApplicationAuth' => 'PhabricatorApplication',

src/applications/differential/controller/DifferentialRevisionViewController.php

@@ -194,7 +194,7 @@ public function processRequest() {
             array(
               'href' => $request_uri
                 ->alter('large', 'true')
-                ->setFragment('differential-review-toc'),
+                ->setFragment('toc'),
             ),
             'Show All Files Inline').
         "</strong>");
@@ -395,12 +395,22 @@ public function processRequest() {
     PhabricatorFeedStoryNotification::updateObjectNotificationViews(
       $user, $revision->getPHID());
 
-    return $this->buildStandardPageResponse(
+    $top_anchor = id(new PhabricatorAnchorView())
+      ->setAnchorName('top')
+      ->setNavigationMarker(true);
+
+    $nav = $this->buildSideNavView($revision, $changesets);
+    $nav->selectFilter('');
+    $nav->appendChild(
       array(
         $reviewer_warning,
+        $top_anchor,
         $revision_detail,
         $page_pane,
-      ),
+      ));
+
+    return $this->buildApplicationPage(
+      $nav,
       array(
         'title' => 'D'.$revision->getID().' '.$revision->getTitle(),
       ));
@@ -996,4 +1006,79 @@ private function buildRawDiffResponse(
     return id(new AphrontRedirectResponse())->setURI($file->getBestURI());
 
   }
+
+  private function buildSideNavView(
+    DifferentialRevision $revision,
+    array $changesets) {
+
+    $nav = new AphrontSideNavFilterView();
+    $nav->setBaseURI(new PhutilURI('/D'.$revision->getID()));
+    $nav->setFlexible(true);
+
+    $nav->addFilter('top', 'D'.$revision->getID(), '#top',
+      $relative = false,
+      'phabricator-active-nav-focus');
+
+    $tree = new PhutilFileTree();
+    foreach ($changesets as $changeset) {
+      $tree->addPath($changeset->getFilename(), $changeset);
+    }
+
+    require_celerity_resource('phabricator-filetree-view-css');
+
+    $filetree = array();
+
+    $path = $tree;
+    while (($path = $path->getNextNode())) {
+      $data = $path->getData();
+
+      $name = $path->getName();
+      $style = 'padding-left: '.(2 + (3 * $path->getDepth())).'px';
+
+      $href = null;
+      if ($data) {
+        $href = '#'.$data->getAnchorName();
+        $icon = 'phabricator-filetree-icon-file';
+      } else {
+        $name .= '/';
+        $icon = 'phabricator-filetree-icon-dir';
+      }
+
+      $icon = phutil_render_tag(
+        'span',
+        array(
+          'class' => 'phabricator-filetree-icon '.$icon,
+        ),
+        '');
+
+      $name_element = phutil_render_tag(
+        'span',
+        array(
+          'class' => 'phabricator-filetree-name',
+        ),
+        phutil_escape_html($name));
+
+      $filetree[] = javelin_render_tag(
+        $href ? 'a' : 'span',
+        array(
+          'href' => $href,
+          'style' => $style,
+          'title' => $name,
+          'class' => 'phabricator-filetree-item',
+        ),
+        $icon.$name_element);
+    }
+    $tree->destroy();
+
+    $filetree =
+      '<div class="phabricator-filetree">'.
+        implode("\n", $filetree).
+      '</div>';
+    $nav->addFilter('toc', 'Table of Contents', '#toc');
+    $nav->addCustomBlock($filetree);
+    $nav->addFilter('comment', 'Add Comment', '#comment');
+    $nav->setActive(true);
+
+    return $nav;
+  }
 }

src/applications/differential/field/specification/DifferentialRevisionIDFieldSpecification.php

@@ -118,7 +118,7 @@ public function renderValueForMail($phase) {
         $body[] = null;
         $body[] = 'CHANGE SINCE LAST DIFF';
         $body[] = '  '.PhabricatorEnv::getProductionURI(
-          "/D{$this->id}?vs={$old}&id={$new}#differential-review-toc");
+          "/D{$this->id}?vs={$old}&id={$new}#toc");
       }
     }
 

src/applications/differential/view/DifferentialAddCommentView.php

@@ -203,6 +203,10 @@ public function render() {
     $panel_view->addClass('aphront-panel-flush');
 
     return
+      id(new PhabricatorAnchorView())
+        ->setAnchorName('comment')
+        ->setNavigationMarker(true)
+        ->render().
       '<div class="differential-add-comment-panel">'.
         $panel_view->render().
         '<div class="aphront-panel-preview aphront-panel-flush">'.

src/applications/differential/view/DifferentialChangesetDetailView.php

@@ -93,9 +93,6 @@ public function render() {
 
     $display_filename = $changeset->getDisplayFilename();
 
-    $buoyant_begin = $this->renderBuoyant($display_filename);
-    $buoyant_end   = $this->renderBuoyant(null);
-
     $output = javelin_render_tag(
       'div',
       array(
@@ -109,39 +106,17 @@ public function render() {
         'class' => $class,
         'id'    => $id,
       ),
-      $buoyant_begin.
-      phutil_render_tag(
-        'a',
-        array(
-          'name' => $changeset->getAnchorName(),
-        ),
-        '').
+      id(new PhabricatorAnchorView())
+        ->setAnchorName($changeset->getAnchorName())
+        ->setNavigationMarker(true)
+        ->render().
       $buttons.
       '<h1>'.phutil_escape_html($display_filename).'</h1>'.
       '<div style="clear: both;"></div>'.
-      $this->renderChildren().
-      $buoyant_end);
+      $this->renderChildren());
 
 
     return $output;
   }
 
-  private function renderBuoyant($text) {
-    return javelin_render_tag(
-      'div',
-      array(
-        'sigil' => 'buoyant',
-        'meta'  => array(
-          'text' => $text,
-        ),
-        'style' => ($text === null)
-          // Current CSS spacing rules cause the "end" anchor to appear too
-          // late in the display document. Shift it up a bit so we drop the
-          // buoyant header sooner. This reduces confusion when using keystroke
-          // navigation.
-          ? 'bottom: 60px; position: absolute;'
-          : null,
-      ),
-      '');
-  }
 }

src/applications/differential/view/DifferentialChangesetListView.php

@@ -110,10 +110,6 @@ public function render() {
 
     $changesets = $this->changesets;
 
-    // TODO: Restore this once we make it through the redesign, it has funky
-    // interactions with things and there are various reports that it's slow.
-    // Javelin::initBehavior('buoyant', array());
-
     Javelin::initBehavior('differential-toggle-files', array());
 
     $output = array();

src/applications/differential/view/DifferentialDiffTableOfContentsView.php

@@ -222,8 +222,11 @@ public function render() {
     );
 
     return
-      '<div id="differential-review-toc" '.
-        'class="differential-toc differential-panel">'.
+      id(new PhabricatorAnchorView())
+        ->setAnchorName('toc')
+        ->setNavigationMarker(true)
+        ->render().
+      '<div class="differential-toc differential-panel">'.
         $editor_link.
         $reveal_link.
         '<h1>Table of Contents</h1>'.

src/applications/differential/view/DifferentialRevisionUpdateHistoryView.php

@@ -216,7 +216,7 @@ public function render() {
     return
       '<div class="differential-revision-history differential-panel">'.
         '<h1>Revision Update History</h1>'.
-        '<form action="#differential-review-toc">'.
+        '<form action="#toc">'.
           '<table class="differential-revision-history-table">'.
             '<tr>'.
               '<th>Diff</th>'.

src/applications/diffusion/controller/DiffusionCommitController.php

@@ -182,7 +182,7 @@ public function processRequest() {
     } else {
       $change_panel = new AphrontPanelView();
       $change_panel->setHeader("Changes (".number_format($count).")");
-      $change_panel->setID('differential-review-toc');
+      $change_panel->setID('toc');
 
       if ($count > self::CHANGES_LIMIT) {
         $show_all_button = phutil_render_tag(

src/applications/repository/worker/commitmessageparser/PhabricatorRepositoryCommitMessageParserWorker.php

@@ -162,7 +162,7 @@ final protected function updateCommitData($author, $message,
               '/D'.$revision->getID().
               '?vs='.$vs_diff->getID().
               '&id='.$diff->getID().
-              '#differential-review-toc');
+              '#toc');
             $editor->setChangedByCommit($changed_by_commit);
           }
 

src/view/layout/AphrontSideNavFilterView.php

@@ -45,6 +45,12 @@ final class AphrontSideNavFilterView extends AphrontView {
   private $showApplicationMenu;
   private $user;
   private $currentApplication;
+  private $active;
+
+  public function setActive($active) {
+    $this->active = $active;
+    return $this;
+  }
 
   public function setCurrentApplication(PhabricatorApplication $current) {
     $this->currentApplication = $current;
@@ -102,6 +108,11 @@ public function addFilters(array $views) {
     }
   }
 
+  public function addCustomBlock($block) {
+    $this->items[] = array('custom', null, $block);
+    return $this;
+  }
+
   public function addLabel($name) {
     $this->items[] = array('label', null, $name);
     return $this;
@@ -150,6 +161,7 @@ public function render() {
     $view->setFlexNav($this->flexNav);
     $view->setFlexible($this->flexible);
     $view->setShowApplicationMenu($this->showApplicationMenu);
+    $view->setActive($this->active);
     if ($this->user) {
       $view->setUser($this->user);
     }
@@ -159,6 +171,9 @@ public function render() {
     foreach ($this->items as $item) {
       list($type, $key, $name) = $item;
       switch ($type) {
+        case 'custom':
+          $view->addNavItem($name);
+          break;
         case 'spacer':
           $view->addNavItem('<br />');
           break;

src/view/layout/AphrontSideNavView.php

@@ -24,6 +24,7 @@ final class AphrontSideNavView extends AphrontView {
   private $showApplicationMenu;
   private $user;
   private $currentApplication;
+  private $active;
 
   public function setUser(PhabricatorUser $user) {
     $this->user = $user;
@@ -55,6 +56,11 @@ public function setFlexible($flexible) {
     return $this;
   }
 
+  public function setActive($active) {
+    $this->active = $active;
+    return $this;
+  }
+
   public function render() {
     $view = new AphrontNullView();
     $view->appendChild($this->items);
@@ -153,6 +159,14 @@ public function render() {
           'collapseKey' => $key,
         ));
 
+      if ($this->active && $local_id) {
+        Javelin::initBehavior(
+          'phabricator-active-nav',
+          array(
+            'localID' => $local_id,
+          ));
+      }
+
       $header_part =
         '<div class="phabricator-nav-head">'.
           '<div class="phabricator-nav-head-tablet">'.