Improve behavior of inline comment dialog

Summary:
Fixes T2669.

  - Currently, making an inline comment does not focus the textarea. Instead, focus the textarea.
  - Currently, the positioning is kind of buggy. Make it viewport-relative and put the dialog slightly below the inline reticle.
  - Use `JX.Workflow` more and simplify some of the ajax stuff.

Test Plan: Created inline comments.

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2669

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

src/__celerity_resource_map__.php

@@ -1891,7 +1891,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-pholio-mock-view' =>
   array(
-    'uri' => '/res/02f1a38f/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
+    'uri' => '/res/c320fd85/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -1903,7 +1903,8 @@ celerity_register_resource_map(array(
       5 => 'javelin-magical-init',
       6 => 'javelin-request',
       7 => 'javelin-history',
-      8 => 'phabricator-keyboard-shortcut',
+      8 => 'javelin-workflow',
+      9 => 'phabricator-keyboard-shortcut',
     ),
     'disk' => '/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
   ),
@@ -3247,7 +3248,7 @@ celerity_register_resource_map(array(
   ),
   'pholio-inline-comments-css' =>
   array(
-    'uri' => '/res/be86f544/rsrc/css/application/pholio/pholio-inline-comments.css',
+    'uri' => '/res/a0f7ddc4/rsrc/css/application/pholio/pholio-inline-comments.css',
     'type' => 'css',
     'requires' =>
     array(

src/applications/pholio/controller/PholioInlineSaveController.php

@@ -24,14 +24,13 @@ final class PholioInlineSaveController extends PholioController {
       return new Aphront404Response();
     }
 
-    $this->operation = $request->getBool('op');
+    $this->operation = $request->getStr('op');
 
     if ($this->getOperation() == 'save') {
-      $new_content = $request->getStr('comment');
+      $new_content = $request->getStr('text');
 
-      if (strlen(trim($new_content)) == 0) {
+      if (!strlen($new_content)) {
-          return id(new AphrontAjaxResponse())
+        throw new Exception("Content must not be empty.");
-            ->setContent(array('success' => false));
       }
 
       $draft = id(new PholioTransactionComment());
@@ -78,7 +77,7 @@ final class PholioInlineSaveController extends PholioController {
       $dialog->setUser($user);
       $dialog->setSubmitURI($request->getRequestURI());
 
-      $dialog->setTitle(pht('Make inline comment'));
+      $dialog->setTitle(pht('Add Inline Comment'));
 
       $dialog->addHiddenInput('op', 'save');
 

src/applications/pholio/view/PholioInlineCommentSaveView.php

@@ -38,6 +38,8 @@ final class PholioInlineCommentSaveView extends AphrontView {
         'action'    => $this->uri,
         'method'    => 'POST',
         'sigil'     => 'inline-save-form',
+        'class'     => 'pholio-new-inline-comment',
+        'id'        => 'pholio-new-inline-comment-dialog'
       ),
       $this->renderSingleView(
         array(
@@ -117,8 +119,6 @@ final class PholioInlineCommentSaveView extends AphrontView {
     return javelin_tag(
       'div',
       array(
-        'class' => 'pholio-new-inline-comment',
-        'id' => 'pholio-new-inline-comment-dialog'
       ),
       $this->renderSingleView(
         array(

webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js

@@ -8,6 +8,7 @@
  *           javelin-magical-init
  *           javelin-request
  *           javelin-history
+ *           javelin-workflow
  *           phabricator-keyboard-shortcut
  */
 JX.behavior('pholio-mock-view', function(config) {
@@ -288,27 +289,24 @@ JX.behavior('pholio-mock-view', function(config) {
         return;
       }
       is_dragging = false;
-
       drag_end = get_image_xy(JX.$V(e));
 
-      var create_inline = new JX.Request("/pholio/inline/save/", function(r) {
+      var data = {mockID: config.mockID};
-        JX.DOM.appendContent(JX.$('pholio-mock-image-container'), JX.$H(r));
+      var handler = function(r) {
-
+        var dialog = JX.$H(r).getFragment().firstChild;
-        var dialog = JX.$('pholio-new-inline-comment-dialog');
+        JX.DOM.appendContent(viewport, dialog);
-
-        var viewportVector = JX.$V(viewport);
-        var viewportDimensions = JX.Vector.getDim(viewport);
 
         JX.$V(
-          // TODO: This is a little funky for now.
+          Math.min(drag_begin.x, drag_end.x),
-          Math.max(drag_begin.x, drag_end.x),
+          Math.max(drag_begin.y, drag_end.y) + 4
-          Math.max(drag_begin.y, drag_end.y)
         ).setPos(dialog);
 
-        });
+        JX.DOM.focus(JX.DOM.find(dialog, 'textarea'));
-      create_inline.addData({mockID: config.mockID});
+      }
-      create_inline.send();
 
+      new JX.Workflow('/pholio/inline/save/', data)
+        .setHandler(handler)
+        .start();
     });
 
   function redraw_inlines(id) {
@@ -508,18 +506,23 @@ JX.behavior('pholio-mock-view', function(config) {
     function(e) {
       e.kill();
 
-      var new_content = JX.DOM.find(
+      var form = JX.$('pholio-new-inline-comment-dialog');
-        JX.$('pholio-new-inline-comment-dialog'),
+      var text = JX.DOM.find(form, 'textarea').value;
-        'textarea').value;
+      if (!text.length) {
-
+        interrupt_typing();
-      if (new_content == null || new_content.length == 0) {
-        alert("Empty comment")
         return;
       }
 
-      var saveURI = "/pholio/inline/save/";
+      var data = {
+        mockID: config.mockID,
+        imageID: active_image.id,
+        startX: Math.min(drag_begin.x, drag_end.x),
+        startY: Math.min(drag_begin.y, drag_end.y),
+        endX: Math.max(drag_begin.x, drag_end.x),
+        endY: Math.max(drag_begin.y, drag_end.y)
+      };
 
-      var inlineComment = new JX.Request(saveURI, function(r) {
+      var handler = function(r) {
         if (!inline_comments[active_image.id]) {
           inline_comments[active_image.id] = [];
         }
@@ -527,21 +530,11 @@ JX.behavior('pholio-mock-view', function(config) {
 
         interrupt_typing();
         redraw_inlines(active_image.id);
-      });
-
-      var commentToAdd = {
-        mockID: config.mockID,
-        op: 'save',
-        imageID: active_image.id,
-        startX: Math.min(drag_begin.x, drag_end.x),
-        startY: Math.min(drag_begin.y, drag_end.y),
-        endX: Math.max(drag_begin.x, drag_end.x),
-        endY: Math.max(drag_begin.y, drag_end.y),
-        comment: new_content
       };
 
-      inlineComment.addData(commentToAdd);
+      JX.Workflow.newFromForm(form, data)
-      inlineComment.send();
+        .setHandler(handler)
+        .start();
     }
   );