Switch from django-pipeline to gulp tasks for asset processing (#5618)

* Move from django-pipeline to Gulp for static-assets

* Use Gulp tasks to compile less and sass
* Use Gulp tasks to concatinate files into bundles
* Use Gulp tasks to minify files for deployment
* Use Gulp tasks for development to watch for changes
* Use BrowserSync to serve development static files and refresh the
  in-progress page
* Update Docker setup to use multi-stage build
* Update Makefile to build and run the docker setup
* Update docs to recommend Docker-based development
* Update deployment and testing to also use the Makefile

* Add rebuild of SASS bundles when library files change

* Add an intermediate build directory just for LESS and SASS
* Avoid issues with ambiguous imports when .css and .scss in the same
  directory

* Set deployment docker image in git env var script

.circleci/config.yml

@@ -1,40 +1,18 @@
 version: 2
 jobs:
   test_py:
-    machine:
-      image: circleci/classic:201710-01
+    docker:
+      - image: circleci/python:2.7-stretch
     steps:
       - checkout
-      - run:
-          name: Git Submodule
-          command: |
-            git submodule sync
-            git submodule update --init --recursive
-            echo "$CIRCLE_SHA1" > .current-git-hash
-      - restore_cache:
-          keys:
-            - v1-docker-layers-{{ checksum ".current-git-hash" }}
-            - v1-docker-layers-
+      - setup_remote_docker
       - run:
           name: Python Tests
-          command: |
-            if [[ -e docker-cache/images.tar ]]; then docker load --input docker-cache/images.tar; fi
-            docker/bin/build_images.sh --test
-            docker/bin/run_tests.sh
-            mkdir -p docker-cache
-            docker save -o docker-cache/images.tar \
-                "mozorg/bedrock_base:${CIRCLE_SHA1}" \
-                "mozorg/bedrock_build:${CIRCLE_SHA1}" \
-                "mozorg/bedrock_code:${CIRCLE_SHA1}" \
-                "mozorg/bedrock_test:${CIRCLE_SHA1}"
-      - save_cache:
-          key: v1-docker-layers-{{ checksum ".current-git-hash" }}
-          paths:
-            - docker-cache
+          command: make clean test-image
 
   test_js:
     docker:
-      - image: circleci/node:6.11.4-browsers
+      - image: "circleci/node:6.11.4-browsers"
     steps:
       - checkout
       - restore_cache:

.gitignore

@@ -48,9 +48,10 @@ tests/functional/driver.log
 tests/functional/assets
 .eslintcache
 .docker-build*
-Dockerfile-*
 root_files/sitemap.xml
 root_files/default-urls.json
 node_modules
 package-lock.json
 .vscode/
+static_build
+static_final

Dockerfile

@@ -0,0 +1,137 @@
+########
+# assets builder and dev server
+#
+FROM node:8-slim AS assets
+
+ENV PATH=/app/node_modules/.bin:$PATH
+WORKDIR /app
+
+# copy dependency definitions
+COPY package.json yarn.lock ./
+
+# install dependencies
+RUN yarn install --pure-lockfile
+RUN yarn global add gulp-cli@2.0.1
+
+# copy supporting files and media
+COPY .eslintrc.js .stylelintrc \
+     gulpfile.js static-bundles.json ./
+COPY ./media ./media
+
+
+########
+# Python dependencies builder
+#
+FROM python:2-stretch AS python-builder
+
+WORKDIR /app
+ENV LANG=C.UTF-8
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+ENV PATH="/venv/bin:$PATH"
+
+COPY docker/bin/apt-install /usr/local/bin/
+RUN apt-install gettext build-essential libxml2-dev libxslt1-dev libxslt1.1
+
+RUN virtualenv /venv
+
+COPY requirements/base.txt requirements/prod.txt ./requirements/
+
+# Install Python deps
+RUN pip install --no-cache-dir -r requirements/prod.txt
+
+
+########
+# django app container
+#
+FROM python:2-slim-stretch AS app-base
+
+# Extra python env
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+ENV PIP_DISABLE_PIP_VERSION_CHECK=1
+ENV PATH="/venv/bin:$PATH"
+
+# add non-priviledged user
+RUN adduser --uid 1000 --disabled-password --gecos '' --no-create-home webdev
+
+WORKDIR /app
+EXPOSE 8000
+CMD ["./bin/run.sh"]
+
+COPY docker/bin/apt-install /usr/local/bin/
+RUN apt-install gettext libxslt1.1 git
+
+# copy in Python environment
+COPY --from=python-builder /venv /venv
+
+# changes infrequently
+COPY ./bin ./bin
+COPY ./etc ./etc
+COPY ./lib ./lib
+COPY ./root_files ./root_files
+COPY ./scripts ./scripts
+COPY ./wsgi ./wsgi
+COPY manage.py LICENSE newrelic.ini contribute.json ./
+
+# changes more frequently
+COPY ./docker ./docker
+COPY ./vendor-local ./vendor-local
+COPY ./bedrock ./bedrock
+COPY ./media ./media
+
+
+########
+# expanded webapp image for testing and dev
+#
+FROM app-base AS devapp
+
+CMD ["./bin/run-tests.sh"]
+
+COPY requirements/base.txt requirements/dev.txt ./requirements/
+RUN pip install --no-cache-dir -r requirements/dev.txt
+COPY ./setup.cfg ./
+COPY ./tests ./tests
+
+# get fresh database
+RUN ./bin/run-db-download.py --force
+
+# get fresh l10n files
+RUN ./manage.py l10n_update
+
+# generate the sitemaps
+RUN ./manage.py update_sitemaps
+
+RUN chown webdev.webdev -R .
+USER webdev
+
+
+########
+# build production assets
+#
+FROM assets AS assets-release
+RUN gulp build --production
+
+
+########
+# final image for deployment
+#
+FROM app-base AS release
+
+COPY --from=assets-release /app/static_final /app/static_final
+RUN honcho run --env docker/envfiles/prod.env docker/bin/build_staticfiles.sh
+
+# build args
+ARG GIT_SHA=latest
+ARG BRANCH_NAME=master
+ENV GIT_SHA=${GIT_SHA}
+ENV BRANCH_NAME=${BRANCH_NAME}
+
+# rely on build args
+RUN bin/run-sync-all.sh
+
+RUN echo "${GIT_SHA}" > ./static/revision.txt
+
+# Change User
+RUN chown webdev.webdev -R .
+USER webdev

Jenkinsfile

@@ -50,14 +50,6 @@ def loadBranch(String branch) {
 node {
     stage ('Prepare') {
         checkout scm
-        sh 'git submodule sync'
-        sh 'git submodule update --init --recursive'
-        // clean up
-        sh 'make clean'
-        // save the files for later
-        stash name: 'scripts', includes: 'bin/,docker/'
-        stash name: 'tests', includes: 'tests/,requirements/'
-        stash 'workspace'
     }
     loadBranch(env.BRANCH_NAME)
 }

Makefile

@@ -1,80 +1,100 @@
-BASE_IMG_NAME = bedrock_base
-DEV_IMG_NAME = bedrock_dev
-GIT_SHA = $(shell git rev-parse HEAD)
-FINAL_IMG_NAME = bedrock_dev_final:${GIT_SHA}
+DC_CI = "bin/docker-compose.sh"
+DC = $(shell which docker-compose)
 
-default:
+default: help
+	@echo ""
 	@echo "You need to specify a subcommand."
 	@exit 1
 
 help:
-	@echo "build           - build docker containers for dev"
-	@echo "run             - docker-compose up the entire system for dev"
+	@echo "build         - build docker images for dev"
+	@echo "run           - docker-compose up the entire system for dev"
 	@echo ""
-	@echo "clean           - remove all build, test, coverage and Python artifacts"
-	@echo "test            - run unit tests"
-	@echo "sync-all				 - sync external data to local database"
-	@echo "test-image      - run tests on the code built into the docker image"
-	@echo "build-final     - build final docker container for demo deployment"
-	@echo "docs            - generate Sphinx HTML documentation, including API docs"
+	@echo "pull          - pull the latest production images from Docker Hub"
+	@echo "shell         - start the Django Python shell (bpython and shell_plus)"
+	@echo "clean         - remove all build, test, coverage and Python artifacts"
+	@echo "rebuild       - force a rebuild of all of the docker images"
+	@echo "submodules    - resync and fetch the latest git submodules"
+	@echo "lint          - check style with flake8, jshint, and stylelint"
+	@echo "test          - run tests against local files"
+	@echo "test-image    - run tests against files in docker image"
+	@echo "docs          - generate Sphinx HTML documentation"
+	@echo "build-ci      - build docker images for use in our CI pipeline"
+	@echo "test-ci       - run tests against files in docker image built by CI"
+
+.env:
+	@if [ ! -f .env ]; then \
+		echo "Copying .env-dist to .env..."; \
+		cp .env-dist .env; \
+	fi
 
 .docker-build:
 	${MAKE} build
 
-.docker-build-final:
-	${MAKE} build-final
+.docker-build-pull:
+	${MAKE} pull
 
-build:
-	docker build -f docker/dockerfiles/bedrock_base -t ${BASE_IMG_NAME} --pull .
-	docker build -f docker/dockerfiles/bedrock_dev -t ${DEV_IMG_NAME} .
-	-rm -f .docker-build-final
+build: .env .docker-build-pull submodules
+	${DC} build app assets
 	touch .docker-build
 
-build-final: .docker-build
-	docker build -f docker/dockerfiles/bedrock_dev_final -t ${FINAL_IMG_NAME} .
-	touch .docker-build-final
+pull:
+	-GIT_COMMIT= ${DC} pull release app assets builder app-base
+	touch .docker-build-pull
+
+rebuild: clean build
 
 run: .docker-build
-	docker run --env-file docker/envfiles/dev.env -p 8000:8000 -v "$$PWD:/app" ${DEV_IMG_NAME}
+	${DC} up assets app
 
-django-shell: .docker-build
-	docker run --user `id -u` -it --env-file docker/envfiles/dev.env -v "$$PWD:/app" ${DEV_IMG_NAME} python manage.py shell
+submodules:
+	git submodule sync
+	git submodule update --init --recursive
 
 shell: .docker-build
-	docker run --user `id -u` -it --env-file docker/envfiles/dev.env -v "$$PWD:/app" ${DEV_IMG_NAME} bash
-
-sync-all: .docker-build
-	docker run --user `id -u` --env-file docker/envfiles/demo.env -v "$$PWD:/app" ${DEV_IMG_NAME} bin/sync-all.sh
+	${DC} run app python manage.py shell_plus
 
 clean:
-	# python related things
-	find . -name '*.egg-info' -exec rm -rf {} +
-	find . -name '*.egg' -exec rm -f {} +
+#	python related things
 	find . -name '*.pyc' -exec rm -f {} +
 	find . -name '*.pyo' -exec rm -f {} +
 	find . -name '__pycache__' -exec rm -rf {} +
-
-	# test related things
+#	test related things
 	-rm -f .coverage
-	-rm -rf results
-
-	# static files
-	git clean -fdx static
-
-	# docs files
+#	docs files
 	-rm -rf docs/_build/
+#	static files
+	-rm -rf static_build/
+#	state files
+	-rm -f .docker-build*
 
-	# state files
-	-rm -f .docker-build
-	-rm -f .docker-build-final
+lint: .docker-build
+	${DC} run test flake8 bedrock lib tests
+	${DC} run assets gulp js:lint css:lint
 
 test: .docker-build
-	docker run --user `id -u` --env-file docker/envfiles/test.env -v "$$PWD:/app" ${DEV_IMG_NAME} bin/run-tests.sh
+	${DC} run test
 
-test-image: .docker-build-final
-	docker run --env-file docker/envfiles/test.env ${FINAL_IMG_NAME} bin/run-tests.sh
+test-image: .docker-build
+	${DC} run test-image
 
-docs:
-	docker run --user `id -u` --env-file docker/envfiles/dev.env -v "$$PWD:/app" ${DEV_IMG_NAME} bash -c "make -C docs/ clean && make -C docs/ html"
+docs: .docker-build
+	${DC} run app $(MAKE) -C docs/ clean
+	${DC} run app $(MAKE) -C docs/ html
 
-.PHONY: default clean build build-final docs run test sync-all test-image shell django-shell
+###############
+# For use in CI
+###############
+.docker-build-ci:
+	${MAKE} build-ci
+
+build-ci: .env .docker-build-pull submodules
+	${DC_CI} build release
+#	tag intermediate images using cache
+	${DC_CI} build app assets builder app-base
+	touch .docker-build-ci
+
+test-ci: .docker-build-ci
+	${DC_CI} run test-image
+
+.PHONY: default clean build pull submodules docs lint run shell test test-image rebuild build-ci test-ci

bedrock/base/pipeline_compressors.py

@@ -1,10 +0,0 @@
-from __future__ import absolute_import
-
-from pipeline.conf import settings
-from pipeline.compressors import SubProcessCompressor
-
-
-class CleanCSSCompressor(SubProcessCompressor):
-    def compress_css(self, css):
-        command = (settings.CLEANCSS_BINARY, settings.CLEANCSS_ARGUMENTS)
-        return self.execute_command(command, css)

bedrock/base/pipeline_storage.py

@@ -1,15 +0,0 @@
-# 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 is here so that we can mix storages as we need.
-
-from django.conf import settings
-from django.contrib.staticfiles.storage import ManifestStaticFilesStorage
-
-from pipeline.storage import PipelineMixin
-
-
-class ManifestPipelineStorage(PipelineMixin, ManifestStaticFilesStorage):
-    # turn off bundling in debug mode
-    packing = not settings.DEBUG

bedrock/base/templates/404.html

@@ -11,7 +11,7 @@
 {% block page_title %}{{ _('404: Page Not Found') }}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'page_not_found' %}
+  {{ css_bundle('page_not_found') }}
 {% endblock %}
 
 {% block tabzilla_tab %}{% endblock %}

bedrock/base/templates/500.html

@@ -11,7 +11,7 @@
 {% block page_title %}{{ _('500: Internal Server Error') }}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'page_not_found' %}
