[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.

7 files changed, 23 insertions, 25 deletions

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 94facd80ceb..c9375c2d4b9 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -1037,7 +1037,7 @@ var FieldPhone = FieldEmail.extend({
      * @private
      */
     _canCall: function () {
-        return config.device.size_class <= config.device.SIZES.XS;
+        return config.device.isMobile;
     }
 });
 
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)')
diff --git a/addons/web/static/src/js/views/basic/basic_view.js b/addons/web/static/src/js/views/basic/basic_view.js
index f428a83cd41..df9f9807bfd 100644
--- a/addons/web/static/src/js/views/basic/basic_view.js
+++ b/addons/web/static/src/js/views/basic/basic_view.js
@@ -246,7 +246,7 @@ var BasicView = AbstractView.extend({
                     }
                 }
                 if (mode.indexOf(',') !== -1) {
-                    mode = config.device.size_class !== config.device.SIZES.XS ? 'tree' : 'kanban';
+                    mode = config.device.isMobile ? 'kanban' : 'tree';
                 }
                 if (mode === 'tree') {
                     mode = 'list';
diff --git a/addons/web/static/src/js/views/form/form_renderer.js b/addons/web/static/src/js/views/form/form_renderer.js
index 779121de3e9..7d9c3cd2d78 100644
--- a/addons/web/static/src/js/views/form/form_renderer.js
+++ b/addons/web/static/src/js/views/form/form_renderer.js
@@ -279,7 +279,7 @@ var FormRenderer = BasicRenderer.extend({
         var visible_buttons = buttons_partition[1];
 
         // Get the unfolded buttons according to window size
-        var nb_buttons = [2, 4, 6, 7][config.device.size_class];
+        var nb_buttons = [2, 2, 4, 6, 7][config.device.size_class];
         var unfolded_buttons = visible_buttons.slice(0, nb_buttons).concat(invisible_buttons);
 
         // Get the folded buttons
diff --git a/addons/web/static/src/js/views/graph/graph_renderer.js b/addons/web/static/src/js/views/graph/graph_renderer.js
index 4d51f8786d0..07155e327e3 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -20,7 +20,7 @@ var qweb = core.qweb;
 var CHART_TYPES = ['pie', 'bar', 'line'];
 
 // hide top legend when too many items for device size
-var MAX_LEGEND_LENGTH = 25 * (1 + config.device.size_class);
+var MAX_LEGEND_LENGTH = 25 * (Math.max(1, config.device.size_class));
 
 return AbstractRenderer.extend({
     className: "o_graph_svg_container",
diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index 4fd9d6ee84e..44f00d1d7f9 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -3,6 +3,7 @@ odoo.define('web.basic_fields_tests', function (require) {
 
 var basicFields = require('web.basic_fields');
 var concurrency = require('web.concurrency');
+var config = require('web.config');
 var core = require('web.core');
 var FormView = require('web.FormView');
 var KanbanView = require('web.KanbanView');
@@ -2987,9 +2988,8 @@ QUnit.module('basic_fields', {
             res_id: 1,
             config: {
                 device: {
-                    size_class: 0, // Screen XS
-                    SIZES: { XS: 0, SM: 1, MD: 2, LG: 3 },
-                }
+                    size_class: config.device.SIZES.XS,
+                },
             },
         });
 
@@ -3032,9 +3032,8 @@ QUnit.module('basic_fields', {
             arch: '<tree editable="bottom"><field name="foo"  widget="phone"/></tree>',
             config: {
                 device: {
-                    size_class: 0, // Screen XS
-                    SIZES: { XS: 0, SM: 1, MD: 2, LG: 3 },
-                }
+                    size_class: config.device.SIZES.XS,
+                },
             },
         });
 
@@ -3097,9 +3096,8 @@ QUnit.module('basic_fields', {
             res_id: 1,
             config: {
                 device: {
-                    size_class: 1, // Screen SM
-                    SIZES: { XS: 0, SM: 1, MD: 2, LG: 3 },
-                }
+                    size_class: config.device.SIZES.SM,
+                },
             },
         });
 
@@ -3145,9 +3143,8 @@ QUnit.module('basic_fields', {
             arch: '<tree editable="bottom"><field name="foo"  widget="phone"/></tree>',
             config: {
                 device: {
-                    size_class: 1, // Screen SM
-                    SIZES: { XS: 0, SM: 1, MD: 2, LG: 3 },
-                }
+                    size_class: config.device.SIZES.SM,
+                },
             },
         });
 
@@ -3199,9 +3196,8 @@ QUnit.module('basic_fields', {
             },
             config: {
                 device: {
-                    size_class: 0,
-                    SIZES: { XS: 0, SM: 1, MD: 2, LG: 3 },
-                }
+                    size_class: config.device.SIZES.XS,
+                },
             },
         });
 
diff --git a/addons/web/static/tests/helpers/test_utils.js b/addons/web/static/tests/helpers/test_utils.js
index 260436ff152..468b25e5733 100644
--- a/addons/web/static/tests/helpers/test_utils.js
+++ b/addons/web/static/tests/helpers/test_utils.js
@@ -346,6 +346,7 @@ function addMockEnvironment(widget, params) {
         initialConfig.device = _.clone(config.device);
         if ('device' in params.config) {
             _.extend(config.device, params.config.device);
+            config.device.isMobile = config.device.size_class <= config.device.SIZES.XS;
         }
         if ('debug' in params.config) {
             config.debug = params.config.debug;