[IMP] web: update to fontawesome 4.7.0 to 5.11.2

FontAwesome 5 introduced new names for some icons as described on
https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4#name-changes

This commit replaces the old names to the new ones.

closes odoo/odoo#35826

Taskid: 2050241
Related: odoo/enterprise#5180
Signed-off-by: Yannick Tivisse (yti) <yti@odoo.com>

10 files changed, 43 insertions, 34 deletions

diff --git a/addons/web_editor/static/src/js/backend/convert_inline.js b/addons/web_editor/static/src/js/backend/convert_inline.js
index 4482a8f67ba..228aefb42e6 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/addons/web_editor/static/src/js/backend/convert_inline.js
@@ -190,7 +190,7 @@ function getMatchedCSSRules(a) {
 function fontToImg($editable) {
     var fonts = odoo.__DEBUG__.services["wysiwyg.fonts"];
 
-    $editable.find('.fa').each(function () {
+    $editable.find('.fa, .fas, .far').each(function () {
         var $font = $(this);
         var icon, content;
         _.find(fonts.fontIcons, function (font) {
diff --git a/addons/web_editor/static/src/js/common/ace.js b/addons/web_editor/static/src/js/common/ace.js
index dc2d78a53c7..7055b9152b4 100644
--- a/addons/web_editor/static/src/js/common/ace.js
+++ b/addons/web_editor/static/src/js/common/ace.js
@@ -820,7 +820,7 @@ var ViewEditor = Widget.extend({
 
             if ($elem.data('dirty') || $elem.data('customized')) {
                 $div.prepend($('<span/>', {
-                    class: 'mr8 fa fa-floppy-o ' + ($elem.data('dirty') ? 'text-warning' : 'text-success'),
+                    class: 'mr8 far fa-save ' + ($elem.data('dirty') ? 'text-warning' : 'text-success'),
                 }));
             }
 
diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js
index 913d35575ab..800cbf3829f 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -83,7 +83,7 @@ renderer.tplPopovers = function (lang, options) {
     //////////////// image popover
 
     // add center button for images
-    $(tplIconButton('fa fa-align-center', {
+    $(tplIconButton('fas fa-align-center', {
         title: _t('Center'),
         event: 'floatMe',
         value: 'center'
@@ -101,14 +101,14 @@ renderer.tplPopovers = function (lang, options) {
         '<li><a class="dropdown-item" data-event="padding" href="#" data-value="large">'+_t('Large')+'</a></li>',
         '<li><a class="dropdown-item" data-event="padding" href="#" data-value="xl">'+_t('Xl')+'</a></li>',
     ];
-    $(tplIconButton('fa fa-plus-square-o', {
+    $(tplIconButton('far fa-plus-square', {
         title: _t('Padding'),
         dropdown: tplDropdown(dropdown_content)
     })).appendTo($padding);
 
     // circle, boxed... options became toggled
     $imagePopover.find('[data-event="imageShape"]:not([data-value])').remove();
-    var $button = $(tplIconButton('fa fa-sun-o', {
+    var $button = $(tplIconButton('far fa-sun', {
         title: _t('Shadow'),
         event: 'imageShape',
         value: 'shadow'
@@ -116,7 +116,7 @@ renderer.tplPopovers = function (lang, options) {
 
     // add spin for fa
     var $spin = $('<div class="btn-group d-none only_fa"/>').insertAfter($button.parent());
-    $(tplIconButton('fa fa-refresh', {
+    $(tplIconButton('fas fa-sync', {
             title: _t('Spin'),
             event: 'imageShape',
             value: 'fa-spin'
@@ -139,16 +139,16 @@ renderer.tplPopovers = function (lang, options) {
     // show dialog box and delete
     var $imageprop = $('<div class="btn-group"/>');
     $imageprop.appendTo($imagePopover.find('.popover-body'));
-    $(tplIconButton('fa fa-file-image-o', {
+    $(tplIconButton('far fa-file-image', {
             title: _t('Edit'),
             event: 'showImageDialog'
         })).appendTo($imageprop);
-    $(tplIconButton('fa fa-trash-o', {
+    $(tplIconButton('far fa-trash-alt', {
             title: _t('Remove'),
             event: 'delete'
         })).appendTo($imageprop);
 
-    $(tplIconButton('fa fa-crop', {
+    $(tplIconButton('fas fa-crop', {
         title: _t('Crop Image'),
         event: 'cropImage',
     })).insertAfter($imagePopover.find('[data-event="imageShape"][data-value="img-thumbnail"]'));
@@ -165,7 +165,7 @@ renderer.tplPopovers = function (lang, options) {
 
     $linkPopover.find('.popover-body').append($airPopover.find(".note-history").clone());
 
-    $linkPopover.find('button[data-event="showLinkDialog"] i').attr("class", "fa fa-link");
+    $linkPopover.find('button[data-event="showLinkDialog"] i').attr("class", "fas fa-link");
     $linkPopover.find('button[data-event="unlink"]').before($airPopover.find('button[data-event="showImageDialog"]').clone());
 
     //////////////// text/air popover
diff --git a/addons/web_editor/static/src/js/editor/summernote.js b/addons/web_editor/static/src/js/editor/summernote.js
index 06a282d0076..f6aa18a69f7 100644
--- a/addons/web_editor/static/src/js/editor/summernote.js
+++ b/addons/web_editor/static/src/js/editor/summernote.js
@@ -2487,7 +2487,7 @@ eventHandler.detach = function (oLayoutInfo, options) {
     $('.o_table_handler').remove();
 };
 
-options.icons.image.image = "file-image-o";
+options.icons.image.image = "file-image";
 $.summernote.lang['en-US'].image.image = "File / Image";
 
 return $.summernote;
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 361355c4cab..0d4b67ec9c0 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -130,7 +130,7 @@ var Wysiwyg = Widget.extend({
         $editable.find('[title=""]').removeAttr('title');
         $editable.find('[alt=""]').removeAttr('alt');
         $editable.find('[data-original-title=""]').removeAttr('data-original-title');
-        $editable.find('a.o_image, span.fa, i.fa').html('');
+        $editable.find('a.o_image, span.fa, i.fa, span.far, i.far, span.fas, i.fas').html('');
         $editable.find('[aria-describedby]').removeAttr('aria-describedby').removeAttr('data-original-title');
         return $editable.html();
     },
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index ddc6efd50b6..baac51c3adf 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -180,10 +180,11 @@ html[data-browser^="msie"] div.media_iframe_video iframe {
 
 // Fields
 address {
-    .fa.fa-mobile-phone {
+    .fa.fa-mobile-alt,
+    .fas.fa-mobile-alt {
         margin: 0 3px 0 2px;
     }
-    .fa.fa-file-text-o {
+    .far.fa-file-alt {
         margin-right: 1px;
     }
 }
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index f47cb99b055..ebd84429fa9 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -363,6 +363,7 @@ body .modal {
 
             input:checked + i::before {
                 content: "\f00c";
+                font-weight: 900;
                 @include o-position-absolute($top: 6px, $left: 5px);
             }
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index f95c74a43c4..24cdd58a221 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -227,7 +227,8 @@ body.editor_enable.editor_has_snippets {
                 width: 1em;
                 right: 0.5em;
                 text-align: center;
-                font-family: FontAwesome;
+                font-family: 'Font Awesome 5 Free';
+                font-weight: 900;
             }
         }
 
@@ -515,7 +516,7 @@ body.editor_enable.editor_has_snippets {
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                    font-family: FontAwesome !important;
+                    font-family: 'Font Awesome 5 Free' !important;
                     color: $o-we-color-success;
                 }
 
@@ -679,7 +680,7 @@ body.editor_enable.editor_has_snippets {
                     border: solid 1px darken($o-we-handles-accent-color, 10%);
                     line-height: $o-we-handles-btn-size - 2;
                     font-size: 14px;
-                    font-family: FontAwesome;
+                    font-family: 'Font Awesome 5 Free';
                     background-color: darken($o-we-handles-accent-color, 20%);
                     color: white;
                 }
@@ -696,12 +697,14 @@ body.editor_enable.editor_has_snippets {
 
                 &.w:after,
                 &.e:after {
-                    content: "\f07e";
+                    content: "\f337";
+                    font-weight: 900;
                 }
 
                 &.s:after,
                 &.n:after {
-                    content: "\f07d";
+                    content: "\f338";
+                    font-weight: 900;
                 }
 
                 &.o_handle_start {
@@ -709,11 +712,13 @@ body.editor_enable.editor_has_snippets {
                     &.w:after,
                     &.e:after {
                         content: '\f061';
+                        font-weight: 900;
                     }
 
                     &.n:after,
                     &.s:after {
                         content: '\f063';
+                        font-weight: 900;
                     }
                 }
 
@@ -722,11 +727,13 @@ body.editor_enable.editor_has_snippets {
                     &.w:after,
                     &.e:after {
                         content: '\f060';
+                        font-weight: 900;
                     }
 
                     &.n:after,
                     &.s:after {
                         content: '\f062';
+                        font-weight: 900;
                     }
                 }
 
@@ -771,7 +778,7 @@ body.editor_enable.editor_has_snippets {
                 &::before, &::after {
                     content: '\f141';
                     display: block;
-                    font-family: FontAwesome;
+                    font-family: 'Font Awesome 5 Free';
                     font-size: 0.8em;
                     line-height: 0.35em;
                 }
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index b1f5835c599..658bef34353 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -21,10 +21,10 @@
             <we-title>
                 <span t-esc="name"/>
                 <we-button-group>
-                    <we-button class="fa fa-fw fa-clone oe_snippet_clone"
+                    <we-button class="far fa-copy fa-fw oe_snippet_clone"
                                 title="Duplicate Container"
                                 aria-label="Duplicate Container"/>
-                    <we-button class="fa fa-fw fa-trash oe_snippet_remove"
+                    <we-button class="far fa-trash-alt fa-fw oe_snippet_remove"
                                 title="Remove Block"
                                 aria-label="Remove Block"/>
                 </we-button-group>
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index f48f2474672..55411846746 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -151,7 +151,7 @@
                     </button>
                     <div class="ml-2">
                         <span class="o_we_url_success text-success d-none fa fa-lg fa-check" title="The URL seems valid."/>
-                        <span class="o_we_url_warning text-warning d-none fa fa-lg fa-warning" t-att-title="urlWarningTitle"/>
+                        <span class="o_we_url_warning text-warning d-none fas fa-lg fa-exclamation-triangle" t-att-title="urlWarningTitle"/>
                         <span class="o_we_url_error text-danger d-none fa fa-lg fa-times" title="The URL does not seem to work."/>
                     </div>
                 </div>
@@ -170,7 +170,7 @@
             <t t-set="urlWarningTitle">The URL does not contain any image. The file will be added in the document section.</t>
             <t t-if="widget.options.showQuickUpload" t-set="alternateUpload">
                 <button class="btn btn-primary o_we_quick_upload" type="button" title="Quick Upload">
-                    <i class="fa fa-fast-forward"/>
+                    <i class="fas fa-fast-forward"/>
                     <span class="sr-only">Quick Upload</span>
                 </button>
             </t>
@@ -194,7 +194,7 @@
                     <div class="form-group">
                         <label class="o_we_title_label" for="o_we_name_input">
                             Name
-                            <i class="fa fa-question-circle-o" title="Give a relevant name to your file to optimize search engine results."/>
+                            <i class="far fa-question-circle" title="Give a relevant name to your file to optimize search engine results."/>
                         </label>
                         <input type="text" class="form-control" id="o_we_name_input" name="filename" aria-describedby="nameHelp" t-att-value="widget.attachment.name" required="required"/>
                     </div>
@@ -205,7 +205,7 @@
                     <div t-else="1" class="form-group">
                         <label class="o_we_title_label" for="o_we_name_input">
                             Size
-                            <i class="fa fa-question-circle-o" title="Reduce the size as much as possible to increase performance."/>
+                            <i class="far fa-question-circle" title="Reduce the size as much as possible to increase performance."/>
                         </label>
                         <div class="form-row align-items-center">
                             <div class="col">
@@ -253,14 +253,14 @@
                                 <input type="checkbox" class="custom-control-input" id="o_we_optimize_quality" t-att-checked="widget.isExisting ? undefined : 'checked'" aria-describedby="toggleQualityHelp"/>
                                 <label class="custom-control-label" for="o_we_optimize_quality">
                                     Optimize
-                                    <i class="fa fa-question-circle-o" title="This reduces the quality to increase performance."/>
+                                    <i class="far fa-question-circle" title="This reduces the quality to increase performance."/>
                                 </label>
                             </div>
                         </t>
                         <t t-else="1">
                             <label class="o_we_title_label" for="o_we_quality_input">
                                 Quality
-                                <i class="fa fa-question-circle-o" title="Reduce the quality as much as possible to increase performance."/>
+                                <i class="far fa-question-circle" title="Reduce the quality as much as possible to increase performance."/>
                             </label>
                             <div class="form-row align-items-center">
                                 <div class="col-sm-10">
@@ -329,7 +329,7 @@
     <t t-name="wysiwyg.widgets.file.existing.remove">
         <t t-set="removeTitle" t-if="attachment.res_model === 'ir.ui.view'">This file is a public view attachment.</t>
         <t t-set="removeTitle" t-else="">This file is attached to the current record.</t>
-        <i class="fa fa-trash o_existing_attachment_remove p-2" t-att-title="removeTitle" role="img" t-att-aria-label="removeTitle"/>
+        <i class="far fa-trash-alt o_existing_attachment_remove p-2" t-att-title="removeTitle" role="img" t-att-aria-label="removeTitle"/>
     </t>
 
     <t t-name="wysiwyg.widgets.image.existing.error">
@@ -537,15 +537,15 @@
                    <button type="button" class="btn btn-secondary" title="Zoom Out" data-event="zoom" data-value="-0.1"><i class="fa fa-search-minus"/></button>
                </div>
                <div class="btn-group" role="group">
-                   <button type="button" class="btn btn-secondary" title="Rotate Left" data-event="rotate" data-value="-45"><i class="fa fa-rotate-left"/></button>
-                   <button type="button" class="btn btn-secondary" title="Rotate Right" data-event="rotate" data-value="45"><i class="fa fa-rotate-right"/></button>
+                   <button type="button" class="btn btn-secondary" title="Rotate Left" data-event="rotate" data-value="-45"><i class="fas fa-undo"/></button>
+                   <button type="button" class="btn btn-secondary" title="Rotate Right" data-event="rotate" data-value="45"><i class="fas fa-redo"/></button>
                </div>
                <div class="btn-group" role="group">
-                   <button type="button" class="btn btn-secondary" title="Flip Horizontal" data-event="flip" data-value="horizontal" data-x="1"><i class="fa fa-arrows-h"/></button>
-                   <button type="button" class="btn btn-secondary" title="Flip Vertical" data-event="flip" data-value="vertical" data-y="1"><i class="fa fa-arrows-v"/></button>
+                   <button type="button" class="btn btn-secondary" title="Flip Horizontal" data-event="flip" data-value="horizontal" data-x="1"><i class="fas fa-arrows-alt-h"/></button>
+                   <button type="button" class="btn btn-secondary" title="Flip Vertical" data-event="flip" data-value="vertical" data-y="1"><i class="fas fa-arrows-alt-v"/></button>
                </div>
                <div class="btn-group" role="group">
-                   <button type="button" class="btn btn-secondary" title="Reset Image" data-event="reset"><i class="fa fa-refresh"/> Reset Image</button>
+                   <button type="button" class="btn btn-secondary" title="Reset Image" data-event="reset"><i class="fas fa-sync"/> Reset Image</button>
                </div>
            </div>
        </t>