Bug 1096798: prototype modal show_bug view

16 files changed, 2160 insertions, 0 deletions

diff --git a/extensions/BugModal/template/en/default/bug/show-modal.html.tmpl b/extensions/BugModal/template/en/default/bug/show-modal.html.tmpl
new file mode 100644
index 000000000..f49b87435
--- /dev/null
+++ b/extensions/BugModal/template/en/default/bug/show-modal.html.tmpl
@@ -0,0 +1,16 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[% PROCESS global/variables.none.tmpl %]
+[% IF !header_done %]
+  [% PROCESS bug_modal/header.html.tmpl %]
+  [% PROCESS global/header.html.tmpl %]
+  [% header_done = 1 %]
+[% END %]
+[% INCLUDE bug_modal/edit.html.tmpl %]
+[% PROCESS global/footer.html.tmpl %]
diff --git a/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
new file mode 100644
index 000000000..881ed927f
--- /dev/null
+++ b/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
@@ -0,0 +1,284 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%
+  FOREACH change_set IN bug.activity_stream;
+    '<div class="change-set" id="' _ change_set.id _ '">';
+
+    extra_class = "";
+    IF change_set.user_id == bug.assigned_to.id;
+      extra_class = "assignee";
+    ELSIF change_set.user_id == bug.reporter.id;
+      extra_class = "reporter";
+    END;
+
+    IF change_set.comment;
+      PROCESS comment_header comment=change_set.comment;
+    ELSE;
+      PROCESS activity_header activities=change_set.activity id=change_set.id;
+    END;
+
+    IF change_set.comment;
+      PROCESS comment_body comment=change_set.comment;
+    END;
+    FOREACH activity IN change_set.activity;
+      PROCESS activity_body activity=activity;
+    END;
+
+    '</div>';
+  END;
+%]
+
+[% BLOCK comment_header %]
+  <div class="comment">
+    [%# normal comment header %]
+    <table class="layout-table change-head [% extra_class FILTER none %]" id="ch-[% comment.count FILTER none %]"
+      [% IF comment.collapsed +%] style="display:none"[% END %]>
+      <tr>
+        <td rowspan="2" class="change-gravatar">
+          [% INCLUDE bug_modal/user.html.tmpl
+              u = comment.author
+              gravatar_size = 32
+              gravatar_only = 1
+          %]
+        </td>
+        <td class="change-author">
+          [% INCLUDE bug_modal/user.html.tmpl
+              u = comment.author
+          %]
+          [% IF extra_class %]
+            <span class="user-role">([% extra_class.ucfirst FILTER none %])</span>
+          [% END %]
+          [% Hook.process('user', 'bug/comments.html.tmpl') %]
+        </td>
+        <td class="comment-actions">
+          [% IF user.is_insider && bug.check_can_change_field('longdesc', 0, 1) %]
+            [% IF comment.is_private %]
+              <div class="comment-private edit-hide bz_private">
+                Private
+              </div>
+            [% END %]
+            <div class="comment-private edit-show" style="display:none">
+              <input type="hidden" value="1" name="defined_isprivate_[% comment.id FILTER none %]">
+              <input type="checkbox" name="isprivate_[% comment.id FILTER none %]"
+                  id="is-private-[% comment.id FILTER none %]"
+                  class="is-private" value="1" [%= "checked" IF comment.is_private %]>
+              <label for="is-private-[% comment.id FILTER none %]">Private</label>
+            </div>
+          [% END %]
+          [% IF user.id %]
+            <button class="reply-btn in-page"
+              data-reply-id="[% comment.count FILTER none %]"
+              data-reply-name="[% comment.author.name || comment.author.moz_nick FILTER html %]"
+              >Reply</button>
+          [% END %]
+          <button class="comment-spinner in-page" id="cs-[% comment.count FILTER none%]">-</button>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <div class="change-name">
+            <a href="show_bug.cgi?id=[% bug.bug_id FILTER none %]#c[% comment.count FILTER none %]">
+              [% comment.count == 0 ? "Description" : "Comment " _ comment.count ~%]
+            </a>
+          </div>
+          &bull;
+          <div class="change-time">
+            [% INCLUDE bug_modal/rel_time.html.tmpl ts=comment.creation_ts %]
+          </div>
+        </td>
+      </tr>
+      [% IF comment.tags.size %]
+        <tr>
+          <td colspan="2" class="comment-tags">
+            [% FOREACH tag IN comment.tags %]
+              <span class="comment-tag">[% tag FILTER html %]</span>
+            [% END %]
+          </td>
+        </tr>
+      [% END %]
+    </table>
+
+    [%# default-collapsed comment header %]
+    [% IF comment.collapsed %]
+      <table class="layout-table change-head default-collapsed" id="cc-[% comment.count FILTER none %]">
+      <tr>
+        <td class="comment-collapse-reason"
+            title="[% comment.author.moz_nick FILTER html %] [[% comment.creation_ts FILTER time_duration FILTER html %]]">
+            Comment hidden ([% comment.tags.join(', ') FILTER html %])
+        </td>
+        <td class="comment-actions">
+          <button class="comment-spinner in-page" id="ccs-[% comment.count FILTER none%]">
+            [%~ comment.collapsed ? "+" : "-" ~%]
+          </button>
+        </td>
+      </tr>
+      </table>
+    [% END %]
+  </div>
+[% END %]
+
+[% BLOCK activity_header %]
+  [% action = activities.0 %]
+  <div id="[% id FILTER none %]" class="change">
+    <table class="layout-table change-head [% extra_class FILTER none %]">
+      <tr>
+        <td rowspan="2" class="change-gravatar">
+          [% INCLUDE bug_modal/user.html.tmpl
+              u = action.who
+              gravatar_size = 32
+              gravatar_only = 1
+          %]
+        </td>
+        <td class="change-author">
+          [% INCLUDE bug_modal/user.html.tmpl
+              u = action.who
+          %]
+          [% IF extra_class %]
+            <span class="user-role">([% extra_class.ucfirst FILTER none %])</span>
+          [% END %]
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <div class="change-name">
+            <a href="show_bug.cgi?id=[% bug.bug_id FILTER none %]#[% id FILTER none %]">Updated</a>
+          </div>
+          &bull;
+          <div class="change-time">
+            [% INCLUDE bug_modal/rel_time.html.tmpl ts=action.when %]
+          </div>
+        </td>
+      </tr>
+    </table>
+  </div>
+[% END %]
+
+[% BLOCK comment_body %]
+  <pre class="comment-text [%= "bz_private" IF comment.is_private %]" id="ct-[% comment.count FILTER none %]"
+    [% IF comment.collapsed +%] style="display:none"[% END ~%]
+  >[% comment.body_full FILTER quoteUrls(bug, comment) %]</pre>
+[% END %]
+
+[%
+  BLOCK activity_body;
+    '<div class="activity">';
+    has_cc = 0;
+
+    FOREACH change IN activity.changes;
+      '<div class="change">';
+      class = "";
+
+      IF change.fieldname == 'cc';
+        has_cc = 1;
+        class = "activity-cc";
+      END;
+
+      IF change.attachid;
+        %]
+        <a href="attachment.cgi?id=[% change.attachid FILTER none %]&amp;action=edit"
+           title="[% change.attach.description FILTER html %]"
+           class="[% "bz_obsolete" IF change.attach.isobsoletee %]"
+        >Attachment #[% change.attachid FILTER none %]</a> -
+        [%+
+      END;
+
+      IF change.buglist;
+        IF change.fieldname == 'duplicate';
+          label = "Duplicate of this " _ terms.bug;
+        ELSE;
+          label = field_descs.${change.fieldname};
+        END;
+        IF change.added != '';
+          label _ ": " FILTER html;
+          PROCESS add_change value=change.added;
+        END;
+        IF change.removed != '';
+          IF change.added != '';
+            "<br>";
+          END;
+          "No longer ";
+          label FILTER lcfirst;
+          ": ";
+          PROCESS add_change value=change.removed;
+        END;
+
+      ELSE;
+        IF change.fieldname == 'longdescs.isprivate';
+          # reference the comment that was made private/public in the field label
+          %]
+          <a href="#c[% change.comment.count FILTER none %]">
+            Comment [% change.comment.count FILTER none %]</a> is private:
+          [%+
+        ELSE;
+          field_descs.${change.fieldname} _ ": " FILTER html;
+        END;
+
+        IF change.removed != '';
+          IF change.added == '';
+            '<span class="activity-deleted">';
+          END;
+          PROCESS add_change value=change.removed;
+          IF change.added == '';
+            '</span>';
+          ELSE;
+            ' &rarr; ';
+          END;
+        END;
+        PROCESS add_change value=change.added;
+      END;
+
+      '</div>';
+    END;
+    '</div>';
+  END;
+
+  BLOCK add_change;
+    SWITCH change.fieldname;
+
+      CASE [ 'estimated_time', 'remaining_time', 'work_time' ];
+        PROCESS formattimeunit time_unit=value;
+
+      CASE 'bug_file_loc';
+        %]
+        <a href="[% value FILTER html %]" target="_blank" rel="noreferrer"
+        [% UNLESS is_safe_url(value) %]
+          onclick="return confirmUnsafeURL(this.href)"
+        [% END %]
+        >[% value FILTER truncate(256, '&hellip;') FILTER html %]</a>
+        [%
+
+      CASE 'see_also';
+        FOREACH see_also IN value;
+          IF see_also.bug_id;
+            "$terms.bug $see_also.bug_id" FILTER bug_link(see_also.bug_id);
+          ELSE;
+            %]
+            <a href="[% see_also.url FILTER html %]" target="_blank">[% see_also.url FILTER html %]</a>
+            [%
+          END;
+          ", " UNLESS loop.last;
+        END;
+
+      CASE [ 'assigned_to', 'reporter', 'qa_contact', 'cc', 'flagtypes.name' ];
+        value FILTER email;
+
+      CASE;
+        IF change.fieldtype == constants.FIELD_TYPE_DATETIME;
+          INCLUDE bug_modal/rel_time.html.tmpl ts=value;
+
+        ELSIF change.buglist;
+          value FILTER bug_list_link;
+
+        ELSE;
+          value FILTER truncate(256, '&hellip;') FILTER html;
+
+        END;
+    END;
+  END;
+%]
diff --git a/extensions/BugModal/template/en/default/bug_modal/attachments.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/attachments.html.tmpl
new file mode 100644
index 000000000..3055cc861
--- /dev/null
+++ b/extensions/BugModal/template/en/default/bug_modal/attachments.html.tmpl
@@ -0,0 +1,60 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%#
+  # bug: (bug object) the main bug object
+  #%]
+
+<table class="layout-table" id="attachments">
+  [% FOREACH attachment IN bug.attachments %]
+    [% NEXT IF attachment.isprivate && !(user.is_insider || attachment.attacher.id == user.id) %]
+    <tr class="
+        [%~ " bz_private" IF attachment.isprivate %]
+        [%~ " attach-obsolete" IF attachment.isobsolete %]
+        [%~ " attach-patch" IF attachment.ispatch %]
+    " [% IF attachment.isobsolete %]style="display:none"[% END %]>
+      <td class="attach-desc-td">
+        <div class="attach-desc">
+          <a href="attachment.cgi?id=[% attachment.id FILTER none %]">
+            [%~ attachment.description FILTER html %]</a>
+        </div>
+        <div>
+          <span class="attach-time">[% INCLUDE bug_modal/rel_time.html.tmpl ts=attachment.attached %]</span>
+          <span class="attach-author">[% INCLUDE bug_modal/user.html.tmpl u=attachment.attacher %]</span>
+        </div>
+        <div class="attach-info">
+          [% IF attachment.datasize %]
+            [%- attachment.datasize FILTER unitconvert %]
+          [% ELSE %]
+            (deleted)
+          [% END %],
+          [%+ attachment.ispatch ? "patch" : attachment.contenttype FILTER html -%]
+        </div>
+      </td>
+      <td>
+        [% FOREACH flag IN attachment.flags %]
+          <div class="attach-flag">
+            [% INCLUDE bug_modal/user.html.tmpl u=flag.setter simple=1 %]:
+            <span class="flag-name-status">
+              [%+ flag.type.name FILTER html %][% flag.status FILTER none %]
+            </span>
+            [% IF flag.requestee %]
+              [%+ INCLUDE bug_modal/user.html.tmpl u=flag.requestee simple=1 %]
+            [% END %]
+          </div>
+        [% END %]
+      </td>
+      <td class="attach-actions">
+        <a href="attachment.cgi?id=[% attachment.id FILTER none %]&amp;action=edit">Details</a>
+        [% IF attachment.ispatch %]
+          | <a href="attachment.cgi?id=[% attachment.id FILTER none %]&amp;action=diff">Diff</a>
+        [% END %]
+        [% Hook.process("action", "attachment/list.html.tmpl") %]
+    </tr>
+  [% END %]
+</table>
diff --git a/extensions/BugModal/template/en/default/bug_modal/cc_list.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/cc_list.html.tmpl
new file mode 100644
index 000000000..37f582e0e
--- /dev/null
+++ b/extensions/BugModal/template/en/default/bug_modal/cc_list.html.tmpl
@@ -0,0 +1,16 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%
+  UNLESS cc_list.size;
+    'None';
+  END;
+  FOREACH cc IN cc_list;
+    INCLUDE bug_modal/user.html.tmpl u=cc;
+  END;
+%]
diff --git a/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
new file mode 100644
index 000000000..a16bfdd9b
--- /dev/null
+++ b/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
@@ -0,0 +1,918 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%
+  USE Bugzilla;
+
+  # only edit one bug
+  UNLESS bug.defined;
+    bug = bugs.0;
+  END;
+  bugid = bug.id;
+
+  # this is used in a few places
+  is_cced = bug.cc.contains(user.login);
+
+  # custom fields that have custom rendering, or should not be rendered
+  rendered_custom_fields = [
+    'cf_user_story',
+    'cf_last_resolved',
+  ];
+
+  # all custom fields
+  custom_fields = Bugzilla.active_custom_fields(product => bug.product_obj, component => bug.component_obj, bug_id => bug.id);
+
+  # extract needinfo flags
+  needinfo = [];
+  FOREACH flag_type IN bug.flag_types;
+    IF flag_type.name == 'needinfo';
+    needinfo_flag_type = flag_type;
+      FOREACH flag IN flag_type.flags;
+        IF flag.status == '?';
+          needinfo.push(flag);
+        END;
+      END;
+    END;
+  END;
+
+  # count attachments
+  active_attachments = 0;
+  obsolete_attachments = 0;
+  FOREACH attachment IN bug.attachments;
+    NEXT IF attachment.isprivate && !(user.is_insider || attachment.attacher.id == user.id);
+    IF attachment.isobsolete;
+      obsolete_attachments = obsolete_attachments + 1;
+    ELSE;
+      active_attachments = active_attachments + 1;
+    END;
+  END;
+
+  # count set bug flags (excluding needinfo)
+  has_bug_flags = 0;
+  FOREACH flag IN bug.flags;
+    NEXT IF flag.name == 'needinfo';
+    has_bug_flags = 1;
+    LAST;
+  END;
+
+  # count set project/tracking flags
+  set_project_flags = [];
+  set_tracking_flags = [];
+  FOREACH flag IN tracking_flags;
+    NEXT IF flag.bug_flag(bug.id).value == "---";
+    IF flag.flag_type == "project";
+      set_project_flags.push(flag);
+    END;
+    IF flag.flag_type == "tracking";
+      set_tracking_flags.push(flag);
+    END;
+  END;
+
+  # build firefox flags subtitle
+  firefox_flags = [];
+  firefox_fixed_version = "";
+  tracking_flags_title = "Firefox Tracking Flags";
+  # project flags
+  FOREACH row IN tracking_flags_table;
+    NEXT UNLESS row.type == "project";
+    status_value = row.status.bug_flag(bug.id).value;
+    NEXT IF status_value == "---";
+    firefox_flags.push(row.name _ ":" _ status_value);
+  END;
+  # tracking flags title and subtitle
+  FOREACH row IN tracking_flags_table;
+    NEXT UNLESS row.type == "tracking";
+    tracking_value = row.tracking ? row.tracking.bug_flag(bug.id).value : "---";
+    status_value = row.status.bug_flag(bug.id).value || "---";
+    NEXT IF tracking_value == "---" && status_value == "---";
+    blurb = row.name;
+    IF tracking_value != "---";
+      blurb = blurb _ tracking_value;
+    END;
+    IF status_value != "---";
+      blurb = blurb _ " " _ status_value;
+      IF firefox_fixed_version == "" && status_value == "fixed";
+        firefox_fixed_version = row.name.ucfirst.replace('^(\D+)(\d)', '$1 $2');
+      END;
+    END;
+    firefox_flags.push(blurb);
+    IF row.name.search("^thunderbird");
+      tracking_flags_title = "Thunderbird Tracking Flags";
+    ELSIF row.name.search("^seamonkey");
+      tracking_flags_title = "SeaMonkey Tracking Flags";
+    END;
+  END;
+  IF firefox_flags.size;
+    firefox_flags_subtitle = firefox_flags.join(", ");
+  ELSE;
+    firefox_flags_subtitle = "Not tracked";
+  END;
+%]
+
+[% IF user.id %]
+  <form name="changeform" id="changeform" method="post" action="process_bug.cgi">
+  <input type="hidden" name="delta_ts" value="[% bug.delta_ts FILTER html %]">
+  <input type="hidden" name="longdesclength" value="[% bug.comments.size FILTER html %]">
+  <input type="hidden" name="id" id="bug_id" value="[% bug.bug_id FILTER html %]">
+  <input type="hidden" name="token" value="[% issue_hash_token([bug.id, bug.delta_ts]) FILTER html %]">
+[% END %]
+
+[%# === header === %]
+
+<div id="xhr-error" style="display:none"></div>
+
+[% WRAPPER bug_modal/module.html.tmpl
+    title = ""
+%]
+  <div id="summary-container">
+    [%# bug id, alias, and summary %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        container = 1
+        no_label = 1
+        view_only = 1
+    %]
+      <div id="field-value-bug_id">
+        <a id="this-bug" href="show_bug.cgi?id=[% bug.id FILTER none %]
+                [%~ '&amp;format=' _ cgi.param("format") IF cgi.param("format") %]"
+        >
+          [%~ terms.Bug _ " " _ bug.id FILTER none ~%]
+        </a>
+        [% IF bug.alias %]
+          <span class="edit-hide">
+            ([% bug.alias FILTER html %])
+          </span>
+        [% END %]
+      </div>
+    [% END %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        container = 1
+        no_label = 1
+        hide_on_edit = 1
+    %]
+      <div id="field-value-short_desc">[% bug.short_desc FILTER html %]</div>
+    [% END %]
+
+    [%# alias %]
+    [% INCLUDE bug_modal/field.html.tmpl
+        field = bug_fields.alias
+        field_type = constants.FIELD_TYPE_FREETEXT
+        hide_on_view = 1
+        short_width = 1
+    %]
+
+    [%# summary %]
+    [% INCLUDE bug_modal/field.html.tmpl
+        field = bug_fields.short_desc
+        field_type = constants.FIELD_TYPE_FREETEXT
+        hide_on_view = 1
+    %]
+
+    [%# status summary %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        name = "status_summary"
+        no_label = 1
+        hide_on_edit = 1
+    %]
+      <b>
+        [% bug.bug_status FILTER html %]
+        [%+ bug.resolution FILTER html IF bug.resolution %]
+      </b>
+      [% IF bug.resolution == "FIXED"
+            && bug.target_milestone
+            && bug.target_milestone != "---"
+      %]
+        in [% firefox_fixed_version || bug.target_milestone FILTER html %]
+      [% ELSIF bug.dup_id %]
+        of [% terms.bug _ " $bug.dup_id" FILTER bug_link(bug.dup_id) FILTER none %]
+      [% END %]
+      [% IF needinfo.size %]
+        <div id="status-needinfo">
+          (NeedInfo from
+          [%+
+            IF needinfo.size == 1;
+              INCLUDE bug_modal/user.html.tmpl u=needinfo.0.requestee nick_only=1;
+            ELSE;
+              " " _ needinfo.size _ " people";
+            END;
+          ~%]
+          )
+        </div>
+      [% END %]
+    [% END %]
+  </div>
+
+  [%# buttons %]
+
+  <div id="mode-container">
+    [% IF user.id %]
+      <div>
+        <button type="button" class="minor" id="cc-btn" data-is-cced="[% is_cced ? 1 : 0 %]">
+          [% is_cced ? "Stop following" : "Follow" %]
+        </button>
+        <button type="button" id="cancel-btn" class="minor" style="display:none">Cancel</button>
+        <button type="button" id="mode-btn">
+          <span id="mode-btn-readonly">Edit</span>
+          <span id="mode-btn-loading">
+            <img id="edit-throbber" src="extensions/BugModal/web/throbber.gif" width="16" height="11">
+            Fetching
+          </span>
+        </button>
+        <button type="submit" id="commit-btn" style="display:none">Save Changes</button>
+      </div>
+    [% END %]
+    <div class="button-row">
+      [% IF user.id %]
+        <button type="button" class="comment-btn in-page">Add Comment</button>
+      [% END %]
+      <button type="button" id="last-comment-btn" class="in-page">Last Comment &darr;</button>
+    </div>
+    <div class="button-row">
+      [% IF bug.assigned_to.id == user.id || user.in_group("editbugs") %]
+        <button type="button" id="copy-summary" class="in-page"
+          title="Copy [% terms.bug %] number and summary to your clipboard">Copy Summary</button>
+      [% END %]
+      <button type="button" id="expand-all-btn" class="in-page">Expand All</button>
+    </div>
+  </div>
+[% END %]
+
+[%# === status === %]
+
+[% WRAPPER bug_modal/module.html.tmpl
+    title = "Status"
+%]
+  [% WRAPPER fields_lhs %]
+
+    [%# product %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        field = bug_fields.product
+        field_type = constants.FIELD_TYPE_SINGLE_SELECT
+    %]
+      <div class="spin-toggle" data-latch="#product-latch" data-for="#product-info">
+        <span class="spin-latch" id="product-latch">&#9656;</span>
+        [% bug.product FILTER html %]
+      </div>
+      <div id="product-info" style="display:none">
+        [% bug.product_obj.description FILTER html_light %]
+      </div>
+    [% END %]
+
+    [%# component %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        field = bug_fields.component
+        field_type = constants.FIELD_TYPE_SINGLE_SELECT
+    %]
+      <div class="spin-toggle" data-latch="#component-latch" data-for="#component-info">
+        <span class="spin-latch" id="component-latch">&#9656;</span>
+        [% bug.component FILTER html %]
+      </div>
+      <div id="component-info" style="display:none">
+        <div>[% bug.component_obj.description FILTER html_light %]</div>
+        <a href="buglist.cgi?component=[% bug.component FILTER uri %]&amp;
+                [%~ %]product=[% bug.product FILTER uri %]&amp;
+                [%~ %]bug_status=__open__" target="_blank">Other [% terms.Bugs %]</a>
+      </div>
+    [% END %]
+
+    [%# importance %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        label = "Importance"
+        container = 1
+        hide_on_view = bug.priority == "--" && bug.bug_severity == "normal"
+    %]
+      [% INCLUDE bug_modal/field.html.tmpl
+          field = bug_fields.priority
+          field_type = constants.FIELD_TYPE_SINGLE_SELECT
+          no_indent = 1
+          inline = 1
+      %]
+      [% INCLUDE bug_modal/field.html.tmpl
+          field = bug_fields.bug_severity
+          field_type = constants.FIELD_TYPE_SINGLE_SELECT
+          inline = 1
+      %]
+      [% UNLESS cf_hidden_in_product('cf_rank', bug.product, bug.component) %]
+        [% rendered_custom_fields.push('cf_rank') %]
+        [% INCLUDE bug_modal/field.html.tmpl
+            field = bug_fields.cf_rank
+            field_type = constants.FIELD_TYPE_INTEGER
+            inline = 1
+            label = "Rank"
+            hide_on_view = bug.cf_rank == ""
+        %]
+      [% END %]
+    [% END %]
+
+    [%# status, resolution %]
+    [% IF bug.assigned_to.id != user.id %]
+      [% WRAPPER bug_modal/field.html.tmpl
+          name = "status-view"
+          container = 1
+          label = "Status"
+          hide_on_edit = 1
+      %]
+        [% bug.bug_status FILTER html %]
+        [%+ bug.resolution FILTER html IF bug.resolution %]
+        [% IF bug.dup_id %]
+          of [% terms.bug _ " $bug.dup_id" FILTER bug_link(bug.dup_id) FILTER none %]
+        [% END %]
+      [% END %]
+    [% END %]
+
+  [% END %]
+  [% WRAPPER fields_rhs %]
+
+    [%# creation time %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        field = bug_fields.creation_ts
+        label = "Reported"
+        view_only = 1
+    %]
+      [% INCLUDE bug_modal/rel_time.html.tmpl ts=bug.creation_ts %]
+    [% END %]
+
+    [%# last modified %]
+    [% WRAPPER bug_modal/field.html.tmpl
+      field = bug_fields.delta_ts
+      label = "Modified"
+      view_only = 1
+    %]
+      [% INCLUDE bug_modal/rel_time.html.tmpl ts=bug.delta_ts %]
+    [% END %]
+
+  [% END %]
+
+  [%# status/resolution knob %]
+  [% WRAPPER bug_modal/field.html.tmpl
+      name = "status-edit"
+      container = 1
+      label = "Status"
+      hide_on_view = bug.assigned_to.id != user.id
+  %]
+    [% INCLUDE bug_modal/field.html.tmpl
+        field  = bug_fields.bug_status
+        field_type = constants.FIELD_TYPE_SINGLE_SELECT
+        values = bug.choices.bug_status
+        inline = 1
+        no_indent = 1
+        edit_only = 1
+    %]
+    [% INCLUDE bug_modal/field.html.tmpl
+        field  = bug_fields.resolution
+        field_type = constants.FIELD_TYPE_SINGLE_SELECT
+        values = bug.choices.resolution
+        inline = 1
+        edit_only = 1
+    %]
+    [% IF bug.choices.resolution.only("name", "DUPLICATE").size %]
+      <div id="duplicate-container">
+        of
+        <input id="dup_id" name="dup_id" size="6" value="[% bug.dup_id FILTER html %]">
+      </div>
+      <div id="duplicate-actions">
+        <button type="button" class="in-page" id="mark-as-dup-btn">
+          Mark as Duplicate
+        </button>
+      </div>
+    [% END %]
+  [% END %]
+[% END %]
+
+[%# === people === %]
+
+[%
+  unassigned = (bug.assigned_to.login == "nobody@mozilla.org")
+               || (bug.assigned_to.login.search("\.bugs$"));
+  sub =
+    "Reporter: " _ bug.reporter.moz_nick
+    _ (unassigned ? ", Unassigned" : ", Assigned: " _ bug.assigned_to.moz_nick)
+    _ (bug.mentors.size ? ", Mentored" : "")
+    _ (needinfo.size ? ", NeedInfo" : "")
+%]
+[% WRAPPER bug_modal/module.html.tmpl
+    title = "People"
+    subtitle = sub
+    collapsed = 1
+%]
+  [% WRAPPER fields_lhs %]
+
+    [%# assignee %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        field = bug_fields.assigned_to
+        field_type = constants.FIELD_TYPE_USER
+    %]
+      [% IF unassigned %]
+        <i>Unassigned</i>
+        [% IF bug.check_can_change_field("assigned_to", 0, 1) %]
+          <button type="button" id="take-btn" class="in-page">Take</button>
+        [% END %]
+      [% ELSE %]
+        [% INCLUDE bug_modal/user.html.tmpl u=bug.assigned_to %]
+      [% END %]
+    [% END %]
+
+    [%# mentors %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        field = bug_fields.bug_mentor
+        field_type = constants.FIELD_TYPE_USERS
+        label = "Mentors"
+        value = bug.mentors.pluck("login")
+        hide_on_view = bug.mentors.size == 0
+    %]
+      [%
+        FOREACH mentor IN bug.mentors;
+          INCLUDE bug_modal/user.html.tmpl u=mentor;
+        END;
+      %]
+    [% END %]
+
+    [%# qa contact %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        field = bug_fields.qa_contact
+        field_type = constants.FIELD_TYPE_USER
+        hide_on_view = bug.qa_contact == ""
+    %]
+      [% INCLUDE bug_modal/user.html.tmpl u=bug.qa_contact %]
+    [% END %]
+
+  [% END %]
+  [% WRAPPER fields_rhs %]
+
+    [%# reporter %]
+    [% INCLUDE bug_modal/field.html.tmpl
+        field = bug_fields.reporter
+        field_type = constants.FIELD_TYPE_USER
+        view_only = 1
+    %]
+
+    [%# needinfo %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        container = 1
+        label = "NeedInfo"
+        hide_on_view = needinfo.size == 0
+        hide_on_edit = 1
+    %]
+      [% INCLUDE bug_modal/flags.html.tmpl
+          types = bug.flag_types.only("name", "needinfo")
+          no_label = 1
+          view_only = 1
+      %]
+    [% END %]
+    [% IF needinfo.size %]
+      [% WRAPPER bug_modal/field.html.tmpl
+          container = 1
+          label = "NeedInfo"
+          hide_on_view = 1
+      %]
+        <button type="button" id="needinfo-scroll" class="in-page">Update</button>
+      [% END %]
+    [% END %]
+
+    [%# cc %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        container = 1
+        label = "CC"
+        hide_on_view = bug.cc.size == 0
+    %]
+      [% IF bug.cc && bug.cc.size %]
+        <span id="cc-latch">&#9656;</span>
+        <span id="cc-summary">
+          [%
+            IF bug.cc.size == 1;
+              is_cced ? "Just you" : "1 person";
+            ELSE;
+              bug.cc.size _ " people";
+            END;
+          %]
+        </span>
+        <div id="cc-list" style="display:none"></div>
+      [% ELSE %]
+        <i>Nobody</i>
+      [% END %]
+    [% END %]
+
+  [% END %]
+[% END %]
+
+[%# === tracking === %]
+
+[%
+  col =
+    (bug.version.lower == "unspecified" || bug.version.lower == "other")
+    && bug.target_milestone == "---"
+    && !has_bug_flags
+    && !set_project_flags.size
+    && !set_tracking_flags.size;
+  sub = [];
+  IF col;
+    sub.push("Not tracked");
+  END;
+  open_deps = bug.depends_on_obj.only("resolution", "").size;
+  IF open_deps;
+    sub.push("Depends on: " _ open_deps _ " bug" _ (open_deps == 1 ? "" : "s"));
+  END;
+  open_deps = bug.blocks_obj.only("resolution", "").size;
+  IF open_deps;
+    sub.push("Blocks: " _ open_deps _ " bug" _ (open_deps == 1 ? "" : "s"));
+  END;
+%]
+[% WRAPPER bug_modal/module.html.tmpl
+  title = "Tracking"
+  subtitle = sub.join(", ")
+  collapsed = col
+%]
+  [% WRAPPER fields_lhs %]
+
+    [%# version %]
+    [% INCLUDE bug_modal/field.html.tmpl
+        field = bug_fields.version
+        field_type = constants.FIELD_TYPE_SINGLE_SELECT
+    %]
+
+    [%# milestone %]
+    [% INCLUDE bug_modal/field.html.tmpl
+        field = bug_fields.target_milestone
+        field_type = constants.FIELD_TYPE_SINGLE_SELECT
+        label = "Target"
+    %]
+
+    [%# platform, op-sys %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        container = 1
+        label = "Platform"
+        hide_on_view = bug.rep_platform == 'All' && bug.op_sys == 'All'
+    %]
+      [% INCLUDE bug_modal/field.html.tmpl
+          field = bug_fields.rep_platform
+          field_type = constants.FIELD_TYPE_SINGLE_SELECT
+          inline = 1
+          no_indent = 1
+      %]
+      [% INCLUDE bug_modal/field.html.tmpl
+          field = bug_fields.op_sys
+          field_type = constants.FIELD_TYPE_SINGLE_SELECT
+          inline = 1
+      %]
+    [% END %]
+
+    [%# keywords %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        field = bug_fields.keywords
+        field_type = constants.FIELD_TYPE_KEYWORDS
+        hide_on_view = bug.keyword_objects.size == 0
+    %]
+      [% bug.keyword_objects.pluck("name").join(", ") FILTER html %]
+    [% END %]
+
+    [% UNLESS cf_hidden_in_product('cf_fx_iteration', bug.product, bug.component) %]
+      [% rendered_custom_fields.push('cf_fx_iteration') %]
+      [% INCLUDE bug_modal/field.html.tmpl
+          field = bug_fields.cf_fx_iteration
+          field_type = bug_fields.cf_fx_iteration.type
+          hide_on_view = bug.cf_iteration == ""
+      %]
+    [% END %]
+
+    [% UNLESS cf_hidden_in_product('cf_fx_points', bug.product, bug.component) %]
+      [% rendered_custom_fields.push('cf_fx_points') %]
+      [% INCLUDE bug_modal/field.html.tmpl
+          field = bug_fields.cf_fx_points
+          field_type = bug_fields.cf_fx_points.type
+          hide_on_view = bug.cf_points == ""
+      %]
+    [% END %]
+
+  [% END %]
+  [% WRAPPER fields_rhs %]
+
+    [%# depends on %]
+    [% INCLUDE bug_modal/field.html.tmpl
+        field = bug_fields.dependson
+        field_type = constants.FIELD_TYPE_BUG_LIST
+        values = bug.depends_on_obj
+        hide_on_view = bug.dependson.size == 0
+    %]
+
+    [%# blocks %]
+    [% INCLUDE bug_modal/field.html.tmpl
+        field = bug_fields.blocked
+        field_type = constants.FIELD_TYPE_BUG_LIST
+        values = bug.blocks_obj
+        hide_on_view = bug.blocked.size == 0
+    %]
+
+    [% IF bug.dependson.size + bug.blocked.size > 1 %]
+      [% WRAPPER bug_modal/field.html.tmpl
+          container = 1
+          label = ""
+          hide_on_edit = 1
+      %]
+        Dependency <a href="showdependencytree.cgi?id=[% bug.bug_id FILTER none %]&amp;hide_resolved=1">tree</a>
+        / <a href="showdependencygraph.cgi?id=[% bug.bug_id FILTER none %]">graph</a>
+      [% END %]
+    [% END %]
+
+    [%# duplicates %]
+    [% IF bug.duplicates.size %]
+      [% INCLUDE bug_modal/field.html.tmpl
+          label = "Duplicates"
+          values = bug.duplicates
+          field_type = constants.FIELD_TYPE_BUG_LIST
+          view_only = 1
+      %]
+    [% END %]
+
+    [%# flags %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        name = "bug_flags"
+        container = 1
+        label = terms.Bug _ " Flags"
+        hide_on_view = !has_bug_flags
+    %]
+      [% INCLUDE bug_modal/flags.html.tmpl
+          types = bug.flag_types.skip("name", "needinfo")
+      %]
+    [% END %]
+
+  [% END %]
+[% END %]
+
+[% IF tracking_flags.size %]
+
+  [%# === tracking flags === %]
+
+  [% WRAPPER bug_modal/module.html.tmpl
+      title = tracking_flags_title
+      collapsed = 1
+      subtitle = firefox_flags_subtitle
+  %]
+    [% WRAPPER fields_lhs %]
+
+      [% UNLESS set_tracking_flags.size || set_project_flags.size %]
+        <p class="edit-hide">
+          This [% terms.bug %] is not currently tracked.
+        </p>
+      [% END %]
+
+      [%# tracking flags %]
+      [% WRAPPER bug_modal/field.html.tmpl
+          container = 1
+          label = "Tracking Flags"
+          hide_on_view = set_tracking_flags.size == 0
+      %]
+        [% INCLUDE bug_modal/tracking_flags.html.tmpl
+            type = "tracking"
+        %]
+      [% END %]
+
+    [% END %]
+    [% WRAPPER fields_rhs %]
+
+      [%# project flags %]
+      [% WRAPPER bug_modal/field.html.tmpl
+          container = 1
+          label = "Project Flags"
+          hide_on_view = set_project_flags.size == 0
+      %]
+        [% INCLUDE bug_modal/tracking_flags.html.tmpl
+            type = "project"
+        %]
+      [% END %]
+
+    [% END %]
+  [% END %]
+
+[% END %]
+
+[%# === details === %]
+
+[%
+  sub = [];
+  IF bug.status_whiteboard != "";
+    sub.push(bug.status_whiteboard.truncate(256, '&hellip;'));
+  END;
+  IF bug.cf_crash_signature != "";
+    sub.push("crash signature");
+  END;
+%]
+[% WRAPPER bug_modal/module.html.tmpl
+  title = "Details"
+  collapsed = 1
+  subtitle = sub.join(", ")
+%]
+  [% WRAPPER fields_lhs %]
+
+    [%# whiteboard %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        field = bug_fields.status_whiteboard
+        field_type = constants.FIELD_TYPE_FREETEXT
+    %]
+      [% bug.status_whiteboard == "" ? "---" : bug.status_whiteboard FILTER html %]
+    [% END %]
+
+    [%# votes %]
+    [% IF bug.product_obj.votesperuser %]
+      [% WRAPPER bug_modal/field.html.tmpl
+          container = 1
+          label = "Votes"
+      %]
+        [% bug.votes FILTER html %]
+        vote[% "s" IF bug.votes != 1 %]
+        [% IF user.id %]
+          <button type="button" class="minor" id="vote-btn">
+            [% bug.user_votes ? "Remove vote" : "Vote" %]
+          </button>
+        [% END %]
+      [% END %]
+    [% END %]
+
+    [%# custom fields (except textarea) %]
+    [%
+      FOREACH field = custom_fields;
+        NEXT IF field.type == constants.FIELD_TYPE_EXTENSION || field.type == constants.FIELD_TYPE_TEXTAREA;
+        NEXT IF rendered_custom_fields.exists(field.name);
+        NEXT IF cf_hidden_in_product(field.name, bug.product, bug.component);
+        cf_value = bug.${field.name};
+        IF field.type == constants.FIELD_TYPE_SINGLE_SELECT;
+          has_value = cf_value != "---";
+        ELSIF field.type == constants.FIELD_TYPE_MULTI_SELECT;
+          has_value = cf_value.size != 0;
+        ELSE;
+          has_value = cf_value != "";
+        END;
+        INCLUDE bug_modal/field.html.tmpl
+          field = field
+          field_type = field.type
+          hide_on_view = !has_value;
+      END;
+    %]
+
+  [% END %]
+  [% WRAPPER fields_rhs %]
+
+    [%# url %]
+    [% WRAPPER bug_modal/field.html.tmpl
+        field = bug_fields.bug_file_loc
+        field_type = constants.FIELD_TYPE_FREETEXT
+        hide_on_view = bug.bug_file_loc == ""
+    %]
+      <a href="[% bug.bug_file_loc FILTER html %]" target="_blank"
+         rel="noreferrer" title="[% bug.bug_file_loc FILTER html %]"
+         [% UNLESS is_safe_url(bug.bug_file_loc) +%] class="unsafe-url"[% END %]
+      >[% bug.bug_file_loc FILTER truncate(40) FILTER html %]</a>
+    [% END %]
+
+    [%# see also %]
+    [% INCLUDE bug_modal/field.html.tmpl
+        field = bug_fields.see_also
+        field_type = constants.FIELD_TYPE_BUG_URLS
+        values = bug.see_also
+        hide_on_view = bug.see_also.size == 0
+    %]
+
+  [% END %]
+
+  [%# custom fields (textarea) %]
+  [%
+    FOREACH field IN custom_fields;
+      NEXT IF field.type != constants.FIELD_TYPE_TEXTAREA;
+      NEXT IF rendered_custom_fields.exists(field.name);
+      INCLUDE bug_modal/field.html.tmpl
+        field = field
+        field_type = field.type
+        hide_on_view = bug.${field.name} == "" || bug.${field.name} == "---";
+    END;
+  %]
+[% END %]
+
+[%# === groups === %]
+
+[% WRAPPER bug_modal/module.html.tmpl
+  title = "Security"
+  collapsed = 1
+  subtitle = bug.groups_in.size ? bug.groups_in.pluck("description").join(", ") : "public"
+  hide_on_view = bug.groups_in.size == 0
+  hide_on_edit = bug.groups.size == 0
+%]
+  [% INCLUDE bug_modal/groups.html.tmpl %]
+[% END %]
+
+[%# === user story === %]
+
+[% IF bug.user_story_visible.0 %]
+  [% WRAPPER bug_modal/module.html.tmpl
+    title = "User Story"
+    hide_on_view = bug.cf_user_story == ""
+    collapsed = bug.cf_user_story == ""
+  %]
+    [% IF user.id %]
+      <div id="user-story-actions">
+        [% IF bug.check_can_change_field('cf_user_story', 0, 1) %]
+          <button type="button" class="in-page" id="user-story-edit-btn">Edit</button>
+        [% END %]
+        [% IF bug.cf_user_story != "" && bug.check_can_change_field('longdesc', 0, 1) %]
+          <button type="button" class="in-page" id="user-story-reply-btn">Reply</button>
+        [% END %]
+      </div>
+    [% END %]
+    <pre id="user-story">[% bug.cf_user_story FILTER html %]</pre>
+    [% IF user.id %]
+      <textarea id="cf_user_story" name="cf_user_story" style="display:none" rows="10" cols="80">
+        [%~ bug.cf_user_story FILTER html ~%]
+      </textarea>
+    [% END %]
+  [% END %]
+[% END %]
+
+[%# === attachments === %]
+
+[% IF active_attachments || obsolete_attachments %]
+  [%
+    sub = [];
+    IF active_attachments;
+      sub.push(active_attachments _ " attachment" _ (active_attachments == 1 ? "" : "s"));
+    END;
+    IF obsolete_attachments;
+      sub.push(obsolete_attachments _ " obsolete attachment" _ (obsolete_attachments == 1 ? "" : "s"));
+    END;
+  %]
+  [% WRAPPER bug_modal/module.html.tmpl
+      title = "Attachments"
+      subtitle = sub.join(", ")
+      collapsed = active_attachments == 0
+  %]
+    [% INCLUDE bug_modal/attachments.html.tmpl %]
+    [% IF obsolete_attachments %]
+      <div id="attachments-actions">
+        <button type="button" id="attachments-obsolete-btn" class="in-page">Show Obsolete Attachments</button>
+      </div>
+    [% END %]
+  [% END %]
+[% END %]
+
+[%# === top (between modules and comments) actions === %]
+
+[% IF user.id %]
+  <div id="top-actions">
+    <button type="button" id="attachments-add-btn" class="minor">Attach File</button>
+    <button type="button" class="comment-btn in-page">Add Comment</button>
+    <button type="submit" class="save-btn" id="top-save-btn" style="display:none">Save Changes</button>
+  </div>
+[% END %]
+
+[%# === comments === %]
+
+[%
+  INCLUDE bug_modal/activity_stream.html.tmpl stream=bug.activity_stream;
+  IF user.id;
+    INCLUDE bug_modal/new_comment.html.tmpl;
+  END;
+%]
+
+[%# === bottom actions === %]
+
+[% IF user.id %]
+  <div id="bottom-actions">
+    <button type="submit" class="save-btn" id="bottom-save-btn">Save Changes</button>
+    [%
+      IF bug.resolution == "";
+        seen_header = 0;
+        FOREACH resolution IN ["FIXED", "INVALID", "DUPLICATE"];
+          NEXT UNLESS bug.choices.resolution.only("name", resolution).size;
+          IF NOT seen_header;
+            seen_header = 1;
+            " Resolve as ";
+          END;
+          %] <button type="button" class="in-page resolution-btn">[% resolution FILTER html %]</button> [%
+        END;
+      ELSIF bug.choices.bug_status.only("name", "REOPENED").size;
+          %] <button type="button" class="in-page status-btn" data-status="REOPENED">REOPEN</button> [%
+      END;
+    %]
+    <div id="bottom-right-actions">
+      <button type="button" id="top-btn" class="in-page">Top &uarr;</button>
+      <button type="button" id="new-bug-btn" class="minor">New [% terms.Bug %] &#9662;</button>
+    </div>
+  </div>
+  </form>
+[% ELSE %]
+  <div id="login-required">
+    You need to <a href="show_bug.cgi?id=[% bug.bug_id FILTER none %]&amp;GoAheadAndLogIn=1">log in</a>
+    before you can comment on or make changes to this [% terms.bug %].
+  </div>
+[% END %]
+
+[%# === blocks === %]
+
+[% BLOCK fields_lhs %]
+  <div class="fields-lhs">[% content FILTER none %]</div>
+[% END %]
+
+[% BLOCK fields_rhs %]
+  <div class="fields-rhs">[% content FILTER none %]</div>
+[% END %]
diff --git a/extensions/BugModal/template/en/default/bug_modal/field.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/field.html.tmpl
new file mode 100644
index 000000000..d9b5873d9
--- /dev/null
+++ b/extensions/BugModal/template/en/default/bug_modal/field.html.tmpl
@@ -0,0 +1,275 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%#
+  # field: (field object) bug_fields.$field_name object
+  # field_type: (const) constants.FIELD_TYPE_*
+  # no_label: (boolean) don't output label
+  # label: (string) field label text (default: field_descs.${$field.name}
+  # view_only: (boolean) don't allow editing (default: determined from bug.check_can_change_field)
+  # edit_only: (boolean) always render the edit ui
+  # container: (boolean) output just a label and the content (eg. for multiple fields next to one label)
+  # value: (string) visible value (default: bug.$name)
+  # values: (array of string) list of value objects (FIELD_TYPE_SINGLE_SELECT and _BUG_URLS only) (default: lazy-load on edit)
+  # inline: (boolean) output field as a table-cell instead of as a stand-alone div (default: false)
+  # no_indent: (boolean) don't indent the field (left-padding) (default: false)
+  # full_width: (boolean) the field takes up the complete page width (default: false)
+  # short_width: (boolean) the field shouldn't take up much space at all (default: false)
+  # hide_on_view: (boolean) hide field from read-only view (default: false)
+  # hide_on_edit: (boolean) hide content when in edit mode (default: false)
+  #%]
+
+[%
+IF field_type.defined && !field;
+  RETURN;
+END;
+IF !name.defined;
+  name = field.name;
+END;
+IF !value.defined;
+  value = bug.$name;
+END;
+IF hide_on_edit;
+  view_only = 1;
+END;
+IF view_only || container;
+  editable = 0;
+END;
+IF !editable.defined;
+  editable = bug.check_can_change_field(name, 0, 1);
+END;
+IF inline && !label.defined;
+  no_label = 1;
+END;
+IF !no_label && !label.defined;
+  label = field_descs.${field.name};
+END;
+IF field_type == "";
+  field_type = -1;
+END;
+IF field_type == constants.FIELD_TYPE_DATE
+    || field_type == constants.FIELD_TYPE_DATETIME;
+  short_width = 1;
+END;
+%]
+
+<div class="field
+            [%~ " indent" IF no_label && !no_indent %]
+            [%~ " inline" IF inline %]
+            [%~ " edit-hide" IF hide_on_edit %]
+            [%~ " edit-show" IF hide_on_view && !hide_on_edit %]"
+  [% IF name %] id="field-[% name FILTER html %]"[% END %]
+  [% IF hide_on_view %] style="display:none"[% END %]
+>
+  [% IF label.defined && !no_label %]
+    <div class="name">[% label _ ":" FILTER html IF label %]</div>
+  [% END %]
+
+  [%# read-only html %]
+  [% UNLESS edit_only %]
+    <div class="[% "value" IF !container %][% " edit-hide" IF editable %][% " container" IF container %]">
+      [% IF name %]
+        <span id="field-value-[% name FILTER html %]">
+      [% END %]
+      [% IF content.defined %]
+        [% content FILTER none %]
+      [% ELSE %]
+        [% SWITCH field_type %]
+
+          [% CASE constants.FIELD_TYPE_USER %]
+            [%# users %]
+            [% INCLUDE bug_modal/user.html.tmpl u=value %]
+
+          [% CASE constants.FIELD_TYPE_BUG_URLS %]
+            [%# see also %]
+            [% INCLUDE bug_urls values=values edit=0 %]
+
+          [% CASE constants.FIELD_TYPE_BUG_LIST %]
+            [%# bug lists (generally dependancies) %]
+            [% INCLUDE bug_list values=values edit=0 %]
+
+          [% CASE constants.FIELD_TYPE_TEXTAREA %]
+            [%# text areas %]
+            <span class="multiline-value">[% value FILTER html FILTER html_line_break %]</span>
+
+          [% CASE constants.FIELD_TYPE_MULTI_SELECT %]
+            [%# multi-select %]
+            [% value.join(", ") FILTER html %]
+
+          [% CASE constants.FIELD_TYPE_DATETIME %]
+            [%# datetime %]
+            [% value FILTER time %]
+
+          [% CASE constants.FIELD_TYPE_DATE %]
+            [%# date %]
+            [% value FILTER time("%Y-%m-%d") %]
+
+          [% CASE constants.FIELD_TYPE_BUG_ID %]
+            [%# bug id %]
+            [% value FILTER bug_link(value, use_alias => 1) FILTER none %]
+
+          [% CASE %]
+            [%# every else %]
+            [% value FILTER html %]
+
+        [% END %]
+      [% END %]
+      [% IF name %]
+        </span>
+      [% END %]
+    </div>
+  [% END %]
+
+  [%# edit html %]
+  [% IF editable %]
+    [% "MISSING NAME" UNLESS name %]
+    <div class="value edit edit-show [% " wide" IF full_width %][% " short" IF short_width %]"
+      [% UNLESS edit_only +%] style="display:none"[% END %]>
+      [% SWITCH field_type %]
+
+        [% CASE constants.FIELD_TYPE_SINGLE_SELECT %]
+          [%# single value select %]
+          <select name="[% name FILTER html %]" id="[% name FILTER html %]">
+            [% IF values.defined %]
+              [% FOREACH v IN values %]
+                [% NEXT IF NOT v.is_active AND NOT value.contains(v.name).size %]
+                <option value="[% v.name FILTER html %]"
+                        id="v[% v.id FILTER html %]_[% name FILTER html %]"
+                        [% " selected" IF value.contains(v.name).size %]
+                >[% v.name FILTER html %]</option>
+              [% END %]
+            [% ELSE %]
+              <option value="[% value FILTER html %]" selected>[% value FILTER html %]</option>
+            [% END %]
+          </select>
+
+        [% CASE constants.FIELD_TYPE_MULTI_SELECT %]
+          [%# multi value select %]
+          <select name="[% name FILTER html %]" id="[% name FILTER html %]" multiple size="5">
+            [% IF values.defined %]
+              [%# not implemented %]
+            [% ELSE %]
+              [% FOREACH v IN value %]
+                <option value="[% v FILTER html %]" selected>[% v FILTER html %]</option>
+              [% END %]
+            [% END %]
+          </select>
+
+        [% CASE constants.FIELD_TYPE_FREETEXT %]
+          [%# normal input field %]
+          <input name="[% name FILTER html %]" id="[% name FILTER html %]" value="[% value FILTER html %]">
+
+        [% CASE constants.FIELD_TYPE_USER %]
+          [%# single user %]
+          [% INCLUDE global/userselect.html.tmpl
+              id = name
+              name = name
+              value = value.login
+              classes = [ "bz_userfield" ]
+            %]
+
+        [% CASE constants.FIELD_TYPE_USERS %]
+          [%# multiple users %]
+          [% INCLUDE global/userselect.html.tmpl
+              id = name
+              name = name
+              value = value.join(", ")
+              classes = [ "bz_userfield" ]
+              multiple = 5
+            %]
+
+        [% CASE constants.FIELD_TYPE_KEYWORDS %]
+          [%# keywords %]
+          <input type="text" id="[% name FILTER html %]" name="[% name FILTER html %]"
+            value="[% value FILTER html %]">
+
+        [% CASE constants.FIELD_TYPE_BUG_URLS %]
+          [%# see also %]
+          [% INCLUDE bug_urls values=values edit=1 %]
+
+        [% CASE constants.FIELD_TYPE_BUG_LIST %]
+          [%# bug lists %]
+          [% INCLUDE bug_list values=values edit=1 %]
+
+        [% CASE constants.FIELD_TYPE_TEXTAREA %]
+          [%# text area %]
+            <button type="button" class="in-page edit-textarea-btn [%= "edit-textarea-set-btn" IF value != "" %]"
+              id="[% name FILTER html %]-edit">Edit</button>
+            <span class="multiline-value" id="[% name FILTER html %]-view">[% value FILTER html FILTER html_line_break %]</span>
+            <textarea id="[% name FILTER html %]" name="[% name FILTER html %]"
+              rows="10" cols="10" style="display:none">[% value FILTER html %]</textarea>
+
+        [% CASE constants.FIELD_TYPE_DATETIME %]
+          [%# datetime %]
+          <input class="cf_datetime" name="[% name FILTER html %]" id="[% name FILTER html %]"
+            value="[% value FILTER html %]">
+          <img class="cf_datetime-img" id="[% name FILTER html %]-img"
+            src="extensions/BugModal/web/calendar.png" width="16" height="16">
+
+        [% CASE constants.FIELD_TYPE_DATE %]
+          [%# date %]
+          <input class="cf_date" name="[% name FILTER html %]" id="[% name FILTER html %]"
+            value="[% value FILTER html %]">
+          <img class="cf_date-img" id="[% name FILTER html %]-img"
+            src="extensions/BugModal/web/calendar.png" width="16" height="16">
+
+        [% CASE constants.FIELD_TYPE_INTEGER %]
+          [%# integer %]
+          <input type="number" name="[% name FILTER html %]" id="[% name FILTER html %]"
+            value="[% value FILTER html %]">
+
+        [% CASE constants.FIELD_TYPE_BUG_ID %]
+          [%# bug id %]
+          <input type="text" name="[% name FILTER html %]" id="[% name FILTER html %]"
+            value="[% value FILTER html %]">
+
+        [% CASE %]
+          [%# error %]
+          ('[% name FILTER html %]' [[% field_type FILTER html %])] not supported)
+
+      [% END %]
+    </div>
+  [% END %]
+</div>
+
+[%# bug-urls, currently just see-also %]
+[% BLOCK bug_urls %]
+  [% FOREACH url IN values %]
+    <div>
+      [% IF url.isa('Bugzilla::BugUrl::Bugzilla::Local') %]
+        [% url.target_bug_id FILTER bug_link(url.target_bug_id, use_alias => 1) FILTER none %]
+      [% ELSE %]
+        <a href="[% url.name FILTER html %]">[% url.name FILTER html %]</a>
+      [% END %]
+      [% IF edit %]
+          <label>
+            <input type="checkbox" name="remove_see_also" value="[% url.name FILTER html %]">
+            Remove
+          </label>
+      [% END %]
+    </div>
+  [% END %]
+
+  [% IF edit %]
+    <button id="[% name FILTER html %]-btn" class="bug-urls-btn in-page">Add</button>
+    <input id="[% name FILTER html %]" name="[% name FILTER html %]" style="display:none">
+  [% END %]
+[% END %]
+
+[%# bug lists, depencancies, blockers %]
+[% BLOCK bug_list %]
+  [% IF NOT edit %]
+    [% FOREACH b IN values %]
+      [% INCLUDE bug/link.html.tmpl bug=b link_text=b.id use_alias=1  %]
+      [% ", " UNLESS loop.last %]
+    [% END %]
+  [% ELSE %]
+    <input type="text" id="[% name FILTER html %]" name="[% name FILTER html %]"
+           value="[% values.pluck('id').join(", ") FILTER html %]">
+  [% END %]
+[% END %]
diff --git a/extensions/BugModal/template/en/default/bug_modal/flags.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/flags.html.tmpl
new file mode 100644
index 000000000..4f2381913
--- /dev/null
+++ b/extensions/BugModal/template/en/default/bug_modal/flags.html.tmpl
@@ -0,0 +1,162 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%#
+  # types: array of flag_type objects
+  # no_label: if set to a true value, flag name and status will not be outputted (default: false)
+  # read_only: if true, don't output edit ui (default: false)
+  #%]
+
+[% IF read_only %]
+  <div class="flags edit-hide">
+    [% FOREACH type IN types %]
+      [% FOREACH flag IN type.flags %]
+        <div class="flag">
+          [% UNLESS no_label %]
+            [% INCLUDE bug_modal/user.html.tmpl u=flag.setter nick_only=1 %]
+            [%+ flag.type.name FILTER html %][% flag.status FILTER none %]
+          [% END %]
+          [% IF flag.requestee %]
+            [%+ INCLUDE bug_modal/user.html.tmpl u=flag.requestee nick_only=1 %]
+          [% END %]
+        </div>
+      [% END %]
+    [% END %]
+  </div>
+  [% RETURN %]
+[% END %]
+
+<div id="bug-flags" class="flags">
+  <table class="layout-table">
+  [%
+    FOREACH type IN types;
+      FOREACH flag IN type.flags;
+        IF flag.requestee && flag.requestee.id == user.id;
+          INCLUDE edit_flag t=type f=flag;
+        ELSE;
+        %]
+          <tbody class="edit-hide">
+            [% INCLUDE view_flag t=type f=flag %]
+          </tbody>
+          <tbody class="edit-show" style="display:none">
+            [% INCLUDE edit_flag t=type f=flag %]
+          </tbody>
+        [%
+        END;
+      END;
+    END;
+  %]
+    <tbody class="edit-show" style="display:none">
+    [%
+      FOREACH type IN types;
+        NEXT IF !type.is_active || type.flags.size;
+        INCLUDE edit_flag t=type;
+      END;
+
+      FOREACH type IN types;
+        NEXT IF !type.is_active || !type.is_multiplicable;
+        INCLUDE edit_flag t=type;
+      END;
+    %]
+    </tbody>
+  </table>
+</div>
+
+[% BLOCK view_flag %]
+  <tr>
+    <td class="flag-setter">
+      [% INCLUDE bug_modal/user.html.tmpl u=f.setter nick_only=1 %]
+    </td>
+
+    <td class="flag-name">
+      <span class="rel-time" title="[% f.creation_date FILTER time_duration FILTER html %]">
+        [% f.type.name FILTER html %]
+      </span>
+    </td>
+
+    <td class="flag-value">
+      [% f.status FILTER html %]
+    </td>
+
+    [% IF f.requestee %]
+      <td class="flag-requestee">
+        [% INCLUDE bug_modal/user.html.tmpl u=f.requestee nick_only=1 %]
+      </td>
+    [% END %]
+  </tr>
+[% END %]
+
+[% BLOCK edit_flag %]
+[%
+  can_edit  = !f || (f.setter_id == user.id || (f.requestee_id && f.requestee_id == user.id))
+  flag_id   = f ? "flag-$f.id" : "flag_type-$t.id";
+%]
+  <tr>
+    <td class="flag-setter">
+      [% IF f %]
+        [% INCLUDE bug_modal/user.html.tmpl u=flag.setter nick_only=1 %]
+      [% ELSIF t.flags.size %]
+        addl.
+      [% END %]
+    </td>
+
+    <td class="flag-name">
+      <label title="[% t.description FILTER html %]" for="[% flag_id FILTER html %]">
+        [%~ t.name FILTER html FILTER no_break ~%]
+      </label>
+    </td>
+
+    <td class="flag-value">
+      <select id="[% flag_id FILTER html %]" name="[% flag_id FILTER html %]"
+        title="[% t.description FILTER html %]"
+        [% UNLESS (t.is_requestable && user.can_request_flag(t)) || user.can_set_flag(t) %]
+          disabled
+        [% END %]
+        class="bug-flag">
+        [% IF !f || (can_edit && user.can_request_flag(t)) || f.setter_id == user.id %]
+          <option value="X"></option>
+        [% END %]
+        [% IF t.is_active && can_edit %]
+          [% IF (t.is_requestable && user.can_request_flag(t)) || (f && f.status == "?") %]
+            <option value="?" [% "selected" IF f && f.status == "?" %]>?</option>
+          [% END %]
+          [% IF user.can_set_flag(t) || (f && f.status == "+") %]
+            <option value="+" [% "selected" IF f && f.status == "+" %]>+</option>
+          [% END %]
+          [% IF user.can_set_flag(t) || (f && f.status == "-") %]
+            <option value="-" [% "selected" IF f && f.status == "-" %]>-</option>
+          [% END %]
+        [% ELSE %]
+          <option value="[% f.status FILTER html %]" selected>[% f.status FILTER html %]</option>
+        [% END %]
+      </select>
+    </td>
+
+    [% IF (t.is_requestable && t.is_requesteeble) || (f && f.requestee) %]
+      <td class="flag-requestee">
+        [% flag_name = f ? "requestee-$f.id" : "requestee_type-$t.id" %]
+        <div id="[% flag_name FILTER none %]-container"
+            [% UNLESS f && f.requestee +%] style="display:none"[% END %]>
+          [%
+            flag_requestee = (f && f.requestee) ? f.requestee.login : '';
+            flag_multiple  = f ? 0 : t.is_multiplicable * 3;
+            flag_empty_ok  = f ? 1 : !t.is_multiplicable;
+            INCLUDE global/userselect.html.tmpl
+              name     = flag_name
+              id       = flag_name
+              value    = flag_requestee
+              emptyok  = flag_empty_ok
+              classes  = [ "requestee" ]
+              disabled = !can_edit
+          %]
+        </div>
+      <td>
+    [% END %]
+
+  </tr>
+[% END %]
diff --git a/extensions/BugModal/template/en/default/bug_modal/groups.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/groups.html.tmpl
new file mode 100644
index 000000000..b03db1e49
--- /dev/null
+++ b/extensions/BugModal/template/en/default/bug_modal/groups.html.tmpl
@@ -0,0 +1,68 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%#
+  # bug: bug object
+  #%]
+
+[%
+  PROCESS global/variables.none.tmpl;
+
+  in_all_groups = 1;
+  in_a_group = 0;
+  FOREACH group IN bug.groups;
+    IF NOT group.ingroup;
+      in_all_groups = 0;
+    END;
+    IF group.ison;
+      in_a_group = 1;
+    END;
+  END
+%]
+
+<div class="groups edit-hide">
+  [% IF in_a_group %]
+    <div id="groups-description">
+      Only users in all of the following groups can view this [% terms.bug %]:
+    </div>
+    <ul>
+      [% FOREACH group IN bug.groups %]
+        [% NEXT UNLESS group.ison || group.mandatory %]
+        <li>[% group.description FILTER html %]</li>
+      [% END %]
+    </ul>
+  [% ELSE %]
+    This [% terms.bug %] is publicaly visible.
+  [% END %]
+</div>
+
+<div class="groups edit-show" style="display:none">
+  [% emitted_description = 0 %]
+  [% FOREACH group IN bug.groups %]
+    [% IF NOT emitted_description %]
+      [% emitted_description = 1 %]
+      <div id="groups-description">
+        Only users in all of the selected groups can view this [% terms.bug %]:
+      </div>
+    [% END %]
+
+    [% IF group.ingroup %]
+      <input type="hidden" name="defined_groups" value="[% group.name FILTER html %]">
+    [% END %]
+
+    <div class="group">
+      <input type="checkbox" value="[% group.name FILTER html %]"
+        name="groups" id="group_[% group.bit FILTER html %]"
+        [% " checked" IF group.ison %]
+        [% " disabled" IF NOT group.ingroup || group.mandatory %]>
+      <label for="group_[% group.bit FILTER html %]">
+        [%~ group.description FILTER html_light ~%]
+      </label>
+    </div>
+  [% END %]
+</div>
diff --git a/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl
new file mode 100644
index 000000000..c6dd8b74c
--- /dev/null
+++ b/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl
@@ -0,0 +1,100 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%
+  PROCESS global/variables.none.tmpl;
+
+  # <title>
+  IF bugs.defined;
+    bug = bugs.0;
+  END;
+  title = "$bug.bug_id - ";
+  IF bug.alias;
+    title = title _ "($bug.alias) ";
+  END;
+  unfiltered_title = title _ bug.short_desc;
+  filtered_desc = bug.short_desc FILTER html;
+  title = title _ filtered_desc;
+
+  generate_api_token = 1;
+
+  # these aren't always defined
+  UNLESS bodyclasses.defined;
+    bodyclasses = [];
+  END;
+  UNLESS javascript_urls.defined;
+    javascript_urls = [];
+  END;
+  UNLESS style_urls.defined;
+    style_urls = [];
+  END;
+  UNLESS jquery.defined;
+    jquery = [];
+  END;
+
+  # right now we need yui for the user fields
+  no_yui = 0;
+  yui = ['autocomplete'];
+
+  # add body classes for sec-groups, etc
+  FOREACH group IN bug.groups_in;
+    bodyclasses.push("bz_group_$group.name");
+  END;
+  bodyclasses.push("bug_modal");
+
+  # assets
+  javascript_urls.push(
+    "extensions/BugModal/web/bug_modal.js",
+    "extensions/BugModal/web/ZeroClipboard/ZeroClipboard.min.js",
+    "js/field.js",
+    "js/comments.js",
+  );
+  jquery.push(
+    "datetimepicker",
+  );
+  style_urls.push(
+    "extensions/BugModal/web/bug_modal.css",
+    "skins/custom/bug_groups.css",
+    "js/jquery/plugins/datetimepicker/datetimepicker.css",
+  );
+
+  IF user.in_group('canconfirm');
+    style_urls.push('extensions/TagNewUsers/web/style.css');
+  END;
+%]
+
+[% javascript = BLOCK %]
+  [%# add tracking flags json if available %]
+  [% IF tracking_flags %]
+    [% javascript_urls.push("extensions/TrackingFlags/web/js/tracking_flags.js") %]
+    TrackingFlags = [% tracking_flags_json FILTER none %];
+  [% END %]
+
+  [%# update last-visited %]
+  [% IF user.id && user.is_involved_in_bug(bug) %]
+    $(function() {
+      bugzilla_ajax({
+          url: 'rest/bug_user_last_visit/[% bug.id FILTER none %]',
+          type: 'POST'
+      });
+    });
+  [% END %]
+
+  [%# expose useful data to js %]
+  BUGZILLA.bug_id = [% bug.id FILTER none %];
+  BUGZILLA.bug_title = '[% unfiltered_title FILTER js %]';
+  BUGZILLA.user = {
+    id: [% user.id FILTER none %],
+    login: '[% user.login FILTER js %]',
+    is_insider: [% user.is_insider ? "true" : "false" %],
+    settings: {
+      quote_replies: '[% user.settings.quote_replies.value FILTER js %]',
+      zoom_textareas: [% user.settings.zoom_textareas.value == "on" ? "true" : "false" %]
+    }
+  };
+[% END %]
diff --git a/extensions/BugModal/template/en/default/bug_modal/module.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/module.html.tmpl
new file mode 100644
index 000000000..838069a58
--- /dev/null
+++ b/extensions/BugModal/template/en/default/bug_modal/module.html.tmpl
@@ -0,0 +1,38 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%#
+  # title: (string, optional) main title of module
+  # collapse: (boolean) if true, show as collapsed by default (default false)
+  # subtitle: (string, optional) sub-title
+  # content: (string, required) module's content (use WRAPPER module..)
+  # hide_on_view: (boolean) if true, the module won't be visible in view mode
+  # hide_on_edit: (boolean) if true, the module won't be visible in edit mode
+  #%]
+
+<div class="module
+    [%~ " edit-hide" IF hide_on_edit %]
+    [%~ " edit-show" IF hide_on_view && !hide_on_edit %]"
+    [% IF hide_on_view +%] style="display:none"[% END %]
+    [% IF title %] id="module-[% title.replace FILTER id %]"[% END %]
+>
+  [% IF title %]
+    <div class="module-header">
+      <div class="module-latch">
+        <div class="module-spinner">[% collapsed ? "&#9656;" : "&#9662;" %]</div>
+        <div class="module-title">[% title FILTER html %]</div>
+        [% IF subtitle %]
+          <div class="module-subtitle">([% subtitle FILTER html %])</div>
+        [% END %]
+      </div>
+    </div>
+  [% END %]
+  <div class="module-content" [% ' style="display:none"' IF collapsed %] >
+    [% content FILTER none %]
+  </div>
+</div>
diff --git a/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
new file mode 100644
index 000000000..ff2562bf4
--- /dev/null
+++ b/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
@@ -0,0 +1,29 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%#
+  # comment: comment object
+  # bug: bug object
+  #%]
+
+<div id="add-comment">
+  <div id="add-comment-label">Add Comment:</div>
+  [% IF user.is_insider && bug.check_can_change_field('longdesc', 0, 1) %]
+    <div id="add-comment-private"
+      title="Make comment visible only to members of the '[% Param('insidergroup') FILTER html %]' group"
+    >
+      <input type="checkbox" name="comment_is_private" id="add-comment-private-cb"
+          value="1" comment_id="[% comment.count FILTER none %]">
+      <label for="add-comment-private-cb">Private</label>
+    </div>
+  [% END %]
+  <textarea rows="5" cols="80" name="comment" id="comment"></textarea>
+  <div id="after-comment-commit-button">
+    [% Hook.process("after_comment_commit_button", 'bug/edit.html.tmpl') %]
+  </div>
+</div>
diff --git a/extensions/BugModal/template/en/default/bug_modal/rel_time.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/rel_time.html.tmpl
new file mode 100644
index 000000000..3b31dedeb
--- /dev/null
+++ b/extensions/BugModal/template/en/default/bug_modal/rel_time.html.tmpl
@@ -0,0 +1,21 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%#
+  # ts: timestamp
+  #%]
+
+<span class="rel-time" title="[% ts FILTER time("%Y-%m-%d %H:%M %Z") %]">
+  [%~
+    IF content.defined;
+      content;
+    ELSE;
+      ts FILTER time_duration FILTER html;
+    END;
+  ~%]
+</span>
diff --git a/extensions/BugModal/template/en/default/bug_modal/tracking_flags.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/tracking_flags.html.tmpl
new file mode 100644
index 000000000..5f22338cd
--- /dev/null
+++ b/extensions/BugModal/template/en/default/bug_modal/tracking_flags.html.tmpl
@@ -0,0 +1,96 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%#
+  # type: tracking flag type (eg. "project", "tracking")
+  #%]
+
+[%
+  flags = [];
+  set_flags = [];
+  FOREACH flag IN tracking_flags;
+    NEXT UNLESS flag.flag_type == type;
+    flags.push(flag);
+    NEXT IF flag.bug_flag(bug.id).value == "---";
+    set_flags.push(flag);
+  END;
+  RETURN UNLESS flags.size;
+%]
+
+[%# view %]
+[% IF set_flags.size %]
+  <div class="flags edit-hide">
+    <table class="layout-table tracking-flags">
+      [% IF type == "tracking" %]
+        <tr>
+          <th></th>
+          <th>Tracking</th>
+          <th>Status</th>
+        </tr>
+      [% END %]
+      [% FOREACH row IN tracking_flags_table %]
+        [%
+          NEXT UNLESS row.type == type;
+          tracking_value = row.tracking.bug_flag(bug_id).value || "---";
+          status_value = row.status.bug_flag(bug_id).value || "---";
+          NEXT IF tracking_value == "---" && status_value == "---";
+        %]
+        <tr>
+          <td class="tracking-flag-name">[% row.name FILTER html %]</td>
+          [% IF type == "tracking" %]
+            <td class="tracking-flag-tracking">[% tracking_value FILTER html %]</td>
+          [% END %]
+          <td class="tracking-flag-status">[% status_value FILTER html %]</td>
+        </tr>
+      [% END %]
+    </table>
+  </div>
+[% END %]
+
+[%# edit %]
+<div class="flags edit-show" style="display:none">
+  <table class="layout-table tracking-flags">
+    [% IF type == "tracking" %]
+      <tr>
+        <th></th>
+        <th>Tracking</th>
+        <th>Status</th>
+      </tr>
+    [% END %]
+    [% FOREACH row IN tracking_flags_table %]
+      [% NEXT UNLESS row.type == type %]
+      <tr>
+        <td class="tracking-flag-name">[% row.name FILTER html %]</td>
+        [% IF type == "tracking" %]
+          <td class="tracking-flag-tracking">[% INCLUDE tf_select flag=row.tracking %]</td>
+        [% END %]
+        <td class="tracking-flag-status">[% INCLUDE tf_select flag=row.status %]</td>
+      </tr>
+    [% END %]
+  </table>
+</div>
+
+[% BLOCK tf_select %]
+  [% RETURN UNLESS flag %]
+  <select id="[% flag.name FILTER html %]" name="[% flag.name FILTER html %]">
+    [%
+      flag_bug_value = flag.bug_flag(bug_id).value;
+      FOREACH value IN flag.values;
+        IF value.name != flag_bug_value;
+          NEXT IF !value.is_active || !flag.can_set_value(value.name);
+        END;
+    %]
+        <option value="[% value.name FILTER html %]"
+          id="v[% value.id FILTER html %]_[% flag.name FILTER html %]"
+          [% " selected" IF flag_bug_value == value.name %]
+        >
+          [% value.name FILTER html %]
+        </option>
+    [% END %]
+  </select>
+[% END %]
diff --git a/extensions/BugModal/template/en/default/bug_modal/user.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/user.html.tmpl
new file mode 100644
index 000000000..016017084
--- /dev/null
+++ b/extensions/BugModal/template/en/default/bug_modal/user.html.tmpl
@@ -0,0 +1,53 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%#
+  # u : user object
+  # simple : boolean, if true an unadorned name will be displayed (no gravatar, no menu) (default: false)
+  # gravatar_size : size of the gravator icon (default 0, which disables the gravatar)
+  # gravatar_only : boolean, if true output just the gravatar (not-simple only)
+  # nick_only : boolean, if true, the nickname will be used instead of the full name
+  #%]
+
+[%
+RETURN UNLESS u.id;
+DEFAULT gravatar_size = 0;
+%]
+<div class="vcard vcard_[% u.id FILTER none %]">
+  [% FILTER collapse %]
+
+    [% IF simple %]
+      [% IF user.id %]
+        <span class="fn" title="[% u.identity FILTER html %]">[% u.moz_nick FILTER html %]</span>
+      [% ELSE %]
+        <span class="fn">[% u.moz_nick FILTER html %]</span>
+      [% END %]
+
+    [% ELSE %]
+      [% IF gravatar_size %]
+        <img src="[% u.gravatar(gravatar_size * 2) FILTER none %]" class="gravatar"
+          width="[% gravatar_size FILTER none %]" height="[% gravatar_size FILTER none %]">
+      [% END %]
+      [% UNLESS gravatar_only %]
+        <a class="email [%= "disabled" UNLESS u.is_enabled %]"
+          [% IF user.id %]
+            href="mailto:[% u.email FILTER html %]"
+            onclick="return show_usermenu([% u.id FILTER none %], '[% u.email FILTER js %]', true,
+              [% user.in_group('editusers') || user.bless_groups.size > 0 ? "true" : "false" %])"
+            title="[% u.identity FILTER html %]"
+          [% ELSE %]
+            href="user_profile?user_id=[% u.id FILTER none %]"
+          [% END %]
+          >
+          <span class="[% user.id ? 'fn' : 'fna' %]">[% nick_only ? u.moz_nick : (u.name || u.nick) FILTER html %]</span>
+          [%~~%]
+        </a>
+      [% END %]
+    [% END %]
+  [% END %]
+</div>
diff --git a/extensions/BugModal/template/en/default/hook/global/setting-descs-settings.none.tmpl b/extensions/BugModal/template/en/default/hook/global/setting-descs-settings.none.tmpl
new file mode 100644
index 000000000..7214977bb
--- /dev/null
+++ b/extensions/BugModal/template/en/default/hook/global/setting-descs-settings.none.tmpl
@@ -0,0 +1,11 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%
+  setting_descs.ui_experiments = "Use experimental user interface"
+%]
diff --git a/extensions/BugModal/template/en/default/hook/global/variables-end.none.tmpl b/extensions/BugModal/template/en/default/hook/global/variables-end.none.tmpl
new file mode 100644
index 000000000..acb6ab870
--- /dev/null
+++ b/extensions/BugModal/template/en/default/hook/global/variables-end.none.tmpl
@@ -0,0 +1,13 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%
+  constants.FIELD_TYPE_USER     = 20;
+  constants.FIELD_TYPE_USERS    = 21;
+  constants.FIELD_TYPE_BUG_LIST = 22;
+%]