Make the browse button on the tokenizer, be on the tokenizer

Summary: Moves the Browse... button into a Search Icon on the actual tokenizer. I played with a number of icon treatments, and Search seems to convey the right attribute, other things like lists and menus didn't quite feel right to me, but feel free to push back if you hate search.

Test Plan:
Tested lots of tokens, little tokens, small screens, etc.

{F375467}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -7,8 +7,8 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'f46ba5fa',
-    'core.pkg.js' => 'b00140fe',
+    'core.pkg.css' => 'd3651813',
+    'core.pkg.js' => '347cd64a',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '3500921f',
     'differential.pkg.js' => 'c0506961',
@@ -27,7 +27,7 @@ return array(
     'rsrc/css/aphront/panel-view.css' => '8427b78d',
     'rsrc/css/aphront/phabricator-nav-view.css' => '7aeaf435',
     'rsrc/css/aphront/table-view.css' => '59e2c0f8',
-    'rsrc/css/aphront/tokenizer.css' => '6fd738ea',
+    'rsrc/css/aphront/tokenizer.css' => 'c10c061e',
     'rsrc/css/aphront/tooltip.css' => '7672b60f',
     'rsrc/css/aphront/two-column.css' => '16ab3ad2',
     'rsrc/css/aphront/typeahead-browse.css' => '343ab59f',
@@ -222,7 +222,7 @@ return array(
     'rsrc/externals/javelin/lib/__tests__/URI.js' => '1e45fda9',
     'rsrc/externals/javelin/lib/__tests__/behavior.js' => '1ea62783',
     'rsrc/externals/javelin/lib/behavior.js' => '61cbc29a',
-    'rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js' => 'dc708b7e',
+    'rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js' => '3ff74d77',
     'rsrc/externals/javelin/lib/control/typeahead/Typeahead.js' => '70baed2f',
     'rsrc/externals/javelin/lib/control/typeahead/normalizer/TypeaheadNormalizer.js' => 'e6e25838',
     'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadCompositeSource.js' => '503e17fd',
@@ -510,7 +510,7 @@ return array(
     'aphront-pager-view-css' => '2e3539af',
     'aphront-panel-view-css' => '8427b78d',
     'aphront-table-view-css' => '59e2c0f8',
-    'aphront-tokenizer-control-css' => '6fd738ea',
+    'aphront-tokenizer-control-css' => 'c10c061e',
     'aphront-tooltip-css' => '7672b60f',
     'aphront-two-column-view-css' => '16ab3ad2',
     'aphront-typeahead-control-css' => '0e403212',
@@ -689,7 +689,7 @@ return array(
     'javelin-scrollbar' => 'eaa5b321',
     'javelin-sound' => '949c0fe5',
     'javelin-stratcom' => '6c53634d',
-    'javelin-tokenizer' => 'dc708b7e',
+    'javelin-tokenizer' => '3ff74d77',
     'javelin-typeahead' => '70baed2f',
     'javelin-typeahead-composite-source' => '503e17fd',
     'javelin-typeahead-normalizer' => 'e6e25838',
@@ -1093,6 +1093,12 @@ return array(
       'javelin-dom',
       'phortune-credit-card-form',
     ),
+    '3ff74d77' => array(
+      'javelin-dom',
+      'javelin-util',
+      'javelin-stratcom',
+      'javelin-install',
+    ),
     '40a6a403' => array(
       'javelin-install',
       'javelin-dom',
@@ -1345,9 +1351,6 @@ return array(
       'javelin-vector',
       'javelin-stratcom',
     ),
-    '6fd738ea' => array(
-      'aphront-typeahead-control-css',
-    ),
     '70baed2f' => array(
       'javelin-install',
       'javelin-dom',
@@ -1761,6 +1764,9 @@ return array(
       'javelin-util',
       'phabricator-shaped-request',
     ),
+    'c10c061e' => array(
+      'aphront-typeahead-control-css',
+    ),
     'c1700f6f' => array(
       'javelin-install',
       'javelin-util',
@@ -1834,12 +1840,6 @@ return array(
       'javelin-dom',
       'phabricator-busy',
     ),
-    'dc708b7e' => array(
-      'javelin-dom',
-      'javelin-util',
-      'javelin-stratcom',
-      'javelin-install',
-    ),
     'de2e896f' => array(
       'javelin-behavior',
       'javelin-dom',

src/view/control/AphrontTokenizerTemplateView.php

@@ -69,18 +69,14 @@ final class AphrontTokenizerTemplateView extends AphrontView {
       $content);
 
     $icon = id(new PHUIIconView())
-      ->setIconFont('fa-list-ul');
+      ->setIconFont('fa-search');
 
-    // TODO: This thing is ugly and the ugliness is not intentional.
-    // We have to give it text or PHUIButtonView collapses. It should likely
-    // just be an icon and look more integrated into the input.
     $browse = id(new PHUIButtonView())
       ->setTag('a')
       ->setIcon($icon)
-      ->addSigil('tokenizer-browse')
+      ->addClass('tokenizer-browse-button')
       ->setColor(PHUIButtonView::GREY)
-      ->setSize(PHUIButtonView::SMALL)
-      ->setText(pht('Browse...'));
+      ->addSigil('tokenizer-browse');
 
     $classes = array();
     $classes[] = 'jx-tokenizer-frame';
@@ -90,29 +86,15 @@ final class AphrontTokenizerTemplateView extends AphrontView {
     }
 
     $frame = javelin_tag(
-      'table',
+      'div',
       array(
         'class' => implode(' ', $classes),
         'sigil' => 'tokenizer-frame',
       ),
-      phutil_tag(
-        'tr',
-        array(
-        ),
-        array(
-          phutil_tag(
-            'td',
-            array(
-              'class' => 'jx-tokenizer-frame-input',
-            ),
-            $container),
-          phutil_tag(
-            'td',
-            array(
-              'class' => 'jx-tokenizer-frame-browse',
-            ),
-            $browse),
-        )));
+      array(
+        $container,
+        $browse,
+      ));
 
     return $frame;
   }

webroot/rsrc/css/aphront/tokenizer.css

@@ -150,24 +150,36 @@ a.jx-tokenizer-token-invalid:hover {
   margin-top: 2px;
 }
 
-.jx-tokenizer-frame {
-  width: 100%;
-}
-
-.jx-tokenizer-frame .jx-tokenizer-frame-browse {
+.jx-tokenizer-frame .button.tokenizer-browse-button {
   display: none;
 }
 
-.has-browse .jx-tokenizer-frame-browse {
-  display: table-cell;
+.jx-tokenizer-frame.has-browse .button.tokenizer-browse-button {
+  display: block;
 }
 
-.jx-tokenizer-frame td.jx-tokenizer-frame-input {
-  width: 100%;
+.jx-tokenizer-frame.has-browse {
+  position: relative;
 }
 
-.jx-tokenizer-frame-browse {
-  width: 100px;
-  vertical-align: middle;
-  padding: 0 0 0 4px;
+.jx-tokenizer-frame.has-browse div.jx-tokenizer-container {
+  padding-right: 32px;
+}
+
+.button.tokenizer-browse-button {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  border-radius: 0;
+  border-right: none;
+  border-top: none;
+  border-bottom: none;
+  padding: 0;
+  width: 30px;
+}
+
+.button.tokenizer-browse-button .phui-icon-view {
+  top: 7px;
+  left: 9px;
 }

webroot/rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js

@@ -79,7 +79,7 @@ JX.install('Tokenizer', {
       this._tokenMap = {};
 
       try {
-        this._frame = JX.DOM.findAbove(this._orig, 'table', 'tokenizer-frame');
+        this._frame = JX.DOM.findAbove(this._orig, 'div', 'tokenizer-frame');
       } catch (e) {
         // Ignore, this tokenizer doesn't have a frame.
       }