Add a Copy button to Personal API Token dialog

Summary:
Allow clicking once to copy a created API token to be used in some external application anyway, instead of having to click into the text field and select text and copy it.

Note that
* `.aphront-form-input` hardcodes `margin-left: 20%; margin-right: 20%; width: 60%;`; `AphrontFormTextControl` or `AphrontFormTextAreaControl` operate within these 60%, and fill that via `.aphront-form-input input[type="text"], .aphront-form-input input[type="password"] { width: 100%; }` - this patch reduces those 100% to 85% to create enough space for the Copy Button not to end up in a separate line.
* this CSS is also applied to `.aphront-form-input.has-copy-button textarea` which is currently unused but would be needed to add a Copy button also to `PhabricatorOAuthClientSecretController` and `PassphraseCredentialRevealController`.
* `margin-left: 4px;` is also used by the same button in DiffusionCloneURIView already.
* this also makes existing `errorMessage`s across the codebase more generic if copying ever failed. Less work for translators.

Closes T16197

Test Plan:
* Go to http://phorge.localhost/settings/user/testadmin/page/apitokens/
* Click "Generate Token"
* See a Copy button next to the "API Token" text field; hover over it, click it, paste, etc
* Go back to overview at http://phorge.localhost/settings/user/testadmin/page/apitokens/, click on a token
* Repeat step 3

Reviewers: O1 Blessed Committers, mainframe98

Reviewed By: O1 Blessed Committers, mainframe98

Subscribers: mainframe98, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno

Maniphest Tasks: T16197

Differential Revision: https://we.phorge.it/D26222

resources/celerity/map.php

···
   'names' => array(
     'conpherence.pkg.css' => 'b2d6f4b8',
     'conpherence.pkg.js' => '020aebcf',
-    'core.pkg.css' => '8ee41b37',
+    'core.pkg.css' => '5fb9829e',
     'core.pkg.js' => '83c66b30',
     'dark-console.pkg.js' => '187792c2',
     'differential.pkg.css' => '0dac8831',
···
     'rsrc/css/phui/phui-document.css' => 'a9154763',
     'rsrc/css/phui/phui-feed-story.css' => '1dd2e4c0',
     'rsrc/css/phui/phui-fontkit.css' => '1ec937e5',
-    'rsrc/css/phui/phui-form-view.css' => '029b1ef9',
+    'rsrc/css/phui/phui-form-view.css' => '0febcbf6',
     'rsrc/css/phui/phui-form.css' => '0ce5b5b8',
     'rsrc/css/phui/phui-formation-view.css' => 'b172a0b3',
     'rsrc/css/phui/phui-head-thing.css' => 'd7f293df',
···
     'phui-font-icon-base-css' => 'b7608e58',
     'phui-fontkit-css' => '1ec937e5',
     'phui-form-css' => '0ce5b5b8',
-    'phui-form-view-css' => '029b1ef9',
+    'phui-form-view-css' => '0febcbf6',
     'phui-formation-view-css' => 'b172a0b3',
     'phui-head-thing-view-css' => 'd7f293df',
     'phui-header-view-css' => '521ef411',

src/applications/conduit/controller/PhabricatorConduitTokenEditController.php

···
               ->setLabel(pht('Token'))
               ->setReadOnly(true)
               ->setSigil('select-on-click')
+              ->setHasCopyButton(true)
               ->setValue($token->getToken()));
 
         $dialog->appendForm($form);

src/applications/differential/view/DifferentialChangesetDetailView.php

···
           'tip' => pht('Copy file path'),
           'text' => $display_filename,
           'successMessage' => pht('File path copied.'),
