[IMP] web,*: config: add XXS size to config.device

In Less, the size_class XXS is defined and used in media queries.
This rev. adds it in JS for sake of consistency.

Code in addons comparing the size_class needed to be adapted due
to the new XXS size_class.

Moreover, we now use the helper 'config.device.isMobile' everywhere
we should, instead of manually comparing the size_class.

Finally, we changed the way the config.device has to be specified
in the test environment. From now on, only the size_class should be
set, and the isMobile flag is computed automatically.

1 files changed, 7 insertions, 6 deletions

diff --git a/addons/web/static/src/js/services/config.js b/addons/web/static/src/js/services/config.js
index 8a42e755322..cb32ed583d4 100644
--- a/addons/web/static/src/js/services/config.js
+++ b/addons/web/static/src/js/services/config.js
@@ -1,4 +1,4 @@
-odoo.define('web.config', function (require) {
+odoo.define('web.config', function () {
 "use strict";
 
 /**
@@ -31,7 +31,7 @@ var config = {
          */
         touch: 'ontouchstart' in window || 'onmsgesturechange' in window,
         /**
-         * size_class is an integer: 0, 1, 2 or 3, depending on the (current)
+         * size_class is an integer: 0, 1, 2, 3 or 4, depending on the (current)
          * size of the device.  This is a dynamic property, updated whenever the
          * browser is resized
          *
@@ -41,21 +41,22 @@ var config = {
         /**
          * A frequent use case is to have a different render in 'mobile' mode,
          * meaning when the screen is small.  This flag (boolean) is true when
-         * the size is not 3.  It is also updated dynamically.
+         * the size is XXS or XS. It is also updated dynamically.
          *
          * @type Boolean
          */
         isMobile: null,
         /**
-         * Mapping between the numbers 0,1,2,3 and some descriptions
+         * Mapping between the numbers 0,1,2,3,4 and some descriptions
          */
-        SIZES: { XS: 0, SM: 1, MD: 2, LG: 3 },
+        SIZES: { XXS: 0, XS: 1, SM: 2, MD: 3, LG: 4 },
     },
 };
 
 
 var medias = [
-    window.matchMedia('(max-width: 767px)'),
+    window.matchMedia('(max-width: 474px)'),
+    window.matchMedia('(min-width: 475px) and (max-width: 767px)'),
     window.matchMedia('(min-width: 768px) and (max-width: 991px)'),
     window.matchMedia('(min-width: 992px) and (max-width: 1199px)'),
     window.matchMedia('(min-width: 1200px)')