[IMP] *: adapt tests to comparison menu

Tests have been adapted accross all affected modules to support the new
"comparison" menu component.

Task ID: 2245719

Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Julien Mougenot <jum@odoo.com>

9 files changed, 944 insertions, 667 deletions

diff --git a/addons/web/static/tests/control_panel/comparison_menu_tests.js b/addons/web/static/tests/control_panel/comparison_menu_tests.js
new file mode 100644
index 00000000000..141250c3bb4
--- /dev/null
+++ b/addons/web/static/tests/control_panel/comparison_menu_tests.js
@@ -0,0 +1,145 @@
+odoo.define('web.comparison_menu_tests', function (require) {
+    "use strict";
+
+    const {
+        controlPanel: cpHelpers,
+        createControlPanel,
+        mock,
+    } = require('web.test_utils');
+
+    const { patchDate } = mock;
+    const searchMenuTypes = ['filter', 'comparison'];
+
+    QUnit.module('Components', {
+        beforeEach() {
+            this.fields = {
+                birthday: { string: "Birthday", type: "date", store: true, sortable: true },
+                date_field: { string: "Date", type: "date", store: true, sortable: true },
+                float_field: { string: "Float", type: "float", group_operator: 'sum' },
+                foo: { string: "Foo", type: "char", store: true, sortable: true },
+            };
+            this.viewInfo = {
+                arch: `
+                    <search>
+                        <filter name="birthday" date="birthday"/>
+                        <filter name="date_field" date="date_field"/>
+                    </search>`,
+                fields: this.fields,
+            };
+        },
+    }, function () {
+
+        QUnit.module('ComparisonMenu');
+
+        QUnit.test('simple rendering', async function (assert) {
+            assert.expect(6);
+
+            const unpatchDate = patchDate(1997, 0, 9, 12, 0, 0);
+            const params = {
+                cpStoreConfig: { viewInfo: this.viewInfo, searchMenuTypes },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            assert.containsOnce(controlPanel, ".o_dropdown.o_filter_menu");
+            assert.containsNone(controlPanel, ".o_dropdown.o_comparison_menu");
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, "Birthday");
+            await cpHelpers.toggleMenuItemOption(controlPanel, "Birthday", "January");
+
+            assert.containsOnce(controlPanel, 'div.o_comparison_menu > button i.fa.fa-adjust');
+            assert.strictEqual(controlPanel.el.querySelector('div.o_comparison_menu > button span').innerText.trim(), "Comparison");
+
+            await cpHelpers.toggleComparisonMenu(controlPanel);
+
+            const comparisonOptions = [...controlPanel.el.querySelectorAll(
+                '.o_comparison_menu li'
+            )];
+            assert.strictEqual(comparisonOptions.length, 2);
+            assert.deepEqual(
+                comparisonOptions.map(e => e.innerText),
+                ["Birthday: Previous Period", "Birthday: Previous Year"]
+            );
+
+            controlPanel.destroy();
+            unpatchDate();
+        });
+
+        QUnit.test('activate a comparison works', async function (assert) {
+            assert.expect(5);
+
+            const unpatchDate = patchDate(1997, 0, 9, 12, 0, 0);
+            const params = {
+                cpStoreConfig: { viewInfo: this.viewInfo, searchMenuTypes },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, "Birthday");
+            await cpHelpers.toggleMenuItemOption(controlPanel, "Birthday", "January");
+            await cpHelpers.toggleComparisonMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, "Birthday: Previous Period");
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), [
+                "Birthday: January 1997",
+                "Birthday: Previous Period",
+            ]);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, "Date");
+            await cpHelpers.toggleMenuItemOption(controlPanel, "Date", "December");
+            await cpHelpers.toggleComparisonMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, "Date: Previous Year");
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), [
+                ["Birthday: January 1997", "Date: December 1996"].join("or"),
+                "Date: Previous Year",
+            ]);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, "Date");
+            await cpHelpers.toggleMenuItemOption(controlPanel, "Date", "1996");
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), [
+                "Birthday: January 1997",
+            ]);
+
+            await cpHelpers.toggleComparisonMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, "Birthday: Previous Year");
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), [
+                "Birthday: January 1997",
+                "Birthday: Previous Year",
+            ]);
+
+            await cpHelpers.removeFacet(controlPanel);
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
+
+            controlPanel.destroy();
+            unpatchDate();
+        });
+
+        QUnit.test('no timeRanges key in search query if "comparison" not in searchMenuTypes', async function (assert) {
+            assert.expect(1);
+
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: this.viewInfo, searchMenuTypes: ['filter'],
+                },
+                cpProps: { fields: this.fields, searchMenuTypes: ['filter'] },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, "Birthday");
+            await cpHelpers.toggleMenuItemOption(controlPanel, "Birthday", 0);
+
+            assert.notOk("timeRanges" in controlPanel.getQuery());
+
+            controlPanel.destroy();
+        });
+    });
+});
diff --git a/addons/web/static/tests/control_panel/control_panel_model_tests.js b/addons/web/static/tests/control_panel/control_panel_model_tests.js
index 6c571597182..fb73a58dce6 100644
--- a/addons/web/static/tests/control_panel/control_panel_model_tests.js
+++ b/addons/web/static/tests/control_panel/control_panel_model_tests.js
@@ -37,7 +37,7 @@ odoo.define('web.control_panel_model_tests', function (require) {
             assert.expect(1);
 
             const model = createControlPanelModel();
-            assert.deepEqual(sanitizeFilters(model), [{ type: 'timeRange' }]);
+            assert.deepEqual(sanitizeFilters(model), []);
         });
 
         QUnit.test('one field tag', function (assert) {
@@ -55,7 +55,6 @@ odoo.define('web.control_panel_model_tests', function (require) {
                     fieldType: "many2one",
                     type: "field"
                 },
-                { type: 'timeRange' },
             ]);
         });
 
