[MIG] website_critical_css: Backport to 12.0

website_critical_css/README.rst

@@ -0,0 +1,108 @@
+====================
+Website Critical CSS
+====================
+
+.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+   !! This file is generated by oca-gen-addon-readme !!
+   !! changes will be overwritten.                   !!
+   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
+.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
+    :target: https://odoo-community.org/page/development-status
+    :alt: Beta
+.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png
+    :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
+    :alt: License: AGPL-3
+.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fwebsite-lightgray.png?logo=github
+    :target: https://github.com/OCA/website/tree/13.0/website_critical_css
+    :alt: OCA/website
+.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
+    :target: https://translation.odoo-community.org/projects/website-13-0/website-13-0-website_critical_css
+    :alt: Translate me on Weblate
+.. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png
+    :target: https://runbot.odoo-community.org/runbot/186/13.0
+    :alt: Try me on Runbot
+
+|badge1| |badge2| |badge3| |badge4| |badge5| 
+
+This module can improve the Google PageSpeed score of individual website pages.
+
+In particular, it improves the score for First Contentful Paint (FCP). It does so
+by allowing to configure a blob of 'Critical CSS' for each page, which is the only
+CSS that will be loaded before first paint. Any other CSS is delayed.
+
+**Table of contents**
+
+.. contents::
+   :local:
+
+Usage
+=====
+
+To use this module:
+
+  * Go to Website -> Pages and select a page to optimize
+  * Clear out any current contents of the 'Critical CSS' field
+  * Find out the public facing URL of this page
+  * Generate Critical CSS for this URL while selecting the right widths for
+    Desktop and Mobile views
+  * Paste the blob in the 'Critical CSS' field.
+
+To generate critical CSS you have a couple of options:
+
+  * Use a free online Critical CSS generator. At the time of writing
+    there are: Sitelocity, Pegasaas, web.dev, Corewebvitals.io, ...
+  * Install the npm [critical](https://github.com/addyosmani/critical)
+    package and generate it on your local.
+
+To test improvement of FCP score, use for example Lighthouse, which is
+build into Chrome browser.
+
+Known issues / Roadmap
+======================
+
+* Support automatic critical CSS generation when page layout is
+  changed, when the `critical` tool is installed on server.
+* Investigate possible incompatibility with `web_company_color`
+  Both are overriding the same function in `ir.qweb`
+
+Bug Tracker
+===========
+
+Bugs are tracked on `GitHub Issues <https://github.com/OCA/website/issues>`_.
+In case of trouble, please check there if your issue has already been reported.
+If you spotted it first, help us smashing it by providing a detailed and welcomed
+`feedback <https://github.com/OCA/website/issues/new?body=module:%20website_critical_css%0Aversion:%2013.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
+
+Do not contact contributors directly about support or help with technical issues.
+
+Credits
+=======
+
+Authors
+~~~~~~~
+
+* Sunflower IT
+
+Contributors
+~~~~~~~~~~~~
+
+* Dan Kiplangat <[email protected]>
+* Tom Blauwendraat <[email protected]>
+
+Maintainers
+~~~~~~~~~~~
+
+This module is maintained by the OCA.
+
+.. image:: https://odoo-community.org/logo.png
+   :alt: Odoo Community Association
+   :target: https://odoo-community.org
+
+OCA, or the Odoo Community Association, is a nonprofit organization whose
+mission is to support the collaborative development of Odoo features and
+promote its widespread use.
+
+This module is part of the `OCA/website <https://github.com/OCA/website/tree/13.0/website_critical_css>`_ project on GitHub.
+
+You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

website_critical_css/__init__.py

@@ -0,0 +1,3 @@
+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
+
+from . import models

website_critical_css/__manifest__.py

@@ -0,0 +1,14 @@
+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
+
+{
+    "name": "Website Critical CSS",
+    "version": "12.0.1.0.0",
+    "author": "Sunflower IT,Odoo Community Association (OCA)",
+    "website": "https://github.com/OCA/website",
+    "license": "AGPL-3",
+    "category": "Website",
+    "summary": "Website Critical CSS to improve FCP score",
+    "depends": ["website"],
+    "data": ["views/website_page.xml", "views/templates.xml"],
+    "installable": True,
+}

website_critical_css/i18n/website_critical_css.pot

@@ -0,0 +1,32 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# 	* website_critical_css
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 13.0\n"
+"Report-Msgid-Bugs-To: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#. module: website_critical_css
+#. openerp-web
+#: code:addons/website_critical_css/static/src/xml/page_properties.xml:0
+#: model:ir.model.fields,field_description:website_critical_css.field_website_page__critical_css
+#, python-format
+msgid "Critical CSS"
+msgstr ""
+
+#. module: website_critical_css
+#: model:ir.model,name:website_critical_css.model_website_page
+msgid "Page"
+msgstr ""
+
+#. module: website_critical_css
+#: model:ir.model,name:website_critical_css.model_ir_qweb
+msgid "Qweb"
+msgstr ""

website_critical_css/models/__init__.py

@@ -0,0 +1,4 @@
+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
+
+from . import website_page
+from . import ir_qweb

website_critical_css/models/ir_qweb.py

@@ -0,0 +1,70 @@
+from odoo import models
+
+from odoo.addons.website.models.ir_qweb import AssetsBundleMultiWebsite
+
+
+class AssetsBundleCriticalCSS(AssetsBundleMultiWebsite):
+    def to_node(
+        self,
+        css=True,
+        js=True,
+        debug=False,
+        async_load=False,
+    ):
+        response = super(AssetsBundleCriticalCSS, self).to_node(
+            css=css,
+            js=js,
+            debug=debug,
+            async_load=async_load,
+        )
+        if not (css):
+            return response
+        new_response = []
+        for item in response:
+            if not (item and item[0] == "link"):
+                new_response.append(item)
+            else:
+                attr = item[1]
+                attr["media"] = "print"
+                attr["onload"] = "this.media='all'"
+                new_response.append(("link", attr, None))
+        return new_response
+
+
+class IrQWeb(models.AbstractModel):
+    _inherit = "ir.qweb"
+
+    def get_asset_bundle(self, xmlid, files, env=None):
+        return AssetsBundleCriticalCSS(xmlid, files, env=env)
+
+    def _get_asset_nodes(
+        self,
+        xmlid,
+        options,
+        css=True,
+        js=True,
+        debug=False,
+        async_load=False,
+        values=None,
+    ):
+        has_critical_css = bool(
+            css
+            and isinstance(values, dict)
+            and values.get("main_object")
+            and values["main_object"]._name == "website.page"
+            and values["main_object"].critical_css
+            and not self.env.user.has_group("website.group_website_designer")
+        )
+        # toggle defer_load to True in case of css=True and has_critical_css.
+        # In core, defer_load is only in use for JS currently,
+        # so we can use it for CSS in order to bust tools.ormcache cache, instead
+        # of trying to override the tools.ormcache dependency.
+        return super(IrQWeb, self)._get_asset_nodes(
+            xmlid,
+            options,
+            css=css,
+            js=js,
+            debug=debug,
+            async_load=async_load,
+            values=values,
+        )

website_critical_css/models/website_page.py

@@ -0,0 +1,36 @@
+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
+import re
+
+from odoo import api, fields, models
+
+
+class WebsitePage(models.Model):
+    _inherit = "website.page"
+
+    critical_css = fields.Text("Critical CSS")
+
+    @api.model
+    def get_page_info(self, id):
+        return self.browse(id).read(
+            [
+                "id",
+                "name",
+                "url",
+                "website_published",
+                "website_indexed",
+                "date_publish",
+                "menu_ids",
+                "is_homepage",
+                "website_id",
+                "critical_css",
+            ],
+        )
+
+    def write(self, vals):
+        if "critical_css" in vals:
+            # strip wrapping spaces or style tags
+            css = (vals.get("critical_css") or "").strip()
+            lstrip = re.compile(r"^<\s*style\s*>\s*", re.IGNORECASE)
+            rstrip = re.compile(r"\s*<\s*style\s*>$", re.IGNORECASE)
+            vals["critical_css"] = re.sub(lstrip, "", re.sub(rstrip, "", css)) or None
+        return super(WebsitePage, self).write(vals)

website_critical_css/readme/CONTRIBUTORS.rst

@@ -0,0 +1,2 @@
+* Dan Kiplangat <[email protected]>
+* Tom Blauwendraat <[email protected]>

website_critical_css/readme/DESCRIPTION.rst

@@ -0,0 +1,5 @@
+This module can improve the Google PageSpeed score of individual website pages.
+
+In particular, it improves the score for First Contentful Paint (FCP). It does so
+by allowing to configure a blob of 'Critical CSS' for each page, which is the only
+CSS that will be loaded before first paint. Any other CSS is delayed.

website_critical_css/readme/ROADMAP.rst

@@ -0,0 +1,4 @@
+* Support automatic critical CSS generation when page layout is
+  changed, when the `critical` tool is installed on server.
+* Investigate possible incompatibility with `web_company_color`
+  Both are overriding the same function in `ir.qweb`

website_critical_css/readme/USAGE.rst

@@ -0,0 +1,18 @@
+To use this module:
+
+  * Go to Website -> Pages and select a page to optimize
+  * Clear out any current contents of the 'Critical CSS' field
+  * Find out the public facing URL of this page
+  * Generate Critical CSS for this URL while selecting the right widths for
+    Desktop and Mobile views
+  * Paste the blob in the 'Critical CSS' field.
+
+To generate critical CSS you have a couple of options:
+
+  * Use a free online Critical CSS generator. At the time of writing
+    there are: Sitelocity, Pegasaas, web.dev, Corewebvitals.io, ...
+  * Install the npm [critical](https://github.com/addyosmani/critical)
+    package and generate it on your local.
+
+To test improvement of FCP score, use for example Lighthouse, which is
+build into Chrome browser.