Give Phriction a real dropdown

Summary:
Fixes T8150. Small generalization:

  - Timeline has a dropdown with no special logic; make that generic.
  - Use it in Phriction.

Test Plan:
  - Used Phriction dropdown on desktop and mobile.
  - Used timeline dropdown.

Reviewers: btrahan

Reviewed By: btrahan

Subscribers: epriestley

Maniphest Tasks: T8150

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

resources/celerity/map.php

@@ -7,8 +7,8 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '79e995d7',
+    'core.pkg.css' => 'e3ba62e8',
-    'core.pkg.js' => 'a2f2598e',
+    'core.pkg.js' => '328799d0',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'bb338e4b',
     'differential.pkg.js' => '45b3b51d',
@@ -38,7 +38,6 @@ return array(
     'rsrc/css/application/base/notification-menu.css' => '3c9d8aa1',
     'rsrc/css/application/base/phabricator-application-launch-view.css' => '16ca323f',
     'rsrc/css/application/base/standard-page-view.css' => '61e68a55',
-    'rsrc/css/application/calendar/calendar-icon.css' => '98ce946d',
     'rsrc/css/application/chatlog/chatlog.css' => '852140ff',
     'rsrc/css/application/conduit/conduit-api.css' => '7bc725c4',
     'rsrc/css/application/config/config-options.css' => '7fedf08b',
@@ -46,7 +45,7 @@ return array(
     'rsrc/css/application/config/config-welcome.css' => '6abd79be',
     'rsrc/css/application/config/setup-issue.css' => '22270af2',
     'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
-    'rsrc/css/application/conpherence/durable-column.css' => '8c43d6ac',
+    'rsrc/css/application/conpherence/durable-column.css' => '4331cbe9',
     'rsrc/css/application/conpherence/menu.css' => 'f389e048',
     'rsrc/css/application/conpherence/message-pane.css' => '5bb4b76d',
     'rsrc/css/application/conpherence/notification.css' => '919974b6',
@@ -472,8 +471,8 @@ return array(
     'rsrc/js/core/behavior-watch-anchor.js' => '9f36c42d',
     'rsrc/js/core/behavior-workflow.js' => '0a3f3021',
     'rsrc/js/core/phtize.js' => 'd254d646',
+    'rsrc/js/phui/behavior-phui-dropdown-menu.js' => '54733475',
     'rsrc/js/phui/behavior-phui-object-box-tabs.js' => '2bfa2836',
-    'rsrc/js/phui/behavior-phui-timeline-dropdown-menu.js' => '4d94d9c3',
     'rsrc/js/phuix/PHUIXActionListView.js' => 'b5c256b8',
     'rsrc/js/phuix/PHUIXActionView.js' => '8cf6d262',
     'rsrc/js/phuix/PHUIXDropdownMenu.js' => 'bd4c8dca',
@@ -493,12 +492,11 @@ return array(
     'aphront-two-column-view-css' => '16ab3ad2',
     'aphront-typeahead-control-css' => '0e403212',
     'auth-css' => '44975d4b',
-    'calendar-icon-css' => '98ce946d',
     'changeset-view-manager' => '58562350',
     'conduit-api-css' => '7bc725c4',
     'config-options-css' => '7fedf08b',
     'config-welcome-css' => '6abd79be',
-    'conpherence-durable-column-view' => '8c43d6ac',
+    'conpherence-durable-column-view' => '4331cbe9',
     'conpherence-menu-css' => 'f389e048',
     'conpherence-message-pane-css' => '5bb4b76d',
     'conpherence-notification-css' => '919974b6',
@@ -618,8 +616,8 @@ return array(
     'javelin-behavior-phame-post-preview' => 'be807912',
     'javelin-behavior-pholio-mock-edit' => '246dc085',
     'javelin-behavior-pholio-mock-view' => 'fbe497e7',
+    'javelin-behavior-phui-dropdown-menu' => '54733475',
     'javelin-behavior-phui-object-box-tabs' => '2bfa2836',
-    'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
     'javelin-behavior-policy-control' => '9a340b3d',
     'javelin-behavior-policy-rule-editor' => '5e9f347c',
     'javelin-behavior-ponder-votebox' => '4e9b766b',
@@ -1135,12 +1133,6 @@ return array(
     '4cebc641' => array(
       'javelin-install',
     ),
-    '4d94d9c3' => array(
-      'javelin-behavior',
-      'javelin-stratcom',
-      'javelin-dom',
-      'phuix-dropdown-menu',
-    ),
     '4e3e79a6' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1175,6 +1167,12 @@ return array(
       'javelin-leader',
       'javelin-json',
     ),
+    54733475 => array(
+      'javelin-behavior',
+      'javelin-stratcom',
+      'javelin-dom',
+      'phuix-dropdown-menu',
+    ),
     '54b612ba' => array(
       'javelin-color',
       'javelin-install',
@@ -2147,7 +2145,7 @@ return array(
       'phabricator-draggable-list',
       'javelin-behavior-phabricator-transaction-list',
       'javelin-behavior-phabricator-show-older-transactions',
-      'javelin-behavior-phui-timeline-dropdown-menu',
+      'javelin-behavior-phui-dropdown-menu',
       'javelin-behavior-doorkeeper-tag',
       'phabricator-title',
       'javelin-leader',

resources/celerity/packages.php

@@ -66,7 +66,7 @@ return array(
     'phabricator-draggable-list',
     'javelin-behavior-phabricator-transaction-list',
     'javelin-behavior-phabricator-show-older-transactions',
-    'javelin-behavior-phui-timeline-dropdown-menu',
+    'javelin-behavior-phui-dropdown-menu',
     'javelin-behavior-doorkeeper-tag',
     'phabricator-title',
     'javelin-leader',

src/applications/phriction/controller/PhrictionDocumentController.php

@@ -192,10 +192,19 @@ final class PhrictionDocumentController
       $crumbs->addCrumb($view);
     }
 
+    $action_button = id(new PHUIButtonView())
+      ->setTag('a')
+      ->setText(pht('Actions'))
+      ->setHref('#')
+      ->setIconFont('fa-bars')
+      ->addClass('phui-mobile-menu')
+      ->setDropdownMenu($actions);
+
     $header = id(new PHUIHeaderView())
       ->setUser($user)
       ->setPolicyObject($document)
-      ->setHeader($page_title);
+      ->setHeader($page_title)
+      ->addActionLink($action_button);
 
     if ($content) {
       $header->setEpoch($content->getDateCreated());
@@ -206,16 +215,12 @@ final class PhrictionDocumentController
       $prop_list = new PHUIPropertyGroupView();
       $prop_list->addPropertyList($properties);
     }
-    $action_id = celerity_generate_unique_node_id();
-    $actions->setID($action_id);
 
     $page_content = id(new PHUIDocumentView())
       ->setFontKit(PHUIDocumentView::FONT_SOURCE_SANS)
       ->setHeader($header)
-      ->setActionListID($action_id)
       ->appendChild(
         array(
-          $actions,
           $prop_list,
           $version_note,
           $move_notice,

src/view/phui/PHUIButtonView.php

@@ -103,6 +103,18 @@ final class PHUIButtonView extends AphrontTagView {
     return $this->tag;
   }
 
+  public function setDropdownMenu(PhabricatorActionListView $actions) {
+    Javelin::initBehavior('phui-dropdown-menu');
+
+    $this->addSigil('phui-dropdown-menu');
+    $this->setMetadata(
+      array(
+        'items' => $actions,
+      ));
+
+    return $this;
+  }
+
   protected function getTagAttributes() {
 
     require_celerity_resource('phui-button-css');

src/view/phui/PHUIDocumentView.php

@@ -16,7 +16,6 @@ final class PHUIDocumentView extends AphrontTagView {
   private $bookdescription;
   private $mobileview;
   private $fontKit;
-  private $actionListID;
   private $fluid;
 
   public function setOffset($offset) {
@@ -59,11 +58,6 @@ final class PHUIDocumentView extends AphrontTagView {
     return $this;
   }
 
-  public function setActionListID($id) {
-    $this->actionListID = $id;
-    return $this;
-  }
-
   public function setFluid($fluid) {
     $this->fluid = $fluid;
     return $this;
@@ -166,28 +160,6 @@ final class PHUIDocumentView extends AphrontTagView {
       $main_content = $this->renderChildren();
     }
 
-    if ($this->actionListID) {
-      $icon_id = celerity_generate_unique_node_id();
-      $icon = id(new PHUIIconView())
-        ->setIconFont('fa-bars');
-      $meta = array(
-        'map' => array(
-          $this->actionListID => 'phabricator-action-list-toggle',
-          $icon_id => 'phuix-dropdown-open',
-        ),
-      );
-      $mobile_menu = id(new PHUIButtonView())
-        ->setTag('a')
-        ->setText(pht('Actions'))
-        ->setHref('#')
-        ->setIcon($icon)
-        ->addClass('phui-mobile-menu')
-        ->setID($icon_id)
-        ->addSigil('jx-toggle-class')
-        ->setMetadata($meta);
-      $this->header->addActionLink($mobile_menu);
-    }
-
     $content_inner = phutil_tag(
         'div',
         array(

src/view/phui/PHUITimelineEventView.php

@@ -290,8 +290,8 @@ final class PHUITimelineEventView extends AphrontView {
         pht('Comment Actions'));
 
       if ($items) {
-        $sigil = 'phui-timeline-menu';
+        $sigil = 'phui-dropdown-menu';
-        Javelin::initBehavior('phui-timeline-dropdown-menu');
+        Javelin::initBehavior('phui-dropdown-menu');
       } else {
         $sigil = null;
       }

webroot/rsrc/js/phui/behavior-phui-dropdown-menu.js

@@ -1,15 +1,15 @@
 /**
- * @provides javelin-behavior-phui-timeline-dropdown-menu
+ * @provides javelin-behavior-phui-dropdown-menu
  * @requires javelin-behavior
  *           javelin-stratcom
  *           javelin-dom
  *           phuix-dropdown-menu
  */
 
-JX.behavior('phui-timeline-dropdown-menu', function() {
+JX.behavior('phui-dropdown-menu', function() {
 
-  JX.Stratcom.listen('click', 'phui-timeline-menu', function(e) {
+  JX.Stratcom.listen('click', 'phui-dropdown-menu', function(e) {
-    var data = e.getNodeData('phui-timeline-menu');
+    var data = e.getNodeData('phui-dropdown-menu');
     if (data.menu) {
       return;
     }
@@ -18,7 +18,7 @@ JX.behavior('phui-timeline-dropdown-menu', function() {
 
     var list = JX.$H(data.items).getFragment().firstChild;
 
-    var icon = e.getNode('phui-timeline-menu');
+    var icon = e.getNode('phui-dropdown-menu');
     data.menu = new JX.PHUIXDropdownMenu(icon);
     data.menu.setContent(list);
     data.menu.open();