The way the live HTML editor for html_field works means the header
(and other nodes that should only appear once) are removed
and the content inserted inside the body.
This results in values being edited without the user being aware.
For emails, this results in any email using 'style' in the header
to break on GMail and other clients that do not support 'style'
outside of the header.
When an html_field is passed a value containing a header
the html_field appears readonly and the user is able to toggle
the code view. Which enables them to edit the 'raw' HTML and see changes
while preventing the presentation view from affecting the database value
task - 3035163
closesodoo/odoo#118920
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
Signed-off-by: Thiry Renaud (reth) <reth@odoo.com>
Replaced _.each() functions (average 235 occurences)
Description of the refactoring this PR addresses:
Current behavior before PR:
There are underscore.js function enumerated above used in odoo.
Desired behavior after PR is merged:
These functions has been replaced by native javascript
prototypes/methods/functions.
TaskId : 3246238
closesodoo/odoo#118565
Signed-off-by: Georis François (fge) <fge@odoo.com>
This commit converts almost all odoo module by native module.
The goal is to deprecate odoo.define in favor of native module and then
simplify boot.js by removing the regexp that finds module dependencies.
task id: 3162300
closesodoo/odoo#117305
Related: odoo/enterprise#39118
Signed-off-by: Géry Debongnie <ged@odoo.com>
This removes calls to JQuery in the convert to grid tests and the
functions they test. In the process, these tests are abstracted for
better readability and maintainability.
closesodoo/odoo#113784
X-original-commit: 3eafc2d3425365bfb25b0540de95aab4e7d89ebf
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit abstracts the cell creation in the bootstrap grid inliner
tests so as to make it less wordy, easier to read, and easier to write.
X-original-commit: beceaf05f333596816623417f827ea8cdabc7097
Part-of: odoo/odoo#113784
When we convert a Bootstrap grid to a table, we sometimes need to create
filler cells to make sure the table has the same number of columns as
the grid. A mistake creeped into that process, and we were not applying
the max-width to the filler cells.
X-original-commit: a546eb1374bbe72606203ccd60322d5063a5de38
Part-of: odoo/odoo#113784
When inlining e-mails, we convert font icons to images by calling the
font_to_img route with the icon's dimensions. To get the icon's
dimensions, a call is made to `convert_inline`'s `_getWidth` and
`_getHeight` functions. These functions assume that calling
`getComputedStyle` on the icon to get its width/height will return a
value in pixels. However, this is not always the case. For example, if
the icon is in a hidden element, `getComputedStyle` can return "auto"
or whatever value is set in the icon's `style` attribute (e.g.,
"fit-content"). This commit ensures the return values of `_getWidth` and
`_getHeight` are always numbers as expected.
Doing this also reveals a false negative in the tests where the grid to
convert is not added to the DOM before calling `bootstrapToTable`. Since
`_getWidth` returned `NaN` in this case, `style.setProperty` failed
silently and no max-width was set on the cells. The tests didn't account
for the missing max-width, which now suddenly appeared with this fix
(NaN failed but 0 doesn't). This commit fixes the tests by adding the
grid to the DOM before calling `bootstrapToTable`, and adding the
expected max-width to the expected result.
X-original-commit: 73b404df9be1ba28a784711174cc19e7c599099e
Part-of: odoo/odoo#113784
This commit removes the legacy implementation of the form, kanban
and list views. It also removes the legacy view widget registry,
and all legacy widgets it contained. The legacy field registry
couldn't be removed yet as some fields are still used (e.g. in
client actions: FieldMany2One, FieldMany2ManyTags...), and
sometimes accessed from that registry (e.g. uom service). More
clean up will come later. Note that all tests using legacy views
have thus been removed, even though the tested feature might still
remain (e.g. FieldMany2One tests have been removed, but that field
is still there). However, those features are deprecated and
unlikely to evolve. They should be removed in the next saas, or the
one after.
Finally, this commit also removes the legacy view dialogs.
Task 3168640
Part-of: odoo/odoo#111809
When a big number is entered in an option field with units, it gets
automatically converted to scientific notation (1e+10) by Chrome.
This makes the unit conversion code fail because it mistakenly
interprets the 'e' as the unit.
This commit adapts the used regular expressions in order to include
the complete number in the number part even if it is written in
scientific notation.
Steps to reproduce:
- Use Chrome.
- Drop a "Banner" block.
- Set the "Position" to "Repeat Pattern".
- Type a long number in the "Width" option.
=> Error popup.
task-2853161
closesodoo/odoo#109078
X-original-commit: a554e102a7f9ca2a0b7f64573adffa4b26a0b813
Signed-off-by: Bojabza Soukéina (sobo) <sobo@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
When CSS properties are updated, a check is made to verify whether the
new value is different from the old one. This process sometimes involves
unit conversions.
Since [1] when a CSS property is updated, it is also set before the
check, in order to verify whether it should be set as `!important`.
When the CSS property is a size, such as the `background-size` CSS
property, it is made of two dimensions. However the verification does
not handle that situation: it handles `15px auto` as being a single
number with the unit `px auto`, which is wrong.
The full comparison is made because the strings do not fully match:
when a size property is set to a measure followed by `auto`, it is
returned without `auto` when reading the computed style.
E.g. after setting `15px auto`, it is read as `15px`.
This commit adapts the CSS properties comparison mechanism by splitting
the size properties into their parts and comparing each part separately.
This commit also introduces a few tests about the already existing
CSS properties comparisons.
Steps to reproduce:
- Drop a "Banner" block.
- Set "Position" as "Repeat Pattern".
- Type "5" in the "Width".
=> It raised an error.
[1]: https://github.com/odoo/odoo/commit/d3c3dab8950abc25b29937605091d8ce32305fa4
task-2853161
X-original-commit: 07e471b9398e042c45182f1e8ca33e74dd8087a3
Part-of: odoo/odoo#109078
This commit makes use of the spellcheck hook to only enable the spellcheck attribute
on the textarea element when needed (on focused element). Since form view are now
always displaying a textarea, instead of relying on a readonly state, the textarea
used by the HtmlField always displayed red underline on typos.
This means the UI can become difficult to read if there are multiple red lines in
the text. Now, it is only present on focused textarea thanks to the useSpellcheck
hook.
This change can be noticeable in many apps, including notes from records and the
Knowledge editor.
A test has been added to verify that the hook enables/disables the attribute on the
contenteditable element used by the html editor..
task #2861428closesodoo/odoo#106866
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Imported unsplash in web_editor when it was not a dependency.
This caused the test to fail when web_unsplash was not installed.
As it is necessary to import it when the module is installed,
this test is moved to test_website as both modules are installed there.
(Also updated to ES6 import syntax + odoo-module style test)
task #3000801closesodoo/odoo#101672
X-original-commit: d85ba585ec4642a507d24ab94606a65970c635f3
Signed-off-by: Stéphane Debauche (std) <std@odoo.com>
An event was not called on uploading files in a media dialog.
This meant the parent of html field didn't know of the new attachments
which resulted in attachments being linked to no record at all
and not being garbage collected later.
This adds a reference inside the media dialog file input so that it can
trigger that event on behalf of the html field.
The attachments newly uploaded in media dialog are uneditable
to prevent users from unlinking attachments
that are still used in the body of the composer (causing the same issue)
Task-2860761
closesodoo/odoo#101405
X-original-commit: f4dd1eb3f25672e7309759c347e2b552c5652b2f
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
- adapt the html field and mass_mailing_widget to be owl components
- adapt the mass mailing view to be an owl view
task-2898432
closesodoo/odoo#94875
Related: odoo/enterprise#30915
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
convert_inline relies on getComputedStyle to crystalize var and calc
values. This however was conflicting with the fact that it also combines
positional styles (eg., margin-top, padding-left) together. This seems
to make getComputedStyle give out the wrong value with var and calc.
closesodoo/odoo#98003
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
When clicking the link tools button, the focus is set inside the URL
input, changing the selection temporarily to that input. This means that
if the user clicks any other button from the toolbar right after using
that input, a command would try (and refuse) to execute outside the
editable area.
The link tool is now destroyed when clicking other buttons of the
toolbar, thus either validating the link or reverting it, and the
selection is reset accordingly.
The toolbar buttons are now correctly bound on click rather than some
being bound on mousedown and some on clicks, like colorpickers, which
would result in weird behavior such as a mousedown handler modifying the
dom which changes the layout so the mouseup event is on another node and
the click is not fired anymore. This commit streamlines the behavior to
use click so that this issue does not occur anymore.
task-2921844
X-original-commit: 798e3d0eb0017e05261ca0a0c5e29706629f0350
Part-of: odoo/odoo#97973
Co-authored-by: Nicolas Bayet <nby@odoo.com>
Co-authored-by: David Monjoie <dmo@odoo.com>
When converting Bootstrap grids to tables for e-mail compatibility, we
need to take into account Bootstrap offsets on columns. We were doing
this by adding that offset to the column but we actually need to create
an extra column instead.
task-2936705
closesodoo/odoo#97962
X-original-commit: 8beb7ac47c4cc86822bbc42b67ce5f6a44d41626
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Signed-off-by: Antoine Guenet (age) <age@odoo.com>
When we convert Bootstrap grids to tables for e-mail compatibility, we
need to complete rows whose column sizes don't add up to 12. The way it
was, the last column was stretched to fill up the row, which is wrong as
it can affect the width of its contents.
With this commit, a new, empty column is appended to the row to fill it
up without affecting the existing rows. This is a more accurate way to
emulate the behavior of Flexbox.
task-2936705
X-original-commit: 462b698732dbc0e71972ddbe86c687f4bb3f9492
Part-of: odoo/odoo#97962
The new list and form views were merged recently [1], but they
weren't activated because they weren't 100% ready yet. This is now
the case. This commit adds those views to the view registry. As a
consequence, a lot of qunit tests and tours needed to be adapted,
mostly for selector changes.
We also add legacy list and form views to the view registry, with
keys 'legacy_list' and 'legacy_form'. This allows to force those
legacy views when necessary. For instance, we did it in views
using complex custom legacy x2many field widgets that haven't been
converted yet (we have a compatibility layer but it isn't complete
and doesn't support every advanced usecases).
[1] odoo/odoo#92475
Part-of: odoo/odoo#78221
Co-authored-by: Aaron Bohy <aab@odoo.com>
Co-authored-by: Bruno Boi <boi@odoo.com>
Co-authored-by: Géry Debongnie <ged@odoo.com>
Co-authored-by: Samuel Degueldre <sad@odoo.com>
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Simon Genin (ges) <ges@odoo.com>
Co-authored-by: Francois (fge) <fge@odoo.com>
Co-authored-by: Michael Mattiello (mcm) <mcm@odoo.com>
Co-authored-by: Julien Mougenot <jum@odoo.com>
Co-authored-by: Lucas Perais (lpe) <lpe@odoo.com>
Co-authored-by: Jorge Pinna Puissant <jpp@odoo.com>
Co-authored-by: luvi <luvi@odoo.com>
Due to the removal of btn-block we need to change the display to grid
> Dropped .btn-block for utilities. Instead of using .btn-block on the
> .btn, wrap your buttons with .d-grid and a .gap-* utility to space
> them as needed
https://getbootstrap.com/docs/5.1/migration/#buttons
Task ID: 2766483
Part-of: odoo/odoo#95450
The conversion of html to inline-styled html compatible with e-mail
clients failed to take into account styles that included `var()` and/or
`calc()`. Those didn't occur with Bootstrap 4 but are very common with
Bootstrap 5.
This allow that conversion by using `getComputedStyle` in those cases.
Task ID: 2766483
Part-of: odoo/odoo#95450
- BS5 JS use the `data-bs-toggle="dropdown"` attribute to
automatically enable the BS Component.
But in this case as the `.dropdown-menu` is only rendered when the
`.dropdown-toggle` is clicked we can't initialize the Dropdown at the
first render. So we do it manually.
- change .dropdown-menu by .o-dropdown-menu (owl)
-> to handle keyboard navigation we can't use BS dropdowns
- use currentTarget of event
As the event can bubble we use currentTarget to be sure to be at the
higher level in the DOM.
> All the events for the dropdown are now triggered on the dropdown
> toggle button and then bubbled up to the parent element.
- BS5 don't add .show on parent group anymore
-> dropdown show class not on the same node on BS5
- avoid dropdown warning using margin in CSS
BS5 show a warning if we use margin statically in CSS for a dropdown.
> Popper: CSS "margin" styles cannot be used to apply padding between
> the popper and its reference element or boundary. To replicate margin,
> use the `offset` modifier, as well as the `padding` option in the
> `preventOverflow` and `flip` modifiers.
- adapt the systray activity dropdown for mobile
On desktop positions are now dynamic and on mobile it's static
- In BS5 the CSS `bottom: 100%;` is not more applied to the
`.dropup .dropdown-menu` selector.
- Change right -> end and add data-bs-popper="none" to avoid
Popper interaction
Task ID: 2766483
Part-of: odoo/odoo#95450
Odoo-Editor, having originally been developed with the purpose of being
a standalone library, was put into a `lib` folder. Since in the meantime
the library plans were aborted and since its presence outside the `src`
directory makes translations unavailable for it, this moves the editor
to `src/js/editor/odoo-editor`.
task-2880723
Part-of: odoo/odoo#94516
The fix 1b80fe9 removed the behavior that made `.o_not_editable`
`contenteditable=false`. Without this behavior, other issues could
arises.
closesodoo/odoo#94889
X-original-commit: 4e7d6e1a70e44df3476c2602119fbcedc7c04199
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit mocks the website service for all the QUnit tests.
As the website module now defines a patch on the WebClient and NavBar
components, adding the website service, this service needs to be mocked
for all the tests. This is done by patching the QUnit.testStart hook.
Also, after the addition of the new media dialog, this component is
mocked at the field html unit test.
See merge commit for more information.
task-2687506
On website, the edition is done in an iframe while the SnippetsMenu
resides outside of said iframe. This means that the SnippetsMenu no
longer has frontend styles. Therefore, colors aren't accurate.
This commit aims at patching web_editor widgets, such as color_palette,
so that the color displayed is always accurate. To do so, it computes
the color inside the iframe and adds style attributes to color_palette
preview elements.
See merge commit for more information.
task-2687506
Ensure the selection in the fonts tags after `applyColor`, otherwise an
undetermined race condition could generate a wrong selection during
multiples call of `_processAndApplyColor` from the color picker.
task-2822221
closesodoo/odoo#92654
X-original-commit: 2b2aba49550cf7c2ba1914f03beef9cbdf60b166
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Since flexbox is not well supported across e-mail clients, columns were
until now not responsive. This adds support for responsive columns and
a special rendering of them for Outlook so they don't break there.
task-2761098
Part-of: odoo/odoo#87962
This collects all external links on clean the editor so as to make them
open in a new tab.
task-2740021
closesodoo/odoo#86289
X-original-commit: 8d2c8b4bad7a7aaa313aad361b48d77823841dbe
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit adds the possibility of applying a "perspective"
transformation on image with some image shapes (e.g. devices). For
technical reasons, the only way to apply this 3D transformation is to
modify the image in a canva.
Since the 2D context of the canvas doesn't support projective
transformations, we approximate the result using multiple affine
transformations on smaller parts of the image.
task-2666049
Part-of: odoo/odoo#79068
Co-authored-by: Tom De Caluwé <tdc@odoo.com>
jQuery was used extensively in `convert_inline`, slowing it down by a
factor of more than 2. This replaces all use of jQuery with vanilla
javascript so as to improve performance significantly.
X-original-commit: 8573a4ebbfe951c9ce0d3ef753174f4f0a6c829b
Part-of: odoo/odoo#84513
Co-authored-by: Antoine Guenet <age@odoo.com>
Co-authored-by: Nicolas Bayet <nby@odoo.com>
Some tests depended on a variable to be defined, which was only defined
in other tests.
X-original-commit: d3e30a532526e7be54d6153a3ed375ff30d8f8e3
Part-of: odoo/odoo#84513
The conversion of padding from grids to their equivalent
tables was sometimes faulty due to an error in the
evaluation of the cell's position within the table.
Part-of: odoo/odoo#83233
Cards need to be double wrapped in tables to be
displayed properly because of a bizarre hack by
bootstrap that uses background-color rather to give
the effect of a border, and because we can have
card-body be a sibling of a list-group.
Incidentally this also prevents the introduction of a
new row for each whitespace text node.
Part-of: odoo/odoo#83233
When converting from grid to tables, we need to convert values from x/12
to x/100. The rounding error was a little too big, making it too visible
at times. With this commit we now round to 2 decimal places instead of
rounding to the nearest integer.
Part-of: odoo/odoo#83233
The conversion from rem to px was rounding the value to 1 decimal place
but the browser handles up to 2 decimal places. As a result there were
visible inconsistencies in the conversion (12.25px in the original
becoming 12.3px in the converted email).
Part-of: odoo/odoo#83233
The align-self and justify-content styles don't work on cells so when
converting a Bootstrap column to a table cell, we should also apply a
vertical alignment. The same applies to align-items on rows.
Part-of: odoo/odoo#83233
When saving an email, its contents pass through convert_inline to ensure
wide e-mail client compatibility. One phase of that process is the
conversion of classes to inline styles, which involves parsing through
all the styles in all the stylesheets of the document, and matching them
with each element in the DOM. That is an extremely expensive process and
because of that, saving an e-mail can take a very long time depending on
how large the DOM is.
This refactors it for performance gains. Tested on an exaggeratingly big
DOM, what used to take about 12s now takes about 5s.
- The process of parsing through the document's stylesheets is now done
on opening the email (about 500ms) rather than on saving it so we
split the processing time between the two.
- When parsing the stylesheets, we now also preprocess them by grouping
whatever can be grouped together and precomputing the specificity so
as to sort them appropriately. This has the benefit of considerably
reducing the number of rules to iterate over for each element (from
11k+ to 3k+).
- In the process, some things were re-written for improved readability.
X-original-commit: 10e749537186dfb80aee1f2537f3b5804f66cfe5
Part-of: odoo/odoo#81540
This provide tests for the main unit testable functions of
convert_inline, as well as a couple of test utils to that purpose.
X-original-commit: 6a17ff7442a8395663c3e215cc14c057c098d4b5
Part-of: odoo/odoo#81540
In a undeterministic circumstance, the editor element is not
in the page at the moment of checking it. There is probably
some promises somewhere that remains unresolved and
prevent the element to be inserted in time.
Task-2682104
closesodoo/odoo#81139
X-original-commit: f2557455ed164fc52e38a45ba14ae15f4125c202
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
In a undeterministic circumstance, an element in the editor
is not found. It might be because the check is done before the
editor is fully loaded.
The commit 46c22143b22e204e93c70b21d002eb179be34a33 tried to
wait 100ms, but the bug continue to appear.
This commit only perform the check when the editor is fully
loaded. If the undeterministic bug continue to appear, it means
that the cause is different.
Task-2678110
closesodoo/odoo#79078
X-original-commit: 930b6822961f1ffdd1198e1ab2fe52229e14a50d
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
Pulinckx Pierre (PIPU)