-          'errorMessage' => pht('Copy of file path failed.'),
+          'errorMessage' => pht('Copying failed.'),
         ));
 
     return javelin_tag(

src/applications/diffusion/view/DiffusionCloneURIView.php

···
           'tip' => pht('Copy repository URI'),
           'text' => $display,
           'successMessage' => pht('Repository URI copied.'),
-          'errorMessage' => pht('Copy of Repository URI failed.'),
+          'errorMessage' => pht('Copying failed.'),
         ));
 
     switch ($uri->getEffectiveIOType()) {

src/view/form/control/AphrontFormControl.php

···
   private $required;
   private $hidden;
   private $classes;
+  private $hasCopyButton;
 
   public function setHidden($hidden) {
     $this->hidden = $hidden;
···
     return $this;
   }
 
+  /**
+   * Whether a button is displayed next to the control which allows the user to
+   * copy the value in the form control. Common use cases include <input>
+   * (AphrontFormTextControl) and <textarea> (AphrontFormTextAreaControl)
+   * elements displaying read-only data such as tokens or passphrases. This is
+   * only to get the CSS right; actual button implementation is in subclasses.
+   *
+   * @return bool
+   */
+  public function getHasCopyButton() {
+    return $this->hasCopyButton;
+  }
+
+  /**
+   * Whether to display a button next to the control which allows the user to
+   * copy the value in the form control. Common use cases include <input>
+   * (AphrontFormTextControl) and <textarea> (AphrontFormTextAreaControl)
+   * elements displaying read-only data such as tokens or passphrases. This is
+   * only to get the CSS right; actual button implementation is in subclasses.
+   *
+   * @param bool $has_copy_button
+   */
+  public function setHasCopyButton($has_copy_button) {
+    $this->hasCopyButton = $has_copy_button;
+    return $this;
+  }
+
   public function getValue() {
     return $this->value;
   }
···
       $this->setID(celerity_generate_unique_node_id());
     }
 
+    $class = 'aphront-form-input';
+    if ($this->getHasCopyButton()) {
+      $class = $class.' has-copy-button';
+    }
+
     $input = phutil_tag(
       'div',
-      array('class' => 'aphront-form-input'),
+      array('class' => $class),
       $this->renderInput());
 
     $error = null;

src/view/form/control/AphrontFormTextControl.php

···
   }
 
   protected function renderInput() {
-    return javelin_tag(
+    $input = array();
+    $input[] = javelin_tag(
       'input',
       array(
         'type'         => 'text',
···
         'placeholder'  => $this->getPlaceholder(),
         'autofocus' => ($this->getAutofocus() ? 'autofocus' : null),
       ));
+
+    if ($this->getHasCopyButton()) {
+      Javelin::initBehavior('select-content');
+      Javelin::initBehavior('phabricator-clipboard-copy');
+      Javelin::initBehavior('phabricator-tooltips');
+
+      $field_label = $this->getLabel();
+      if (phutil_nonempty_string($field_label)) {
+        // TODO: 'Copy %s' is broken i18n as it ignores grammatical case
+        $tip_message = pht('Copy %s', $field_label);
+        $success_message = pht('%s copied.', $field_label);
+      } else {
+        $tip_message = pht('Copy text');
+        $success_message = pht('Text copied.');
+      }
+      $copy = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setColor(PHUIButtonView::GREY)
+        ->setIcon('fa-clipboard')
+        ->setHref('#')
+        ->addSigil('clipboard-copy')
+        ->addSigil('has-tooltip')
+        ->setMetadata(
+          array(
+            'tip' => $tip_message,
+            'text' => $this->getValue(),
+            'successMessage' => $success_message,
+            'errorMessage' => pht('Copying failed.'),
+          ));
+      $input[] = $copy;
+    }
+    return $input;
   }
 
 }

webroot/rsrc/css/phui/phui-form-view.css

···
   width: 100%;
 }
 
+/* Reduce from 100% to 85% to avoid linebreak when displaying a Copy button */
+.aphront-form-input.has-copy-button input[type="text"],
+.aphront-form-input.has-copy-button textarea {
+  width: 85%;
+}
+
+.aphront-form-input.has-copy-button .button {
+  vertical-align: middle;
+  margin-left: 4px;
+}
+
 .aphront-form-cvc-input input {
   width: 64px;
 }