+  {{ css_bundle('page_not_found') }}
 {% endblock %}
 
 {% block tabzilla_tab %}{% endblock %}

bedrock/base/templates/base-pebbles-basic.html

@@ -4,7 +4,7 @@
 
 {% block site_css %}
   {{ super() }}
-  {% stylesheet 'pebbles-basic' %}
+  {{ css_bundle('pebbles-basic') }}
 {% endblock %}
 
 {% block tabzilla_tab %}{% endblock %}

bedrock/base/templates/base-pebbles.html

@@ -7,7 +7,7 @@
   <head>
     <meta charset="utf-8">{# Note: Must be within first 512 bytes of page #}
 
-    {% javascript 'site' %}
+    {{ js_bundle('site') }}
 
     <!--[if !lte IE 8]><!-->
     {% block experiments %}{% endblock %}
@@ -56,14 +56,14 @@
 
       {# Basic styles, only for IE8 and lower #}
       {% block old_ie_styles %}
-      {% stylesheet 'oldIE-pebbles' %}
+      {{ css_bundle('oldIE-pebbles') }}
       {% endblock %}
     <![endif]-->
 
     <!--[if !lte IE 8]><!-->
     {# Global styles, hidden from IE8 and lower #}
     {% block site_css %}
-      {% stylesheet 'pebbles' %}
+      {{ css_bundle('pebbles') }}
     {% endblock %}
 
     {# Page-specific styles, hidden from IE8 and lower #}
@@ -151,23 +151,23 @@
   </div>
 
   <!--[if IE 9]>
-    {% javascript 'matchmedia' %}
+    {{ js_bundle('matchmedia') }}
   <![endif]-->
 
     {% block site_js %}
       <!--[if !lte IE 8]><!-->
-        {% javascript 'common' %}
+        {{ js_bundle('common') }}
       <!--<![endif]-->
 
       <!--[if lte IE 8]>
-        {% javascript 'common-ie8' %}
+        {{ js_bundle('common-ie8') }}
       <![endif]-->
     {% endblock %}
 
     {# Bug 1279291 #}
     {% block stub_attribution %}
       {% if settings.STUB_ATTRIBUTION_RATE %}
-        {% javascript 'stub-attribution' %}
+        {{ js_bundle('stub-attribution') }}
       {% endif %}
     {% endblock %}
 
@@ -177,7 +177,7 @@
     {# Bug 1381776 #}
     {% block update_notification %}
       {% if switch('firefox-update-notification', ['en-US']) %}
-        {% javascript 'firefox-update-notification' %}
+        {{ js_bundle('firefox-update-notification') }}
       {% endif %}
     {% endblock %}
 

bedrock/base/templates/base-resp.html

@@ -7,7 +7,7 @@
   <head>
     <meta charset="utf-8">{# Note: Must be within first 512 bytes of page #}
 
-    {% javascript 'site' %}
+    {{ js_bundle('site') }}
 
     <!--[if !lte IE 8]><!-->
     {% block experiments %}{% endblock %}
@@ -55,13 +55,13 @@
       <script src="{{ static('js/libs/html5shiv.js') }}"></script>
 
       {# Basic styles, only for IE8 and lower #}
-      {% stylesheet 'oldIE' %}
+      {{ css_bundle('oldIE') }}
     <![endif]-->
 
     <!--[if !lte IE 8]><!-->
     {# Global styles, hidden from IE8 and lower #}
     {% block site_css %}
-      {% stylesheet 'responsive' %}
+      {{ css_bundle('responsive') }}
     {% endblock %}
 
     {# Page-specific styles, hidden from IE8 and lower #}
@@ -179,18 +179,18 @@
 
     {% block site_js %}
       <!--[if !lte IE 8]><!-->
-        {% javascript 'common' %}
+        {{ js_bundle('common') }}
       <!--<![endif]-->
 
       <!--[if lte IE 8]>
-        {% javascript 'common-ie8' %}
+        {{ js_bundle('common-ie8') }}
       <![endif]-->
     {% endblock %}
 
     {# Bug 1279291 #}
     {% block stub_attribution %}
       {% if settings.STUB_ATTRIBUTION_RATE %}
-        {% javascript 'stub-attribution' %}
+        {{ js_bundle('stub-attribution') }}
       {% endif %}
     {% endblock %}
 
@@ -200,7 +200,7 @@
     {# Bug 1381776 #}
     {% block update_notification %}
       {% if switch('firefox-update-notification', ['en-US']) %}
-        {% javascript 'firefox-update-notification' %}
+        {{ js_bundle('firefox-update-notification') }}
       {% endif %}
     {% endblock %}
 

bedrock/base/templates/includes/google-analytics.html

@@ -10,6 +10,6 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1122305#c8
 <!-- Site Container: NONE -->
 
 {% if settings.GTM_CONTAINER_ID %}
-  {% javascript 'gtm-snippet' %}
+  {{ js_bundle('gtm-snippet') }}
 {% endif %}
 <!-- End Google Tag Manager -->

bedrock/base/templatetags/helpers.py

@@ -14,6 +14,10 @@ from bedrock.base import waffle
 from bedrock.utils import expand_locale_groups
 
 
+CSS_TEMPLATE = '<link href="%s" rel="stylesheet" type="text/css" />'
+JS_TEMPLATE = '<script type="text/javascript" src="%s" charset="utf-8"></script>'
+
+
 @library.global_function
 def send_to_device_sms_countries(message_set):
     try:
@@ -113,6 +117,28 @@ def static(path):
     return staticfiles_storage.url(path)
 
 
+@library.global_function
+def js_bundle(name):
+    """Include a JS bundle in the template.
+
+    Bundles are defined in the "static-bundles.json" file.
+    """
+    path = 'js/BUNDLES/{}.js'.format(name)
+    path = staticfiles_storage.url(path)
+    return jinja2.Markup(JS_TEMPLATE % path)
+
+
+@library.global_function
+def css_bundle(name):
+    """Include a CSS bundle in the template.
+
+    Bundles are defined in the "static-bundles.json" file.
+    """
+    path = 'css/BUNDLES/{}.css'.format(name)
+    path = staticfiles_storage.url(path)
+    return jinja2.Markup(CSS_TEMPLATE % path)
+
+
 @library.global_function
 def alternate_url(path, locale):
     alt_paths = settings.ALT_CANONICAL_PATHS

bedrock/etc/templates/etc/firefox/retention/thank-you-a.html

@@ -20,7 +20,7 @@
 {% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'etc-firefox-retention-thank-you-a' %}
+  {{ css_bundle('etc-firefox-retention-thank-you-a') }}
 {% endblock %}
 
 {% block site_header %}{% endblock %}
@@ -77,7 +77,7 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'etc-firefox-retention-thank-you' %}
+  {{ js_bundle('etc-firefox-retention-thank-you') }}
 {% endblock %}
 
 {% block body_id %}thank-you{% endblock %}

bedrock/etc/templates/etc/firefox/retention/thank-you-b.html

@@ -20,7 +20,7 @@
 {% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'etc-firefox-retention-thank-you-b' %}
+  {{ css_bundle('etc-firefox-retention-thank-you-b') }}
 {% endblock %}
 
 {% block site_header %}{% endblock %}
@@ -91,7 +91,7 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'etc-firefox-retention-thank-you' %}
+  {{ js_bundle('etc-firefox-retention-thank-you') }}
 {% endblock %}
 
 {% block body_id %}thank-you{% endblock %}

bedrock/etc/templates/etc/firefox/retention/thank-you-referral.html

@@ -14,7 +14,7 @@
 {% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'etc-firefox-retention-thank-you-referral' %}
+  {{ css_bundle('etc-firefox-retention-thank-you-referral') }}
 {% endblock %}
 
 {% block site_header %}{% endblock %}
@@ -68,7 +68,7 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'etc-firefox-retention-thank-you' %}
+  {{ js_bundle('etc-firefox-retention-thank-you') }}
 {% endblock %}
 
 {% block body_id %}thank-you{% endblock %}

bedrock/firefox/templates/firefox/accounts-features.html

@@ -9,14 +9,14 @@
 {% block page_desc %}{{_('Share links instantly. Sync bookmarks and passwords securely.')}}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_accounts_features' %}
+  {{ css_bundle('firefox_accounts_features') }}
 {% endblock %}
 
 {% block body_class %}firefox-accounts-features{% endblock %}
 
 {% block experiments %}
   {% if switch('accounts-features-copy-experiment', ['en-US']) %}
-    {% javascript 'firefox_accounts_features_experiment' %}
+    {{ js_bundle('firefox_accounts_features_experiment') }}
   {% endif %}
 {% endblock %}
 

bedrock/firefox/templates/firefox/accounts.html

@@ -11,7 +11,7 @@
 {% block page_desc %}{{_('Get easy access to your bookmarks, passwords, tabs and more from any computer or mobile device running Firefox.')}}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_accounts' %}
+  {{ css_bundle('firefox_accounts') }}
 {% endblock %}
 
 {% block body_class %}firefox-accounts{% endblock %}
@@ -63,5 +63,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_accounts' %}
+  {{ js_bundle('firefox_accounts') }}
 {% endblock %}

bedrock/firefox/templates/firefox/all.html

@@ -72,7 +72,7 @@
 {% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_all' %}
+  {{ css_bundle('firefox_all') }}
 {% endblock %}
 
 {% block site_header_logo %}
@@ -179,6 +179,6 @@
 {% block js %}
   {# searching with js only makes sense if we're displaying all #}
   {% if platform == 'desktop' and not query %}
-    {% javascript 'firefox_all' %}
+    {{ js_bundle('firefox_all') }}
   {% endif %}
 {% endblock %}

bedrock/firefox/templates/firefox/channel/base.html

@@ -12,7 +12,7 @@
 {% block page_og_title %}{{ self.page_title() }}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_channel' %}
+  {{ css_bundle('firefox_channel') }}
 {% endblock %}
 
 {% block body_class %}{% endblock %}

bedrock/firefox/templates/firefox/dev-firstrun.html

@@ -12,7 +12,7 @@
 {% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_developer_firstrun' %}
+  {{ css_bundle('firefox_developer_firstrun') }}
 {% endblock %}
 
 {% block page_title_prefix %}{% endblock %}
@@ -240,7 +240,7 @@ data-sync-reminder-text="{{ _('If you continue without syncing your new Develope
 {% block email_form %}{% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_developer_firstrun' %}
+  {{ js_bundle('firefox_developer_firstrun') }}
 {% endblock %}
 
 {# Bug 1381776 #}

bedrock/firefox/templates/firefox/dev-whatsnew.html

@@ -12,7 +12,7 @@
 {% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_developer_firstrun' %}
+  {{ css_bundle('firefox_developer_firstrun') }}
 {% endblock %}
 
 {% block page_title_prefix %}{% endblock %}

bedrock/firefox/templates/firefox/developer/firstrun.html

@@ -13,7 +13,7 @@
 {% block page_favicon_large %}{{ static('img/firefox/developer/favicon-196.png') }}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_developer_quantum_firstrun' %}
+  {{ css_bundle('firefox_developer_quantum_firstrun') }}
 {% endblock %}
 
 {% block body_id %}firefox-developer{% endblock %}

bedrock/firefox/templates/firefox/developer/index.html

@@ -14,7 +14,7 @@
 
 
 {% block page_css %}
-  {% stylesheet 'firefox_developer' %}
+  {{ css_bundle('firefox_developer') }}
 {% endblock %}
 
 {% block body_id %}firefox-developer{% endblock %}
@@ -238,5 +238,5 @@
 {% block update_notification %}{% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_developer' %}
+  {{ js_bundle('firefox_developer') }}
 {% endblock %}

bedrock/firefox/templates/firefox/developer/whatsnew.html

@@ -13,7 +13,7 @@
 {% block page_favicon_large %}{{ static('img/firefox/developer/favicon-196.png') }}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_developer_quantum_whatsnew' %}
+  {{ css_bundle('firefox_developer_quantum_whatsnew') }}
 {% endblock %}
 
 {% block body_id %}firefox-developer{% endblock %}

bedrock/firefox/templates/firefox/enterprise/index.html

@@ -9,7 +9,7 @@
 {% block page_desc %}{{_('A managed version of the super-fast new Firefox.')}}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_enterprise' %}
+  {{ css_bundle('firefox_enterprise') }}
 {% endblock %}
 
 {% block body_id %}firefox{% endblock %}

bedrock/firefox/templates/firefox/enterprise/signup-thanks.html

@@ -12,7 +12,7 @@
 {% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_enterprise' %}
+  {{ css_bundle('firefox_enterprise') }}
 {% endblock %}
 
 {% block body_id %}firefox{% endblock %}

bedrock/firefox/templates/firefox/enterprise/signup.html

@@ -12,7 +12,7 @@
 {% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_enterprise' %}
+  {{ css_bundle('firefox_enterprise') }}
 {% endblock %}
 
 {% block body_id %}firefox{% endblock %}

bedrock/firefox/templates/firefox/facebookcontainer/index.html

@@ -11,7 +11,7 @@
 {% block page_desc %}{{_('Millions of people around the world trust Firefox Web browsers on Android, iOS and desktop computers. Fast. Private. Download now!')}}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_facebook_container' %}
+  {{ css_bundle('firefox_facebook_container') }}
 {% endblock %}
 
 {% block body_id %}firefox{% endblock %}
@@ -144,9 +144,9 @@
 {% block update_notification %}{% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_facebook_container_video' %}
+  {{ js_bundle('firefox_facebook_container_video') }}
 
   {% if switch('firefox-facebook-container-funnelcake', ['en-US']) %}
-    {% javascript 'firefox_facebook_container_funnelcake' %}
+    {{ js_bundle('firefox_facebook_container_funnelcake') }}
   {% endif %}
 {% endblock %}

bedrock/firefox/templates/firefox/features/base.html

@@ -7,7 +7,7 @@
 {% extends "firefox/base-pebbles.html" %}
 
 {% block page_css %}
-  {% stylesheet 'firefox-features-hub-common' %}
+  {{ css_bundle('firefox-features-hub-common') }}
 {% endblock %}
 
 {% block content %}
@@ -56,5 +56,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox-features-hub' %}
+  {{ js_bundle('firefox-features-hub') }}
 {% endblock %}

bedrock/firefox/templates/firefox/features/bookmarks.html

@@ -12,7 +12,7 @@
 
 {% block page_css %}
   {{ super() }}
-  {% stylesheet 'firefox-features-hub-detail' %}
+  {{ css_bundle('firefox-features-hub-detail') }}
 {% endblock %}
 
 {% block body_id %}firefox-features-bookmarks{% endblock %}

bedrock/firefox/templates/firefox/features/fast.html

@@ -11,7 +11,7 @@
 
 {% block page_css %}
   {{ super() }}
-  {% stylesheet 'firefox-features-hub-detail' %}
+  {{ css_bundle('firefox-features-hub-detail') }}
 {% endblock %}
 
 {% block body_id %}firefox-features-fast{% endblock %}

bedrock/firefox/templates/firefox/features/independent.html

@@ -11,7 +11,7 @@
 
 {% block page_css %}
   {{ super() }}
-  {% stylesheet 'firefox-features-hub-detail' %}
+  {{ css_bundle('firefox-features-hub-detail') }}
 {% endblock %}
 
 {% block body_id %}firefox-features-independent{% endblock %}

bedrock/firefox/templates/firefox/features/index.html

@@ -11,7 +11,7 @@
 
 {% block page_css %}
   {{ super() }}
-  {% stylesheet 'firefox-features-index' %}
+  {{ css_bundle('firefox-features-index') }}
 {% endblock %}
 
 {% block body_id %}firefox-features-landing{% endblock %}

bedrock/firefox/templates/firefox/features/memory.html

@@ -11,7 +11,7 @@
 
 {% block page_css %}
   {{ super() }}
-  {% stylesheet 'firefox-features-hub-detail' %}
+  {{ css_bundle('firefox-features-hub-detail') }}
 {% endblock %}
 
 {% block body_id %}firefox-features-memory{% endblock %}

bedrock/firefox/templates/firefox/features/password-manager.html

@@ -12,7 +12,7 @@
 
 {% block page_css %}
   {{ super() }}
-  {% stylesheet 'firefox-features-hub-detail' %}
+  {{ css_bundle('firefox-features-hub-detail') }}
 {% endblock %}
 
 {% block body_id %}firefox-features-password-manager{% endblock %}

bedrock/firefox/templates/firefox/features/private-browsing.html

@@ -11,7 +11,7 @@
 
 {% block page_css %}
   {{ super() }}
-  {% stylesheet 'firefox-features-hub-detail' %}
+  {{ css_bundle('firefox-features-hub-detail') }}
 {% endblock %}
 
 {% block body_id %}firefox-features-private{% endblock %}

bedrock/firefox/templates/firefox/features/send-tabs.html

@@ -18,8 +18,8 @@
 
 {% block page_css %}
   {{ super() }}
-  {% stylesheet 'firefox-features-hub-detail' %}
-  {% stylesheet 'firefox-features-sync' %}
+  {{ css_bundle('firefox-features-hub-detail') }}
+  {{ css_bundle('firefox-features-sync') }}
 {% endblock %}
 
 {% block body_id %}firefox-features-send-tabs{% endblock %}
@@ -152,5 +152,5 @@
 
 {% block js %}
   {{ super() }}
-  {% javascript 'firefox-features-sync' %}
+  {{ js_bundle('firefox-features-sync') }}
 {% endblock %}

bedrock/firefox/templates/firefox/features/sync.html

@@ -18,8 +18,8 @@
 
 {% block page_css %}
   {{ super() }}
-  {% stylesheet 'firefox-features-hub-detail' %}
-  {% stylesheet 'firefox-features-sync' %}
+  {{ css_bundle('firefox-features-hub-detail') }}
+  {{ css_bundle('firefox-features-sync') }}
 {% endblock %}
 
 {% block body_id %}firefox-features-sync{% endblock %}
@@ -110,5 +110,5 @@
 
 {% block js %}
   {{ super() }}
-  {% javascript 'firefox-features-sync' %}
+  {{ js_bundle('firefox-features-sync') }}
 {% endblock %}

bedrock/firefox/templates/firefox/feedback/happy.html

@@ -14,11 +14,11 @@
 {% block body_class %}sky happy{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_feedback' %}
+  {{ css_bundle('firefox_feedback') }}
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_feedback' %}
+  {{ js_bundle('firefox_feedback') }}
 {% endblock %}
 
 {% block site_header_nav %}{% endblock %}

bedrock/firefox/templates/firefox/feedback/unhappy.html

@@ -14,11 +14,11 @@
 {% block body_class %}sky sad{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_feedback' %}
+  {{ css_bundle('firefox_feedback') }}
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_feedback' %}
+  {{ js_bundle('firefox_feedback') }}
 {% endblock %}
 
 {% block site_header_nav %}{% endblock %}

bedrock/firefox/templates/firefox/firstrun/base-pebbles.html

@@ -29,7 +29,7 @@
 
 {% block extrahead %}
   {% if switch('firefox-update-notification-modal', ['en-US']) %}
-    {% stylesheet 'firefox-update-notification-firstrun-whatsnew' %}
+    {{ css_bundle('firefox-update-notification-firstrun-whatsnew') }}
   {% endif %}
 {% endblock %}
 
@@ -37,6 +37,6 @@
 {% block update_notification %}
   {% if switch('firefox-update-notification-modal', ['en-US']) %}
     {% include 'includes/firefox-update-instructions.html' %}
-    {% javascript 'firefox-update-notification-firstrun-whatsnew' %}
+    {{ js_bundle('firefox-update-notification-firstrun-whatsnew') }}
   {% endif %}
 {% endblock %}

bedrock/firefox/templates/firefox/firstrun/base.html

@@ -29,7 +29,7 @@
 
 {% block extrahead %}
   {% if switch('firefox-update-notification-modal', ['en-US']) %}
-    {% stylesheet 'firefox-update-notification-firstrun-whatsnew' %}
+    {{ css_bundle('firefox-update-notification-firstrun-whatsnew') }}
   {% endif %}
 {% endblock %}
 
@@ -37,6 +37,6 @@
 {% block update_notification %}
   {% if switch('firefox-update-notification-modal', ['en-US']) %}
     {% include 'includes/firefox-update-instructions.html' %}
-    {% javascript 'firefox-update-notification-firstrun-whatsnew' %}
+    {{ js_bundle('firefox-update-notification-firstrun-whatsnew') }}
   {% endif %}
 {% endblock %}

bedrock/firefox/templates/firefox/firstrun/facebook-container.html

@@ -11,7 +11,7 @@
 {% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_firstrun_facebook_container' %}
+  {{ css_bundle('firefox_firstrun_facebook_container') }}
 {% endblock %}
 
 {% block global_nav %}{% endblock %}

bedrock/firefox/templates/firefox/firstrun/firstrun-quantum.html

@@ -8,7 +8,7 @@
 
 {% block experiments %}
   {% if switch('firstrun-copy-experiment', ['en-US']) %}
-    {% javascript 'experiment_firstrun_copy' %}
+    {{ js_bundle('experiment_firstrun_copy') }}
   {% endif %}
 {% endblock %}
 
@@ -19,7 +19,7 @@
 {% endblock %}
 
 {% block site_css %}
-  {% stylesheet 'firefox_firstrun_quantum' %}
+  {{ css_bundle('firefox_firstrun_quantum') }}
 {% endblock %}
 
 {% block global_nav %}{% endblock %}
@@ -71,5 +71,5 @@
 {% block update_notification %}{% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_firstrun_quantum' %}
+  {{ js_bundle('firefox_firstrun_quantum') }}
 {% endblock %}

bedrock/firefox/templates/firefox/firstrun/index.html

@@ -13,11 +13,11 @@
 {% endblock %}
 
 {% block site_css %}
-  {% stylesheet 'firefox_firstrun' %}
+  {{ css_bundle('firefox_firstrun') }}
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_firstrun' %}
+  {{ js_bundle('firefox_firstrun') }}
 {% endblock %}
 
 {% block global_nav %}{% endblock %}

bedrock/firefox/templates/firefox/home.html

@@ -18,9 +18,9 @@
 {% block page_desc %}{{ _('Responsive engine, less memory usage and packed with features. Download for desktop now.') }}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox-home' %}
+  {{ css_bundle('firefox-home') }}
   {% if switch('firefox_home_fbvideochat_funnelcake', ['en-US']) %}
-    {% stylesheet 'firefox-home-fbvideochat-funnelcake' %}
+    {{ css_bundle('firefox-home-fbvideochat-funnelcake') }}
   {% endif %}
 {% endblock %}
 
@@ -439,8 +439,8 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox-home' %}
+  {{ js_bundle('firefox-home') }}
   {% if switch('firefox_home_fbvideochat_funnelcake', ['en-US']) %}
-    {% javascript 'firefox-home-fbvideochat-funnelcake' %}
+    {{ js_bundle('firefox-home-fbvideochat-funnelcake') }}
   {% endif %}
 {% endblock %}

bedrock/firefox/templates/firefox/installer-help.html

@@ -11,7 +11,7 @@
 {% block body_id %}installer-help{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'installer_help' %}
+  {{ css_bundle('installer_help') }}
 {% endblock %}
 
 {% block content %}
@@ -75,5 +75,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'installer_help' %}
+  {{ js_bundle('installer_help') }}
 {% endblock  %}

bedrock/firefox/templates/firefox/mobile.html

@@ -9,7 +9,7 @@
 {% extends "firefox/base-pebbles.html" %}
 
 {% block page_css %}
-  {% stylesheet 'firefox-mobile' %}
+  {{ css_bundle('firefox-mobile') }}
 {% endblock %}
 
 {% block page_title %}{{ _('Mobile browsers for iOS and Android') }} | {{ _('Firefox') }}{% endblock %}
@@ -406,5 +406,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox-mobile' %}
+  {{ js_bundle('firefox-mobile') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/base.html

@@ -35,8 +35,8 @@
 
 {# All stylesheets are loaded in extrahead to serve legacy IE basic styles #}
 {% block extrahead %}
-  {% stylesheet 'pebbles' %}
-  {% stylesheet 'firefox_new_common' %}
+  {{ css_bundle('pebbles') }}
+  {{ css_bundle('firefox_new_common') }}
 {% endblock %}
 
 {% block body_id %}{% endblock %}

bedrock/firefox/templates/firefox/new/berlin/base-herz.html

@@ -14,7 +14,7 @@
 {% block page_desc %}{{_('Besser digital leben mit Firefox: Superschnell surfen, Top-Privatsphäre-Schutz und gut für das Netz. Weil Mozilla dahinter steht. Das Non-Profit für ein freies und offenes Internet — für alle Menschen.')}}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_new_berlin_herz' %}
+  {{ css_bundle('firefox_new_berlin_herz') }}
 {% endblock %}
 
 {% block body_id %}firefox{% endblock %}

bedrock/firefox/templates/firefox/new/berlin/base.html

@@ -14,7 +14,7 @@
 {% block page_desc %}{{_('Besser digital leben mit Firefox: Superschnell surfen, Top-Privatsphäre-Schutz und gut für das Netz. Weil Mozilla dahinter steht. Das Non-Profit für ein freies und offenes Internet — für alle Menschen.')}}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_new_berlin' %}
+  {{ css_bundle('firefox_new_berlin') }}
 {% endblock %}
 
 {% block body_id %}firefox{% endblock %}

bedrock/firefox/templates/firefox/new/berlin/scene1-b.html

@@ -7,7 +7,7 @@
 {% extends "firefox/new/berlin/base.html" %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_new_berlin_b' %}
+  {{ css_bundle('firefox_new_berlin_b') }}
 {% endblock %}
 
 {% block primary_download_button %}
@@ -42,5 +42,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_new_scene1_berlin' %}
+  {{ js_bundle('firefox_new_scene1_berlin') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/berlin/scene1-herz.html

@@ -11,5 +11,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_new_scene1_berlin_herz' %}
+  {{ js_bundle('firefox_new_scene1_berlin_herz') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/berlin/scene1.html

@@ -8,7 +8,7 @@
 
 {% block experiments %}
   {% if switch('experiment-berlin-video', ['de']) %}
-    {% javascript 'firefox_new_berlin_experiment' %}
+    {{ js_bundle('firefox_new_berlin_experiment') }}
   {% endif %}
 {% endblock %}
 
@@ -17,5 +17,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_new_scene1_berlin' %}
+  {{ js_bundle('firefox_new_scene1_berlin') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/berlin/scene2-b.html

@@ -7,5 +7,5 @@
 {% extends "firefox/new/berlin/scene2.html" %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_new_berlin_b' %}
+  {{ css_bundle('firefox_new_berlin_b') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/berlin/scene2-herz.html

@@ -37,7 +37,7 @@
 
 {% block js %}
   {% if switch('tracking-pixel') %}
-    {% javascript 'firefox_new_pixel' %}
+    {{ js_bundle('firefox_new_pixel') }}
   {% endif %}
-  {% javascript 'firefox_new_scene2' %}
+  {{ js_bundle('firefox_new_scene2') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/berlin/scene2.html

@@ -38,7 +38,7 @@
 
 {% block js %}
   {% if switch('tracking-pixel') %}
-    {% javascript 'firefox_new_pixel' %}
+    {{ js_bundle('firefox_new_pixel') }}
   {% endif %}
-  {% javascript 'firefox_new_scene2' %}
+  {{ js_bundle('firefox_new_scene2') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/portland/base.html

@@ -14,7 +14,7 @@
 {% block page_og_url %}{{ settings.CANONICAL_URL }}/{{ LANG }}/firefox/new/?xv=portland{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_new_portland' %}
+  {{ css_bundle('firefox_new_portland') }}
 {% endblock %}
 
 {% block body_id %}firefox{% endblock %}

bedrock/firefox/templates/firefox/new/portland/scene1-fast.html

@@ -21,5 +21,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_new_scene1_portland' %}
+  {{ js_bundle('firefox_new_scene1_portland') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/portland/scene1-safe.html

@@ -21,5 +21,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_new_scene1_portland' %}
+  {{ js_bundle('firefox_new_scene1_portland') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/portland/scene1.html

@@ -11,5 +11,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_new_scene1_portland' %}
+  {{ js_bundle('firefox_new_scene1_portland') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/portland/scene2.html

@@ -31,7 +31,7 @@
 
 {% block js %}
   {% if switch('tracking-pixel') %}
-    {% javascript 'firefox_new_pixel' %}
+    {{ js_bundle('firefox_new_pixel') }}
   {% endif %}
-  {% javascript 'firefox_new_scene2' %}
+  {{ js_bundle('firefox_new_scene2') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/reggie-watts/base.html

@@ -14,7 +14,7 @@
 {% block page_desc %}{{_('Millions of people around the world trust Firefox Web browsers on Android, iOS and desktop computers. Fast. Private. Download now!')}}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_new_reggie_watts' %}
+  {{ css_bundle('firefox_new_reggie_watts') }}
 {% endblock %}
 
 {% block body_id %}firefox{% endblock %}

bedrock/firefox/templates/firefox/new/reggie-watts/scene1.html

@@ -15,5 +15,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_new_scene1_variation' %}
+  {{ js_bundle('firefox_new_scene1_variation') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/reggie-watts/scene2.html

@@ -35,7 +35,7 @@
 
 {% block js %}
   {% if switch('tracking-pixel') %}
-    {% javascript 'firefox_new_pixel' %}
+    {{ js_bundle('firefox_new_pixel') }}
   {% endif %}
-  {% javascript 'firefox_new_scene2' %}
+  {{ js_bundle('firefox_new_scene2') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/scene1.html

@@ -9,7 +9,7 @@
 {# All stylesheets are loaded in extrahead to serve legacy IE basic styles #}
 {% block extrahead %}
   {{ super() }}
-  {% stylesheet 'firefox_new_scene1' %}
+  {{ css_bundle('firefox_new_scene1') }}
 {% endblock %}
 
 {% block body_id %}firefox-new-scene1{% endblock %}
@@ -122,5 +122,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_new_scene1' %}
+  {{ js_bundle('firefox_new_scene1') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/scene2.html

@@ -18,7 +18,7 @@
 {# All stylesheets are loaded in extrahead to serve legacy IE basic styles #}
 {% block extrahead %}
   {{ super() }}
-  {% stylesheet 'firefox_new_scene2' %}
+  {{ css_bundle('firefox_new_scene2') }}
 {% endblock %}
 
 {% block body_id %}firefox-new-scene2{% endblock %}
@@ -77,7 +77,7 @@
 
 {% block js %}
   {% if switch('tracking-pixel') %}
-    {% javascript 'firefox_new_pixel' %}
+    {{ js_bundle('firefox_new_pixel') }}
   {% endif %}
-  {% javascript 'firefox_new_scene2' %}
+  {{ js_bundle('firefox_new_scene2') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/wait-face/base.html

@@ -14,7 +14,7 @@
 {% block page_desc %}{{_('Millions of people around the world trust Firefox Web browsers on Android, iOS and desktop computers. Fast. Private. Download now!')}}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_new_wait_face' %}
+  {{ css_bundle('firefox_new_wait_face') }}
 {% endblock %}
 
 {% block body_id %}firefox{% endblock %}

bedrock/firefox/templates/firefox/new/wait-face/scene1.html

@@ -18,5 +18,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_new_scene1_variation' %}
+  {{ js_bundle('firefox_new_scene1_variation') }}
 {% endblock %}

bedrock/firefox/templates/firefox/new/wait-face/scene2.html

@@ -35,7 +35,7 @@
 
 {% block js %}
   {% if switch('tracking-pixel') %}
-    {% javascript 'firefox_new_pixel' %}
+    {{ js_bundle('firefox_new_pixel') }}
   {% endif %}
-  {% javascript 'firefox_new_scene2' %}
+  {{ js_bundle('firefox_new_scene2') }}
 {% endblock %}

bedrock/firefox/templates/firefox/nightly_firstrun.html

@@ -10,7 +10,7 @@
 {% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'nightly_firstrun' %}
+  {{ css_bundle('nightly_firstrun') }}
 {% endblock %}
 
 {% add_lang_files "firstrun" "mobile" %}

bedrock/firefox/templates/firefox/nightly_whatsnew.html

@@ -9,7 +9,7 @@
 {% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}
 
 {% block extrahead %}
-  {% stylesheet 'nightly_whatsnew' %}
+  {{ css_bundle('nightly_whatsnew') }}
 {% endblock %}
 
 {% block page_title_prefix %}{% endblock %}
@@ -96,7 +96,7 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_whatsnew' %}
+  {{ js_bundle('firefox_whatsnew') }}
 {% endblock %}
 
 {# Bug 1381776 #}

bedrock/firefox/templates/firefox/organizations/organizations.html

@@ -10,7 +10,7 @@
 {% block body_id %}organizations{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_organizations' %}
+  {{ css_bundle('firefox_organizations') }}
 {% endblock %}
 
 {% block site_header_nav %}

bedrock/firefox/templates/firefox/releases/aurora-notes.html

@@ -7,7 +7,7 @@
 {% block gtm_page_id %}data-gtm-page-id="/firefox/android/auroranotes/"{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_releasenotes_firefox' %}
+  {{ css_bundle('firefox_releasenotes_firefox') }}
 {% endblock %}
 
 {% set channel_name = 'Aurora' %}

bedrock/firefox/templates/firefox/releases/index.html

@@ -5,7 +5,7 @@
 {% block body_id %}firefox-releases-index{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_releases_index' %}
+  {{ css_bundle('firefox_releases_index') }}
 {% endblock %}
 
 {% block breadcrumbs %}

bedrock/firefox/templates/firefox/releases/release-notes.html

@@ -23,7 +23,7 @@
 {% block body_class %}fx-notes{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_releasenotes_firefox' %}
+  {{ css_bundle('firefox_releasenotes_firefox') }}
 {% endblock %}
 
 {# channel_name is for display purposes where needed.  #}
@@ -363,7 +363,7 @@
 {% block email_form %}{% endblock %}
 
 {% block js %}
-  {% javascript 'releasenotes' %}
+  {{ js_bundle('releasenotes') }}
 {% endblock %}
 
 {% macro note_entry(note) %}

bedrock/firefox/templates/firefox/releases/system_requirements.html

@@ -13,7 +13,7 @@
 {% block body_class %}fxos-notes sky{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_releasenotes' %}
+  {{ css_bundle('firefox_releasenotes') }}
 {% endblock %}
 
 {% block content %}

bedrock/firefox/templates/firefox/switch.html

@@ -8,7 +8,7 @@
 {% block page_desc %}{{ _('Switching to Firefox is fast, easy and risk-free, because Firefox imports your bookmarks, autofills, passwords and preferences from Chrome.') }}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox-switch' %}
+  {{ css_bundle('firefox-switch') }}
 {% endblock %}
 
 {% block body_id %}firefox-switch{% endblock %}
@@ -75,5 +75,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox-switch' %}
+  {{ js_bundle('firefox-switch') }}
 {% endblock %}

bedrock/firefox/templates/firefox/testflight.html

@@ -18,7 +18,7 @@
 {% block body_class %}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_ios_testflight' %}
+  {{ css_bundle('firefox_ios_testflight') }}
 {% endblock %}
 
 {% block site_header_nav %}{% endblock %}

bedrock/firefox/templates/firefox/tracking-protection-tour.html

@@ -46,7 +46,7 @@ data-panel3-button="{{ _('Got it!') }}"
 {% block stub_attribution %}{% endblock %}
 
 {% block site_css %}
-  {% stylesheet 'tracking-protection-tour' %}
+  {{ css_bundle('tracking-protection-tour') }}
 {% endblock %}
 
 {% block page_title_prefix %}{% endblock %}
@@ -121,7 +121,7 @@ data-panel3-button="{{ _('Got it!') }}"
 {% block email_form %}{% endblock %}
 
 {% block site_js %}
-  {% javascript 'tracking-protection-tour' %}
+  {{ js_bundle('tracking-protection-tour') }}
 {% endblock %}
 
 {# Bug 1381776 #}

bedrock/firefox/templates/firefox/unsupported-systems.html

@@ -8,7 +8,7 @@
 {% block page_desc %}{{ _('We’re sorry to report this, but your computer does not meet the minimum system requirements to run this version.') }}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_unsupported_systems' %}
+  {{ css_bundle('firefox_unsupported_systems') }}
 {% endblock %}
 
 {% block content %}

bedrock/firefox/templates/firefox/whatsnew/base-pebbles.html

@@ -20,7 +20,7 @@
 
 {% block extrahead %}
   {% if switch('firefox-update-notification-modal', ['en-US']) %}
-    {% stylesheet 'firefox-update-notification-firstrun-whatsnew' %}
+    {{ css_bundle('firefox-update-notification-firstrun-whatsnew') }}
   {% endif %}
 {% endblock %}
 
@@ -28,6 +28,6 @@
 {% block update_notification %}
   {% if switch('firefox-update-notification-modal', ['en-US']) %}
     {% include 'includes/firefox-update-instructions.html' %}
-    {% javascript 'firefox-update-notification-firstrun-whatsnew' %}
+    {{ js_bundle('firefox-update-notification-firstrun-whatsnew') }}
   {% endif %}
 {% endblock %}

bedrock/firefox/templates/firefox/whatsnew/base.html

@@ -11,7 +11,7 @@
 
 {% block extrahead %}
   {% if switch('firefox-update-notification-modal', ['en-US']) %}
-    {% stylesheet 'firefox-update-notification-firstrun-whatsnew' %}
+    {{ css_bundle('firefox-update-notification-firstrun-whatsnew') }}
   {% endif %}
 {% endblock %}
 
@@ -19,6 +19,6 @@
 {% block update_notification %}
   {% if switch('firefox-update-notification-modal', ['en-US']) %}
     {% include 'includes/firefox-update-instructions.html' %}
-    {% javascript 'firefox-update-notification-firstrun-whatsnew' %}
+    {{ js_bundle('firefox-update-notification-firstrun-whatsnew') }}
   {% endif %}
 {% endblock %}

bedrock/firefox/templates/firefox/whatsnew/fx57/base-whatsnew-57-letter.html

@@ -9,7 +9,7 @@
 {% block page_title %}{{ _('The new Firefox. Fast for good.') }}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox-whatsnew-57-letter' %}
+  {{ css_bundle('firefox-whatsnew-57-letter') }}
 {% endblock %}
 
 {% block body_class %}quantum-letter{% endblock %}

bedrock/firefox/templates/firefox/whatsnew/fx57/whatsnew-57.html

@@ -10,7 +10,7 @@
 {% block page_desc %}{{ _('The new Firefox. Fast for good.') }}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox-whatsnew-57' %}
+  {{ css_bundle('firefox-whatsnew-57') }}
 {% endblock %}
 
 {% block site_header %}{% endblock %}

bedrock/firefox/templates/firefox/whatsnew/index.html

@@ -21,7 +21,7 @@
 {% block site_header %}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_whatsnew' %}
+  {{ css_bundle('firefox_whatsnew') }}
 {% endblock %}
 
 {% set show_send_to_device = LANG in settings.SEND_TO_DEVICE_LOCALES %}
@@ -70,5 +70,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_whatsnew' %}
+  {{ js_bundle('firefox_whatsnew') }}
 {% endblock %}

bedrock/firefox/templates/firefox/whatsnew/index.id.html

@@ -20,7 +20,7 @@
 {% block site_header %}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox-whatsnew-rocket' %}
+  {{ css_bundle('firefox-whatsnew-rocket') }}
 {% endblock %}
 
 
@@ -52,5 +52,5 @@
 {% block email_form %}{% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_whatsnew' %}
+  {{ js_bundle('firefox_whatsnew') }}
 {% endblock %}

bedrock/firefox/templates/firefox/whatsnew/index.zh-TW.html

@@ -22,7 +22,7 @@
 {% block site_header %}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_whatsnew_zh_tw' %}
+  {{ css_bundle('firefox_whatsnew_zh_tw') }}
 {% endblock %}
 
 {% block content %}
@@ -53,5 +53,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_whatsnew' %}
+  {{ js_bundle('firefox_whatsnew') }}
 {% endblock %}

bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx60.html

@@ -16,7 +16,7 @@
 {% block site_header %}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_whatsnew_60' %}
+  {{ css_bundle('firefox_whatsnew_60') }}
 {% endblock %}
 
 {% set show_send_to_device = LANG in settings.SEND_TO_DEVICE_LOCALES %}
@@ -124,5 +124,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_whatsnew_60' %}
+  {{ js_bundle('firefox_whatsnew_60') }}
 {% endblock %}

bedrock/firefox/templates/firefox/whatsnew/whatsnew-fxa.html

@@ -14,7 +14,7 @@
 {% block site_header %}{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'firefox_whatsnew_fxa' %}
+  {{ css_bundle('firefox_whatsnew_fxa') }}
 {% endblock %}
 
 {% block content %}
@@ -50,6 +50,6 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'firefox_whatsnew' %}
-  {% javascript 'firefox_whatsnew_fxa' %}
+  {{ js_bundle('firefox_whatsnew') }}
+  {{ js_bundle('firefox_whatsnew_fxa') }}
 {% endblock %}

bedrock/foundation/templates/foundation/annualreport/2011.html

@@ -11,15 +11,15 @@
 {% block body_class %}sand{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'annual_2011' %}
+  {{ css_bundle('annual_2011') }}
   <link rel="stylesheet" media="print" href="{{ static('css/foundation/annual2011print.css') }}">
 {% endblock %}
 
 {% block js %}
   <!--[if IE 9]>
-    {% javascript 'matchmedia_addlistener' %}
+    {{ js_bundle('matchmedia_addlistener') }}
   <![endif]-->
-  {% javascript 'annual_2011' %}
+  {{ js_bundle('annual_2011') }}
 {% endblock %}
 
 

bedrock/foundation/templates/foundation/annualreport/2011faq.html

@@ -11,12 +11,12 @@
 {% block body_class %}sand{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'annual_2011' %}
+  {{ css_bundle('annual_2011') }}
   <link rel="stylesheet" media="print" href="{{ static('css/foundation/annual2011print.css') }}">
 {% endblock %}
 
 {% block js %}
-  {% javascript 'annual_2011' %}
+  {{ js_bundle('annual_2011') }}
 {% endblock %}
 
 

bedrock/foundation/templates/foundation/annualreport/2012/faq.html

@@ -10,7 +10,7 @@
 {% block body_id %}annual-2012-faq{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'annual_2012' %}
+  {{ css_bundle('annual_2012') }}
 {% endblock %}
 
 {% block site_header %}

bedrock/foundation/templates/foundation/annualreport/2012/index.html

@@ -8,7 +8,7 @@
 {% block body_id %}annual-2012{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'annual_2012' %}
+  {{ css_bundle('annual_2012') }}
 {% endblock %}
 
 {% block site_header %}
@@ -229,5 +229,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'annual_2012' %}
+  {{ js_bundle('annual_2012') }}
 {% endblock %}

bedrock/foundation/templates/foundation/annualreport/2013/faq.html

@@ -10,7 +10,7 @@
 {% block body_id %}annual-2013-faq{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'annual_2013' %}
+  {{ css_bundle('annual_2013') }}
 {% endblock %}
 
 {% block site_header %}

bedrock/foundation/templates/foundation/annualreport/2013/index.html

@@ -8,7 +8,7 @@
 {% block body_id %}annual-2013{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'annual_2013' %}
+  {{ css_bundle('annual_2013') }}
 {% endblock %}
 
 {% block site_header %}
@@ -153,5 +153,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'annual_2013' %}
+  {{ js_bundle('annual_2013') }}
 {% endblock %}

bedrock/foundation/templates/foundation/annualreport/2014/faq.html

@@ -10,7 +10,7 @@
 {% block body_id %}annual-2014-faq{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'annual_2014' %}
+  {{ css_bundle('annual_2014') }}
 {% endblock %}
 
 {% block site_header %}

bedrock/foundation/templates/foundation/annualreport/2014/index.html

@@ -8,7 +8,7 @@
 {% block body_id %}annual-2014{% endblock %}
 
 {% block page_css %}
-  {% stylesheet 'annual_2014' %}
+  {{ css_bundle('annual_2014') }}
 {% endblock %}
 
 {% block site_header %}
@@ -99,5 +99,5 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'annual_2013' %}
+  {{ js_bundle('annual_2013') }}
 {% endblock %}