Bug 602313 - Allow creation of attachments by pasting an image from clipboard, as well as by drag-and-dropping a file from desktop

4 files changed, 51 insertions, 82 deletions

diff --git a/template/en/default/attachment/create.html.tmpl b/template/en/default/attachment/create.html.tmpl
index 329e0ab49..f83a9f83a 100644
--- a/template/en/default/attachment/create.html.tmpl
+++ b/template/en/default/attachment/create.html.tmpl
@@ -39,18 +39,10 @@
   doc_section = "attachments.html"
 %]
 
-<script [% script_nonce FILTER none %]>
-<!--
-TUI_hide_default('attachment_text_field');
--->
-</script>
-
 [%# BMO hook for displaying MozReview message %]
 [% Hook.process('before_form') %]
 
-<form name="entryform" method="post" action="attachment.cgi"
-      enctype="multipart/form-data"
-      onsubmit="return validateAttachmentForm(this)">
+<form name="entryform" method="post" action="attachment.cgi" enctype="multipart/form-data">
   <input type="hidden" name="bugid" value="[% bug.bug_id %]">
   <input type="hidden" name="action" value="insert">
   <input type="hidden" name="token" value="[% token FILTER html %]">
@@ -90,7 +82,7 @@ TUI_hide_default('attachment_text_field');
           <label for="takebug">take [% terms.bug %]</label>
           [% bug_statuses = [] %]
           [% FOREACH bug_status = bug.status.can_change_to %]
-            [% NEXT IF bug_status.name == "UNCONFIRMED" 
+            [% NEXT IF bug_status.name == "UNCONFIRMED"
                        && !bug.product_obj.allows_unconfirmed %]
             [% bug_statuses.push(bug_status) IF bug_status.is_open %]
           [% END %]
diff --git a/template/en/default/attachment/createformcontents.html.tmpl b/template/en/default/attachment/createformcontents.html.tmpl
index efb24e3e9..dd1c51563 100644
--- a/template/en/default/attachment/createformcontents.html.tmpl
+++ b/template/en/default/attachment/createformcontents.html.tmpl
@@ -19,45 +19,47 @@
   #                 Joel Peshkin <bugreport@peshkin.net>
   #                 Erik Stambaugh <erik@dasbistro.com>
   #                 Marc Schumann <wurblzap@gmail.com>
+  #                 Kohei Yoshino <kohei.yoshino@gmail.com>
   #%]
 
-<script [% script_nonce FILTER none %]>
-  document.addEventListener("DOMContentLoaded", function (event) {
-    document.querySelector("#attachment_data_controller").addEventListener(
-      "click", function (event) {
-        TUI_toggle_class('attachment_text_field');
-        TUI_toggle_class('attachment_data');
-      });
-  });
-</script>
-
-<tr class="attachment_data">
-  <th><label for="data">File</label>:</th>
+<tr id="att-selector">
+  <th class="required"><label for="att-file">File</label>:</th>
   <td>
-    <em>Enter the path to the file on your computer</em> (or
-    <a id="attachment_data_controller">
-    paste text as attachment</a>).<br>
-    <input type="file" id="data" name="data" size="50" aria-errormessage="data-error" aria-invalid="false">
-    <div id="data-error" class="warning" aria-live="assertive"><div>
-  </td>
-</tr>
-<tr class="attachment_text_field">
-  <th><label for="attach_text">File</label>:</th>
-  <td>
-    <em>Paste the text to be added as an attachment</em> (or
-    <a id="attachment_text_field_controller" href="javascript:TUI_toggle_class('attachment_text_field');
-                                                   javascript:TUI_toggle_class('attachment_data')"
-    >attach a file</a>).<br>
-    <textarea id="attach_text" name="attach_text" cols="80" rows="15"
-              onkeyup="TextFieldHandler()" onblur="TextFieldHandler()"></textarea>
+    <input hidden id="att-file" type="file" name="data" size="50">
+    <input id="att-filename" type="hidden" name="filename">
+    <section id="att-dropbox">
+      <header>
+        <span class="icon" aria-hidden="true"></span>
+        <span><label id="att-browse-label" tabindex="0" role="button">Browse a file</label>,
+          drag &amp; drop it, or paste text/link/image below.</span>
+      </header>
+      <div>
+        <textarea hidden id="att-data" name="data_base64"
+                  aria-errormessage="data-error" aria-invalid="false"></textarea>
+        <textarea id="att-textarea" name="attach_text" cols="80" rows="10"
+                  aria-label="Paste the text, link or image to be added as an attachment"></textarea>
+        <div hidden id="att-preview">
+          <figure role="img" aria-labelledby="att-preview-name" itemscope itemtype="http://schema.org/MediaObject">
+            <meta itemprop="encodingFormat">
+            <pre itemprop="text"></pre>
+            <img src="" alt="" itemprop="image">
+            <figcaption id="att-preview-name" itemprop="name"></figcaption>
+            <span class="icon" aria-hidden="true"></span>
+          </figure>
+          <span id="att-remove-button" tabindex="0" role="button" aria-label="Remove attachment">
+            <span class="icon" aria-hidden="true"></span>
+          </span>
+        </div>
+      </div>
+    </section>
+    <div id="att-error-message" class="warning" aria-live="assertive"></div>
   </td>
 </tr>
 <tr>
-  <th class="required"><label for="description">Description</label>:</th>
+  <th class="required"><label for="att-description">Description</label>:</th>
   <td>
     <em>Describe the attachment briefly.</em><br>
-    <input type="text" id="description" name="description" class="required"
-           size="60" maxlength="200">
+    <input id="att-description" class="required" type="text" name="description" size="60" maxlength="200">
   </td>
 </tr>
 <tr[% ' class="expert_fields"' UNLESS bug.id %]>
@@ -65,43 +67,21 @@
   <td>
     <em>If the attachment is a patch, check the box below.</em><br>
     [% Hook.process("patch_notes") %]
-    <input type="checkbox" id="ispatch" name="ispatch" value="1">
-    <label for="ispatch">patch</label><br><br>
-    [%# Reset this whenever the page loads so that the JS state is up to date %]
-    <script [% script_nonce FILTER none %]>
-      $(function() {
-        $("#data").on("change", function() {
-          DataFieldHandler();
-          // Fire event to keep take-bug in sync.
-          $("#ispatch").change();
-        });
-        $("#ispatch").on("change", function() {
-          setContentTypeDisabledState(this.form);
-          var takebug = $("#takebug");
-          if (takebug.is(":visible") && takebug.data("take-if-patch") && $("#ispatch").prop("checked")) {
-            $("#takebug").prop("checked", true);
-          }
-        }).change();
-      });
-    </script>
-
-    <em>Otherwise, choose a method for determining the content type.</em><br>
-    <input type="radio" id="autodetect"
-           name="contenttypemethod" value="autodetect" checked="checked">
-      <label for="autodetect">auto-detect</label><br>
-    <input type="radio" id="list"
-           name="contenttypemethod" value="list">
-      <label for="list">select from list</label>:
-      <select name="contenttypeselection" id="contenttypeselection"
-              onchange="this.form.contenttypemethod[1].checked = true;">
-        [% PROCESS content_types %]
-      </select><br>
-    <input type="radio" id="manual"
-                 name="contenttypemethod" value="manual">
-      <label for="manual">enter manually</label>:
-      <input type="text" name="contenttypeentry" id="contenttypeentry"
-             size="30" maxlength="200"
-             onchange="if (this.value) this.form.contenttypemethod[2].checked = true;">
+    <input id="att-ispatch" type="checkbox" name="ispatch">
+    <label for="att-ispatch">patch</label><br><br>
+    <div id="att-type-outer">
+      <em>Otherwise, choose a method for determining the content type.</em>
+      <div>
+        <input id="att-type-list" type="radio" name="contenttypemethod" value="list" checked>
+        <label for="att-type-list">select from list</label>:
+        <select id="att-type-select" name="contenttypeselection">[% PROCESS content_types %]</select>
+      </div>
+      <div>
+      <input id="att-type-manual" type="radio" name="contenttypemethod" value="manual">
+        <label for="att-type-manual">enter manually</label>:
+        <input id="att-type-input" type="text" name="contenttypeentry" size="30" maxlength="200">
+      </div>
+    </div>
   </td>
 </tr>
 <tr[% ' class="expert_fields"' UNLESS bug.id %]>
diff --git a/template/en/default/bug/create/create.html.tmpl b/template/en/default/bug/create/create.html.tmpl
index 3185374e5..38d5a97d7 100644
--- a/template/en/default/bug/create/create.html.tmpl
+++ b/template/en/default/bug/create/create.html.tmpl
@@ -50,6 +50,7 @@ function init() {
   showElementById('btn_no_attachment');
   initCrashSignatureField();
   init_take_handler('[% user.login FILTER js %]');
+  bz_attachment_form.update_requirements(false);
 }
 
 function initCrashSignatureField() {
@@ -189,8 +190,6 @@ TUI_alternates['expert_fields'] = 'Show Advanced Fields';
 // Hide the Advanced Fields by default, unless the user has a cookie
 // that specifies otherwise.
 TUI_hide_default('expert_fields');
-// Also hide the "Paste text as attachment" textarea by default.
-TUI_hide_default('attachment_text_field');
 -->
 </script>
 
diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl
index 6a19eaf39..bd9ec8bcb 100644
--- a/template/en/default/global/header.html.tmpl
+++ b/template/en/default/global/header.html.tmpl
@@ -115,8 +115,6 @@
             },
             string => {
                 # Please keep these in alphabetical order.
-                attach_desc_required =>
-                    'You must enter a Description for this attachment.',
                 component_required =>
                     "You must select a Component for this $terms.bug",
                 description_required =>