[IMP] website, *: improve CSS edition usability + add JS edition

* web_editor

Currently, when an user wants to edit the css of its website, he has
access to lots of files and, in debug mode, to even more files. While
the feature is nice for people who know what they are doing, a lambda
person can easily break its website by changing the wrong files. Also,
nothing warns the user that the files that are edited will never receive
updates anymore (unless if they are reset). The goal is to prevent
those behavior while still allowing the add custom css. Another goal
is to be able to *add* custom javascript.

Custom files created for the user:
SCSS: user_custom_rules.scss, user_custom_bootstrap_overridden.scss
JS: user_custom_javascript.js

See https://github.com/odoo/odoo/pull/29999
task-1919350

1 files changed, 27 insertions, 14 deletions

diff --git a/addons/web_editor/static/src/xml/ace.xml b/addons/web_editor/static/src/xml/ace.xml
index 1d59a94c827..20a4f893207 100644
--- a/addons/web_editor/static/src/xml/ace.xml
+++ b/addons/web_editor/static/src/xml/ace.xml
@@ -9,26 +9,33 @@
                 <div class="dropdown-menu" role="menu">
                     <a role="menuitem" href="#" class="dropdown-item o_ace_type_switcher_choice" data-type="xml">XML (HTML)</a>
                     <a role="menuitem" href="#" class="dropdown-item o_ace_type_switcher_choice" data-type="scss">SCSS (CSS)</a>
+                    <a role="menuitem" href="#" class="dropdown-item o_ace_type_switcher_choice" data-type="js">JS</a>
                 </div>
             </div>
             <select id="ace-view-list" class="o_res_list"/>
             <select id="ace-scss-list" class="o_res_list d-none"/>
+            <select id="ace-js-list" class="o_res_list d-none"/>
             <label class="o_include_option oe_include_bundles">
-                <div class="custom-control custom-checkbox">
-                    <input type="checkbox" id="o_ace_view_editor_include_bundle"
-                        class="custom-control-input js_include_bundles"
-                        t-att-checked="widget.options.includeBundles ? 'checked' : undefined"/>
-                    <label for="o_ace_view_editor_include_bundle"
-                        class="custom-control-label">Include Asset Bundles</label>
+                <div class="dropdown">
+                    <button class="btn btn-primary dropdown-toggle" type="button" id="o_dropdown_filter_views" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Filter
+                    </button>
+                    <div class="dropdown-menu" aria-labelledby="o_dropdown_filter_views">
+                        <a class="dropdown-item o_ace_filter active" data-type="xml" data-value="default" href="#">Only Views</a>
+                        <a class="dropdown-item o_ace_filter" data-type="xml" data-value="all" href="#">Views and Assets bundles</a>
+                    </div>
                 </div>
             </label>
             <label class="o_include_option o_include_all_scss d-none">
-                <div class="custom-control custom-checkbox">
-                    <input type="checkbox" id="o_ace_view_editor_include_all_scss"
-                        class="custom-control-input js_include_all_scss"
-                        t-att-checked="widget.options.includeAllSCSS ? 'checked' : undefined"/>
-                    <label for="o_ace_view_editor_include_all_scss"
-                        class="custom-control-label">Include All SCSS Files</label>
+                <div class="dropdown">
+                    <button class="btn btn-primary dropdown-toggle" type="button" id="o_dropdown_filter_assets" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Filter
+                    </button>
+                    <div class="dropdown-menu" aria-labelledby="o_dropdown_filter_assets">
+                        <a class="dropdown-item o_ace_filter active" data-type="scss" data-value="custom" href="#">Only Custom SCSS Files</a>
+                        <a class="dropdown-item o_ace_filter" data-type="scss" data-value="restricted" href="#">Only Page SCSS Files</a>
+                        <a class="dropdown-item o_ace_filter" data-type="scss" data-value="all" href="#">All SCSS Files</a>
+                    </div>
                 </div>
             </label>
             <div class="o_button_section">
@@ -37,11 +44,17 @@
             </div>
         </div>
         <div id="ace-view-id">
-            <span/>
-            <div class="float-right">
+            <div class="float-right mb-2">
                 <button data-action="reset" type="button" class="btn btn-sm btn-danger"><i class="fa fa-undo"/> Reset</button>
                 <button data-action="format" type="button" class="btn btn-sm btn-link">Format</button>
             </div>
+            <span/>
+            <div class="alert alert-warning alert-dismissible mt-2 mb-0" role="alert">
+                If you edit and save this file, you will never receive updates anymore unless you reset your customizations.
+                <button type="button" class="close" aria-label="Close">
+                    <span>&amp;times;</span>
+                </button>
+            </div>
         </div>
         <div id="ace-view-editor"/>
     </div>