Modernize Countdown somewhat

Summary: Far from perfect, but better? Test Plan: {F51153} {F51154} {F51155} Reviewers: btrahan, chad Reviewed By: chad CC: aran Differential Revision: https://secure.phabricator.com/D6533
2024-11-25 16:22:43 +01:00 · 2013-07-23 06:16:19 -07:00 · 2013-07-23 06:16:19 -07:00 · 974997f6bc
commit 974997f6bc
parent 5f78a6953f
15 changed files with 424 additions and 230 deletions
--- a/src/__celerity_resource_map__.php
+++ b/src/__celerity_resource_map__.php
@ -1407,7 +1407,7 @@ celerity_register_resource_map(array(
  ),
  'javelin-behavior-countdown-timer' =>
  array(
-    'uri' => '/res/3c52aac2/rsrc/js/application/countdown/timer.js',
+    'uri' => '/res/13d40efa/rsrc/js/application/countdown/timer.js',
    'type' => 'js',
    'requires' =>
    array(
@ -3100,7 +3100,7 @@ celerity_register_resource_map(array(
  ),
  'phabricator-countdown-css' =>
  array(
-    'uri' => '/res/0f646281/rsrc/css/application/countdown/timer.css',
+    'uri' => '/res/c4a30296/rsrc/css/application/countdown/timer.css',
    'type' => 'css',
    'requires' =>
    array(
--- a/src/__phutil_library_map__.php
+++ b/src/__phutil_library_map__.php
@ -1000,6 +1000,8 @@ phutil_register_library_map(array(
    'PhabricatorCountdownPHIDTypeCountdown' => 'applications/countdown/phid/PhabricatorCountdownPHIDTypeCountdown.php',
    'PhabricatorCountdownQuery' => 'applications/countdown/query/PhabricatorCountdownQuery.php',
    'PhabricatorCountdownRemarkupRule' => 'applications/countdown/remarkup/PhabricatorCountdownRemarkupRule.php',
+    'PhabricatorCountdownSearchEngine' => 'applications/countdown/query/PhabricatorCountdownSearchEngine.php',
+    'PhabricatorCountdownView' => 'applications/countdown/view/PhabricatorCountdownView.php',
    'PhabricatorCountdownViewController' => 'applications/countdown/controller/PhabricatorCountdownViewController.php',
    'PhabricatorCountedToggleButtonsExample' => 'applications/uiexample/examples/PhabricatorCountedToggleButtonsExample.php',
    'PhabricatorCrumbView' => 'view/layout/PhabricatorCrumbView.php',
@ -2995,10 +2997,16 @@ phutil_register_library_map(array(
    'PhabricatorCountdownDAO' => 'PhabricatorLiskDAO',
    'PhabricatorCountdownDeleteController' => 'PhabricatorCountdownController',
    'PhabricatorCountdownEditController' => 'PhabricatorCountdownController',
-    'PhabricatorCountdownListController' => 'PhabricatorCountdownController',
+    'PhabricatorCountdownListController' =>
+    array(
+      0 => 'PhabricatorCountdownController',
+      1 => 'PhabricatorApplicationSearchResultsControllerInterface',
+    ),
    'PhabricatorCountdownPHIDTypeCountdown' => 'PhabricatorPHIDType',
    'PhabricatorCountdownQuery' => 'PhabricatorCursorPagedPolicyAwareQuery',
    'PhabricatorCountdownRemarkupRule' => 'PhabricatorRemarkupRuleObject',
+    'PhabricatorCountdownSearchEngine' => 'PhabricatorApplicationSearchEngine',
+    'PhabricatorCountdownView' => 'AphrontTagView',
    'PhabricatorCountdownViewController' => 'PhabricatorCountdownController',
    'PhabricatorCountedToggleButtonsExample' => 'PhabricatorUIExample',
    'PhabricatorCrumbView' => 'AphrontView',
--- a/src/applications/countdown/application/PhabricatorApplicationCountdown.php
+++ b/src/applications/countdown/application/PhabricatorApplicationCountdown.php
@ -38,7 +38,7 @@ final class PhabricatorApplicationCountdown extends PhabricatorApplication {
  public function getRoutes() {
    return array(
      '/countdown/' => array(
-        ''
+        '(?:query/(?P<queryKey>[^/]+)/)?'
          => 'PhabricatorCountdownListController',
        '(?P<id>[1-9]\d*)/'
          => 'PhabricatorCountdownViewController',
--- a/src/applications/countdown/controller/PhabricatorCountdownController.php
+++ b/src/applications/countdown/controller/PhabricatorCountdownController.php
@ -5,22 +5,27 @@
 */
 abstract class PhabricatorCountdownController extends PhabricatorController {

-  public function buildSideNavView() {
+  public function buildSideNavView($for_app = false) {
    $user = $this->getRequest()->getUser();

    $nav = new AphrontSideNavFilterView();
    $nav->setBaseURI(new PhutilURI($this->getApplicationURI()));

-    $nav->addFilter('', pht('All Countdowns'),
-      $this->getApplicationURI(''));
-    $nav->addFilter('', pht('Create Countdown'),
-      $this->getApplicationURI('edit/'));
+    if ($for_app) {
+      $nav->addFilter('create', pht('Create Countdown'));
+    }
+
+    id(new PhabricatorCountdownSearchEngine())
+      ->setViewer($user)
+      ->addNavigationItems($nav->getMenu());
+
+    $nav->selectFilter(null);

    return $nav;
  }

  public function buildApplicationMenu() {
-    return $this->buildSideNavView()->getMenu();
+    return $this->buildSideNavView($for_app = true)->getMenu();
  }

  public function buildApplicationCrumbs() {
--- a/src/applications/countdown/controller/PhabricatorCountdownDeleteController.php
+++ b/src/applications/countdown/controller/PhabricatorCountdownDeleteController.php
@ -20,6 +20,11 @@ final class PhabricatorCountdownDeleteController
    $countdown = id(new PhabricatorCountdownQuery())
      ->setViewer($user)
      ->withIDs(array($this->id))
+        ->requireCapabilities(
+          array(
+            PhabricatorPolicyCapability::CAN_VIEW,
+            PhabricatorPolicyCapability::CAN_EDIT,
+          ))
      ->executeOne();

    if (!$countdown) {
--- a/src/applications/countdown/controller/PhabricatorCountdownEditController.php
+++ b/src/applications/countdown/controller/PhabricatorCountdownEditController.php
@ -15,25 +15,22 @@ final class PhabricatorCountdownEditController

    $request = $this->getRequest();
    $user = $request->getUser();
-    $action_label = pht('Create Countdown');

    if ($this->id) {
      $countdown = id(new PhabricatorCountdownQuery())
        ->setViewer($user)
        ->withIDs(array($this->id))
+        ->requireCapabilities(
+          array(
+            PhabricatorPolicyCapability::CAN_VIEW,
+            PhabricatorPolicyCapability::CAN_EDIT,
+          ))
        ->executeOne();

      // If no countdown is found
      if (!$countdown) {
        return new Aphront404Response();
      }
-
-      if (($countdown->getAuthorPHID() != $user->getPHID())
-          && $user->getIsAdmin() == false) {
-        return new Aphront403Response();
-      }
-
-      $action_label = pht('Update Countdown');
    } else {
      $countdown = new PhabricatorCountdown();
      $countdown->setEpoch(time());
@ -87,9 +84,31 @@ final class PhabricatorCountdownEditController
      $display_epoch = $request->getStr('epoch');
    }

+    $crumbs = $this->buildApplicationCrumbs();
+
+    $cancel_uri = '/countdown/';
+    if ($countdown->getID()) {
+      $cancel_uri = '/countdown/'.$countdown->getID().'/';
+      $crumbs->addCrumb(
+        id(new PhabricatorCrumbView())
+          ->setName('C'.$countdown->getID())
+          ->setHref($cancel_uri));
+      $crumbs->addCrumb(
+        id(new PhabricatorCrumbView())
+          ->setName(pht('Edit')));
+      $submit_label = pht('Save Changes');
+    } else {
+      $crumbs->addCrumb(
+        id(new PhabricatorCrumbView())
+          ->setName(pht('Create Countdown')));
+      $submit_label = pht('Create Countdown');
+    }
+
+
    $form = id(new AphrontFormView())
      ->setUser($user)
      ->setAction($request->getRequestURI()->getPath())
+      ->setFlexible(true)
      ->appendChild(
        id(new AphrontFormTextControl())
          ->setLabel(pht('Title'))
@ -97,7 +116,7 @@ final class PhabricatorCountdownEditController
          ->setName('title'))
      ->appendChild(
        id(new AphrontFormTextControl())
-          ->setLabel(pht('End date'))
+          ->setLabel(pht('End Date'))
          ->setValue($display_epoch)
          ->setName('epoch')
          ->setCaption(pht('Examples: '.
@ -105,31 +124,20 @@ final class PhabricatorCountdownEditController
            'June 8 2011, 5 PM.')))
      ->appendChild(
        id(new AphrontFormSubmitControl())
-          ->addCancelButton('/countdown/')
-          ->setValue($action_label));
+          ->addCancelButton($cancel_uri)
+          ->setValue($submit_label));

-    $panel = id(new AphrontPanelView())
-      ->setWidth(AphrontPanelView::WIDTH_FORM)
-      ->setHeader($action_label)
-      ->setNoBackground()
-      ->appendChild($form);
-
-    $crumbs = $this
-      ->buildApplicationCrumbs()
-      ->addCrumb(
-        id(new PhabricatorCrumbView())
-          ->setName($action_label)
-          ->setHref($this->getApplicationURI('edit/')));

    return $this->buildApplicationPage(
      array(
        $crumbs,
        $error_view,
-        $panel,
+        $form,
      ),
      array(
        'title' => pht('Edit Countdown'),
        'device' => true,
+        'dust' => true,
      ));
  }
 }
--- a/src/applications/countdown/controller/PhabricatorCountdownListController.php
+++ b/src/applications/countdown/controller/PhabricatorCountdownListController.php
@ -1,107 +1,69 @@
 <?php

-/**
- * @group countdown
- */
 final class PhabricatorCountdownListController
-  extends PhabricatorCountdownController {
+  extends PhabricatorCountdownController
+  implements PhabricatorApplicationSearchResultsControllerInterface {
+
+  private $queryKey;
+
+  public function shouldAllowPublic() {
+    return true;
+  }
+
+  public function willProcessRequest(array $data) {
+    $this->queryKey = idx($data, 'queryKey');
+  }

  public function processRequest() {
-
    $request = $this->getRequest();
-    $user = $request->getUser();
+    $controller = id(new PhabricatorApplicationSearchController($request))
+      ->setQueryKey($this->queryKey)
+      ->setSearchEngine(new PhabricatorCountdownSearchEngine())
+      ->setNavigation($this->buildSideNavView());

-    $pager = new AphrontCursorPagerView();
-    $pager->readFromRequest($request);
+    return $this->delegateToController($controller);
+  }

-    $query = id(new PhabricatorCountdownQuery())
-      ->setViewer($user);
+  public function renderResultsList(
+    array $countdowns,
+    PhabricatorSavedQuery $query) {
+    assert_instances_of($countdowns, 'PhabricatorCountdown');

-    $countdowns = $query->executeWithCursorPager($pager);
+    $viewer = $this->getRequest()->getUser();

-    $phids = mpull($countdowns, 'getAuthorPHID');
-    $handles = $this->loadViewerHandles($phids);
+    $this->loadHandles(mpull($countdowns, 'getAuthorPHID'));

-    $rows = array();
-    foreach ($countdowns as $timer) {
-      $edit_button = null;
-      $delete_button = null;
-      if ($user->getIsAdmin() ||
-          ($user->getPHID() == $timer->getAuthorPHID())) {
-        $edit_button = phutil_tag(
-          'a',
-          array(
-            'class' => 'small button grey',
-            'href' => '/countdown/edit/'.$timer->getID().'/'
-          ),
-          pht('Edit'));

-        $delete_button = javelin_tag(
-          'a',
-          array(
-            'class' => 'small button grey',
-            'href' => '/countdown/delete/'.$timer->getID().'/',
-            'sigil' => 'workflow'
-          ),
-          pht('Delete'));
+    $list = new PhabricatorObjectItemListView();
+    $list->setUser($viewer);
+    foreach ($countdowns as $countdown) {
+      $id = $countdown->getID();
+
+      $item = id(new PhabricatorObjectItemView())
+        ->setObjectName("C{$id}")
+        ->setHeader($countdown->getTitle())
+        ->setHref($this->getApplicationURI("{$id}/"))
+        ->addByline(
+          pht(
+            'Created by %s',
+            $this->getHandle($countdown->getAuthorPHID())->renderLink()));
+
+      $epoch = $countdown->getEpoch();
+      if ($epoch >= time()) {
+        $item->addIcon(
+          'none',
+          pht('Ends %s', phabricator_datetime($epoch, $viewer)));
+      } else {
+        $item->addIcon(
+          'delete',
+          pht('Ended %s', phabricator_datetime($epoch, $viewer)));
+        $item->setDisabled(true);
      }
-      $rows[] = array(
-        $timer->getID(),
-        $handles[$timer->getAuthorPHID()]->renderLink(),
-        phutil_tag(
-          'a',
-          array(
-            'href' => '/countdown/'.$timer->getID().'/',
-          ),
-          $timer->getTitle()),
-        phabricator_datetime($timer->getEpoch(), $user),
-        $edit_button,
-        $delete_button,
-      );
+
+      $list->addItem($item);
    }

-    $table = new AphrontTableView($rows);
-    $table->setHeaders(
-      array(
-        pht('ID'),
-        pht('Author'),
-        pht('Title'),
-        pht('End Date'),
-        '',
-        ''
-      ));
-
-    $table->setColumnClasses(
-      array(
-        null,
-        null,
-        'wide pri',
-        null,
-        'action',
-        'action',
-      ));
-
-    $panel = id(new AphrontPanelView())
-      ->appendChild($table)
-      ->setHeader(pht('Countdowns'))
-      ->setNoBackground()
-      ->appendChild($pager);
-
-    $crumbs = $this
-      ->buildApplicationCrumbs()
-      ->addCrumb(
-        id(new PhabricatorCrumbView())
-          ->setName(pht('All Countdowns'))
-          ->setHref($this->getApplicationURI()));
-
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
-        $panel
-      ),
-      array(
-        'title' => pht('Countdown'),
-        'device' => true,
-      ));
+    return $list;
  }
+
 }
--- a/src/applications/countdown/controller/PhabricatorCountdownViewController.php
+++ b/src/applications/countdown/controller/PhabricatorCountdownViewController.php
@ -27,72 +27,90 @@ final class PhabricatorCountdownViewController
      return new Aphront404Response();
    }

-    require_celerity_resource('phabricator-countdown-css');
+    $countdown_view = id(new PhabricatorCountdownView())
+      ->setUser($user)
+      ->setCountdown($countdown)
+      ->setHeadless(true);

-    $chrome_visible = $request->getBool('chrome', true);
-    $chrome_new = $chrome_visible ? false : null;
-    $chrome_link = phutil_tag(
-      'a',
-      array(
-        'href' => $request->getRequestURI()->alter('chrome', $chrome_new),
-        'class' => 'phabricator-timer-chrome-link',
-      ),
-      $chrome_visible ? pht('Disable Chrome') : pht('Enable Chrome'));
-
-    $container = celerity_generate_unique_node_id();
-    $content = hsprintf(
-      '<div class="phabricator-timer" id="%s">
-        <h1 class="phabricator-timer-header">%s &middot; %s</h1>
-        <div class="phabricator-timer-pane">
-          <table class="phabricator-timer-table">
-            <tr>
-              <th>%s</th>
-              <th>%s</th>
-              <th>%s</th>
-              <th>%s</th>
-            </tr>
-            <tr>%s%s%s%s</tr>
-          </table>
-        </div>
-        %s
-      </div>',
-      $container,
-      $countdown->getTitle(),
-      phabricator_datetime($countdown->getEpoch(), $user),
-      pht('Days'),
-      pht('Hours'),
-      pht('Minutes'),
-      pht('Seconds'),
-      javelin_tag('td', array('sigil' => 'phabricator-timer-days'), ''),
-      javelin_tag('td', array('sigil' => 'phabricator-timer-hours'), ''),
-      javelin_tag('td', array('sigil' => 'phabricator-timer-minutes'), ''),
-      javelin_tag('td', array('sigil' => 'phabricator-timer-seconds'), ''),
-      $chrome_link);
-
-    Javelin::initBehavior('countdown-timer', array(
-      'timestamp' => $countdown->getEpoch(),
-      'container' => $container,
-    ));
-
-    $panel = $content;
+    $id = $countdown->getID();
+    $title = $countdown->getTitle();

    $crumbs = $this
      ->buildApplicationCrumbs()
      ->addCrumb(
        id(new PhabricatorCrumbView())
-          ->setName($countdown->getTitle())
-          ->setHref($this->getApplicationURI($this->id.'/')));
+          ->setName("C{$id}"));
+
+    $header = id(new PhabricatorHeaderView())
+      ->setHeader($title);
+
+    $actions = $this->buildActionListView($countdown);
+    $properties = $this->buildPropertyListView($countdown);
+
+    $content = array(
+      $crumbs,
+      $header,
+      $actions,
+      $properties,
+      $countdown_view,
+    );

    return $this->buildApplicationPage(
+      $content,
      array(
-        ($chrome_visible ? $crumbs : ''),
-        $panel,
-      ),
-      array(
-        'title' => pht('Countdown: %s', $countdown->getTitle()),
-        'chrome' => $chrome_visible,
+        'title' => $title,
        'device' => true,
+        'dust' => true,
      ));
  }

+  private function buildActionListView(PhabricatorCountdown $countdown) {
+    $request = $this->getRequest();
+    $viewer = $request->getUser();
+
+    $id = $countdown->getID();
+
+    $view = id(new PhabricatorActionListView())
+      ->setUser($viewer);
+
+    $can_edit = PhabricatorPolicyFilter::hasCapability(
+      $viewer,
+      $countdown,
+      PhabricatorPolicyCapability::CAN_EDIT);
+
+    $view->addAction(
+      id(new PhabricatorActionView())
+        ->setIcon('edit')
+        ->setName(pht('Edit Countdown'))
+        ->setHref($this->getApplicationURI("edit/{$id}/"))
+        ->setDisabled(!$can_edit)
+        ->setWorkflow(!$can_edit));
+
+    $view->addAction(
+      id(new PhabricatorActionView())
+        ->setIcon('delete')
+        ->setName(pht('Delete Countdown'))
+        ->setHref($this->getApplicationURI("delete/{$id}/"))
+        ->setDisabled(!$can_edit)
+        ->setWorkflow(true));
+
+    return $view;
+  }
+
+  private function buildPropertyListView(PhabricatorCountdown $countdown) {
+    $request = $this->getRequest();
+    $viewer = $request->getUser();
+
+    $this->loadHandles(array($countdown->getAuthorPHID()));
+
+    $view = id(new PhabricatorPropertyListView())
+      ->setUser($viewer);
+
+    $view->addProperty(
+      pht('Author'),
+      $this->getHandle($countdown->getAuthorPHID())->renderLink());
+
+    return $view;
+  }
+
 }
--- a/src/applications/countdown/query/PhabricatorCountdownQuery.php
+++ b/src/applications/countdown/query/PhabricatorCountdownQuery.php
@ -9,6 +9,7 @@ final class PhabricatorCountdownQuery
  private $ids;
  private $phids;
  private $authorPHIDs;
+  private $upcoming;

  public function withIDs(array $ids) {
    $this->ids = $ids;
@ -25,6 +26,11 @@ final class PhabricatorCountdownQuery
    return $this;
  }

+  public function withUpcoming($upcoming) {
+    $this->upcoming = true;
+    return $this;
+  }
+
  protected function loadPage() {
    $table = new PhabricatorCountdown();
    $conn_r = $table->establishConnection('r');
@ -69,6 +75,13 @@ final class PhabricatorCountdownQuery
        $this->authorPHIDs);
    }

+    if ($this->upcoming) {
+      $where[] = qsprintf(
+        $conn_r,
+        'epoch >= %d',
+        time());
+    }
+
    return $this->formatWhereClause($where);
  }

--- a/src/applications/countdown/query/PhabricatorCountdownSearchEngine.php
+++ b/src/applications/countdown/query/PhabricatorCountdownSearchEngine.php
@ -0,0 +1,96 @@
+<?php
+
+final class PhabricatorCountdownSearchEngine
+  extends PhabricatorApplicationSearchEngine {
+
+  public function buildSavedQueryFromRequest(AphrontRequest $request) {
+    $saved = new PhabricatorSavedQuery();
+    $saved->setParameter(
+      'authorPHIDs',
+      array_values($request->getArr('authors')));
+
+    $saved->setParameter('upcoming', $request->getBool('upcoming'));
+
+    return $saved;
+  }
+
+  public function buildQueryFromSavedQuery(PhabricatorSavedQuery $saved) {
+    $query = id(new PhabricatorCountdownQuery());
+
+    $author_phids = $saved->getParameter('authorPHIDs', array());
+    if ($author_phids) {
+      $query->withAuthorPHIDs($author_phids);
+    }
+
+    if ($saved->getParameter('upcoming')) {
+      $query->withUpcoming(true);
+    }
+
+    return $query;
+  }
+
+  public function buildSearchForm(
+    AphrontFormView $form,
+    PhabricatorSavedQuery $saved_query) {
+    $phids = $saved_query->getParameter('authorPHIDs', array());
+    $handles = id(new PhabricatorObjectHandleData($phids))
+      ->setViewer($this->requireViewer())
+      ->loadHandles();
+    $author_tokens = mpull($handles, 'getFullName', 'getPHID');
+
+    $upcoming = $saved_query->getParameter('upcoming');
+
+    $form
+      ->appendChild(
+        id(new AphrontFormTokenizerControl())
+          ->setDatasource('/typeahead/common/users/')
+          ->setName('authors')
+          ->setLabel(pht('Authors'))
+          ->setValue($author_tokens))
+      ->appendChild(
+        id(new AphrontFormCheckboxControl())
+          ->addCheckbox(
+            'upcoming',
+            1,
+            pht('Show only countdowns that are still counting down.'),
+            $upcoming));
+
+  }
+
+  protected function getURI($path) {
+    return '/countdown/'.$path;
+  }
+
+  public function getBuiltinQueryNames() {
+    $names = array(
+      'upcoming' => pht('Upcoming'),
+      'all' => pht('All'),
+    );
+
+    if ($this->requireViewer()->getPHID()) {
+      $names['authored'] = pht('Authored');
+    }
+
+    return $names;
+  }
+
+  public function buildSavedQueryFromBuiltin($query_key) {
+
+    $query = $this->newSavedQuery();
+    $query->setQueryKey($query_key);
+
+    switch ($query_key) {
+      case 'all':
+        return $query;
+      case 'authored':
+        return $query->setParameter(
+          'authorPHIDs',
+          array($this->requireViewer()->getPHID()));
+      case 'upcoming':
+        return $query->setParameter('upcoming', true);
+    }
+
+    return parent::buildSavedQueryFromBuiltin($query_key);
+  }
+
+}
--- a/src/applications/countdown/remarkup/PhabricatorCountdownRemarkupRule.php
+++ b/src/applications/countdown/remarkup/PhabricatorCountdownRemarkupRule.php
@ -19,27 +19,11 @@ final class PhabricatorCountdownRemarkupRule
  }

  protected function renderObjectEmbed($object, $handle, $options) {
-    require_celerity_resource('javelin-behavior-countdown-timer');
+    $viewer = $this->getEngine()->getConfig('viewer');

-    $prefix = 'phabricator-timer-';
-    $counter = phutil_tag(
-      'span',
-      array(
-        'id' => $object->getPHID(),
-      ),
-      array(
-        javelin_tag('span', array('sigil' => $prefix.'days'), ''), 'd',
-        javelin_tag('span', array('sigil' => $prefix.'hours'), ''), 'h',
-        javelin_tag('span', array('sigil' => $prefix.'minutes'), ''), 'm',
-        javelin_tag('span', array('sigil' => $prefix.'seconds'), ''), 's',
-      ));
-
-    Javelin::initBehavior('countdown-timer', array(
-      'timestamp' => $object->getEpoch(),
-      'container' => $object->getPHID(),
-    ));
-
-    return $counter;
+    return id(new PhabricatorCountdownView())
+      ->setCountdown($object)
+      ->setUser($viewer);
  }

 }
--- a/src/applications/countdown/storage/PhabricatorCountdown.php
+++ b/src/applications/countdown/storage/PhabricatorCountdown.php
@ -29,11 +29,14 @@ final class PhabricatorCountdown
    return PhabricatorPolicies::POLICY_USER;
  }

-/* -(  PhabricatorPolicyInterface Implementation  )------------------------- */
+
+/* -(  PhabricatorPolicyInterface  )----------------------------------------- */
+

  public function getCapabilities() {
    return array(
-      PhabricatorPolicyCapability::CAN_VIEW
+      PhabricatorPolicyCapability::CAN_VIEW,
+      PhabricatorPolicyCapability::CAN_EDIT,
    );
  }

@ -41,6 +44,8 @@ final class PhabricatorCountdown
    switch ($capability) {
      case PhabricatorPolicyCapability::CAN_VIEW:
        return $this->getViewPolicy();
+      case PhabricatorPolicyCapability::CAN_EDIT:
+        return PhabricatorPolicies::POLICY_NOONE;
    }
  }

--- a/src/applications/countdown/view/PhabricatorCountdownView.php
+++ b/src/applications/countdown/view/PhabricatorCountdownView.php
@ -0,0 +1,78 @@
+<?php
+
+final class PhabricatorCountdownView extends AphrontTagView {
+
+  private $countdown;
+  private $headless;
+
+
+  public function setHeadless($headless) {
+    $this->headless = $headless;
+    return $this;
+  }
+
+  public function setCountdown(PhabricatorCountdown $countdown) {
+    $this->countdown = $countdown;
+    return $this;
+  }
+
+
+  public function getTagContent() {
+    $countdown = $this->countdown;
+
+    require_celerity_resource('phabricator-countdown-css');
+
+    $header = null;
+    if (!$this->headless) {
+      $header = phutil_tag(
+        'div',
+        array(
+          'class' => 'phabricator-timer-header',
+        ),
+        array(
+          "C".$countdown->getID(),
+          ' ',
+          phutil_tag(
+            'a',
+            array(
+              'href' => '/countdown/'.$countdown->getID(),
+            ),
+            $countdown->getTitle()),
+        ));
+    }
+
+
+    $container = celerity_generate_unique_node_id();
+    $content = hsprintf(
+      '<div class="phabricator-timer" id="%s">
+        %s
+        <table class="phabricator-timer-table">
+          <tr>
+            <th>%s</th>
+            <th>%s</th>
+            <th>%s</th>
+            <th>%s</th>
+          </tr>
+          <tr>%s%s%s%s</tr>
+        </table>
+      </div>',
+      $container,
+      $header,
+      pht('Days'),
+      pht('Hours'),
+      pht('Minutes'),
+      pht('Seconds'),
+      javelin_tag('td', array('sigil' => 'phabricator-timer-days'), '-'),
+      javelin_tag('td', array('sigil' => 'phabricator-timer-hours'), '-'),
+      javelin_tag('td', array('sigil' => 'phabricator-timer-minutes'), '-'),
+      javelin_tag('td', array('sigil' => 'phabricator-timer-seconds'), '-'));
+
+    Javelin::initBehavior('countdown-timer', array(
+      'timestamp' => $countdown->getEpoch(),
+      'container' => $container,
+    ));
+
+    return $content;
+  }
+
+}
--- a/webroot/rsrc/css/application/countdown/timer.css
+++ b/webroot/rsrc/css/application/countdown/timer.css
@ -3,29 +3,33 @@
 */

 .phabricator-timer {
-  width: 80%;
-  margin: 0 auto;
-  margin-top: 2em;
-  margin-bottom: 2em;
-  background: #efefef;
-  border-top: 1px solid #cccccc;
+  width: 90%;
+  margin: 12px auto;
+  border: 1px solid #666666;
+  border-radius: 4px;
+  background: #ffffff;
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+.phabricator-remarkup .phabricator-timer {
+  width: 300px;
 }

 .phabricator-timer-header {
-  padding: 8px;
-  background: #dfdfdf;
-}
-
-.phabricator-timer-pane {
-  padding: 8px 2em;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 4px 8px;
+  background: #f0f0f0;
+  border-radius: 4px 4px 0 0;
+  border-bottom: 1px solid #d7d7d7;
 }

 .phabricator-timer-table {
  width: 100%;
+  margin: 8px 0;
 }

 .phabricator-timer-table th {
-  font-weight: bold;
  text-align: center;
  color: #666666;
  width: 10%;
@ -35,11 +39,13 @@
 .phabricator-timer-table td {
  padding: 4px;
  text-align: center;
-  font-size: 4em;
+  font-size: 36px;
+  overflow: hidden;
+  line-height: auto;
+  height: auto;
+  line-height: 36px;
 }

-.phabricator-timer-chrome-link {
-  float: right;
-  padding: 3px 6px;
-  font-size: 11px;
+.phabricator-timer-table small {
+  color: #999999;
 }
--- a/webroot/rsrc/js/application/countdown/timer.js
+++ b/webroot/rsrc/js/application/countdown/timer.js
@ -19,29 +19,35 @@ JX.behavior('countdown-timer', function(config) {
    var hours = 0;
    var minutes = 0;
    var seconds = 0;
+    var partial = 0;

-    var current_timestamp = Math.round(new Date() / 1000);
-    var delta = config.timestamp - current_timestamp;
+    var current_timestamp = +new Date();
+
+    var delta = (config.timestamp * 1000) - current_timestamp;

    if (delta > 0) {
-      days = Math.floor(delta/86400);
-      delta -= days * 86400;
+      days = Math.floor(delta / 86400000);
+      delta -= days * 86400000;

-      hours = Math.floor(delta/3600);
-      delta -= hours * 3600;
+      hours = Math.floor(delta / 3600000);
+      delta -= hours * 3600000;

-      minutes = Math.floor(delta / 60);
-      delta -= minutes * 60;
+      minutes = Math.floor(delta / 60000);
+      delta -= minutes * 60000;

-      seconds = delta;
+      seconds = Math.floor(delta / 1000);
+      delta -= seconds * 1000;

-      setTimeout(calculateTimeLeft, 1000);
+      partial = Math.floor(delta / 100) || '0';
+
+      setTimeout(calculateTimeLeft, 100);
    }

    setComponent('days', days);
    setComponent('hours', hours);
    setComponent('minutes', minutes);
-    setComponent('seconds', seconds);
+    setComponent('seconds', [seconds, JX.$N('small', {}, ['.', partial])]);
  }
+
 });