finish implementing N and W tooltips and use W in differential

Summary: 'cuz new fluid layouts require the westerlyness. Looks like D4126 started the N and W implementation but didn't finish it...? note I had to do the shifting of the 5 pixels in javascript; using the CSS didn't work for me in chrome.

Test Plan: uiexample, and hoping it goes well when deployed in prod for differential case

Reviewers: epriestley

Reviewed By: epriestley

CC: chad, aran, Korvin

Maniphest Tasks: T2211

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

src/applications/uiexample/examples/PhabricatorUITooltipExample.php

@@ -36,14 +36,22 @@ EOTEXT;
       'hi' => array(
         'tip' => 'Hi',
       ),
-      'lorem' => array(
+      'lorem (north)' => array(
         'tip' => $lorem,
       ),
       'lorem (east)' => array(
         'tip' => $lorem,
         'align' => 'E',
       ),
-      'lorem (large)' => array(
+      'lorem (south)' => array(
+        'tip' => $lorem,
+        'align' => 'S',
+      ),
+      'lorem (west)' => array(
+        'tip' => $lorem,
+        'align' => 'W',
+      ),
+      'lorem (large, north)' => array(
         'tip' => $lorem,
         'size' => 300,
       ),
@@ -52,6 +60,16 @@ EOTEXT;
         'size' => 300,
         'align' => 'E',
       ),
+      'lorem (large, west)' => array(
+        'tip' => $lorem,
+        'size' => 300,
+        'align' => 'W',
+      ),
+      'lorem (large, south)' => array(
+        'tip' => $lorem,
+        'size' => 300,
+        'align' => 'S',
+      ),
       'overflow (north)' => array(
         'tip' => $overflow,
       ),
@@ -59,6 +77,14 @@ EOTEXT;
         'tip' => $overflow,
         'align' => 'E',
       ),
+      'overflow (south)' => array(
+        'tip' => $overflow,
+        'align' => 'S',
+      ),
+      'overflow (west)' => array(
+        'tip' => $overflow,
+        'align' => 'W',
+      ),
     );
 
     $content = array();

webroot/rsrc/css/aphront/tooltip.css

@@ -42,10 +42,6 @@
   top: 50%;
 }
 
-.jx-tooltip-align-W {
-  margin-right: 5px;
-}
-
 .jx-tooltip-align-W .jx-tooltip:after {
   margin-top: -5px;
   border-left-color: #000;
@@ -64,10 +60,6 @@
   left: 50%;
 }
 
-.jx-tooltip-align-S {
-  margin-bottom: -5px;
-}
-
 .jx-tooltip-align-S .jx-tooltip:after {
   margin-left: -5px;
   border-bottom-color: #000;

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

@@ -14,8 +14,18 @@ JX.install('Tooltip', {
 
     show : function(root, scale, align, content) {
       if (__DEV__) {
-        if (align != 'N' && align != 'E') {
+        switch (align) {
-          JX.$E("Only alignments 'N' (north) and 'E' (east) are supported.");
+          case 'N':
+          case 'E':
+          case 'S':
+          case 'W':
+            break;
+          default:
+            JX.$E(
+              "Only alignments 'N' (north), 'E' (east), 'S' (south), " +
+              "and 'W' (west) are supported."
+            );
+            break;
         }
       }
 
@@ -51,6 +61,14 @@ JX.install('Tooltip', {
           node.style.left = parseInt(p.x + d.x) + 'px';
           node.style.top  = parseInt(p.y - ((n.y - d.y) / 2)) + 'px';
           break;
+        case 'S':
+          node.style.left = parseInt(p.x - ((n.x - d.x) / 2)) + 'px';
+          node.style.top  = parseInt(p.y + d.y + 5) + 'px';
+          break;
+        case 'W':
+          node.style.left = parseInt(p.x - n.x - 5) + 'px';
+          node.style.top  = parseInt(p.y - ((n.y - d.y) / 2)) + 'px';
+          break;
       }
     },
 

webroot/rsrc/js/application/differential/behavior-populate.js

@@ -86,7 +86,7 @@ JX.behavior('differential-populate', function(config) {
       } else {
         highlight_class = null;
         var msg;
-        var align = 'E';
+        var align = 'W';
         var sibling = 'previousSibling';
         var width = 120;
         if (t.className.match(/cov-C/)) {
@@ -101,7 +101,6 @@ JX.behavior('differential-populate', function(config) {
         } else {
           var match = /new-copy|new-move/.exec(t.className);
           if (match) {
-            align = 'N'; // TODO: 'W'
             sibling = 'nextSibling';
             width = 500;
             msg = JX.Stratcom.getData(t).msg;