This commit removes all the 'extend' initially introduced to avoid code
repetition and ensure visual consistency across Bootstrap and Owl dropdowns.
Despite achieving the desired results, using 'extend' in this context
was seriously impacting the bundle generation time, probably due to an
underestimated amount of Apps' legacy-code applied on these elements.
In order to achieve the same results, the chosen strategy is to add
Bootstrap default classes directly into Owl dropdowns.
Also, it moves code related to bootstrap dropdown in 'webclient.scss',
leaving 'core/dropdown/dropdown.scss' for Owl code only.
Due to the discrepancies between Bootstrap and Owl html
structure, the '.dropdown-item' class could not have been added
directly to Owl's '.o_dropdown_item' itself, without refactoring
the Dropdown component structure.
// ==== Bootstrap 4.6 default Structure ================================
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
<a class="dropdown-item" href="#">Another action</a>
</div>
// ==== OWL default Structure before this commit =======================
<ul class="o_dropdown_menu">
<li class="o_dropdown_item">
<span>Action</span>
</li>
<li class="o_dropdown_item">
<a href="#">Another action</a>
</li>
</ul>
// ==== OWL Structure after this commit ================================
<div class="o-dropdown--menu dropdown-menu">
<span class="dropdown-item">Action</span>
<a class="dropdown-item" href="#">Another action</a>
</div>
// ==== web.assets_backend.css Bundle Generation Comparison ============
With all modules installed (enterprise edition over runbot):
Before this commit, bundle took ~2.5s and ~4s to generate and weighted ~322kB (~2.5MB uncompressed)
After this commit, it takes between ~1.2s and ~1.6s and weights ~257kB (~1.6MB uncompressed)
closes odoo/odoo#77649
X-original-commit: 84715436d87bb05b421bc9ccaacda67d07571690
Related: odoo/enterprise#21370
Signed-off-by: Géry Debongnie (ged) <ged@openerp.com>
Co-authored-by: Stefano Rigano <sri@odoo.com>
Co-authored-by: François Georis <fge@odoo.com>
Co-authored-by: Bruno Boi <boi@odoo.com>
123 lines
4.6 KiB
JavaScript
123 lines
4.6 KiB
JavaScript
/** @odoo-module **/
|
|
|
|
import { patchDate, patchWithCleanup } from "@web/../tests/helpers/utils";
|
|
import { browser } from "@web/core/browser/browser";
|
|
import { ControlPanel } from "@web/search/control_panel/control_panel";
|
|
import {
|
|
getFacetTexts,
|
|
makeWithSearch,
|
|
removeFacet,
|
|
setupControlPanelServiceRegistry,
|
|
toggleComparisonMenu,
|
|
toggleFilterMenu,
|
|
toggleMenuItem,
|
|
toggleMenuItemOption,
|
|
} from "./helpers";
|
|
|
|
let serverData;
|
|
QUnit.module("Search", (hooks) => {
|
|
hooks.beforeEach(async () => {
|
|
serverData = {
|
|
models: {
|
|
foo: {
|
|
fields: {
|
|
birthday: { string: "Birthday", type: "date", store: true, sortable: true },
|
|
date_field: { string: "Date", type: "date", store: true, sortable: true },
|
|
},
|
|
},
|
|
},
|
|
views: {
|
|
"foo,false,search": `
|
|
<search>
|
|
<filter name="birthday" date="birthday"/>
|
|
<filter name="date_field" date="date_field"/>
|
|
</search>
|
|
`,
|
|
},
|
|
};
|
|
setupControlPanelServiceRegistry();
|
|
patchWithCleanup(browser, {
|
|
setTimeout: (fn) => fn(),
|
|
clearTimeout: () => {},
|
|
});
|
|
});
|
|
|
|
QUnit.module("Comparison");
|
|
|
|
QUnit.test("simple rendering", async function (assert) {
|
|
assert.expect(6);
|
|
patchDate(1997, 0, 9, 12, 0, 0);
|
|
const controlPanel = await makeWithSearch({
|
|
serverData,
|
|
resModel: "foo",
|
|
Component: ControlPanel,
|
|
searchMenuTypes: ["filter", "comparison"],
|
|
searchViewId: false,
|
|
});
|
|
assert.containsOnce(controlPanel, ".dropdown.o_filter_menu");
|
|
assert.containsNone(controlPanel, ".dropdown.o_comparison_menu");
|
|
await toggleFilterMenu(controlPanel);
|
|
await toggleMenuItem(controlPanel, "Birthday");
|
|
await 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()
|
|
.toUpperCase() /** @todo why do I need to upperCase */,
|
|
"COMPARISON"
|
|
);
|
|
await toggleComparisonMenu(controlPanel);
|
|
const comparisonOptions = [
|
|
...controlPanel.el.querySelectorAll(".o_comparison_menu .dropdown-item"),
|
|
];
|
|
assert.strictEqual(comparisonOptions.length, 2);
|
|
assert.deepEqual(
|
|
comparisonOptions.map((e) => e.innerText.trim()),
|
|
["Birthday: Previous Period", "Birthday: Previous Year"]
|
|
);
|
|
});
|
|
|
|
QUnit.test("activate a comparison works", async function (assert) {
|
|
assert.expect(5);
|
|
patchDate(1997, 0, 9, 12, 0, 0);
|
|
const controlPanel = await makeWithSearch({
|
|
serverData,
|
|
resModel: "foo",
|
|
Component: ControlPanel,
|
|
searchMenuTypes: ["filter", "comparison"],
|
|
searchViewId: false,
|
|
});
|
|
await toggleFilterMenu(controlPanel);
|
|
await toggleMenuItem(controlPanel, "Birthday");
|
|
await toggleMenuItemOption(controlPanel, "Birthday", "January");
|
|
await toggleComparisonMenu(controlPanel);
|
|
await toggleMenuItem(controlPanel, "Birthday: Previous Period");
|
|
assert.deepEqual(getFacetTexts(controlPanel), [
|
|
"Birthday: January 1997",
|
|
"Birthday: Previous Period",
|
|
]);
|
|
await toggleFilterMenu(controlPanel);
|
|
await toggleMenuItem(controlPanel, "Date");
|
|
await toggleMenuItemOption(controlPanel, "Date", "December");
|
|
await toggleComparisonMenu(controlPanel);
|
|
await toggleMenuItem(controlPanel, "Date: Previous Year");
|
|
assert.deepEqual(getFacetTexts(controlPanel), [
|
|
["Birthday: January 1997", "Date: December 1996"].join("or"),
|
|
"Date: Previous Year",
|
|
]);
|
|
await toggleFilterMenu(controlPanel);
|
|
await toggleMenuItem(controlPanel, "Date");
|
|
await toggleMenuItemOption(controlPanel, "Date", "1996");
|
|
assert.deepEqual(getFacetTexts(controlPanel), ["Birthday: January 1997"]);
|
|
await toggleComparisonMenu(controlPanel);
|
|
await toggleMenuItem(controlPanel, "Birthday: Previous Year");
|
|
assert.deepEqual(getFacetTexts(controlPanel), [
|
|
"Birthday: January 1997",
|
|
"Birthday: Previous Year",
|
|
]);
|
|
await removeFacet(controlPanel);
|
|
assert.deepEqual(getFacetTexts(controlPanel), []);
|
|
});
|
|
});
|