[IMP] website, web: add fullscreen mode and frontend keyboard shortcuts

While the edit mode interface is full of useful things, it also adds a
lot of clutter, and alters the page's width and thus, its layout. This
commit adds keyboard shortcut for website editors to use, and allows
them to enter a "fullscreen" mode that hides the editor interface while
remaining in edit mode, allowing the user to have fewer distractions
while editing text content, and a closer rendition of the page's final
layout while editing.

For this, keyboard shortcuts were required, and a few other useful
shortcuts have been added, such as alt-1,2,3 for the navbar, just like
in the backed.

task-2126915

closes odoo/odoo#46953

Related: odoo/enterprise#9295
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 28 insertions, 17 deletions

diff --git a/addons/web/static/src/js/chrome/keyboard_navigation_mixin.js b/addons/web/static/src/js/chrome/keyboard_navigation_mixin.js
index 4318bca879a..707dab1f8f9 100644
--- a/addons/web/static/src/js/chrome/keyboard_navigation_mixin.js
+++ b/addons/web/static/src/js/chrome/keyboard_navigation_mixin.js
@@ -30,7 +30,17 @@ odoo.define('web.KeyboardNavigationMixin', function (require) {
             'keyup': '_onKeyUp',
         },
 
-        init: function () {
+        /**
+         * @constructor
+         * @param {object} [options]
+         * @param {boolean} [options.autoAccessKeys=true]
+         *      Whether accesskeys should be created automatically for buttons
+         *      without them in the page.
+         */
+        init: function (options) {
+            this.options = Object.assign({
+                autoAccessKeys: true,
+            }, options);
             this._areAccessKeyVisible = false;
             this.BrowserDetection = new BrowserDetection();
         },
@@ -130,22 +140,24 @@ odoo.define('web.KeyboardNavigationMixin', function (require) {
 
                 var usedAccessKey = this._getAllUsedAccessKeys();
 
-                var buttonsWithoutAccessKey = this.$el.find('button.btn:visible')
-                    .not('[accesskey]')
-                    .not('[disabled]')
-                    .not('[tabindex="-1"]');
-                _.each(buttonsWithoutAccessKey, function (elem) {
-                    var buttonString = [elem.innerText, elem.title, "ABCDEFGHIJKLMNOPQRSTUVWXYZ"].join('');
-                    for (var letterIndex = 0; letterIndex < buttonString.length; letterIndex++) {
-                        var candidateAccessKey = buttonString[letterIndex].toUpperCase();
-                        if (candidateAccessKey >= 'A' && candidateAccessKey <= 'Z' &&
-                            !_.includes(usedAccessKey, candidateAccessKey)) {
-                            elem.accessKey = candidateAccessKey;
-                            usedAccessKey.push(candidateAccessKey);
-                            break;
+                if (this.options.autoAccessKeys) {
+                    var buttonsWithoutAccessKey = this.$el.find('button.btn:visible')
+                        .not('[accesskey]')
+                        .not('[disabled]')
+                        .not('[tabindex="-1"]');
+                    _.each(buttonsWithoutAccessKey, function (elem) {
+                        var buttonString = [elem.innerText, elem.title, "ABCDEFGHIJKLMNOPQRSTUVWXYZ"].join('');
+                        for (var letterIndex = 0; letterIndex < buttonString.length; letterIndex++) {
+                            var candidateAccessKey = buttonString[letterIndex].toUpperCase();
+                            if (candidateAccessKey >= 'A' && candidateAccessKey <= 'Z' &&
+                                !_.includes(usedAccessKey, candidateAccessKey)) {
+                                elem.accessKey = candidateAccessKey;
+                                usedAccessKey.push(candidateAccessKey);
+                                break;
+                            }
                         }
-                    }
-                });
+                    });
+                }
 
                 var elementsWithoutAriaKeyshortcut = this.$el.find('[accesskey]').not('[aria-keyshortcuts]');
                 _.each(elementsWithoutAriaKeyshortcut, function (elem) {
@@ -230,4 +242,3 @@ odoo.define('web.KeyboardNavigationMixin', function (require) {
     return KeyboardNavigationMixin;
 
 });
-