Add a basic tooltip UI element

Summary: There are a few things we can improve with tooltips.

Test Plan: Moused over all the stuff on the test page.

Reviewers: btrahan

Reviewed By: btrahan

CC: aran, epriestley

Maniphest Tasks: T965

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

src/__celerity_resource_map__.php

@@ -152,6 +152,15 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/aphront/tokenizer.css',
   ),
+  'aphront-tooltip-css' =>
+  array(
+    'uri' => '/res/6bbfd9dd/rsrc/css/aphront/tooltip.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+    'disk' => '/rsrc/css/aphront/tooltip.css',
+  ),
   'aphront-typeahead-control-css' =>
   array(
     'uri' => '/res/311e8830/rsrc/css/aphront/typeahead.css',
@@ -250,7 +259,7 @@ celerity_register_resource_map(array(
   ),
   'differential-table-of-contents-css' =>
   array(
-    'uri' => '/res/a633259f/rsrc/css/application/differential/table-of-contents.css',
+    'uri' => '/res/2a4137ef/rsrc/css/application/differential/table-of-contents.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -828,6 +837,18 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/js/application/core/behavior-object-selector.js',
   ),
+  'javelin-behavior-phabricator-tooltips' =>
+  array(
+    'uri' => '/res/49f92a92/rsrc/js/application/core/behavior-tooltip.js',
+    'type' => 'js',
+    'requires' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-stratcom',
+      2 => 'phabricator-tooltip',
+    ),
+    'disk' => '/rsrc/js/application/core/behavior-tooltip.js',
+  ),
   'javelin-behavior-phabricator-watch-anchor' =>
   array(
     'uri' => '/res/880e3de4/rsrc/js/application/core/behavior-watch-anchor.js',
@@ -1604,6 +1625,17 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/js/application/core/PasteFileUpload.js',
   ),
+  0 =>
+  array(
+    'uri' => '/res/b6096fdd/rsrc/js/javelin/lib/__tests__/URI.js',
+    'type' => 'js',
+    'requires' =>
+    array(
+      0 => 'javelin-uri',
+      1 => 'javelin-php-serializer',
+    ),
+    'disk' => '/rsrc/js/javelin/lib/__tests__/URI.js',
+  ),
   'phabricator-prefab' =>
   array(
     'uri' => '/res/956c8474/rsrc/js/application/core/Prefab.js',
@@ -1689,6 +1721,19 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/application/base/standard-page-view.css',
   ),
+  'phabricator-tooltip' =>
+  array(
+    'uri' => '/res/bcddf5de/rsrc/js/application/core/ToolTip.js',
+    'type' => 'js',
+    'requires' =>
+    array(
+      0 => 'javelin-install',
+      1 => 'javelin-util',
+      2 => 'javelin-dom',
+      3 => 'javelin-vector',
+    ),
+    'disk' => '/rsrc/js/application/core/ToolTip.js',
+  ),
   'phabricator-transaction-view-css' =>
   array(
     'uri' => '/res/731959fb/rsrc/css/aphront/transaction.css',
@@ -1903,17 +1948,6 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/css/core/syntax.css',
   ),
-  0 =>
-  array(
-    'uri' => '/res/b6096fdd/rsrc/js/javelin/lib/__tests__/URI.js',
-    'type' => 'js',
-    'requires' =>
-    array(
-      0 => 'javelin-uri',
-      1 => 'javelin-php-serializer',
-    ),
-    'disk' => '/rsrc/js/javelin/lib/__tests__/URI.js',
-  ),
 ), array(
   'packages' =>
   array(
@@ -1933,6 +1967,62 @@ celerity_register_resource_map(array(
       'uri' => '/res/pkg/2af849fb/typeahead.pkg.js',
       'type' => 'js',
     ),
+    31583232 =>
+    array(
+      'name' => 'maniphest.pkg.css',
+      'symbols' =>
+      array(
+        0 => 'maniphest-task-summary-css',
+        1 => 'maniphest-transaction-detail-css',
+        2 => 'maniphest-task-detail-css',
+        3 => 'aphront-attached-file-view-css',
+      ),
+      'uri' => '/res/pkg/31583232/maniphest.pkg.css',
+      'type' => 'css',
+    ),
+    95944588 =>
+    array(
+      'name' => 'core.pkg.js',
+      'symbols' =>
+      array(
+        0 => 'javelin-mask',
+        1 => 'javelin-workflow',
+        2 => 'javelin-behavior-workflow',
+        3 => 'javelin-behavior-aphront-form-disable-on-submit',
+        4 => 'phabricator-keyboard-shortcut-manager',
+        5 => 'phabricator-keyboard-shortcut',
+        6 => 'javelin-behavior-phabricator-keyboard-shortcuts',
+        7 => 'javelin-behavior-refresh-csrf',
+        8 => 'javelin-behavior-phabricator-watch-anchor',
+        9 => 'javelin-behavior-phabricator-autofocus',
+        10 => 'phabricator-paste-file-upload',
+        11 => 'phabricator-menu-item',
+        12 => 'phabricator-dropdown-menu',
+      ),
+      'uri' => '/res/pkg/95944588/core.pkg.js',
+      'type' => 'js',
+    ),
+    '400e80d0' =>
+    array(
+      'name' => 'differential.pkg.css',
+      'symbols' =>
+      array(
+        0 => 'differential-core-view-css',
+        1 => 'differential-changeset-view-css',
+        2 => 'differential-revision-detail-css',
+        3 => 'differential-revision-history-css',
+        4 => 'differential-table-of-contents-css',
+        5 => 'differential-revision-comment-css',
+        6 => 'differential-revision-add-comment-css',
+        7 => 'differential-revision-comment-list-css',
+        8 => 'phabricator-object-selector-css',
+        9 => 'aphront-headsup-action-list-view-css',
+        10 => 'phabricator-content-source-view-css',
+        11 => 'differential-local-commits-view-css',
+      ),
+      'uri' => '/res/pkg/400e80d0/differential.pkg.css',
+      'type' => 'css',
+    ),
     '4fbae2af' =>
     array(
       'name' => 'javelin.pkg.js',
@@ -2003,27 +2093,6 @@ celerity_register_resource_map(array(
       'uri' => '/res/pkg/86fc0b0c/maniphest.pkg.js',
       'type' => 'js',
     ),
-    '9d02b654' =>
-    array(
-      'name' => 'differential.pkg.css',
-      'symbols' =>
-      array(
-        0 => 'differential-core-view-css',
-        1 => 'differential-changeset-view-css',
-        2 => 'differential-revision-detail-css',
-        3 => 'differential-revision-history-css',
-        4 => 'differential-table-of-contents-css',
-        5 => 'differential-revision-comment-css',
-        6 => 'differential-revision-add-comment-css',
-        7 => 'differential-revision-comment-list-css',
-        8 => 'phabricator-object-selector-css',
-        9 => 'aphront-headsup-action-list-view-css',
-        10 => 'phabricator-content-source-view-css',
-        11 => 'differential-local-commits-view-css',
-      ),
-      'uri' => '/res/pkg/9d02b654/differential.pkg.css',
-      'type' => 'css',
-    ),
     'ffca9dae' =>
     array(
       'name' => 'differential.pkg.js',
@@ -2050,41 +2119,6 @@ celerity_register_resource_map(array(
       'uri' => '/res/pkg/ffca9dae/differential.pkg.js',
       'type' => 'js',
     ),
-    31583232 =>
-    array(
-      'name' => 'maniphest.pkg.css',
-      'symbols' =>
-      array(
-        0 => 'maniphest-task-summary-css',
-        1 => 'maniphest-transaction-detail-css',
-        2 => 'maniphest-task-detail-css',
-        3 => 'aphront-attached-file-view-css',
-      ),
-      'uri' => '/res/pkg/31583232/maniphest.pkg.css',
-      'type' => 'css',
-    ),
-    95944588 =>
-    array(
-      'name' => 'core.pkg.js',
-      'symbols' =>
-      array(
-        0 => 'javelin-mask',
-        1 => 'javelin-workflow',
-        2 => 'javelin-behavior-workflow',
-        3 => 'javelin-behavior-aphront-form-disable-on-submit',
-        4 => 'phabricator-keyboard-shortcut-manager',
-        5 => 'phabricator-keyboard-shortcut',
-        6 => 'javelin-behavior-phabricator-keyboard-shortcuts',
-        7 => 'javelin-behavior-refresh-csrf',
-        8 => 'javelin-behavior-phabricator-watch-anchor',
-        9 => 'javelin-behavior-phabricator-autofocus',
-        10 => 'phabricator-paste-file-upload',
-        11 => 'phabricator-menu-item',
-        12 => 'phabricator-dropdown-menu',
-      ),
-      'uri' => '/res/pkg/95944588/core.pkg.js',
-      'type' => 'js',
-    ),
   ),
   'reverse' =>
   array(
@@ -2092,7 +2126,7 @@ celerity_register_resource_map(array(
     'aphront-crumbs-view-css' => '78e8854e',
     'aphront-dialog-view-css' => '78e8854e',
     'aphront-form-view-css' => '78e8854e',
-    'aphront-headsup-action-list-view-css' => '9d02b654',
+    'aphront-headsup-action-list-view-css' => '400e80d0',
     'aphront-list-filter-view-css' => '78e8854e',
     'aphront-pager-view-css' => '78e8854e',
     'aphront-panel-view-css' => '78e8854e',
@@ -2100,16 +2134,16 @@ celerity_register_resource_map(array(
     'aphront-table-view-css' => '78e8854e',
     'aphront-tokenizer-control-css' => '78e8854e',
     'aphront-typeahead-control-css' => '78e8854e',
-    'differential-changeset-view-css' => '9d02b654',
+    'differential-changeset-view-css' => '400e80d0',
-    'differential-core-view-css' => '9d02b654',
+    'differential-core-view-css' => '400e80d0',
     'differential-inline-comment-editor' => 'ffca9dae',
-    'differential-local-commits-view-css' => '9d02b654',
+    'differential-local-commits-view-css' => '400e80d0',
-    'differential-revision-add-comment-css' => '9d02b654',
+    'differential-revision-add-comment-css' => '400e80d0',
-    'differential-revision-comment-css' => '9d02b654',
+    'differential-revision-comment-css' => '400e80d0',
-    'differential-revision-comment-list-css' => '9d02b654',
+    'differential-revision-comment-list-css' => '400e80d0',
-    'differential-revision-detail-css' => '9d02b654',
+    'differential-revision-detail-css' => '400e80d0',
-    'differential-revision-history-css' => '9d02b654',
+    'differential-revision-history-css' => '400e80d0',
-    'differential-table-of-contents-css' => '9d02b654',
+    'differential-table-of-contents-css' => '400e80d0',
     'diffusion-commit-view-css' => '61f9d480',
     'javelin-behavior' => '4fbae2af',
     'javelin-behavior-aphront-basic-tokenizer' => '2af849fb',
@@ -2158,7 +2192,7 @@ celerity_register_resource_map(array(
     'maniphest-task-summary-css' => '31583232',
     'maniphest-transaction-detail-css' => '31583232',
     'phabricator-app-buttons-css' => '78e8854e',
-    'phabricator-content-source-view-css' => '9d02b654',
+    'phabricator-content-source-view-css' => '400e80d0',
     'phabricator-core-buttons-css' => '78e8854e',
     'phabricator-core-css' => '78e8854e',
     'phabricator-directory-css' => '78e8854e',
@@ -2168,7 +2202,7 @@ celerity_register_resource_map(array(
     'phabricator-keyboard-shortcut' => '95944588',
     'phabricator-keyboard-shortcut-manager' => '95944588',
     'phabricator-menu-item' => '95944588',
-    'phabricator-object-selector-css' => '9d02b654',
+    'phabricator-object-selector-css' => '400e80d0',
     'phabricator-paste-file-upload' => '95944588',
     'phabricator-remarkup-css' => '78e8854e',
     'phabricator-shaped-request' => 'ffca9dae',

src/__phutil_library_map__.php

@@ -822,6 +822,7 @@ phutil_register_library_map(array(
     'PhabricatorUIExampleRenderController' => 'applications/uiexample/controller/render',
     'PhabricatorUIListFilterExample' => 'applications/uiexample/examples/listfilter',
     'PhabricatorUIPagerExample' => 'applications/uiexample/examples/pager',
+    'PhabricatorUITooltipExample' => 'applications/uiexample/examples/tooltip',
     'PhabricatorUser' => 'applications/people/storage/user',
     'PhabricatorUserAccountSettingsPanelController' => 'applications/people/controller/settings/panels/account',
     'PhabricatorUserConduitSettingsPanelController' => 'applications/people/controller/settings/panels/conduit',
@@ -1565,6 +1566,7 @@ phutil_register_library_map(array(
     'PhabricatorUIExampleRenderController' => 'PhabricatorUIExampleController',
     'PhabricatorUIListFilterExample' => 'PhabricatorUIExample',
     'PhabricatorUIPagerExample' => 'PhabricatorUIExample',
+    'PhabricatorUITooltipExample' => 'PhabricatorUIExample',
     'PhabricatorUser' => 'PhabricatorUserDAO',
     'PhabricatorUserAccountSettingsPanelController' => 'PhabricatorUserSettingsPanelController',
     'PhabricatorUserConduitSettingsPanelController' => 'PhabricatorUserSettingsPanelController',

src/applications/uiexample/examples/tooltip/PhabricatorUITooltipExample.php

@@ -0,0 +1,94 @@
+<?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 PhabricatorUITooltipExample extends PhabricatorUIExample {
+
+  public function getName() {
+    return 'Tooltips';
+  }
+
+  public function getDescription() {
+    return 'Use <tt>JX.Tooltip</tt> to create tooltips.';
+  }
+
+  public function renderExample() {
+
+    Javelin::initBehavior('phabricator-tooltips');
+    require_celerity_resource('aphront-tooltip-css');
+
+    $style = 'width: 200px; '.
+             'height: 200px '.
+             'text-align: center; '.
+             'margin: 20px; '.
+             'background: #dfdfdf; '.
+             'padding: 30px 10px; '.
+             'border: 1px solid black; ';
+
+    $lorem = <<<EOTEXT
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget urna
+sed ante ultricies consequat id a odio. Mauris interdum volutpat sapien eu
+accumsan. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet,
+consectetur adipiscing elit.
+EOTEXT;
+
+    $overflow = str_repeat('M', 1024);
+
+    $metas = array(
+      'hi' => array(
+        'tip' => 'Hi',
+      ),
+      'lorem' => array(
+        'tip' => $lorem,
+      ),
+      'lorem (east)' => array(
+        'tip' => $lorem,
+        'align' => 'E',
+      ),
+      'lorem (large)' => array(
+        'tip' => $lorem,
+        'size' => 300,
+      ),
+      'lorem (large, east)' => array(
+        'tip' => $lorem,
+        'size' => 300,
+        'align' => 'E',
+      ),
+      'overflow (north)' => array(
+        'tip' => $overflow,
+      ),
+      'overflow (east)' => array(
+        'tip' => $overflow,
+        'align' => 'E',
+      ),
+    );
+
+    $content = array();
+    foreach ($metas as $key => $meta) {
+      $content[] = javelin_render_tag(
+        'div',
+        array(
+          'sigil' => 'has-tooltip',
+          'meta'  => $meta,
+          'style' => $style,
+        ),
+        phutil_escape_html($key));
+    }
+
+    return $content;
+  }
+}

src/applications/uiexample/examples/tooltip/__init__.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ * This file is automatically generated. Lint this module to rebuild it.
+ * @generated
+ */
+
+
+
+phutil_require_module('phabricator', 'applications/uiexample/examples/base');
+phutil_require_module('phabricator', 'infrastructure/celerity/api');
+phutil_require_module('phabricator', 'infrastructure/javelin/api');
+phutil_require_module('phabricator', 'infrastructure/javelin/markup');
+
+phutil_require_module('phutil', 'markup');
+
+
+phutil_require_source('PhabricatorUITooltipExample.php');

webroot/rsrc/css/aphront/tooltip.css

@@ -0,0 +1,24 @@
+/**
+ * @provides aphront-tooltip-css
+ */
+
+.jx-tooltip-container {
+  position: absolute;
+  z-index: 18;
+}
+
+.jx-tooltip {
+  background: #222222;
+  color: #e8e8e8;
+  font-size: 11px;
+  padding: 4px;
+  overflow: hidden;
+}
+
+.jx-tooltip-align-E {
+  padding-left: 3px;
+}
+
+.jx-tooltip-align-N {
+  padding-bottom: 3px;
+}

webroot/rsrc/js/application/core/ToolTip.js

@@ -0,0 +1,64 @@
+/**
+ * @requires javelin-install
+ *           javelin-util
+ *           javelin-dom
+ *           javelin-vector
+ * @provides phabricator-tooltip
+ * @javelin
+ */
+
+JX.install('Tooltip', {
+
+  statics : {
+    _node : null,
+
+    show : function(root, scale, align, content) {
+      if (__DEV__) {
+        if (align != 'N' && align != 'E') {
+          JX.$E("Only alignments 'N' (north) and 'E' (east) are supported.");
+        }
+      }
+
+      var node = JX.$N(
+        'div',
+        { className: 'jx-tooltip-container jx-tooltip-align-' + align },
+        [
+          JX.$N('div', { className: 'jx-tooltip' }, content),
+          JX.$N('div', { className: 'jx-tooltip-anchor' })
+        ]);
+
+      node.style.maxWidth  = scale + 'px';
+
+      JX.Tooltip.hide();
+      this._node = node;
+
+      // Append the tip to the document, but offscreen, so we can measure it.
+      node.style.left = '-10000px';
+      document.body.appendChild(node);
+
+      var p = JX.$V(root);
+      var d = JX.Vector.getDim(root);
+      var n = JX.Vector.getDim(node);
+
+      // Move the tip so it's nicely aligned.
+
+      switch (align) {
+        case 'N':
+          node.style.left = parseInt(p.x - ((n.x - d.x) / 2)) + 'px';
+          node.style.top  = parseInt(p.y - n.y) + 'px';
+          break;
+        case 'E':
+          node.style.left = parseInt(p.x + d.x) + 'px';
+          node.style.top  = parseInt(p.y - ((n.y - d.y) / 2)) + 'px';
+          break;
+      }
+    },
+
+    hide : function() {
+      if (this._node) {
+        JX.DOM.remove(this._node);
+        this._node = null;
+      }
+    }
+  }
+});

webroot/rsrc/js/application/core/behavior-tooltip.js

@@ -0,0 +1,29 @@
+/**
+ * @provides javelin-behavior-phabricator-tooltips
+ * @requires javelin-behavior
+ *           javelin-stratcom
+ *           phabricator-tooltip
+ * @javelin
+ */
+
+JX.behavior('phabricator-tooltips', function(config) {
+
+  JX.Stratcom.listen(
+    ['mouseover', 'mouseout'],
+    'has-tooltip',
+    function (e) {
+      if (e.getType() == 'mouseout') {
+        JX.Tooltip.hide();
+        return;
+      }
+
+      var data = e.getNodeData('has-tooltip');
+
+      JX.Tooltip.show(
+        e.getTarget(),
+        data.size || 120,
+        data.align || 'N',
+        data.tip);
+    });
+
+});