Implement a rough browse view for tokenizers

Summary: Ref T5750. This adds a basic browse view. Design is a bit rough, see T7841 for some screenshots.

Test Plan: Used browse view to add tokens to tokenizers.

Reviewers: chad, btrahan

Reviewed By: btrahan

Subscribers: epriestley

Maniphest Tasks: T5750

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

webroot/rsrc/css/aphront/tokenizer.css

@@ -104,3 +104,17 @@ a.jx-tokenizer-token:hover {
 .tokenizer-closed {
   margin-top: 2px;
 }
+
+.jx-tokenizer-frame {
+  width: 100%;
+}
+
+.jx-tokenizer-frame-input {
+  width: 100%;
+}
+
+.jx-tokenizer-frame-browse {
+  width: 100px;
+  vertical-align: middle;
+  padding: 0 0 0 4px;
+}

webroot/rsrc/css/aphront/typeahead-browse.css

@@ -45,3 +45,16 @@ input.typeahead-browse-input {
   margin: 0;
   width: 100%;
 }
+
+.typeahead-browse-item {
+  padding: 2px 0;
+}
+
+.typeahead-browse-item + .typeahead-browse-item {
+  border-top: 1px solid {$thinblueborder};
+}
+
+.typeahead-browse-item button {
+  float: right;
+  margin: 2px 4px;
+}

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

@@ -45,12 +45,14 @@ JX.install('Tokenizer', {
 
   properties : {
     limit : null,
-    renderTokenCallback : null
+    renderTokenCallback : null,
+    browseURI: null
   },
 
   members : {
     _containerNode : null,
     _root : null,
+    _frame: null,
     _focus : null,
     _orig : null,
     _typeahead : null,
@@ -76,6 +78,20 @@ JX.install('Tokenizer', {
       this._tokens = [];
       this._tokenMap = {};
 
+      try {
+        this._frame = JX.DOM.findAbove(this._orig, 'table', 'tokenizer-frame');
+      } catch (e) {
+        // Ignore, this tokenizer doesn't have a frame.
+      }
+
+      if (this._frame) {
+        JX.DOM.listen(
+          this._frame,
+          'click',
+          'tokenizer-browse',
+          JX.bind(this, this._onbrowse));
+      }
+
       var focus = this.buildInput(this._orig.value);
       this._focus = focus;
 
@@ -429,6 +445,24 @@ JX.install('Tokenizer', {
         false);
       this._focus.value = '';
       this._redraw();
+    },
+
+    _onbrowse: function(e) {
+      e.kill();
+
+      var uri = this.getBrowseURI();
+      if (!uri) {
+        return;
+      }
+
+      new JX.Workflow(uri, {exclude: JX.keys(this.getTokens()).join(',')})
+        .setHandler(
+          JX.bind(this, function(r) {
+            this._typeahead.getDatasource().addResult(r.token);
+            this.addToken(r.key);
+            this.focus();
+          }))
+        .start();
     }
 
   }

webroot/rsrc/js/application/typeahead/behavior-typeahead-search.js

@@ -31,7 +31,7 @@ JX.behavior('typeahead-search', function(config) {
     }
 
     JX.DOM.alterClass(frame, 'loading', true);
-    new JX.Workflow(config.uri, {q: value})
+    new JX.Workflow(config.uri, {q: value, format: 'html'})
       .setHandler(function(r) {
         if (value != input.value) {
           // The user typed some more stuff while the request was in flight,

webroot/rsrc/js/core/Prefab.js

@@ -194,6 +194,10 @@ JX.install('Prefab', {
         tokenizer.setInitialValue(config.value);
       }
 
+      if (config.browseURI) {
+        tokenizer.setBrowseURI(config.browseURI);
+      }
+
       JX.Stratcom.addData(root, {'tokenizer' : tokenizer});
 
       return {