Add "some html help" popups

apps/devhub/templates/devhub/addons/submit/license.html

@@ -1,3 +1,4 @@
+{% from "devhub/includes/macros.html" import some_html_tip %}
 {% extends "devhub/addons/submit/base.html" %}
 
 {% block primary %}
@@ -23,6 +24,7 @@
       {{ license_form.text.errors|safe }}
       {{ license_form.text.label_tag()|safe }}
       {{ license_form.text|safe }}
+      {{ some_html_tip() }}
     </div>
   </div>
   {% set values = policy_form.data if policy_form.is_bound else policy_form.initial %}
@@ -33,6 +35,7 @@
       {{ policy_form.eula.errors|safe }}
       {{ policy_form.eula.label_tag()|safe }}
       {{ policy_form.eula|safe }}
+      {{ some_html_tip() }}
     </div>
   </div>
   <div class="addon-submission-field">

apps/devhub/templates/devhub/includes/addon_edit_details.html

@@ -1,4 +1,4 @@
-{% from "devhub/includes/macros.html" import tip, empty_unless %}
+{% from "devhub/includes/macros.html" import tip, some_html_tip, empty_unless %}
 
 <form method="post" action="{{ url('devhub.addons.section', addon.slug, 'details', 'edit') }}">
   <h3>
@@ -29,6 +29,7 @@
               {% if editable %}
                 {{ form.description|safe }}
                 {{ form.description.errors|safe }}
+                {{ some_html_tip() }}
               {% else %}
                 {% call empty_unless(addon.description) %}
                   <div id="addon_description">{{ addon|all_locales('description') }}</div>

apps/devhub/templates/devhub/includes/addon_edit_technical.html

@@ -1,4 +1,4 @@
-{% from "devhub/includes/macros.html" import tip, empty_unless, flags %}
+{% from "devhub/includes/macros.html" import tip, some_html_tip, empty_unless, flags %}
 
 <form method="post" action="{{ url('devhub.addons.section', addon.slug, 'technical', 'edit') }}">
   <h3>
@@ -30,6 +30,7 @@
               {% if editable %}
                 {{ form.developer_comments|safe }}
                 {{ form.developer_comments.errors|safe }}
+                {{ some_html_tip() }}
               {% else %}
                 {% call empty_unless(addon.developer_comments) %}
                   <div id="developer_comments">{{ addon|all_locales('developer_comments') }}</div>

apps/devhub/templates/devhub/includes/addons_create_profile.html

@@ -1,4 +1,5 @@
 {% from 'includes/forms.html' import required %}
+{% from 'devhub/includes/macros.html' import some_html_tip %}
 
 {% macro maybe_required() %}
   {% if not slim %}
@@ -48,6 +49,7 @@
   </span>
   {{ profile_form.the_reason.errors|safe }}
   {{ profile_form.the_reason|safe }}
+  {{ some_html_tip() }}
 </div>
 
 <div class="container">
@@ -63,4 +65,5 @@
   </span>
   {{ profile_form.the_future.errors|safe }}
   {{ profile_form.the_future|safe }}
+  {{ some_html_tip() }}
 </div>

apps/devhub/templates/devhub/includes/macros.html

@@ -5,6 +5,15 @@
   <span class="tip tooltip" title="{{ tip }}">?</span>
 {% endmacro %}
 
+{% macro some_html_tip() %}
+<p class="html-support">
+{# L10n: {0} is a list of HTML tags. #}
+<span class="tooltip" title="{{ _('Allowed HTML: {0}')|f('<a href title> <abbr title>
+                                   <acronym title> <b> <blockquote> <code>
+                                   <em> <i> <li> <ol> <strong> <ul>')|e }}">{{ _('Some HTML supported') }}</span>
+</p>
+{% endmacro %}
+
 {% macro empty_unless(truthy) %}
   {% if truthy %}
     {{ caller() }}

apps/devhub/templates/devhub/includes/policy_form.html

@@ -1,3 +1,4 @@
+{% from "devhub/includes/macros.html" import some_html_tip %}
 <tr>
   <th>{{ _('EULA') }}</th>
   <td>
@@ -7,6 +8,7 @@
       {{ policy_form.eula.errors|safe }}
       {{ policy_form.eula.label_tag()|safe }}
       {{ policy_form.eula|safe }}
+      {{ some_html_tip() }}
     </div>
   </td>
 </tr>
@@ -19,6 +21,7 @@
       {{ policy_form.privacy_policy.errors|safe }}
       {{ policy_form.privacy_policy.label_tag()|safe }}
       {{ policy_form.privacy_policy|safe }}
+      {{ some_html_tip() }}
     </div>
   </td>
 </tr>

apps/users/templates/users/edit.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% from 'includes/forms.html' import required %}
+{% from 'devhub/includes/macros.html' import some_html_tip %}
 
 {% block title %}{{ page_title(_('Account Settings')) }}{% endblock %}
 
@@ -144,12 +145,7 @@
             {%- endtrans %}
           </p>
           {{ form.bio|safe }}
-          <p class="allowed-html">
-            <strong>{{ _('Some HTML allowed:') }}</strong>
-            &lt;a href title&gt; &lt;abbr title&gt; &lt;acronym title&gt;
-            &lt;b&gt; &lt;blockquote&gt; &lt;code&gt; &lt;em&gt; &lt;i&gt;
-            &lt;li&gt; &lt;ol&gt; &lt;strong&gt; &lt;ul&gt;
-          </p>
+          {{ some_html_tip() }}
           {{ form.bio.errors|safe }}
         </fieldset> {# /.profile-detail #}
 

media/css/zamboni/developers.css

@@ -202,6 +202,7 @@ ul.refinements:last-child {
     font-weight: bold;
     display: inline;
 }
+
 span.locale {
     font-weight: normal;
     font-size: .9em;

media/css/zamboni/zamboni.css

@@ -1144,10 +1144,6 @@ fieldset legend { /* based on h3 */
     margin: 0.75em 0 0;
 }
 
-.allowed-html {
-    font-size: .8em;
-}
-
 .user-input h3 {
   margin: 0 0 .5em;
 }
@@ -3197,6 +3193,22 @@ input.ui-autocomplete-loading {
 }
 /* end l10n */
 
+/** "Some HTML Allowed" text/popup **/
+.html-support {
+    font-size: .9em;
+    color: #888;
+    float: right;
+}
+
+.html-rtl .html-support {
+    float: left;
+}
+
+.html-support:hover {
+    color: #000;
+    cursor: help;
+}
+
 /**
  *    Firefox 4 Beta promo styles
  *    TODO remove these when promo is pulled