Convert developer download, first run and whats new pages to Protocol (…

…mozilla#7498) * Convert developer download, first run and whats new pages to Protocol (mozilla#7485) - Convert firefox/developer to Protocol - Convert firefox/developer/<67/whatsnew to Protocol - Convert firefox/developer/>57/firstrun to Protocol - Add newsletter JS to all pages - Move from 3 seperate CSS bundles to one - Standardize design elements across all 3 pages - Remove old design CSS and assets
alexgibson · Aug 22, 2019 · 057dc2c · 057dc2c
1 parent a2cee33
commit 057dc2c
Show file tree

Hide file tree

Showing 65 changed files with 1,183 additions and 1,231 deletions.
diff --git a/bedrock/firefox/templates/firefox/developer/firstrun.html b/bedrock/firefox/templates/firefox/developer/firstrun.html
@@ -4,7 +4,7 @@
 
 {% add_lang_files "firefox/products/developer-quantum" "firefox/shared" %}
 
-{% extends "firefox/base-pebbles.html" %}
+{% extends "firefox/base-protocol.html" %}
 
 {% block page_title %}{{_('Firefox Developer Edition')}}{% endblock %}
 {% block page_desc %}{{ _('Firefox Developer Edition is the blazing fast browser that offers cutting edge developer tools and latest features like CSS Grid support and framework debugging') }}{% endblock %}
@@ -13,40 +13,43 @@
 {% block page_favicon_large %}{{ static('img/firefox/developer/favicon-196.png') }}{% endblock %}
 
 {% block page_css %}
-  {{ css_bundle('firefox_developer_quantum_firstrun') }}
+  {{ css_bundle('firefox_developer') }}
 {% endblock %}
 
 {% block body_id %}firefox-developer{% endblock %}
 {% block body_class %}firefox-developer firefox-developer-firstrun{% endblock %}
 
 {% block content %}
 <main role="main">
-  <section class="section section-intro">
-    <div class="content">
-      <div class="section-body">
-        <h1 class="page-title">{{ _('Welcome to the all-new Firefox Quantum: Developer Edition') }}</h1>
-        <p class="tagline">{{ _('Firefox has been rebuilt from the ground-up to be faster, sleeker, and more powerful than ever.') }}</p>
+  <section class="t-intro">
+      <div class="mzp-l-content">
+        <h1 class="intro-title">{{ _('Welcome to the all-new Firefox Quantum: Developer Edition') }}</h1>
+        <p class="intro-tagline">{{ _('Firefox has been rebuilt from the ground-up to be faster, sleeker, and more powerful than ever.') }}</p>
 
         {% include '/firefox/developer/includes/intro-features.html' %}
-      </div>
     </div>
   </section>
 
   {% include '/firefox/developer/includes/alt-newsletter.html' %}
 
   {% include '/firefox/developer/includes/highlights.html' %}
 
-  {% include '/firefox/developer/includes/alt-performance.html' %}
+  {% include '/firefox/developer/includes/performance.html' %}
 
   {% include '/firefox/developer/includes/features.html' %}
 
-  {% include '/firefox/developer/includes/engage.html' %}
-
-  {% include '/firefox/developer/includes/nightly.html' %}
+  <section class="t-engage mzp-t-dark">
+    {% include '/firefox/developer/includes/engage.html' %}
+  </section>
 </main>
 {% endblock %}
 
 {% block email_form %}{% endblock %}
 
 {# Bug 1381776 #}
 {% block update_notification %}{% endblock %}
+
+{% block js %}
+  {{ js_bundle('firefox_developer') }}
+{% endblock %}
+
diff --git a/bedrock/firefox/templates/firefox/developer/includes/alt-newsletter.html b/bedrock/firefox/templates/firefox/developer/includes/alt-newsletter.html
@@ -1,10 +1,21 @@
-<section class="section section-newsletter">
-  <div class="content">
-  {% if LANG.startswith('en-') %}
-    {# L10n: line break for visual formatting #}
-    {{ email_newsletter_form('app-dev', 'Mozilla Developer Newsletter', subtitle=_('Get developer news, tricks and resources <br /> sent straight to your inbox.'), button_class='button-hollow button-light', include_language=False) }}
-  {% else %}
-    {{ email_newsletter_form(spinner_color='#fff', button_class='button-hollow button-light') }}
-  {% endif %}
+<section class="t-newsletter">
+  <div class="mzp-l-content">
+      <div class="mzp-c-newsletter">
+        {% if LANG.startswith('en-') %}
+          {# L10n: line break for visual formatting #}
+          {{ email_newsletter_form(
+            'app-dev',
+            title='Mozilla Developer Newsletter',
+            subtitle=_('Get developer news, tricks and resources <br /> sent straight to your inbox.'),
+            button_class='mzp-t-product',
+            include_language=False,
+            protocol_component=True) }}
+        {% else %}
+          {{ email_newsletter_form(
+            protocol_component=True,
+            spinner_color='#fff',
+            button_class='mzp-c-button mzp-t-product') }}
+        {% endif %}
+      </div>
   </div>
 </section>
diff --git a/bedrock/firefox/templates/firefox/developer/includes/alt-performance.html b/bedrock/firefox/templates/firefox/developer/includes/alt-performance.html
diff --git a/bedrock/firefox/templates/firefox/developer/includes/engage.html b/bedrock/firefox/templates/firefox/developer/includes/engage.html
@@ -1,17 +1,16 @@
-<section class="section section-engage">
-  <div class="content">
-
-    <section class="speak-up">
-      <h3>{{ _('Speak up') }}</h3>
-      <p>{{ _('Feedback makes us better. Tell us how we can improve the browser and Developer tools.') }}</p>
-      <p class="cta"><a href="https://discourse.mozilla.org/c/devtools" class="button button-hollow">{{ _('Join the conversation') }}</a></p>
-    </section>
-
-    <section class="get-involved">
-      <h3>{{ _('Get involved') }}</h3>
-      <p>{{ _('Help build the last independent browser. Write code, fix bugs, make add-ons, and more.') }}</p>
-      <p class="cta"><a href="https://firefox-dev.tools/" class="button button-hollow">{{ _('Start now') }}</a></p>
-    </section>
-
-  </div>
-</section>
+<div class="mzp-l-content t-do">
+  <section class="mzp-c-card-picto mzp-c-card-picto-compact t-speak-up">
+    <div class="mzp-c-card-picto-content">
+        <h3 class="mzp-c-card-picto-title">{{ _('Speak up') }}</h3>
+        <p>{{ _('Feedback makes us better. Tell us how we can improve the browser and Developer tools.') }}</p>
+        <p><a class="mzp-c-cta-link" href="https://discourse.mozilla.org/c/devtools">{{ _('Join the conversation') }}</a></p>
+    </div>
+  </section>
+  <section class="mzp-c-card-picto mzp-c-card-picto-compact t-get-involved">
+    <div class="mzp-c-card-picto-content">
+        <h3 class="mzp-c-card-picto-title">{{ _('Get involved') }}</h3>
+        <p>{{ _('Help build the last independent browser. Write code, fix bugs, make add-ons, and more.') }}</p>
+        <p><a class="mzp-c-cta-link" href="https://firefox-dev.tools/">{{ _('Start now') }}</a></p>
+    </div>
+  </section>
+</div>
diff --git a/bedrock/firefox/templates/firefox/developer/includes/features.html b/bedrock/firefox/templates/firefox/developer/includes/features.html
@@ -1,123 +1,117 @@
-<section class="section section-features">
-  <div class="content">
-    <h2 class="section-title"><span>{{ _('Design. Code. Test. Refine.') }}</span></h2>
+<section class="t-features mzp-l-content">
+  <h2 class="c-title"><span>{{ _('Design. Code. Test. Refine.') }}</span></h2>
+  {# L10n: line break for visual formatting #}
+  <h3 class="c-subtitle">{{ _('Build and Perfect your sites<br> with Firefox DevTools') }}</h3>
 
-    <div class="section-body">
-      {# L10n: line break for visual formatting #}
-      <h3 class="body-title">{{ _('Build and Perfect your sites<br> with Firefox DevTools') }}</h3>
+  <ul class="c-gallery-grid">
+    <li class="c-gallery-item">
+      <img class="c-feature-img" src="{{ static('img/firefox/developer/feature-inspector.svg') }}" alt="">
+      <h3 class="c-feature-name">{{ _('Inspector') }}</h3>
+      <p class="c-feature-desc">
+        {{ _('Inspect and refine code to build pixel-perfect layouts.') }}
+        {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
+          <p class="c-feature-more"><a href="https://developer.mozilla.org/docs/Tools/Page_Inspector" class="mzp-c-cta-link" rel="external">{{ _('Learn more about Page Inspector') }}</a></p>
+        {% endif %}
+      </p>
+    </li>
 
-      <ul class="features-list gallery-list has-three-cols">
-        <li class="gallery-item feature">
-          <img class="icon" src="{{ static('img/firefox/developer/feature-inspector.svg') }}" alt="">
-          <h3 class="name">{{ _('Inspector') }}</h3>
-          <p class="desc">
-            {{ _('Inspect and refine code to build pixel-perfect layouts.') }}
-            {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
-              <a href="https://developer.mozilla.org/docs/Tools/Page_Inspector" class="features-learn-more" rel="external">{{ _('Learn more about Page Inspector') }}</a>
-            {% endif %}
-          </p>
-        </li>
+    <li class="c-gallery-item">
+      <img class="c-feature-img" src="{{ static('img/firefox/developer/feature-console.svg') }}" alt="">
+      <h3 class="c-feature-name">{{ _('Console') }}</h3>
+      <p class="c-feature-desc">
+        {{ _('Track CSS, JavaScript, security and network issues.') }}
+        {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
+          <p class="c-feature-more"><a href="https://developer.mozilla.org/docs/Tools/Web_Console" class="mzp-c-cta-link" rel="external">{{ _('Learn more about Web Console') }}</a></p>
+        {% endif %}
+      </p>
+    </li>
 
-        <li class="gallery-item feature">
-          <img class="icon" src="{{ static('img/firefox/developer/feature-console.svg') }}" alt="">
-          <h3 class="name">{{ _('Console') }}</h3>
-          <p class="desc">
-            {{ _('Track CSS, JavaScript, security and network issues.') }}
-            {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
-              <a href="https://developer.mozilla.org/docs/Tools/Web_Console" class="features-learn-more" rel="external">{{ _('Learn more about Web Console') }}</a>
-            {% endif %}
-          </p>
-        </li>
+    <li class="c-gallery-item">
+      <img class="c-feature-img" src="{{ static('img/firefox/developer/feature-debugger.svg') }}" alt="">
+      <h3 class="c-feature-name">{{ _('Debugger') }}</h3>
+      <p class="c-feature-desc">
+        {{ _('Powerful JavaScript debugger with support for your framework.') }}
+        {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
+          <p class="c-feature-more"><a href="https://developer.mozilla.org/docs/Tools/Debugger" class="mzp-c-cta-link" rel="external">{{ _('Learn more about JavaScript Debugger') }}</a></p>
+        {% endif %}
+      </p>
+    </li>
 
-        <li class="gallery-item feature">
-          <img class="icon" src="{{ static('img/firefox/developer/feature-debugger.svg') }}" alt="">
-          <h3 class="name">{{ _('Debugger') }}</h3>
-          <p class="desc">
-            {{ _('Powerful JavaScript debugger with support for your framework.') }}
-            {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
-              <a href="https://developer.mozilla.org/docs/Tools/Debugger" class="features-learn-more" rel="external">{{ _('Learn more about JavaScript Debugger') }}</a>
-            {% endif %}
-          </p>
-        </li>
+    <li class="c-gallery-item">
+      <img class="c-feature-img" src="{{ static('img/firefox/developer/feature-network.svg') }}" alt="">
+      <h3 class="c-feature-name">{{ _('Network') }}</h3>
+      <p class="c-feature-desc">
+        {{ _('Monitor network requests that can slow or block your site.') }}
+        {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
+          <p class="c-feature-more"><a href="https://developer.mozilla.org/docs/Tools/Network_Monitor" class="mzp-c-cta-link" rel="external">{{ _('Learn more about Network Monitor') }}</a></p>
+        {% endif %}
+      </p>
+    </li>
 
-        <li class="gallery-item feature">
-          <img class="icon" src="{{ static('img/firefox/developer/feature-network.svg') }}" alt="">
-          <h3 class="name">{{ _('Network') }}</h3>
-          <p class="desc">
-            {{ _('Monitor network requests that can slow or block your site.') }}
-            {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
-              <a href="https://developer.mozilla.org/docs/Tools/Network_Monitor" class="features-learn-more" rel="external">{{ _('Learn more about Network Monitor') }}</a>
-            {% endif %}
-          </p>
-        </li>
+    <li class="c-gallery-item">
+      <img class="c-feature-img" src="{{ static('img/firefox/developer/feature-storage.svg') }}" alt="">
+      <h3 class="c-feature-name">{{ _('Storage panel') }}</h3>
+      <p class="c-feature-desc">
+        {{ _('Add, modify and remove cache, cookies, databases and session data.') }}
+        {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
+          <p class="c-feature-more"><a href="https://developer.mozilla.org/docs/Tools/Storage_Inspector" class="mzp-c-cta-link" rel="external">{{ _('Learn more about Storage Panel') }}</a></p>
+        {% endif %}
+      </p>
+    </li>
 
-        <li class="gallery-item feature">
-          <img class="icon" src="{{ static('img/firefox/developer/feature-storage.svg') }}" alt="">
-          <h3 class="name">{{ _('Storage panel') }}</h3>
-          <p class="desc">
-            {{ _('Add, modify and remove cache, cookies, databases and session data.') }}
-            {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
-              <a href="https://developer.mozilla.org/docs/Tools/Storage_Inspector" class="features-learn-more" rel="external">{{ _('Learn more about Storage Panel') }}</a>
-            {% endif %}
-          </p>
-        </li>
+    <li class="c-gallery-item">
+      <img class="c-feature-img" src="{{ static('img/firefox/developer/feature-responsive-mode.svg') }}" alt="">
+      <h3 class="c-feature-name">{{ _('Responsive Design Mode') }}</h3>
+      <p class="c-feature-desc">
+        {{ _('Test sites on emulated devices in your browser.') }}
+        {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
+          <p class="c-feature-more"><a href="https://developer.mozilla.org/docs/Tools/Responsive_Design_View" class="mzp-c-cta-link" rel="external">{{ _('Learn more about Responsive Design View') }}</a></p>
+        {% endif %}
+      </p>
+    </li>
 
-        <li class="gallery-item feature">
-          <img class="icon" src="{{ static('img/firefox/developer/feature-responsive-mode.svg') }}" alt="">
-          <h3 class="name">{{ _('Responsive Design Mode') }}</h3>
-          <p class="desc">
-            {{ _('Test sites on emulated devices in your browser.') }}
-            {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
-              <a href="https://developer.mozilla.org/docs/Tools/Responsive_Design_View" class="features-learn-more" rel="external">{{ _('Learn more about Responsive Design View') }}</a>
-            {% endif %}
-          </p>
-        </li>
+    <li class="c-gallery-item">
+      <img class="c-feature-img" src="{{ static('img/firefox/developer/feature-visual-editing.svg') }}" alt="">
+      <h3 class="c-feature-name">{{ _('Visual Editing') }}</h3>
+      <p class="c-feature-desc">
+        {{ _('Fine-tune animations, alignment and padding.') }}
+        {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
+          <p class="c-feature-more"><a href="https://hacks.mozilla.org/2015/11/developer-edition-44-creative-tools-and-more" class="mzp-c-cta-link" rel="external">{{ _('Learn more about Visual Editing') }}</a></p>
+        {% endif %}
+      </p>
+    </li>
 
-        <li class="gallery-item feature">
-          <img class="icon" src="{{ static('img/firefox/developer/feature-visual-editing.svg') }}" alt="">
-          <h3 class="name">{{ _('Visual Editing') }}</h3>
-          <p class="desc">
-            {{ _('Fine-tune animations, alignment and padding.') }}
-            {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
-              <a href="https://hacks.mozilla.org/2015/11/developer-edition-44-creative-tools-and-more" class="features-learn-more" rel="external">{{ _('Learn more about Visual Editing') }}</a>
-            {% endif %}
-          </p>
-        </li>
+    <li class="c-gallery-item">
+      <img class="c-feature-img" src="{{ static('img/firefox/developer/feature-performance.svg') }}" alt="">
+      <h3 class="c-feature-name">{{ _('Performance') }}</h3>
+      <p class="c-feature-desc">
+        {{ _('Unblock bottlenecks, streamline processes, optimize assets.') }}
+        {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
+          <p class="c-feature-more"><a href="https://developer.mozilla.org/docs/Tools/Performance" class="mzp-c-cta-link" rel="external">{{ _('Learn more about Performance Tools') }}</a></p>
+        {% endif %}
+      </p>
+    </li>
 
-        <li class="gallery-item feature">
-          <img class="icon" src="{{ static('img/firefox/developer/feature-performance.svg') }}" alt="">
-          <h3 class="name">{{ _('Performance') }}</h3>
-          <p class="desc">
-            {{ _('Unblock bottlenecks, streamline processes, optimize assets.') }}
-            {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
-              <a href="https://developer.mozilla.org/docs/Tools/Performance" class="features-learn-more" rel="external">{{ _('Learn more about Performance Tools') }}</a>
-            {% endif %}
-          </p>
-        </li>
+    <li class="c-gallery-item">
+      <img class="c-feature-img" src="{{ static('img/firefox/developer/feature-memory.svg') }}" alt="">
+      <h3 class="c-feature-name">{{ _('Memory') }}</h3>
+      <p class="c-feature-desc">
+        {{ _('Find memory leaks and make your application zippy.') }}
+        {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
+          <p class="c-feature-more"><a href="https://developer.mozilla.org/docs/Tools/Memory" class="mzp-c-cta-link" rel="external">{{ _('Learn more about Memory Tools') }}</a></p>
+        {% endif %}
+      </p>
+    </li>
 
-        <li class="gallery-item feature">
-          <img class="icon" src="{{ static('img/firefox/developer/feature-memory.svg') }}" alt="">
-          <h3 class="name">{{ _('Memory') }}</h3>
-          <p class="desc">
-            {{ _('Find memory leaks and make your application zippy.') }}
-            {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
-              <a href="https://developer.mozilla.org/docs/Tools/Memory" class="features-learn-more" rel="external">{{ _('Learn more about Memory Tools') }}</a>
-            {% endif %}
-          </p>
-        </li>
-
-        <li class="gallery-item feature">
-          <img class="icon" src="{{ static('img/firefox/developer/feature-style-editor.svg') }}" alt="">
-          <h3 class="name">{{ _('Style Editor') }}</h3>
-          <p class="desc">
-            {{ _('Edit and manage all your CSS stylesheets in your browser.') }}
-            {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
-              <a href="https://developer.mozilla.org/docs/Tools/Style_Editor" class="features-learn-more" rel="external">{{ _('Learn more about Style Editor') }}</a>
-            {% endif %}
-          </p>
-        </li>
-      </ul>
-    </div>
-
-  </div>
+    <li class="c-gallery-item">
+      <img class="c-feature-img" src="{{ static('img/firefox/developer/feature-style-editor.svg') }}" alt="">
+      <h3 class="c-feature-name">{{ _('Style Editor') }}</h3>
+      <p class="c-feature-desc">
+        {{ _('Edit and manage all your CSS stylesheets in your browser.') }}
+        {% if l10n_has_tag('quantum-firstrun-whatsnew') %}
+          <p class="c-feature-more"><a href="https://developer.mozilla.org/docs/Tools/Style_Editor" class="mzp-c-cta-link" rel="external">{{ _('Learn more about Style Editor') }}</a></p>
+        {% endif %}
+      </p>
+    </li>
+  </ul>
 </section>