@@ -67,7 +66,7 @@ odoo.define('web.control_panel_model_tests', function (require) {
             </search>`;
             const fields = this.fields;
             const model = createControlPanelModel({ viewInfo: { arch, fields } });
-            assert.deepEqual(sanitizeFilters(model), [{ type: 'timeRange' }]);
+            assert.deepEqual(sanitizeFilters(model), []);
         });
 
         QUnit.test('one separator tag and one field tag', function (assert) {
@@ -86,7 +85,6 @@ odoo.define('web.control_panel_model_tests', function (require) {
                     fieldType: "many2one",
                     type: "field"
                 },
-                { type: 'timeRange' },
             ]);
         });
 
@@ -104,7 +102,40 @@ odoo.define('web.control_panel_model_tests', function (require) {
                     domain: "[]",
                     type: "filter",
                 },
-                { type: 'timeRange' },
+            ]);
+        });
+
+        QUnit.test('one filter tag with date attribute', function (assert) {
+            assert.expect(1);
+            const arch = `
+                <search>
+                    <filter name="date_filter" string="Date" date="date_field"/>
+                </search>`;
+            const fields = this.fields;
+            const model = createControlPanelModel({ viewInfo: { arch, fields } });
+            const dateFilterId = Object.values(model.state.filters)[0].id;
+            assert.deepEqual(sanitizeFilters(model), [
+                {
+                    defaultOptionId: "this_month",
+                    description: "Date",
+                    fieldName: "date_field",
+                    fieldType: "date",
+                    isDateFilter: true,
+                    hasOptions: true,
+                    type: "filter"
+                  },
+                  {
+                    comparisonOptionId: "previous_period",
+                    dateFilterId,
+                    description: "Date: Previous Period",
+                    type: "comparison"
+                  },
+                  {
+                    comparisonOptionId: "previous_year",
+                    dateFilterId,
+                    description: "Date: Previous Year",
+                    type: "comparison"
+                  }
             ]);
         });
 
@@ -125,7 +156,6 @@ odoo.define('web.control_panel_model_tests', function (require) {
                     hasOptions: true,
                     type: "groupBy",
                 },
-                { type: 'timeRange' },
             ]);
         });
 
@@ -149,7 +179,6 @@ odoo.define('web.control_panel_model_tests', function (require) {
                     domain: "[('bar', '=', 3)]",
                     type: "filter",
                 },
-                { type: 'timeRange' },
             ]);
         });
 
@@ -174,7 +203,6 @@ odoo.define('web.control_panel_model_tests', function (require) {
                     domain: "[('bar', '=', 3)]",
                     type: "filter",
                 },
-                { type: 'timeRange' },
             ]);
         });
 
@@ -199,7 +227,6 @@ odoo.define('web.control_panel_model_tests', function (require) {
                     fieldType: "many2one",
                     type: "field",
                 },
-                { type: 'timeRange' },
             ]);
         });
 
@@ -225,7 +252,6 @@ odoo.define('web.control_panel_model_tests', function (require) {
                     fieldType: "many2one",
                     type: "field"
                 },
-                { type: 'timeRange' },
             ]);
         });
 
@@ -266,7 +292,6 @@ odoo.define('web.control_panel_model_tests', function (require) {
                     type: "favorite",
                     userId: 2
                 },
-                { type: 'timeRange' }
             ]);
 
         });
@@ -286,7 +311,6 @@ odoo.define('web.control_panel_model_tests', function (require) {
                     isDefault: true,
                     type: 'filter'
                 },
-                { type: 'timeRange' },
             ]);
 
         });
@@ -328,7 +352,6 @@ odoo.define('web.control_panel_model_tests', function (require) {
                     isDefault: true,
                     type: 'groupBy',
                 },
-                { type: 'timeRange' },
             ]);
 
         });
diff --git a/addons/web/static/tests/control_panel/favorite_menu_tests.js b/addons/web/static/tests/control_panel/favorite_menu_tests.js
index 5aadc99f619..905b3758859 100644
--- a/addons/web/static/tests/control_panel/favorite_menu_tests.js
+++ b/addons/web/static/tests/control_panel/favorite_menu_tests.js
@@ -323,13 +323,20 @@ odoo.define('web.favorite_menu_tests', function (require) {
             controlPanel.destroy();
         });
 
-        QUnit.test('toggle favorite correctly clears filter, groupbys, time ranges and field "options"', async function (assert) {
-            assert.expect(8);
+        QUnit.test('toggle favorite correctly clears filter, groupbys, comparison and field "options"', async function (assert) {
+            assert.expect(11);
 
             const unpatchDate = patchDate(2019, 6, 31, 13, 43, 0);
 
             const favoriteFilters = [{
-                context: "{'group_by': ['foo'], 'time_ranges': {'field': 'birthday', 'range': 'this_year'}}",
+                context: `
+                    {
+                        "group_by": ["foo"],
+                        "comparison": {
+                            "favorite comparison content": "bla bla..."
+                        },
+                    }
+                `,
                 domain: "['!', ['foo', '=', 'qsdf']]",
                 id: 7,
                 is_default: false,
@@ -337,14 +344,15 @@ odoo.define('web.favorite_menu_tests', function (require) {
                 sort: "[]",
                 user_id: [2, "Mitchell Admin"],
             }];
+            let firstSearch = true;
             const arch = `
             <search>
                 <field string="Foo" name="foo"/>
-                <filter string="Date Field Filter" name="positive" date="date_field"/>
+                <filter string="Date Field Filter" name="positive" date="date_field" default_period="this_year"/>
                 <filter string="Date Field Groupby" name="coolName" context="{'group_by': 'date_field'}"/>
             </search>
         `;
-            const searchMenuTypes = ['filter', 'groupBy', 'timeRange', 'favorite'];
+            const searchMenuTypes = ['filter', 'groupBy', 'comparison', 'favorite'];
             const params = {
                 cpStoreConfig: {
                     viewInfo: { favoriteFilters, arch, fields: this.fields },
@@ -353,24 +361,34 @@ odoo.define('web.favorite_menu_tests', function (require) {
                         search_default_positive: true,
                         search_default_coolName: true,
                         search_default_foo: "a",
-                        time_ranges: { field: 'date_field', range: 'today', comparisonRange: 'previous_period' }
                     }
                 },
                 cpProps: { searchMenuTypes, action: {}, fields: this.fields },
                 search: function (searchQuery) {
                     const { domain, groupBy, timeRanges } = searchQuery;
-                    assert.deepEqual(domain, ['!', ['foo', '=', 'qsdf']]);
-                    assert.deepEqual(groupBy, ['foo']);
-                    assert.deepEqual(timeRanges, {
-                        fieldDescription: "Birthday",
-                        fieldName: "birthday",
-                        range: [
-                            "&", ["birthday", ">=", "2019-01-01"], ["birthday", "<", "2020-01-01"]
-                        ],
-                        rangeDescription: "This Year",
-                        rangeId: "this_year"
-                    });
-                }
+                    if (firstSearch) {
+                        assert.deepEqual(domain, [['foo', '=', 'a']]);
+                        assert.deepEqual(groupBy, ['date_field:month']);
+                        assert.deepEqual(timeRanges, {
+                            comparisonId: "previous_period",
+                            comparisonRange: ["&", ["date_field", ">=", "2018-01-01"], ["date_field", "<=", "2018-12-31"]],
+                            comparisonRangeDescription: "2018",
+                            fieldDescription: "Date Field Filter",
+                            fieldName: "date_field",
+                            range: ["&", ["date_field", ">=", "2019-01-01"], ["date_field", "<=", "2019-12-31"]],
+                            rangeDescription: "2019",
+                        });
+                        firstSearch = false;
+                    } else {
+                        assert.deepEqual(domain, ['!', ['foo', '=', 'qsdf']]);
+                        assert.deepEqual(groupBy, ['foo']);
+                        assert.deepEqual(timeRanges, {
+                            "favorite comparison content": "bla bla...",
+                            range: undefined,
+                            comparisonRange: undefined,
+                        });
+                    }
+                },
             };
             const controlPanel = await createControlPanel(params);
 
@@ -379,35 +397,26 @@ odoo.define('web.favorite_menu_tests', function (require) {
                 "&",
                 ["foo", "=", "a"],
                 "&",
-                ["date_field", ">=", "2019-07-01"],
-                ["date_field", "<=", "2019-07-31"]
+                ["date_field", ">=", "2019-01-01"],
+                ["date_field", "<=", "2019-12-31"]
             ]);
             assert.deepEqual(groupBy, ['date_field:month']);
-            assert.deepEqual(timeRanges, {
-                comparisonRange: [
-                    "&", ["date_field", ">=", "2019-07-30"], ["date_field", "<", "2019-07-31"]
-                ],
-                comparisonRangeDescription: "Previous Period",
-                comparisonRangeId: "previous_period",
-                fieldDescription: "Date",
-                fieldName: "date_field",
-                range: [
-                    "&", ["date_field", ">=", "2019-07-31"], ["date_field", "<", "2019-08-01"]
-                ],
-                rangeDescription: "Today",
-                rangeId: "today"
-            });
+            assert.deepEqual(timeRanges, {});
 
             assert.deepEqual(
                 cpHelpers.getFacetTexts(controlPanel),
                 [
                     'Foo\na',
-                    'Date Field Filter: July 2019',
+                    'Date Field Filter: 2019',
                     'Date Field Groupby: Month',
-                    'Date: Today / Previous Period'
                 ]
-            );
+                );
+
+            // activate a comparison
+            await cpHelpers.toggleComparisonMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, "Date Field Filter: Previous period");
 
+            // activate the unique existing favorite
             await cpHelpers.toggleFavoriteMenu(controlPanel);
             await cpHelpers.toggleMenuItem(controlPanel, 0);
 
diff --git a/addons/web/static/tests/control_panel/filter_menu_tests.js b/addons/web/static/tests/control_panel/filter_menu_tests.js
index 4728c356728..15a41a21aea 100644
--- a/addons/web/static/tests/control_panel/filter_menu_tests.js
+++ b/addons/web/static/tests/control_panel/filter_menu_tests.js
@@ -185,20 +185,20 @@ odoo.define('web.filter_menu_tests', function (require) {
                 ["&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-12-31"]],
                 ["&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-12-31"]],
                 ["|",
-                    "&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-12-31"],
-                    "&", ["date_field", ">=", "2016-01-01"], ["date_field", "<=", "2016-12-31"]
+                    "&", ["date_field", ">=", "2016-01-01"], ["date_field", "<=", "2016-12-31"],
+                    "&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-12-31"]
                 ],
                 ["|",
                     "|",
-                    "&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-12-31"],
-                    "&", ["date_field", ">=", "2016-01-01"], ["date_field", "<=", "2016-12-31"],
-                    "&", ["date_field", ">=", "2015-01-01"], ["date_field", "<=", "2015-12-31"]
+                        "&", ["date_field", ">=", "2015-01-01"], ["date_field", "<=", "2015-12-31"],
+                        "&", ["date_field", ">=", "2016-01-01"], ["date_field", "<=", "2016-12-31"],
+                        "&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-12-31"]
                 ],
                 ["|",
                     "|",
-                    "&", ["date_field", ">=", "2017-03-01"], ["date_field", "<=", "2017-03-31"],
-                    "&", ["date_field", ">=", "2016-03-01"], ["date_field", "<=", "2016-03-31"],
-                    "&", ["date_field", ">=", "2015-03-01"], ["date_field", "<=", "2015-03-31"]
+                        "&", ["date_field", ">=", "2015-03-01"], ["date_field", "<=", "2015-03-31"],
+                        "&", ["date_field", ">=", "2016-03-01"], ["date_field", "<=", "2016-03-31"],
+                        "&", ["date_field", ">=", "2017-03-01"], ["date_field", "<=", "2017-03-31"]
                 ]
             ];
 
@@ -252,16 +252,16 @@ odoo.define('web.filter_menu_tests', function (require) {
                 { description: 'February', facetContent: 'Date: February 2017', selectedoptions: [1, 7] },
                 { description: 'February', facetContent: 'Date: 2017', selectedoptions: [7] },
                 { description: 'January', facetContent: 'Date: January 2017', selectedoptions: [2, 7] },
-                { description: 'Q4', facetContent: 'Date: January 2017 / Q4 2017', selectedoptions: [2, 3, 7] },
+                { description: 'Q4', facetContent: 'Date: January 2017/Q4 2017', selectedoptions: [2, 3, 7] },
                 { description: 'January', facetContent: 'Date: Q4 2017', selectedoptions: [3, 7] },
                 { description: 'Q4', facetContent: 'Date: 2017', selectedoptions: [7] },
                 { description: 'Q1', facetContent: 'Date: Q1 2017', selectedoptions: [6, 7] },
                 { description: 'Q1', facetContent: 'Date: 2017', selectedoptions: [7] },
                 { description: '2017', selectedoptions: [] },
                 { description: '2017', facetContent: 'Date: 2017', selectedoptions: [7] },
-                { description: '2016', facetContent: 'Date: 2017 / 2016', selectedoptions: [7, 8] },
-                { description: '2015', facetContent: 'Date: 2017 / 2016 / 2015', selectedoptions: [7, 8, 9] },
-                { description: 'March', facetContent: 'Date: March 2017 / March 2016 / March 2015', selectedoptions: [0, 7, 8, 9] }
+                { description: '2016', facetContent: 'Date: 2016/2017', selectedoptions: [7, 8] },
+                { description: '2015', facetContent: 'Date: 2015/2016/2017', selectedoptions: [7, 8, 9] },
+                { description: 'March', facetContent: 'Date: March 2015/March 2016/March 2017', selectedoptions: [0, 7, 8, 9] }
             ];
             for (const s of steps) {
                 const index = expectedDescriptions.indexOf(s.description);
diff --git a/addons/web/static/tests/control_panel/search_utils_tests.js b/addons/web/static/tests/control_panel/search_utils_tests.js
new file mode 100644
index 00000000000..60a7ae5089d
--- /dev/null
+++ b/addons/web/static/tests/control_panel/search_utils_tests.js
@@ -0,0 +1,336 @@
+odoo.define('web.search_utils_tests', function (require) {
+    "use strict";
+
+    const { constructDateDomain } = require('web.searchUtils');
+    const testUtils = require('web.test_utils');
+    const { _t } = require('web.core');
+
+    const patchDate = testUtils.mock.patchDate;
+
+    QUnit.module('SearchUtils', function () {
+
+        QUnit.module('Construct domain');
+
+        QUnit.test('construct simple domain based on date field (no comparisonOptionId)', function (assert) {
+            assert.expect(4);
+            const unpatchDate = patchDate(2020, 5, 1, 13, 0, 0);
+            const referenceMoment = moment().utc();
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'date', []),
+                {
+                    domain: "[]",
+                    description: "",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'date', ['this_month', 'this_year']),
+                {
+                    domain: `["&", ["date_field", ">=", "2020-06-01"], ["date_field", "<=", "2020-06-30"]]`,
+                    description: "June 2020",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'date', ['second_quarter', 'this_year']),
+                {
+                    domain: `["&", ["date_field", ">=", "2020-04-01"], ["date_field", "<=", "2020-06-30"]]`,
+                    description: "Q2 2020",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'date', ['this_year']),
+                {
+                    domain: `["&", ["date_field", ">=", "2020-01-01"], ["date_field", "<=", "2020-12-31"]]`,
+                    description: "2020",
+                }
+            );
+            unpatchDate();
+        });
+
+        QUnit.test('construct simple domain based on datetime field (no comparisonOptionId)', function (assert) {
+            assert.expect(3);
+            const unpatchDate = patchDate(2020, 5, 1, 13, 0, 0);
+            const referenceMoment = moment().utc();
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'datetime', ['this_month', 'this_year']),
+                {
+                    domain: `["&", ["date_field", ">=", "2020-06-01 00:00:00"], ["date_field", "<=", "2020-06-30 23:59:59"]]`,
+                    description: "June 2020",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'datetime', ['second_quarter', 'this_year']),
+                {
+                    domain: `["&", ["date_field", ">=", "2020-04-01 00:00:00"], ["date_field", "<=", "2020-06-30 23:59:59"]]`,
+                    description: "Q2 2020",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'datetime', ['this_year']),
+                {
+                    domain: `["&", ["date_field", ">=", "2020-01-01 00:00:00"], ["date_field", "<=", "2020-12-31 23:59:59"]]`,
+                    description: "2020",
+                }
+            );
+            unpatchDate();
+        });
+
+        QUnit.test('construct domain based on date field (no comparisonOptionId)', function (assert) {
+            assert.expect(3);
+            const unpatchDate = patchDate(2020, 0, 1, 12, 0, 0);
+            const referenceMoment = moment().utc();
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'date', ['this_month', 'first_quarter', 'this_year']),
+                {
+                    domain: "[" +
+                                `"|", ` +
+                                    `"&", ["date_field", ">=", "2020-01-01"], ["date_field", "<=", "2020-01-31"], ` +
+                                    `"&", ["date_field", ">=", "2020-01-01"], ["date_field", "<=", "2020-03-31"]` +
+                            "]",
+                    description: "January 2020/Q1 2020",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'date', ['second_quarter', 'this_year', 'last_year']),
+                {
+                    domain: "[" +
+                                `"|", ` +
+                                    `"&", ["date_field", ">=", "2019-04-01"], ["date_field", "<=", "2019-06-30"], ` +
+                                    `"&", ["date_field", ">=", "2020-04-01"], ["date_field", "<=", "2020-06-30"]` +
+                            "]",
+                    description: "Q2 2019/Q2 2020",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'date', ['this_year', 'this_month', 'antepenultimate_month']),
+                {
+                    domain: "[" +
+                                `"|", ` +
+                                    `"&", ["date_field", ">=", "2020-01-01"], ["date_field", "<=", "2020-01-31"], ` +
+                                    `"&", ["date_field", ">=", "2020-11-01"], ["date_field", "<=", "2020-11-30"]` +
+                            "]",
+                    description: "January 2020/November 2020",
+                }
+            );
+            unpatchDate();
+        });
+
+        QUnit.test('construct domain based on datetime field (no comparisonOptionId)', function (assert) {
+            assert.expect(3);
+            const unpatchDate = patchDate(2020, 0, 1, 12, 0, 0);
+            const referenceMoment = moment().utc();
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'datetime', ['this_month', 'first_quarter', 'this_year']),
+                {
+                    domain: "[" +
+                                `"|", ` +
+                                    `"&", ["date_field", ">=", "2020-01-01 00:00:00"], ["date_field", "<=", "2020-01-31 23:59:59"], ` +
+                                    `"&", ["date_field", ">=", "2020-01-01 00:00:00"], ["date_field", "<=", "2020-03-31 23:59:59"]` +
+                            "]",
+                    description: "January 2020/Q1 2020",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'datetime', ['second_quarter', 'this_year', 'last_year']),
+                {
+                    domain: "[" +
+                                `"|", ` +
+                                    `"&", ["date_field", ">=", "2019-04-01 00:00:00"], ["date_field", "<=", "2019-06-30 23:59:59"], ` +
+                                    `"&", ["date_field", ">=", "2020-04-01 00:00:00"], ["date_field", "<=", "2020-06-30 23:59:59"]` +
+                            "]",
+                    description: "Q2 2019/Q2 2020",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'datetime', ['this_year', 'this_month', 'antepenultimate_month']),
+                {
+                    domain: "[" +
+                                `"|", ` +
+                                    `"&", ["date_field", ">=", "2020-01-01 00:00:00"], ["date_field", "<=", "2020-01-31 23:59:59"], ` +
+                                    `"&", ["date_field", ">=", "2020-11-01 00:00:00"], ["date_field", "<=", "2020-11-30 23:59:59"]` +
+                            "]",
+                    description: "January 2020/November 2020",
+                }
+            );
+            unpatchDate();
+        });
+
+        QUnit.test('construct comparison domain based on date field and option "previous_period"', function (assert) {
+            assert.expect(5);
+            const unpatchDate = patchDate(2020, 0, 1, 12, 0, 0);
+            const referenceMoment = moment().utc();
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'date', ['this_month', 'first_quarter', 'this_year'], 'previous_period'),
+                {
+                    domain: "[" +
+                                `"|", "|", ` +
+                                `"&", ["date_field", ">=", "2019-10-01"], ["date_field", "<=", "2019-10-31"], ` +
+                                `"&", ["date_field", ">=", "2019-11-01"], ["date_field", "<=", "2019-11-30"], ` +
+                                `"&", ["date_field", ">=", "2019-12-01"], ["date_field", "<=", "2019-12-31"]` +
+                            "]",
+                    description: "October 2019/November 2019/December 2019",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'date', ['second_quarter', 'this_year', 'last_year'], 'previous_period'),
+                {
+                    domain: "[" +
+                                `"|", ` +
+                                `"&", ["date_field", ">=", "2018-01-01"], ["date_field", "<=", "2018-03-31"], ` +
+                                    `"&", ["date_field", ">=", "2019-01-01"], ["date_field", "<=", "2019-03-31"]` +
+                            "]",
+                    description: "Q1 2018/Q1 2019",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'date', ['this_year', 'antepenultimate_year', 'this_month', 'antepenultimate_month'], 'previous_period'),
+                {
+                    domain: "[" +
+                                `"|", "|", "|", ` +
+                                    `"&", ["date_field", ">=", "2015-02-01"], ["date_field", "<=", "2015-02-28"], ` +
+                                    `"&", ["date_field", ">=", "2015-12-01"], ["date_field", "<=", "2015-12-31"], ` +
+                                    `"&", ["date_field", ">=", "2017-02-01"], ["date_field", "<=", "2017-02-28"], ` +
+                                    `"&", ["date_field", ">=", "2017-12-01"], ["date_field", "<=", "2017-12-31"]` +
+                            "]",
+                    description: "February 2015/December 2015/February 2017/December 2017",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'date', ['this_year', 'last_year'], 'previous_period'),
+                {
+                    domain: "[" +
+                                `"|", ` +
+                                    `"&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-12-31"], ` +
+                                    `"&", ["date_field", ">=", "2018-01-01"], ["date_field", "<=", "2018-12-31"]` +
+                            "]",
+                    description: "2017/2018",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'date', ['second_quarter', 'third_quarter', 'last_year'], 'previous_period'),
+                {
+                    domain: "[" +
+                                `"|", ` +
+                                `"&", ["date_field", ">=", "2018-10-01"], ["date_field", "<=", "2018-12-31"], ` +
+                                    `"&", ["date_field", ">=", "2019-01-01"], ["date_field", "<=", "2019-03-31"]` +
+                            "]",
+                    description: "Q4 2018/Q1 2019",
+                }
+            );
+            unpatchDate();
+        });
+
+        QUnit.test('construct comparison domain based on datetime field and option "previous_year"', function (assert) {
+            assert.expect(3);
+            const unpatchDate = patchDate(2020, 5, 1, 13, 0, 0);
+            const referenceMoment = moment().utc();
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'datetime', ['this_month', 'first_quarter', 'this_year'], 'previous_year'),
+                {
+                    domain: "[" +
+                                `"|", ` +
+                                    `"&", ["date_field", ">=", "2019-06-01 00:00:00"], ["date_field", "<=", "2019-06-30 23:59:59"], ` +
+                                    `"&", ["date_field", ">=", "2019-01-01 00:00:00"], ["date_field", "<=", "2019-03-31 23:59:59"]` +
+                            "]",
+                    description: "June 2019/Q1 2019",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'datetime', ['second_quarter', 'this_year', 'last_year'], 'previous_year'),
+                {
+                    domain: "[" +
+                                `"|", ` +
+                                    `"&", ["date_field", ">=", "2018-04-01 00:00:00"], ["date_field", "<=", "2018-06-30 23:59:59"], ` +
+                                    `"&", ["date_field", ">=", "2019-04-01 00:00:00"], ["date_field", "<=", "2019-06-30 23:59:59"]` +
+                            "]",
+                    description: "Q2 2018/Q2 2019",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'datetime', ['this_year', 'antepenultimate_year', 'this_month', 'antepenultimate_month'], 'previous_year'),
+                {
+                    domain: "[" +
+                                `"|", "|", "|", ` +
+                                `"&", ["date_field", ">=", "2017-04-01 00:00:00"], ["date_field", "<=", "2017-04-30 23:59:59"], ` +
+                                `"&", ["date_field", ">=", "2017-06-01 00:00:00"], ["date_field", "<=", "2017-06-30 23:59:59"], ` +
+                                `"&", ["date_field", ">=", "2019-04-01 00:00:00"], ["date_field", "<=", "2019-04-30 23:59:59"], ` +
+                                `"&", ["date_field", ">=", "2019-06-01 00:00:00"], ["date_field", "<=", "2019-06-30 23:59:59"]` +
+                            "]",
+                    description: "April 2017/June 2017/April 2019/June 2019",
+                }
+            );
+            unpatchDate();
+        });
+
+        QUnit.module('Options translation');
+
+        QUnit.test("Quarter option: custom translation", async function (assert) {
+            assert.expect(1);
+
+            const unpatchDate = patchDate(2020, 5, 1, 13, 0, 0);
+            const referenceMoment = moment().locale('en');
+            testUtils.mock.patch(_t.database.db, {
+                "Q2": "Deuxième trimestre de l'an de grâce",
+            });
+
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'date', ['second_quarter', 'this_year']),
+                {
+                    domain: `["&", ["date_field", ">=", "2020-04-01"], ["date_field", "<=", "2020-06-30"]]`,
+                    description: "Deuxième trimestre de l'an de grâce 2020",
+                },
+                "Quarter term should be translated"
+            );
+
+            unpatchDate();
+            testUtils.mock.unpatch(_t.database.db);
+        });
+
+        QUnit.test("Quarter option: right to left", async function (assert) {
+            assert.expect(1);
+
+            const unpatchDate = patchDate(2020, 5, 1, 13, 0, 0);
+            const referenceMoment = moment().locale('en');
+            testUtils.mock.patch(_t.database.parameters, {
+                direction: "rtl",
+            });
+
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'date', ['second_quarter', 'this_year']),
+                {
+                    domain: `["&", ["date_field", ">=", "2020-04-01"], ["date_field", "<=", "2020-06-30"]]`,
+                    description: "2020 Q2",
+                },
+                "Notation should be right to left"
+            );
+
+            unpatchDate();
+            testUtils.mock.unpatch(_t.database.parameters);
+        });
+
+        QUnit.test("Quarter option: custom translation and right to left", async function (assert) {
+            assert.expect(1);
+
+            const unpatchDate = patchDate(2020, 5, 1, 13, 0, 0);
+            const referenceMoment = moment().locale('en');
+            testUtils.mock.patch(_t.database.db, {
+                "Q2": "2e Trimestre",
+            });
+            testUtils.mock.patch(_t.database.parameters, {
+                direction: "rtl",
+            });
+
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, 'date_field', 'date', ['second_quarter', 'this_year']),
+                {
+                    domain: `["&", ["date_field", ">=", "2020-04-01"], ["date_field", "<=", "2020-06-30"]]`,
+                    description: "2020 2e Trimestre",
+                },
+                "Quarter term should be translated and notation should be right to left"
+            );
+
+            unpatchDate();
+            testUtils.mock.unpatch(_t.database.db);
+            testUtils.mock.unpatch(_t.database.parameters);
+        });
+    });
+});
diff --git a/addons/web/static/tests/control_panel/time_range_menu_tests.js b/addons/web/static/tests/control_panel/time_range_menu_tests.js
deleted file mode 100644
index 17b6936c9ca..00000000000
--- a/addons/web/static/tests/control_panel/time_range_menu_tests.js
+++ /dev/null
@@ -1,333 +0,0 @@
-odoo.define('web.time_range_menu_tests', function (require) {
-    "use strict";
-
-    const testUtils = require('web.test_utils');
-    const { TIME_RANGE_OPTIONS, COMPARISON_TIME_RANGE_OPTIONS } = require('web.searchUtils');
-
-    const { controlPanel: cpHelpers, createControlPanel, mock } = testUtils;
-    const { patchDate } = mock;
-
-    const searchMenuTypes = ['timeRange'];
-
-    QUnit.module('Components', {
-        beforeEach: function () {
-            this.fields = {
-                birthday: { string: "Birthday", type: "date", store: true, sortable: true },
-                date_field: { string: "Date", type: "date", store: true, sortable: true },
-                float_field: { string: "Float", type: "float", group_operator: 'sum' },
-                foo: { string: "Foo", type: "char", store: true, sortable: true },
-            };
-        },
-    }, function () {
-
-        QUnit.module('TimeRangeMenu');
-
-        QUnit.test('simple rendering', async function (assert) {
-            assert.expect(12);
-
-            const params = {
-                cpStoreConfig: { viewInfo: { fields: this.fields }, searchMenuTypes },
-                cpProps: { fields: this.fields, searchMenuTypes },
-            };
-            const controlPanel = await createControlPanel(params);
-
-            assert.containsOnce(controlPanel, 'div.o_time_range_menu > button i.fa.fa-calendar');
-            assert.strictEqual(controlPanel.el.querySelector('div.o_time_range_menu > button span').innerText.trim(), 'Time Ranges');
-
-            await cpHelpers.toggleTimeRangeMenu(controlPanel);
-
-            assert.containsN(controlPanel, 'div.o_time_range_section', 3);
-
-            let selectEls = [...controlPanel.el.querySelectorAll('div.o_time_range_section select')];
-            assert.strictEqual(selectEls.length, 2);
-            assert.deepEqual(selectEls.map(e => e.value), ['birthday', 'this_month']);
-            assert.containsN(controlPanel, 'div.o_time_range_section label', 3);
-
-            const labelEls = [...controlPanel.el.querySelectorAll('div.o_time_range_section label')];
-            assert.deepEqual(labelEls.map(e => e.innerText.trim()), ['Based On', 'Range', 'Compare To']);
-            assert.containsOnce(controlPanel, 'div.o_time_range_section input[type="checkbox"]');
-
-            assert.containsOnce(controlPanel, 'div.o_time_range_menu ul button');
-            assert.strictEqual(
-                // text is upper cased in enterprise
-                controlPanel.el.querySelector('div.o_time_range_menu ul button').innerText.trim().toUpperCase(),
-                'APPLY'
-            );
-
-            await cpHelpers.toggleTimeRangeMenuBox(controlPanel);
-
-            selectEls = controlPanel.el.querySelectorAll('div.o_time_range_section select');
-            assert.strictEqual(selectEls.length, 3);
-            assert.strictEqual(selectEls[2].value, 'previous_period');
-
-            controlPanel.destroy();
-        });
-
-        QUnit.test('initialization with default time range without comparisonRange', async function (assert) {
-            assert.expect(5);
-
-            const unpatchDate = patchDate(2020, 0, 29, 15, 0, 0);
-
-            const params = {
-                cpStoreConfig: {
-                    viewInfo: { fields: this.fields },
-                    searchMenuTypes,
-                    actionContext: {
-                        time_ranges: { field: 'date_field', range: 'this_week' }
-                    }
-                },
-                cpProps: { fields: this.fields, searchMenuTypes },
-            };
-            const controlPanel = await createControlPanel(params);
-
-            const { timeRanges } = controlPanel.getQuery();
-            assert.deepEqual(timeRanges, {
-                fieldDescription: "Date",
-                fieldName: "date_field",
-                range: [
-                    "&",
-                    ["date_field", ">=", "2020-01-27"],
-                    ["date_field", "<", "2020-02-03"]
-                ],
-                rangeDescription: "This Week",
-                rangeId: "this_week"
-            });
-
-            await cpHelpers.toggleTimeRangeMenu(controlPanel);
-
-            const selectEls = controlPanel.el.querySelectorAll('div.o_time_range_section select');
-            assert.strictEqual(selectEls.length, 2);
-            assert.deepEqual(
-                [...selectEls].map(e => e.value),
-                ['date_field', 'this_week']
-            );
-
-            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Date: This Week']);
-            assert.containsOnce(controlPanel.el.querySelector('.o_searchview .o_searchview_facet'),
-                'span.fa.fa-calendar.o_searchview_facet_label');
-
-            controlPanel.destroy();
-            unpatchDate();
-        });
-
-        QUnit.test('initialization with default time range with comparisonRange', async function (assert) {
-            assert.expect(4);
-
-            const unpatchDate = patchDate(2020, 0, 29, 15, 0, 0);
-
-            const params = {
-                cpStoreConfig: {
-                    viewInfo: { fields: this.fields },
-                    searchMenuTypes,
-                    actionContext: {
-                        time_ranges: { field: 'date_field', range: 'today', comparisonRange: 'previous_year' }
-                    }
-                },
-                cpProps: { fields: this.fields, searchMenuTypes },
-            };
-            const controlPanel = await createControlPanel(params);
-
-            const { timeRanges } = controlPanel.getQuery();
-            assert.deepEqual(timeRanges, {
-                comparisonRange: [
-                    "&",
-                    ["date_field", ">=", "2019-01-29"],
-                    ["date_field", "<", "2019-01-30"]
-                ],
-                comparisonRangeDescription: "Previous Year",
-                comparisonRangeId: "previous_year",
-                fieldDescription: "Date",
-                fieldName: "date_field",
-                range: [
-                    "&",
-                    ["date_field", ">=", "2020-01-29"],
-                    ["date_field", "<", "2020-01-30"]
-                ],
-                rangeDescription: "Today",
-                rangeId: "today"
-            });
-
-            await cpHelpers.toggleTimeRangeMenu(controlPanel);
-
-            const selectEls = controlPanel.el.querySelectorAll('div.o_time_range_section select');
-            assert.strictEqual(selectEls.length, 3);
-            assert.deepEqual(
-                [...selectEls].map(e => e.value),
-                ['date_field', 'today', 'previous_year']
-            );
-
-            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Date: Today / Previous Year']);
-
-            controlPanel.destroy();
-            unpatchDate();
-        });
-
-        QUnit.test('activate a time range works', async function (assert) {
-            assert.expect(3);
-
-            const unpatchDate = patchDate(2020, 0, 29, 1, 0, 0);
-
-            const params = {
-                cpStoreConfig: {
-                    viewInfo: { fields: this.fields },
-                    searchMenuTypes,
-                },
-                cpProps: { fields: this.fields, searchMenuTypes },
-                search: function (searchQuery) {
-                    const { timeRanges } = searchQuery;
-                    assert.deepEqual(timeRanges, {
-                        comparisonRange: [
-                            "&",
-                            ["birthday", ">=", "2019-01-29"],
-                            ["birthday", "<", "2019-01-30"]
-                        ],
-                        comparisonRangeDescription: "Previous Year",
-                        comparisonRangeId: "previous_year",
-                        fieldDescription: "Birthday",
-                        fieldName: "birthday",
-                        range: [
-                            "&",
-                            ["birthday", ">=", "2020-01-29"],
-                            ["birthday", "<", "2020-01-30"]
-                        ],
-                        rangeDescription: "Today",
-                        rangeId: "today"
-                    });
-                }
-            };
-            const controlPanel = await createControlPanel(params);
-
-            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
-
-            await cpHelpers.toggleTimeRangeMenu(controlPanel);
-            await cpHelpers.toggleTimeRangeMenuBox(controlPanel);
-
-            await cpHelpers.selectField(controlPanel, 'birthday');
-            await cpHelpers.selectRange(controlPanel, 'today');
-            await cpHelpers.selectComparisonRange(controlPanel, 'previous_year');
-
-            await cpHelpers.applyTimeRange(controlPanel);
-
-            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Birthday: Today / Previous Year']);
-
-            controlPanel.destroy();
-            unpatchDate();
-        });
-
-        QUnit.test('no timeRanges key in search query if "timeRange" not in searchMenuTypes', async function (assert) {
-            assert.expect(1);
-
-            const params = {
-                cpStoreConfig: {
-                    viewInfo: { fields: this.fields },
-                    actionContext: {
-                        time_ranges: { field: 'date_field', range: 'this_week' }
-                    }
-                },
-                cpProps: { fields: this.fields },
-            };
-            const controlPanel = await createControlPanel(params);
-
-            const { timeRanges } = controlPanel.getQuery();
-            assert.strictEqual(timeRanges, undefined);
-
-            controlPanel.destroy();
-        });
-
-        QUnit.test('time ranges generated are correct', async function (assert) {
-            assert.expect(85);
-
-            const unpatchDate = patchDate(2017, 2, 22, 1, 0, 0);
-
-            const ranges = {
-                last_7_days: ['&', ["birthday", ">=", "2017-03-15"], ["birthday", "<", "2017-03-22"]],
-                last_30_days: ['&', ["birthday", ">=", "2017-02-20"], ["birthday", "<", "2017-03-22"]],
-                last_365_days: ['&', ["birthday", ">=", "2016-03-22"], ["birthday", "<", "2017-03-22"]],
-                last_5_years: ['&', ["birthday", ">=", "2012-03-22"], ["birthday", "<", "2017-03-22"]],
-                today: ['&', ["birthday", ">=", "2017-03-22"], ["birthday", "<", "2017-03-23"]],
-                this_week: ['&', ["birthday", ">=", "2017-03-20"], ["birthday", "<", "2017-03-27"]],
-                this_month: ['&', ["birthday", ">=", "2017-03-01"], ["birthday", "<", "2017-04-01"]],
-                this_quarter: ['&', ["birthday", ">=", "2017-01-01"], ["birthday", "<", "2017-04-01"]],
-                this_year: ['&', ["birthday", ">=", "2017-01-01"], ["birthday", "<", "2018-01-01"]],
-                yesterday: ['&', ["birthday", ">=", "2017-03-21"], ["birthday", "<", "2017-03-22"]],
-                last_week: ['&', ["birthday", ">=", "2017-03-13"], ["birthday", "<", "2017-03-20"]],
-                last_month: ['&', ["birthday", ">=", "2017-02-01"], ["birthday", "<", "2017-03-01"]],
-                last_quarter: ['&', ["birthday", ">=", "2016-10-01"], ["birthday", "<", "2017-01-01"]],
-                last_year: ['&', ["birthday", ">=", "2016-01-01"], ["birthday", "<", "2017-01-01"]],
-            };
-            const comparisonRanges = {
-                previous_period: {
-                    last_7_days: ['&', ["birthday", ">=", "2017-03-08"], ["birthday", "<", "2017-03-15"]],
-                    last_30_days: ['&', ["birthday", ">=", "2017-01-21"], ["birthday", "<", "2017-02-20"]],
-                    last_365_days: ['&', ["birthday", ">=", "2015-03-23"], ["birthday", "<", "2016-03-22"]],
-                    last_5_years: ['&', ["birthday", ">=", "2007-03-22"], ["birthday", "<", "2012-03-22"]],
-                    today: ['&', ["birthday", ">=", "2017-03-21"], ["birthday", "<", "2017-03-22"]],
-                    this_week: ['&', ["birthday", ">=", "2017-03-13"], ["birthday", "<", "2017-03-20"]],
-                    this_month: ['&', ["birthday", ">=", "2017-02-01"], ["birthday", "<", "2017-03-01"]],
-                    this_quarter: ['&', ["birthday", ">=", "2016-10-01"], ["birthday", "<", "2017-01-01"]],
-                    this_year: ['&', ["birthday", ">=", "2016-01-01"], ["birthday", "<", "2017-01-01"]],
-                    yesterday: ['&', ["birthday", ">=", "2017-03-20"], ["birthday", "<", "2017-03-21"]],
-                    last_week: ['&', ["birthday", ">=", "2017-03-06"], ["birthday", "<", "2017-03-13"]],
-                    last_month: ['&', ["birthday", ">=", "2017-01-01"], ["birthday", "<", "2017-02-01"]],
-                    last_quarter: ['&', ["birthday", ">=", "2016-07-01"], ["birthday", "<", "2016-10-01"]],
-                    last_year: ['&', ["birthday", ">=", "2015-01-01"], ["birthday", "<", "2016-01-01"]],
-                },
-                previous_year: {
-                    last_7_days: ["&", ["birthday", ">=", "2016-03-15"], ["birthday", "<", "2016-03-22"]],
-                    last_30_days: ["&", ["birthday", ">=", "2016-02-21"], ["birthday", "<", "2016-03-22"]],
-                    last_365_days: ["&", ["birthday", ">=", "2015-03-23"], ["birthday", "<", "2016-03-22"]],
-                    last_5_years: ["&", ["birthday", ">=", "2011-03-22"], ["birthday", "<", "2016-03-22"]],
-                    today: ["&", ["birthday", ">=", "2016-03-22"], ["birthday", "<", "2016-03-23"]],
-                    this_week: ["&", ["birthday", ">=", "2016-03-21"], ["birthday", "<", "2016-03-28"]],
-                    this_month: ["&", ["birthday", ">=", "2016-03-01"], ["birthday", "<", "2016-04-01"]],
-                    this_quarter: ["&", ["birthday", ">=", "2016-01-01"], ["birthday", "<", "2016-04-01"]],
-                    this_year: ["&", ["birthday", ">=", "2016-01-01"], ["birthday", "<", "2017-01-01"]],
-                    yesterday: ["&", ["birthday", ">=", "2016-03-21"], ["birthday", "<", "2016-03-22"]],
-                    last_week: ["&", ["birthday", ">=", "2016-03-14"], ["birthday", "<", "2016-03-21"]],
-                    last_month: ["&", ["birthday", ">=", "2016-02-01"], ["birthday", "<", "2016-03-01"]],
-                    last_quarter: ["&", ["birthday", ">=", "2015-10-01"], ["birthday", "<", "2016-01-01"]],
-                    last_year: ["&", ["birthday", ">=", "2015-01-01"], ["birthday", "<", "2016-01-01"]],
-                }
-            };
-
-            const params = {
-                cpStoreConfig: {
-                    viewInfo: { fields: this.fields },
-                    searchMenuTypes,
-                },
-                cpProps: { fields: this.fields, searchMenuTypes },
-                search: function (searchQuery) {
-                    const { timeRanges } = searchQuery;
-                    const { range, comparisonRange, rangeId, comparisonRangeId } = timeRanges;
-                    if (!comparisonRangeId) {
-                        assert.deepEqual(range, ranges[rangeId]);
-                    } else {
-                        assert.deepEqual(comparisonRange, comparisonRanges[comparisonRangeId][rangeId]);
-                    }
-                }
-            };
-            const controlPanel = await createControlPanel(params);
-
-            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
-
-            await cpHelpers.toggleTimeRangeMenu(controlPanel);
-
-            for (const o of Object.values(TIME_RANGE_OPTIONS)) {
-                await cpHelpers.selectRange(controlPanel, o.id);
-                await cpHelpers.applyTimeRange(controlPanel);
-                assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), [`Birthday: ${o.description}`]);
-
-                await cpHelpers.toggleTimeRangeMenuBox(controlPanel);
-                for (const co of Object.values(COMPARISON_TIME_RANGE_OPTIONS)) {
-                    await cpHelpers.selectComparisonRange(controlPanel, co.id);
-                    await cpHelpers.applyTimeRange(controlPanel);
-                    assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), [`Birthday: ${o.description} / ${co.description}`]);
-                }
-                await cpHelpers.toggleTimeRangeMenuBox(controlPanel);
-            }
-
-            controlPanel.destroy();
-            unpatchDate();
-        });
-    });
-});
diff --git a/addons/web/static/tests/views/graph_tests.js b/addons/web/static/tests/views/graph_tests.js
index 294f0d4935b..7c45c51a175 100644
--- a/addons/web/static/tests/views/graph_tests.js
+++ b/addons/web/static/tests/views/graph_tests.js
@@ -4,23 +4,51 @@ odoo.define('web.graph_view_tests', function (require) {
 var searchUtils = require('web.searchUtils');
 var GraphView = require('web.GraphView');
 var testUtils = require('web.test_utils');
+const { sortBy } = require('web.utils');
 
 const cpHelpers = testUtils.controlPanel;
-var createActionManager = testUtils.createActionManager;
 var createView = testUtils.createView;
 var patchDate = testUtils.mock.patchDate;
 
-const { INTERVAL_OPTIONS, TIME_RANGE_OPTIONS, COMPARISON_TIME_RANGE_OPTIONS } = searchUtils;
+const { INTERVAL_OPTIONS, PERIOD_OPTIONS, COMPARISON_OPTIONS } = searchUtils;
 
 var INTERVAL_OPTION_IDS = Object.keys(INTERVAL_OPTIONS);
-var TIME_RANGE_OPTION_IDS = Object.keys(TIME_RANGE_OPTIONS);
-var COMPARISON_TIME_RANGE_OPTION_IDS = Object.keys(COMPARISON_TIME_RANGE_OPTIONS);
+
+const yearIds = [];
+const otherIds = [];
+for (const id of Object.keys(PERIOD_OPTIONS)) {
+    const option = PERIOD_OPTIONS[id];
+    if (option.granularity === 'year') {
+        yearIds.push(id);
+    } else {
+        otherIds.push(id);
+    }
+}
+const BASIC_DOMAIN_IDS = [];
+for (const yearId of yearIds) {
+    BASIC_DOMAIN_IDS.push(yearId);
+    for (const id of otherIds) {
+        BASIC_DOMAIN_IDS.push(`${yearId}__${id}`);
+    }
+}
+const GENERATOR_INDEXES = {};
+let index = 0;
+for (const id of Object.keys(PERIOD_OPTIONS)) {
+    GENERATOR_INDEXES[id] = index++;
+}
+
+const COMPARISON_OPTION_IDS = Object.keys(COMPARISON_OPTIONS);
+const COMPARISON_OPTION_INDEXES = {};
+index = 0;
+for (const comparisonOptionId of COMPARISON_OPTION_IDS) {
+    COMPARISON_OPTION_INDEXES[comparisonOptionId] = index++;
+}
 
 var f = (a, b) => [].concat(...a.map(d => b.map(e => [].concat(d, e))));
 var cartesian = (a, b, ...c) => (b ? cartesian(f(a, b), ...c) : a);
 
-var COMBINATIONS = cartesian(TIME_RANGE_OPTION_IDS, COMPARISON_TIME_RANGE_OPTION_IDS);
-var COMBINATIONS_WITH_DATE = cartesian(TIME_RANGE_OPTION_IDS, COMPARISON_TIME_RANGE_OPTION_IDS, INTERVAL_OPTION_IDS);
+var COMBINATIONS = cartesian(COMPARISON_OPTION_IDS, BASIC_DOMAIN_IDS);
+var COMBINATIONS_WITH_DATE = cartesian(COMPARISON_OPTION_IDS, BASIC_DOMAIN_IDS, INTERVAL_OPTION_IDS);
 
 QUnit.assert.checkDatasets = function (graph, keys, expectedDatasets) {
     keys = keys instanceof Array ? keys : [keys];
@@ -354,26 +382,33 @@ QUnit.module('Views', {
     QUnit.test('render pie chart in comparison mode', async function (assert) {
         assert.expect(2);
 
+        const unpatchDate = patchDate(2020, 4, 19, 1, 0, 0);
+
         var graph = await createView({
             View: GraphView,
             model: "foo",
             data: this.data,
-            context: {
-                time_ranges: {
-                    field: 'date',
-                    range: 'this_quarter',
-                    comparisonRange: 'previous_period',
-                }
-            },
+            context: { search_default_date_filter: 1, },
             arch: '<graph type="pie">' +
                         '<field name="product_id"/>' +
                 '</graph>',
+            archs: {
+                'foo,false,search': `
+                    <search>
+                        <filter name="date_filter" domain="[]" date="date" default_period="third_quarter"/>
+                    </search>
+                `,
+            },
         });
 
+        await cpHelpers.toggleComparisonMenu(graph);
+        await cpHelpers.toggleMenuItem(graph, 'Date: Previous period');
+
         assert.containsNone(graph, 'div.o_view_nocontent',
         "should not display the no content helper");
         assert.checkLegend(graph, 'No data');
 
+        unpatchDate();
         graph.destroy();
     });
 
@@ -1299,8 +1334,37 @@ QUnit.module('Views', {
             this.data.foo.records.push({id: 19, foo: 31, bar: false, product_id: 41, color_id: 14, date: "2016-12-15"});
             this.data.foo.records.push({id: 20, foo: 109, bar: true, product_id: 41, color_id: 7, date: "2015-06-01"});
 
+            this.data.foo.records = sortBy(this.data.foo.records, 'date');
+
             this.unpatchDate = patchDate(2016, 11, 20, 1, 0, 0);
 
+            const graph = await createView({
+                View: GraphView,
+                model: "foo",
+                data: this.data,
+                arch: `
+                    <graph string="Partners" type="bar">
+                        <field name="foo" type="measure"/>
+                    </graph>
+                `,
+                archs: {
+                    'foo,false,search': `
+                        <search>
+                            <filter name="date" string="Date" context="{'group_by': 'date'}"/>
+                            <filter name="date_filter" string="Date Filter" date="date"/>
+                            <filter name="bar" string="Bar" context="{'group_by': 'bar'}"/>
+                            <filter name="product_id" string="Product" context="{'group_by': 'product_id'}"/>
+                            <filter name="color_id" string="Color" context="{'group_by': 'color_id'}"/>
+                        </search>
+                    `,
+                },
+                viewOptions: {
+                    additionalMeasures: ['product_id'],
+                },
+            });
+
+            this.graph = graph;
+
             var checkOnlyToCheck = true;
             var exhaustiveTest = false || checkOnlyToCheck;
 
@@ -1326,7 +1390,6 @@ QUnit.module('Views', {
                 for await (var combination of graphGenerator(combinations)) {
                     // we can check particular combinations here
                     if (combination.toString() in self.combinationsToCheck) {
-                        var graph = self.actionManager.getCurrentController().widget;
                         if (self.combinationsToCheck[combination].errorMessage) {
                             assert.strictEqual(
                                 graph.$('.o_nocontent_help p').eq(1).text().trim(),
@@ -1343,17 +1406,22 @@ QUnit.module('Views', {
 
             const GROUPBY_NAMES = ['Date', 'Bar', 'Product', 'Color'];
 
-            // time range menu is assumed to be closed
-            this.selectTimeRanges = async function (timeRangeOption, comparisonTimeRangeOption) {
-                comparisonTimeRangeOption = comparisonTimeRangeOption || 'previous_period';
-                await cpHelpers.toggleTimeRangeMenu(document);
-                await cpHelpers.selectRange(document, timeRangeOption);
-                if (!document.querySelector('div.o_time_range_section input').checked) {
-                    await cpHelpers.toggleTimeRangeMenuBox(document);
+            this.selectTimeRanges = async function (comparisonOptionId, basicDomainId) {
+                const facetEls = graph.el.querySelectorAll('.o_searchview_facet');
+                const facetIndex = [...facetEls].findIndex(el => !!el.querySelector('span.fa-filter'));
+                if (facetIndex > -1) {
+                    await cpHelpers.removeFacet(graph, facetIndex);
+                }
+                const [yearId, otherId] = basicDomainId.split('__');
+                await cpHelpers.toggleFilterMenu(graph);
+                await cpHelpers.toggleMenuItem(graph, 'Date Filter');
+                await cpHelpers.toggleMenuItemOption(graph, 'Date Filter', GENERATOR_INDEXES[yearId]);
+                if (otherId) {
+                    await cpHelpers.toggleMenuItemOption(graph, 'Date Filter', GENERATOR_INDEXES[otherId]);
                 }
-                await cpHelpers.selectComparisonRange(document, comparisonTimeRangeOption);
-                await cpHelpers.applyTimeRange(document);
-                await cpHelpers.toggleTimeRangeMenu(document);
+                const itemIndex = COMPARISON_OPTION_INDEXES[comparisonOptionId];
+                await cpHelpers.toggleComparisonMenu(graph);
+                await cpHelpers.toggleMenuItem(graph, itemIndex);
             };
 
             // groupby menu is assumed to be closed
@@ -1361,42 +1429,42 @@ QUnit.module('Views', {
                 intervalOption = intervalOption || 'month';
                 const optionIndex = INTERVAL_OPTION_IDS.indexOf(intervalOption);
 
-                await cpHelpers.toggleGroupByMenu(document);
+                await cpHelpers.toggleGroupByMenu(graph);
                 let wasSelected = false;
                 if (this.keepFirst) {
-                    if (cpHelpers.isItemSelected(document, 2)) {
+                    if (cpHelpers.isItemSelected(graph, 2)) {
                         wasSelected = true;
-                        await cpHelpers.toggleMenuItem(document, 2);
+                        await cpHelpers.toggleMenuItem(graph, 2);
                     }
                 }
-                await cpHelpers.toggleMenuItem(document, 0);
-                if (!cpHelpers.isOptionSelected(document, 0, optionIndex)) {
-                    await cpHelpers.toggleMenuItemOption(document, 0, optionIndex);
+                await cpHelpers.toggleMenuItem(graph, 0);
+                if (!cpHelpers.isOptionSelected(graph, 0, optionIndex)) {
+                    await cpHelpers.toggleMenuItemOption(graph, 0, optionIndex);
                 }
                 for (let i = 0; i < INTERVAL_OPTION_IDS.length; i++) {
                     const oId = INTERVAL_OPTION_IDS[i];
-                    if (oId !== intervalOption && cpHelpers.isOptionSelected(document, 0, i)) {
-                        await cpHelpers.toggleMenuItemOption(document, 0, i);
+                    if (oId !== intervalOption && cpHelpers.isOptionSelected(graph, 0, i)) {
+                        await cpHelpers.toggleMenuItemOption(graph, 0, i);
                     }
                 }
 
                 if (this.keepFirst) {
-                    if (wasSelected && !cpHelpers.isItemSelected(document, 2)) {
-                        await cpHelpers.toggleMenuItem(document, 2);
+                    if (wasSelected && !cpHelpers.isItemSelected(graph, 2)) {
+                        await cpHelpers.toggleMenuItem(graph, 2);
                     }
                 }
-                await cpHelpers.toggleGroupByMenu(document);
+                await cpHelpers.toggleGroupByMenu(graph);
 
             };
 
             // groupby menu is assumed to be closed
             this.selectGroupBy = async function (groupByName) {
-                await cpHelpers.toggleGroupByMenu(document);
+                await cpHelpers.toggleGroupByMenu(graph);
                 const index = GROUPBY_NAMES.indexOf(groupByName);
-                if (!cpHelpers.isItemSelected(document, index)) {
-                    await cpHelpers.toggleMenuItem(document, index);
+                if (!cpHelpers.isItemSelected(graph, index)) {
+                    await cpHelpers.toggleMenuItem(graph, index);
                 }
-                await cpHelpers.toggleGroupByMenu(document);
+                await cpHelpers.toggleGroupByMenu(graph);
             };
 
             this.setConfig = async function (combination) {
@@ -1410,53 +1478,27 @@ QUnit.module('Views', {
                 await testUtils.dom.click($(`.o_control_panel .o_graph_button[data-mode="${mode}"]`));
             };
 
-            // // create an action manager to test the interactions with the search view
-            this.actionManager = await createActionManager({
-                data: this.data,
-                archs: {
-                    'foo,false,graph': '<graph string="Partners" type="bar">' +
-                        '<field name="foo" type="measure"/>' +
-                    '</graph>',
-                    'foo,false,search': '<search>' +
-                        '<filter name="date" string="Date" context="{\'group_by\': \'date\'}"/>' +
-                        '<filter name="bar" string="Bar" context="{\'group_by\': \'bar\'}"/>' +
-                        '<filter name="product_id" string="Product" context="{\'group_by\': \'product_id\'}"/>' +
-                        '<filter name="color_id" string="Color" context="{\'group_by\': \'color_id\'}"/>' +
-                    '</search>',
-                },
-            });
-
-            await this.actionManager.doAction({
-                res_model: 'foo',
-                type: 'ir.actions.act_window',
-                views: [[false, 'graph']],
-                flags: {
-                    graph: {
-                        additionalMeasures: ['product_id'],
-                    }
-                },
-            });
         },
         afterEach: function () {
             this.unpatchDate();
-            this.actionManager.destroy();
+            this.graph.destroy();
         },
     }, function () {
         QUnit.test('comparison with one groupby equal to comparison date field', async function (assert) {
             assert.expect(11);
 
             this.combinationsToCheck = {
-                'last_30_days,previous_period,day': {
-                    labels: [...Array(7).keys()].map(x => [x]),
-                    legend: ["Last 30 Days", "Previous Period"],
+                'previous_period,this_year__this_month,day': {
+                    labels: [...Array(6).keys()].map(x => [x]),
+                    legend: ["December 2016", "November 2016"],
                     datasets: [
                         {
-                            data: [26, 53, 2, 63, 110, 48, 48],
-                            label: "Last 30 Days",
+                            data: [110, 48, 26, 53, 63, 4],
+                            label: "December 2016",
                         },
                         {
-                            data: [24, 53],
-                            label: "Previous Period",
+                            data: [53, 24, 2, 48],
+                            label: "November 2016",
                         }
                     ],
                 }
@@ -1466,25 +1508,24 @@ QUnit.module('Views', {
             await this.testCombinations(combinations, assert);
             await this.setMode('line');
             await this.testCombinations(combinations, assert);
-            this.combinationsToCheck['last_30_days,previous_period,day'] = {
-                labels: [...Array(7).keys()].map(x => [x]),
+            this.combinationsToCheck['previous_period,this_year__this_month,day'] = {
+                labels: [...Array(6).keys()].map(x => [x]),
                 legend: [
-                    "2016-12-15,2016-11-03",
-                    "2016-12-17,2016-11-01",
-                    "2016-11-22",
+                    "2016-12-01,2016-11-01",
+                    "2016-12-10,2016-11-03",
+                    "2016-12-15,2016-11-22",
+                    "2016-12-17,2016-11-30",
                     "2016-12-19",
-                    "2016-12-01",
-                    "2016-12-10",
-                    "2016-11-30",
+                    "2016-12-20"
                 ],
                 datasets: [
                     {
-                        data: [26, 53, 2, 63, 110, 48, 48],
-                        label: "Last 30 Days",
+                        data: [ 110, 48, 26, 53, 63, 4],
+                        label: "December 2016",
                     },
                     {
-                        data: [24, 53, 0, 0, 0, 0, 0],
-                        label: "Previous Period",
+                        data: [ 53, 24, 2, 48, 0, 0],
+                        label: "November 2016",
                     }
                 ],
             };
@@ -1492,8 +1533,8 @@ QUnit.module('Views', {
             await this.testCombinations(combinations, assert);
 
             // isNotVisible can not have two elements so checking visibility of first element
-            assert.isNotVisible(this.actionManager.$('button[data-order]:first'),
-                "there should not be order button in comparison mode")
+            assert.isNotVisible(this.graph.$('button[data-order]:first'),
+                "there should not be order button in comparison mode");
             assert.ok(true, "No combination causes a crash");
         });
 
@@ -1501,17 +1542,17 @@ QUnit.module('Views', {
             assert.expect(10);
 
             this.combinationsToCheck = {
-                'last_30_days,previous_period': {
+                'previous_period,this_year__this_month': {
                     labels: [[]],
-                    legend: ["Last 30 Days", "Previous Period"],
+                    legend: ["December 2016", "November 2016"],
                     datasets: [
                         {
-                            data: [350],
-                            label: "Last 30 Days",
+                            data: [304],
+                            label: "December 2016",
                         },
                         {
-                            data: [77],
-                            label: "Previous Period",
+                            data: [127],
+                            label: "November 2016",
                         }
                     ],
                 }
@@ -1520,34 +1561,34 @@ QUnit.module('Views', {
             var combinations = COMBINATIONS;
             await this.testCombinations(combinations, assert);
 
-            this.combinationsToCheck['last_30_days,previous_period'] = {
+            this.combinationsToCheck['previous_period,this_year__this_month'] = {
                 labels: [[''], [], ['']],
-                legend: ["Last 30 Days", "Previous Period"],
+                legend: ["December 2016", "November 2016"],
                 datasets: [
                     {
-                        data: [undefined, 350],
-                        label: "Last 30 Days",
+                        data: [undefined, 304],
+                        label: "December 2016",
                     },
                     {
-                        data: [undefined, 77],
-                        label: "Previous Period",
+                        data: [undefined, 127],
+                        label: "November 2016",
                     }
                 ],
             };
             await this.setMode('line');
             await this.testCombinations(combinations, assert);
 
-            this.combinationsToCheck['last_30_days,previous_period'] =  {
+            this.combinationsToCheck['previous_period,this_year__this_month'] =  {
                 labels: [[]],
                 legend: ["Total"],
                 datasets: [
                     {
-                        data: [350],
-                        label: "Last 30 Days",
+                        data: [304],
+                        label: "December 2016",
                     },
                     {
-                        data: [77],
-                        label: "Previous Period",
+                        data: [127],
+                        label: "November 2016",
                     }
                 ],
             };
@@ -1561,17 +1602,17 @@ QUnit.module('Views', {
             assert.expect(10);
 
             this.combinationsToCheck = {
-                'last_30_days,previous_period': {
-                    labels: [["xphone"],["xpad"],["Undefined"]],
-                    legend: ["Last 30 Days", "Previous Period"],
+                'previous_period,this_year__this_month': {
+                    labels: [["xpad"], ["xphone"],["Undefined"]],
+                    legend: ["December 2016", "November 2016"],
                     datasets: [
                         {
-                            data: [151, 151, 48],
-                            label: "Last 30 Days",
+                            data: [ 155, 149, 0],
+                            label: "December 2016",
                         },
                         {
-                            data: [24, 53, 0],
-                            label: "Previous Period",
+                            data: [ 53, 26, 48],
+                            label: "November 2016",
                         }
                     ],
                 }
@@ -1581,34 +1622,34 @@ QUnit.module('Views', {
             await this.selectGroupBy('Product');
             await this.testCombinations(combinations, assert);
 
-            this.combinationsToCheck['last_30_days,previous_period'] = {
-                labels: [["xphone"],["xpad"]],
-                legend: ["Last 30 Days", "Previous Period"],
+            this.combinationsToCheck['previous_period,this_year__this_month'] = {
+                labels: [["xpad"], ["xphone"]],
+                legend: ["December 2016", "November 2016"],
                 datasets: [
                     {
-                        data: [151, 151],
-                        label: "Last 30 Days",
+                        data: [155, 149],
+                        label: "December 2016",
                     },
                     {
-                        data: [24, 53],
-                        label: "Previous Period",
+                        data: [53, 26],
+                        label: "November 2016",
                     }
                 ],
             };
             await this.setMode('line');
             await this.testCombinations(combinations, assert);
 
-            this.combinationsToCheck['last_30_days,previous_period'] = {
-                labels: [["xphone"],["xpad"],["Undefined"]],
-                legend: ["xphone", "xpad", "Undefined"],
+            this.combinationsToCheck['previous_period,this_year__this_month'] = {
+                labels: [["xpad"], ["xphone"], ["Undefined"]],
+                legend: ["xpad", "xphone", "Undefined"],
                 datasets: [
                     {
-                        data: [151, 151, 48],
-                        label: "Last 30 Days",
+                        data: [ 155, 149, 0],
+                        label: "December 2016",
                     },
                     {
-                        data: [24, 53, 0],
-                        label: "Previous Period",
+                        data: [ 53, 26, 48],
+                        label: "November 2016",
                     }
                 ],
             };
@@ -1623,27 +1664,37 @@ QUnit.module('Views', {
 
             this.keepFirst = true;
             this.combinationsToCheck = {
-                'last_7_days,previous_period,day': {
-                    labels: [...Array(3).keys()].map(x => [x]),
+                'previous_period,this_year__this_month,day': {
+                    labels: [...Array(6).keys()].map(x => [x]),
                     legend: [
-                        "Last 7 Days/xphone",
-                        "Last 7 Days/xpad",
-                        "Previous Period/xphone"
+                        "December 2016/xpad",
+                        "December 2016/xphone",
+                        "November 2016/xpad",
+                        "November 2016/xphone",
+                        "November 2016/Undefined"
                     ],
                     datasets: [
                         {
-                            data: [3, 53, 0],
-                            label: "Last 7 Days/xphone",
+                          data: [ 65, 0, 23, 0, 63, 4],
+                          label: "December 2016/xpad"
+                        },
+                        {
+                          data: [ 45, 48, 3, 53, 0, 0],
+                          label: "December 2016/xphone"
                         },
                         {
-                            data: [23, 0, 63],
-                            label: "Last 7 Days/xpad",
+                          data: [ 53, 0, 0, 0],
+                          label: "November 2016/xpad"
                         },
                         {
-                            data: [48],
-                            label: "Previous Period/xphone",
+                          data: [ 0, 24, 2, 0],
+                          label: "November 2016/xphone"
+                        },
+                        {
+                          data: [ 0, 0, 0, 48],
+                          label: "November 2016/Undefined"
                         }
-                    ],
+                      ]
                 }
             };
 
@@ -1654,24 +1705,29 @@ QUnit.module('Views', {
             await this.testCombinations(combinations, assert);
 
 
-            this.combinationsToCheck['last_7_days,previous_period,day'] = {
-                labels: [[0,"xphone"], [1,"xphone"], [2, "xpad"], [0, "xpad"]],
+            this.combinationsToCheck['previous_period,this_year__this_month,day'] = {
+                labels: [[0, "xpad"], [0, "xphone"], [1, "xphone"], [2, "xphone"], [2, "xpad"], [3, "xphone"], [4, "xpad"], [5, "xpad"], [3, "Undefined"]],
                 legend: [
-                    "2016-12-15,2016-12-10/xphone",
-                    "2016-12-17/xphone",
+                    "2016-12-01,2016-11-01/xpad",
+                    "2016-12-01,2016-11-01/xphone",
+                    "2016-12-10,2016-11-03/xphone",
+                    "2016-12-15,2016-11-22/xphone",
+                    "2016-12-15,2016-11-22/xpad",
+                    "2016-12-17,2016-11-30/xphone",
                     "2016-12-19/xpad",
-                    "2016-12-15,2016-12-10/xpad"
+                    "2016-12-20/xpad",
+                    "2016-12-17,2016-11-30/Undefine..."
                 ],
                 datasets: [
                     {
-                        data: [3, 53, 63, 23],
-                        label: "Last 7 Days",
+                      "data": [ 65, 45, 48, 3, 23, 53, 63, 4, 0],
+                      "label": "December 2016"
                     },
                     {
-                        data: [48, 0, 0, 0],
-                        label: "Previous Period",
+                      "data": [ 53, 0, 24, 2, 0, 0, 0, 0, 48],
+                      "label": "November 2016"
                     }
-                ],
+                  ],
             };
 
             await this.setMode('pie');
@@ -1686,60 +1742,60 @@ QUnit.module('Views', {
             assert.expect(8);
 
             this.combinationsToCheck = {
-                'this_year,previous_period,quarter': {
+                'previous_period,this_year,quarter': {
                     labels: [["xphone"], ["xpad"],["Undefined"]],
                     legend: [
-                        "This Year/Q4 2016",
-                        "This Year/Q3 2016",
-                        "Previous Period/Q2 2015"
+                        "2016/Q3 2016",
+                        "2016/Q4 2016",
+                        "2015/Q2 2015"
                     ],
                     datasets: [
                         {
-                            data: [175, 208, 48],
-                            label: "This Year/Q4 2016",
+                            data: [-156, 48, 53],
+                            label: "2016/Q3 2016",
                         },
                         {
-                            data: [-156, 48, 53],
-                            label: "This Year/Q3 2016",
+                            data: [175, 208, 48],
+                            label: "2016/Q4 2016",
                         },
                         {
                             data: [0, 109, 0],
-                            label: "Previous Period/Q2 2015",
+                            label: "2015/Q2 2015",
                         },
                     ]
                 }
             };
 
-            var combinations = COMBINATIONS_WITH_DATE;
+            const combinations = COMBINATIONS_WITH_DATE;
             await this.selectGroupBy('Product');
             await this.testCombinations(combinations, assert);
 
-            this.combinationsToCheck['this_year,previous_period,quarter'] = {
+            this.combinationsToCheck['previous_period,this_year,quarter'] = {
                 labels: [["xphone"], ["xpad"]],
                 legend: [
-                    "This Year/Q4 2016",
-                    "This Year/Q3 2016",
-                    "Previous Period/Q2 2015"
+                    "2016/Q3 2016",
+                    "2016/Q4 2016",
+                    "2015/Q2 2015"
                 ],
                 datasets: [
                     {
-                        data: [175, 208],
-                        label: "This Year/Q4 2016",
+                        data: [-156, 48],
+                        label: "2016/Q3 2016",
                     },
                     {
-                        data: [-156, 48],
-                        label: "This Year/Q3 2016",
+                        data: [175, 208],
+                        label: "2016/Q4 2016",
                     },
                     {
                         data: [0, 109],
-                        label: "Previous Period/Q2 2015",
+                        label: "2015/Q2 2015",
                     },
                 ]
             };
             await this.setMode('line');
             await this.testCombinations(combinations, assert);
 
-            this.combinationsToCheck['this_year,previous_period,quarter'] = {
+            this.combinationsToCheck['previous_period,this_year,quarter'] = {
                 errorMessage: 'Pie chart cannot mix positive and negative numbers. ' +
                                 'Try to change your domain to only display positive results'
             };
@@ -1752,17 +1808,17 @@ QUnit.module('Views', {
             assert.expect(10);
 
             this.combinationsToCheck = {
-                'last_month,previous_year': {
-                    labels: [["xphone"],["Undefined"], ["xpad"]],
-                    legend: ["Last Month/true", "Last Month/false"],
+                'previous_year,this_year__last_month': {
+                    labels: [["xpad"], ["xphone"],["Undefined"] ],
+                    legend: ["November 2016/false", "November 2016/true"],
                     datasets: [
                         {
-                            data: [2, 0, 0],
-                            label: "Last Month/true",
+                            data: [53, 24, 48],
+                            label: "November 2016/false",
                         },
                         {
-                            data: [24, 48, 53],
-                            label: "Last Month/false",
+                            data: [0, 2, 0],
+                            label: "November 2016/true",
                         }
                     ],
                 }
@@ -1773,48 +1829,43 @@ QUnit.module('Views', {
             await this.selectGroupBy('Bar');
             await this.testCombinations(combinations, assert);
 
-            this.combinationsToCheck['last_month,previous_year'] = {
-                labels: [["xphone"], ["xpad"]],
-                legend: ["Last Month/true", "Last Month/false"],
+            this.combinationsToCheck['previous_year,this_year__last_month'] = {
+                labels: [["xpad"], ["xphone"] ],
+                legend: ["November 2016/false", "November 2016/true"],
                 datasets: [
                     {
-                        data: [2, 0],
-                        label: "Last Month/true",
+                        data: [53, 24],
+                        label: "November 2016/false",
                     },
                     {
-                        data: [24, 53],
-                        label: "Last Month/false",
+                        data: [0, 2],
+                        label: "November 2016/true",
                     }
                 ],
             };
             await this.setMode('line');
             await this.testCombinations(combinations, assert);
 
-            this.combinationsToCheck['last_month,previous_year'] = {
-                labels: [
-                    ["xphone", true],
-                    ["xphone", false],
-                    ["Undefined", false],
-                    ["xpad", false],
-                    ["No data"]
-                ],
+            this.combinationsToCheck['previous_year,this_year__last_month'] = {
+                labels:
+                [["xpad", false], ["xphone", false], ["xphone", true], ["Undefined", false], ["No data"]],
                 legend: [
-                    "xphone/true",
+                    "xpad/false",
                     "xphone/false",
+                    "xphone/true",
                     "Undefined/false",
-                    "xpad/false",
                     "No data"
                 ],
                 datasets: [
                     {
-                        data: [2, 24, 48, 53],
-                        label: "Last Month",
+                      "data": [ 53, 24, 2, 48],
+                      "label": "November 2016"
                     },
                     {
-                        data: [undefined, undefined, undefined, undefined, 1],
-                        label: "Previous Year",
+                      "data": [ undefined, undefined, undefined, undefined, 1],
+                      "label": "November 2015"
                     }
-                ],
+                  ],
             };
             await this.setMode('pie');
             await this.testCombinations(combinations, assert);
@@ -1823,4 +1874,4 @@ QUnit.module('Views', {
         });
     });
 });
-});
\ No newline at end of file
+});
diff --git a/addons/web/static/tests/views/pivot_tests.js b/addons/web/static/tests/views/pivot_tests.js
index 6d196c1dbf8..17712fb36c4 100644
--- a/addons/web/static/tests/views/pivot_tests.js
+++ b/addons/web/static/tests/views/pivot_tests.js
@@ -387,28 +387,29 @@ QUnit.module('Views', {
         assert.expect(2);
 
         var unpatchDate = patchDate(2016, 11, 20, 1, 0, 0);
-        var context = {
-            time_ranges: {
-                field: 'date',
-                range: 'this_month'
-            }
-        };
         var pivot = await createView({
             View: PivotView,
             model: "partner",
             data: this.data,
             arch: '<pivot/>',
+            archs: {
+                'partner,false,search': `
+                    <search>
+                        <filter name="date_filter" date="date" domain="[]" default_period='this_month'/>
+                    </search>
+                `,
+            },
             intercepts: {
                 do_action: function (ev) {
                     assert.deepEqual(
                         ev.data.action.domain,
-                        ["&",["date",">=","2016-12-01"],["date","<","2017-01-01"]],
+                        ["&",["date",">=","2016-12-01"],["date","<=","2016-12-31"]],
                         "should trigger do_action with the correct action domain"
                     );
                 },
             },
             viewOptions: {
-                context: context,
+                context: { search_default_date_filter: true, },
                 title: 'Partners',
             },
         });
@@ -431,14 +432,6 @@ QUnit.module('Views', {
         this.data.partner.records[2].date = '2016-11-22';
         this.data.partner.records[3].date = '2016-11-03';
 
-        var context = {
-            time_ranges: {
-                field: 'date',
-                range: 'this_month',
-                comparisonRange: 'previous_period',
-            }
-        };
-
         var first_do_action = true;
         var pivot = await createView({
             View: PivotView,
@@ -452,7 +445,7 @@ QUnit.module('Views', {
                     if (first_do_action) {
                         assert.deepEqual(
                             ev.data.action.domain,
-                            ["&",["date",">=","2016-12-01"],["date","<","2017-01-01"]],
+                            ["&",["date",">=","2016-12-01"],["date","<=","2016-12-31"]],
                             "should trigger do_action with the correct action domain"
                         );
                     } else {
@@ -465,11 +458,22 @@ QUnit.module('Views', {
                     first_do_action = false;
                 },
             },
+            archs: {
+                'partner,false,search': `
+                    <search>
+                        <filter name="date_filter" date="date" domain="[]" default_period='this_month'/>
+                    </search>
+                `,
+            },
             viewOptions: {
-                context: context,
+                context: { search_default_date_filter: true, },
                 title: 'Partners',
             },
         });
+
+        await cpHelpers.toggleComparisonMenu(pivot);
+        await cpHelpers.toggleMenuItem(pivot, 'Date: Previous period');
+
         assert.hasClass(pivot.$('table'), 'o_enable_linking',
             "root node should have classname 'o_enable_linking'");
         // here we click on the group corresponding to Total/Total/This Month
@@ -1961,8 +1965,16 @@ QUnit.module('Views', {
                     '<field name="date" interval="month" type="col"/>' +
                     '<field name="foo" type="measure"/>' +
               '</pivot>',
+            archs: {
+                'partner,false,search': `
+                    <search>
+                        <filter name="date_filter" date="date" domain="[]" default_period='last_year'/>
+                    </search>
+                `,
+            },
             viewOptions: {
                 additionalMeasures: ['product_id'],
+                context: { search_default_date_filter: 1 },
             },
             mockRPC: function () {
                 return this._super.apply(this, arguments);
@@ -1975,31 +1987,35 @@ QUnit.module('Views', {
                             pivot_column_groupby: [],
                             pivot_row_groupby: ['product_id'],
                             group_by: [],
-                            time_ranges: {
-                                field: 'date',
-                                range: 'this_month',
-                                comparisonRange: 'previous_period',
-                            }
-                        })
+                            comparison: {
+                                comparisonId: "previous_period",
+                                comparisonRange: "[\"&\", [\"date\", \">=\", \"2016-11-01\"], [\"date\", \"<=\", \"2016-11-30\"]]",
+                                comparisonRangeDescription: "November 2016",
+                                fieldDescription: "Date",
+                                fieldName: "date",
+                                range: "[\"&\", [\"date\", \">=\", \"2016-12-01\"], [\"date\", \"<=\", \"2016-12-31\"]]",
+                                rangeDescription: "December 2016"
+                              },
+                        });
                     }
                 }
             },
         });
 
-
         // with no data
-        await cpHelpers.toggleTimeRangeMenu(pivot);
-        await cpHelpers.toggleTimeRangeMenuBox(pivot);
-        await cpHelpers.selectRange(pivot, 'today');
-        await cpHelpers.applyTimeRange(pivot);
+        await cpHelpers.toggleComparisonMenu(pivot);
+        await cpHelpers.toggleMenuItem(pivot, 'Date: Previous period');
 
         assert.strictEqual(pivot.$('.o_pivot p.o_view_nocontent_empty_folder').length, 1);
 
-        // with data, no row groupby
-        await cpHelpers.selectRange(pivot, 'this_month');
-        await cpHelpers.applyTimeRange(pivot);
+        await cpHelpers.toggleFilterMenu(pivot);
+        await cpHelpers.toggleMenuItem(pivot, 'Date');
+        await cpHelpers.toggleMenuItemOption(pivot, 'Date', 'December');
+        await cpHelpers.toggleMenuItemOption(pivot, 'Date', '2016');
+        await cpHelpers.toggleMenuItemOption(pivot, 'Date', '2015');
+
         assert.containsN(pivot, '.o_pivot thead tr:last th', 9,
-            "last header row should contains 9 cells (3*[This month, Previous Period, Variation]");
+            "last header row should contains 9 cells (3*[December 2016, November 2016, Variation]");
         var values = [
             "13", "0", "100%", "0", "19", "-100%", "13", "19", "-31.58%"
         ];
@@ -2069,6 +2085,16 @@ QUnit.module('Views', {
                     '<field name="date" interval="month" type="col"/>' +
                     '<field name="foo" type="measure"/>' +
               '</pivot>',
+            archs: {
+                'partner,false,search': `
+                    <search>
+                        <filter name="date_filter" date="date" domain="[]" default_period='antepenultimate_month'/>
+                    </search>
+                `,
+            },
+            viewOptions: {
+                context: { search_default_date_filter: 1 },
+            },
             session: {
                 get_file: function (args) {
                     var data = JSON.parse(args.data.data);
@@ -2099,29 +2125,22 @@ QUnit.module('Views', {
             },
         });
 
+        // open comparison menu
+        await cpHelpers.toggleComparisonMenu(pivot);
+        // compare October 2016 to September 2016
+        await cpHelpers.toggleMenuItem(pivot, 'Date: Previous period');
 
-        // open time range menu
-        await cpHelpers.toggleTimeRangeMenu(pivot);
-        // select 'Today' as range
-        await cpHelpers.selectRange(pivot, 'today');
-        // check checkbox 'Compare To'
-        await cpHelpers.toggleTimeRangeMenuBox(pivot);
-        // Click on 'Apply' button
-        await cpHelpers.applyTimeRange(pivot);
-
-        // the time range menu configuration is by now: Date, Today, checkbox checked, Previous Period
         // With the data above, the time ranges contain no record.
         assert.strictEqual(pivot.$('.o_pivot p.o_view_nocontent_empty_folder').length, 1, "there should be no data");
         // export data should be impossible since the pivot buttons
         // are deactivated (exception: the 'Measures' button).
         assert.ok(pivot.$('.o_control_panel button.o_pivot_download').prop('disabled'));
 
-        // select 'This Month' as date range
-        await cpHelpers.selectRange(pivot, 'this_month');
+        await cpHelpers.toggleFilterMenu(pivot);
+        await cpHelpers.toggleMenuItem(pivot, 'Date');
+        await cpHelpers.toggleMenuItemOption(pivot, 'Date', 'December');
+        await cpHelpers.toggleMenuItemOption(pivot, 'Date', 'October');
 
-        // Click on 'Apply' button
-        await cpHelpers.applyTimeRange(pivot);
-        // the time range menu configuration is by now: Date, This Month, checkbox checked, Previous Period
         // With the data above, the time ranges contain some records.
         // export data. Should execute 'get_file'
         await testUtils.dom.click(pivot.$('.o_control_panel button.o_pivot_download'));
@@ -2133,8 +2152,8 @@ QUnit.module('Views', {
             // measure headers
             '["Foo","Foo","Foo"]',
             // origin headers
-            '["This Month","Previous Period","Variation","This Month","Previous Period"' +
-                ',"Variation","This Month","Previous Period","Variation"]',
+            '["December 2016","November 2016","Variation","December 2016","November 2016"' +
+                ',"Variation","December 2016","November 2016","Variation"]',
             // number of 'measures'
             '1',
             // number of 'origins'
@@ -2165,6 +2184,16 @@ QUnit.module('Views', {
             model: 'partner',
             data: this.data,
             arch: '<pivot><field name="customer" type="row"/></pivot>',
+            archs: {
+                'partner,false,search': `
+                    <search>
+                        <filter name="date_filter" date="date" domain="[]" default_period='this_month'/>
+                    </search>
+                `,
+            },
+            viewOptions: {
+                context: { search_default_date_filter: 1 },
+            },
             mockRPC: function (route, args) {
                 var result = this._super.apply(this, arguments);
                 if (args.method === 'read_group' && mockMock) {
@@ -2182,12 +2211,9 @@ QUnit.module('Views', {
 
         mockMock = true;
 
-
-        // activate 'This Month' and 'Previous Period' in time range menu
-        await cpHelpers.toggleTimeRangeMenu(pivot);
-        await cpHelpers.selectRange(pivot, 'this_month');
-        await cpHelpers.toggleTimeRangeMenuBox(pivot);
-        await cpHelpers.applyTimeRange(pivot);
+        // compare December 2016 to November 2016
+        await cpHelpers.toggleComparisonMenu(pivot);
+        await cpHelpers.toggleMenuItem(pivot, 'Date: Previous period');
 
         var values = [
             "4", "0", "100%",
@@ -2220,17 +2246,22 @@ QUnit.module('Views', {
                     '<field name="company_type" type="col"/>' +
                     '<field name="foo" type="measure"/>' +
                 '</pivot>',
+            archs: {
+                'partner,false,search': `
+                    <search>
+                        <filter name="date_filter" date="date" domain="[]" default_period='this_month'/>
+                    </search>
+                `,
+            },
             viewOptions: {
                 additionalMeasures: ['product_id'],
+                context: { search_default_date_filter: 1 },
             },
         });
 
-
-        // enable comparison mode
-        await cpHelpers.toggleTimeRangeMenu(pivot);
-        await cpHelpers.selectRange(pivot, 'this_month');
-        await cpHelpers.toggleTimeRangeMenuBox(pivot);
-        await cpHelpers.applyTimeRange(pivot);
+        // compare December 2016 to November 2016
+        await cpHelpers.toggleComparisonMenu(pivot);
+        await cpHelpers.toggleMenuItem(pivot, 'Date: Previous period');
 
         // initial sanity check
         var values = [
@@ -2388,17 +2419,22 @@ QUnit.module('Views', {
                     '<field name="company_type" type="col"/>' +
                     '<field name="foo" type="measure"/>' +
                 '</pivot>',
+            archs: {
+                'partner,false,search': `
+                    <search>
+                        <filter name="date_filter" date="date" domain="[]" default_period='this_month'/>
+                    </search>
+                `,
+            },
             viewOptions: {
                 additionalMeasures: ['product_id'],
+                context: { search_default_date_filter: 1 },
             },
         });
 
-
-        // enable comparison mode
-        await cpHelpers.toggleTimeRangeMenu(pivot);
-        await cpHelpers.selectRange(pivot, 'this_month');
-        await cpHelpers.toggleTimeRangeMenuBox(pivot);
-        await cpHelpers.applyTimeRange(pivot);
+        // compare December 2016 to November 2016
+        await cpHelpers.toggleComparisonMenu(pivot);
+        await cpHelpers.toggleMenuItem(pivot, 'Date: Previous period');
 
         // initial sanity check
         var values = [
@@ -2442,6 +2478,13 @@ QUnit.module('Views', {
                     '<field name="company_type" type="col"/>' +
                     '<field name="foo" type="measure"/>' +
                 '</pivot>',
+            archs: {
+                'partner,false,search': `
+                    <search>
+                        <filter name="date_filter" date="date" domain="[]" default_period='this_month'/>
+                    </search>
+                `,
+            },
             viewOptions: {
                 additionalMeasures: ['product_id'],
             },
@@ -2490,12 +2533,14 @@ QUnit.module('Views', {
             "The row headers should be as expected"
         );
 
+        // Filter on December 2016
+        await cpHelpers.toggleFilterMenu(pivot);
+        await cpHelpers.toggleMenuItem(pivot, 'Date');
+        await cpHelpers.toggleMenuItemOption(pivot, 'Date', 'December');
 
-        // enable comparison mode
-        await cpHelpers.toggleTimeRangeMenu(pivot);
-        await cpHelpers.selectRange(pivot, 'this_month');
-        await cpHelpers.toggleTimeRangeMenuBox(pivot);
-        await cpHelpers.applyTimeRange(pivot);
+        // compare December 2016 to November 2016
+        await cpHelpers.toggleComparisonMenu(pivot);
+        await cpHelpers.toggleMenuItem(pivot, 'Date: Previous period');
 
         assert.strictEqual(
             pivot.$('th').slice(0, 7).text(),
@@ -2769,7 +2814,7 @@ QUnit.module('Views', {
     QUnit.test('pivot rendering with boolean field', async function (assert) {
         assert.expect(4);
 
-        this.data.partner.fields.bar = {string: "bar", type: "boolean", store: true, searchable: true, group_operator: 'bool_or'}
+        this.data.partner.fields.bar = {string: "bar", type: "boolean", store: true, searchable: true, group_operator: 'bool_or'};
         this.data.partner.records = [{id: 1, bar: true, date: '2019-12-14'}, {id: 2, bar: false, date: '2019-05-14'}];
 
         var pivot = await createView({
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index f2725c396d9..bebc3255dc2 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -747,13 +747,14 @@
 
         <script type="text/javascript" src="/web/static/tests/control_panel/control_panel_model_tests.js"></script>
         <script type="text/javascript" src="/web/static/tests/control_panel/control_panel_tests.js"></script>
+        <script type="text/javascript" src="/web/static/tests/control_panel/comparison_menu_tests.js"></script>
         <script type="text/javascript" src="/web/static/tests/control_panel/favorite_menu_tests.js"></script>
         <script type="text/javascript" src="/web/static/tests/control_panel/custom_filter_item_tests.js"></script>
         <script type="text/javascript" src="/web/static/tests/control_panel/filter_menu_tests.js"></script>
         <script type="text/javascript" src="/web/static/tests/control_panel/custom_group_by_item_tests.js"></script>
         <script type="text/javascript" src="/web/static/tests/control_panel/groupby_menu_tests.js"></script>
         <script type="text/javascript" src="/web/static/tests/control_panel/search_bar_tests.js"></script>
-        <script type="text/javascript" src="/web/static/tests/control_panel/time_range_menu_tests.js"></script>
+        <script type="text/javascript" src="/web/static/tests/control_panel/search_utils_tests.js"></script>
 
         <script type="text/javascript" src="/web/static/tests/widgets/company_switcher_tests.js"/>
         <script type="text/javascript" src="/web/static/tests/widgets/data_export_tests.js"/>