Improve pagination in ChatLog application

Summary:
- Add an extra paginator at the top.
- Add a link to jump to the bottom (where the latest messages are).
- Align paginators with edge of content rather than the page.

Test Plan: Looked at the chatlog.

Reviewers: epriestley, chad, #blessed_reviewers

CC: chad, Korvin, epriestley, aran

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

src/__celerity_resource_map__.php

@@ -3066,7 +3066,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-chatlog-css' =>
   array(
-    'uri' => '/res/5542e247/rsrc/css/application/chatlog/chatlog.css',
+    'uri' => '/res/cf9b0aa7/rsrc/css/application/chatlog/chatlog.css',
     'type' => 'css',
     'requires' =>
     array(

src/applications/chatlog/controller/PhabricatorChatLogChannelLogController.php

@@ -139,6 +139,48 @@ final class PhabricatorChatLogChannelLogController
           $message));
     }
 
+    $links = array();
+
+    $first_uri = $pager->getFirstPageURI();
+    if ($first_uri) {
+      $links[] = phutil_tag(
+        'a',
+        array(
+          'href' => $first_uri,
+        ),
+        "\xC2\xAB ". pht("Newest"));
+    }
+
+    $prev_uri = $pager->getPrevPageURI();
+    if ($prev_uri) {
+      $links[] = phutil_tag(
+        'a',
+        array(
+          'href' => $prev_uri,
+        ),
+        "\xE2\x80\xB9 " . pht("Newer"));
+    }
+
+    $next_uri = $pager->getNextPageURI();
+    if ($next_uri) {
+      $links[] = phutil_tag(
+        'a',
+        array(
+          'href' => $next_uri,
+        ),
+        pht("Older") . " \xE2\x80\xBA");
+    }
+
+    $pager_top = phutil_tag(
+      'div',
+      array('class' => 'phabricator-chat-log-pager-top'),
+      $links);
+
+    $pager_bottom = phutil_tag(
+      'div',
+      array('class' => 'phabricator-chat-log-pager-bottom'),
+      $links);
+
     $crumbs = $this
       ->buildApplicationCrumbs()
       ->addCrumb(
@@ -176,19 +218,44 @@ final class PhabricatorChatLogChannelLogController
         ),
         $table);
 
+    $jump_link = phutil_tag(
+      'a',
+        array(
+          'href' => '#latest'
+        ),
+        pht("Jump to Bottom") . " \xE2\x96\xBE");
+
+    $jump = phutil_tag(
+      'div',
+        array(
+          'class' => 'phabricator-chat-log-jump'
+        ),
+        $jump_link);
+
+    $jump_target = phutil_tag(
+      'div',
+        array(
+          'id' => 'latest'
+        ));
+
     $content = phutil_tag(
       'div',
         array(
           'class' => 'phabricator-chat-log-wrap'
         ),
-        $log);
+        array(
+          $jump,
+          $pager_top,
+          $log,
+          $jump_target,
+          $pager_bottom,
+        ));
 
     return $this->buildApplicationPage(
       array(
         $crumbs,
         $filter,
         $content,
-        $pager,
       ),
       array(
         'title' => pht('Channel Log'),

src/view/control/AphrontCursorPagerView.php

@@ -86,6 +86,51 @@ final class AphrontCursorPagerView extends AphrontView {
            ($this->beforeID && $this->moreResults);
   }
 
+  public function getFirstPageURI() {
+    if (!$this->uri) {
+      throw new Exception(
+        pht("You must call setURI() before you can call getFirstPageURI()."));
+    }
+
+    if (!$this->afterID && !($this->beforeID && $this->moreResults)) {
+      return null;
+    }
+
+    return $this->uri
+      ->alter('before', null)
+      ->alter('after', null);
+  }
+
+  public function getPrevPageURI() {
+    if (!$this->uri) {
+      throw new Exception(
+        pht("You must call setURI() before you can call getPrevPageURI()."));
+    }
+
+    if (!$this->prevPageID) {
+      return null;
+    }
+
+    return $this->uri
+      ->alter('after', null)
+      ->alter('before', $this->prevPageID);
+  }
+
+  public function getNextPageURI() {
+    if (!$this->uri) {
+      throw new Exception(
+        pht("You must call setURI() before you can call getNextPageURI()."));
+    }
+
+    if (!$this->nextPageID) {
+      return null;
+    }
+
+    return $this->uri
+      ->alter('after', $this->nextPageID)
+      ->alter('before', null);
+  }
+
   public function render() {
     if (!$this->uri) {
       throw new Exception(
@@ -94,37 +139,34 @@ final class AphrontCursorPagerView extends AphrontView {
 
     $links = array();
 
-    if ($this->afterID || ($this->beforeID && $this->moreResults)) {
+    $first_uri = $this->getFirstPageURI();
+    if ($first_uri) {
       $links[] = phutil_tag(
         'a',
         array(
-          'href' => $this->uri
-            ->alter('before', null)
-            ->alter('after', null),
+          'href' => $first_uri,
         ),
         "\xC2\xAB ". pht("First"));
     }
 
-    if ($this->prevPageID) {
+    $prev_uri = $this->getPrevPageURI();
+    if ($prev_uri) {
       $links[] = phutil_tag(
         'a',
         array(
-          'href' => $this->uri
-            ->alter('after', null)
-            ->alter('before', $this->prevPageID),
+          'href' => $prev_uri,
         ),
         "\xE2\x80\xB9 " . pht("Prev"));
     }
 
-    if ($this->nextPageID) {
+    $next_uri = $this->getNextPageURI();
+    if ($next_uri) {
       $links[] = phutil_tag(
         'a',
         array(
-          'href' => $this->uri
-            ->alter('after', $this->nextPageID)
-            ->alter('before', null),
+          'href' => $next_uri,
         ),
-        "Next \xE2\x80\xBA");
+        pht("Next") . " \xE2\x80\xBA");
     }
 
     return phutil_tag(

webroot/rsrc/css/application/chatlog/chatlog.css

@@ -10,8 +10,30 @@
   padding: 0;
 }
 
+.phabricator-chat-log-pager-top {
+  padding: 16px 4px 8px;
+  font-weight: bold;
+  float: right;
+}
+
+.phabricator-chat-log-pager-bottom {
+  padding: 8px 4px 16px;
+  font-weight: bold;
+  float: right;
+}
+
+.phabricator-chat-log-pager-top a, .phabricator-chat-log-pager-bottom a {
+  padding: 2px 3px;
+}
+
+.phabricator-chat-log-jump {
+  padding: 16px 4px 8px;
+  font-weight: bold;
+  float: left;
+}
+
 .phabricator-chat-log-panel {
-  margin: 20px auto;
+  clear: both;
   border-left: 1px solid #e7e7e7;
   border-right: 1px solid #e7e7e7;
   border-bottom: 1px solid #c0c5d1;