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
This commit is contained in:
epriestley
2012-08-21 15:01:20 -07:00
parent d2fbfaa4e8
commit 93b0a501a4
21 changed files with 376 additions and 159 deletions

View File

@@ -547,6 +547,7 @@ phutil_register_library_map(array(
'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 @@ phutil_register_library_map(array(
'Phabricator404Controller' => 'PhabricatorController',
'PhabricatorActionListView' => 'AphrontView',
'PhabricatorActionView' => 'AphrontView',
'PhabricatorAnchorView' => 'AphrontView',
'PhabricatorApplicationApplications' => 'PhabricatorApplication',
'PhabricatorApplicationAudit' => 'PhabricatorApplication',
'PhabricatorApplicationAuth' => 'PhabricatorApplication',

View File

@@ -194,7 +194,7 @@ final class DifferentialRevisionViewController extends DifferentialController {
array(
'href' => $request_uri
->alter('large', 'true')
->setFragment('differential-review-toc'),
->setFragment('toc'),
),
'Show All Files Inline').
"</strong>");
@@ -395,12 +395,22 @@ final class DifferentialRevisionViewController extends DifferentialController {
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 @@ final class DifferentialRevisionViewController extends DifferentialController {
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;
}
}

View File

@@ -118,7 +118,7 @@ final class DifferentialRevisionIDFieldSpecification
$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");
}
}

View File

@@ -203,6 +203,10 @@ final class DifferentialAddCommentView extends AphrontView {
$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">'.

View File

@@ -93,9 +93,6 @@ final class DifferentialChangesetDetailView extends AphrontView {
$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 @@ final class DifferentialChangesetDetailView extends AphrontView {
'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,
),
'');
}
}

View File

@@ -110,10 +110,6 @@ final class DifferentialChangesetListView extends AphrontView {
$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();

View File

@@ -222,8 +222,11 @@ final class DifferentialDiffTableOfContentsView extends AphrontView {
);
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>'.

View File

@@ -216,7 +216,7 @@ final class DifferentialRevisionUpdateHistoryView extends AphrontView {
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>'.

View File

@@ -182,7 +182,7 @@ final class DiffusionCommitController extends DiffusionController {
} 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(

View File

@@ -162,7 +162,7 @@ abstract class PhabricatorRepositoryCommitMessageParserWorker
'/D'.$revision->getID().
'?vs='.$vs_diff->getID().
'&id='.$diff->getID().
'#differential-review-toc');
'#toc');
$editor->setChangedByCommit($changed_by_commit);
}

View File

@@ -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 @@ final class AphrontSideNavFilterView extends AphrontView {
}
}
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 @@ final class AphrontSideNavFilterView extends AphrontView {
$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 @@ final class AphrontSideNavFilterView extends AphrontView {
foreach ($this->items as $item) {
list($type, $key, $name) = $item;
switch ($type) {
case 'custom':
$view->addNavItem($name);
break;
case 'spacer':
$view->addNavItem('<br />');
break;

View File

@@ -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 @@ final class AphrontSideNavView extends AphrontView {
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 @@ final class AphrontSideNavView extends AphrontView {
'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">'.

View File

@@ -0,0 +1,61 @@
<?php
/*
* Copyright 2012 Facebook, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
final class PhabricatorAnchorView extends AphrontView {
private $anchorName;
private $navigationMarker;
public function setAnchorName($name) {
$this->anchorName = $name;
return $this;
}
public function setNavigationMarker($marker) {
$this->navigationMarker = $marker;
return $this;
}
public function render() {
$marker = null;
if ($this->navigationMarker) {
$marker = javelin_render_tag(
'legend',
array(
'class' => 'phabricator-anchor-navigation-marker',
'sigil' => 'marker',
'meta' => array(
'anchor' => $this->anchorName,
),
),
'');
}
$anchor = phutil_render_tag(
'a',
array(
'name' => $this->anchorName,
'id' => $this->anchorName,
'class' => 'phabricator-anchor-view',
),
'');
return $marker.$anchor;
}
}

View File

@@ -122,11 +122,14 @@ final class PhabricatorTransactionView extends AphrontView {
if ($this->anchorName) {
Javelin::initBehavior('phabricator-watch-anchor');
$info[] = phutil_render_tag(
$anchor = id(new PhabricatorAnchorView())
->setAnchorName($this->anchorName)
->render();
$info[] = $anchor.phutil_render_tag(
'a',
array(
'name' => $this->anchorName,
'id' => $this->anchorName,
'href' => '#'.$this->anchorName,
),
phutil_escape_html($this->anchorText));