Merge branch 'MDL-78334-master' of https://github.com/roland04/moodle

admin/tool/behat/cli/init.php

@@ -53,6 +53,7 @@ list($options, $unrecognized) = cli_get_params(
         'disable-composer' => false,
         'composer-upgrade' => true,
         'composer-self-update' => true,
+        'scss-deprecations' => false,
     ),
     array(
         'j' => 'parallel',
@@ -69,7 +70,7 @@ Behat utilities to initialise behat tests
 
 Usage:
   php init.php      [--parallel=value [--maxruns=value] [--fromrun=value --torun=value]]
-                    [--no-axe] [-o | --optimize-runs] [-a | --add-core-features-to-theme]
+                    [--no-axe] [--scss-deprecations] [-o | --optimize-runs] [-a | --add-core-features-to-theme]
                     [--no-composer-self-update] [--no-composer-upgrade]
                     [--disable-composer]
                     [--help]
@@ -80,6 +81,7 @@ Options:
 --fromrun           Execute run starting from (Used for parallel runs on different vms)
 --torun             Execute run till (Used for parallel runs on different vms)
 --no-axe            Disable axe accessibility tests.
+--scss-deprecations Enable SCSS deprecation checks.
 
 -o, --optimize-runs
                     Split features with specified tags in all parallel runs.
@@ -131,6 +133,7 @@ if ($options['parallel'] && $options['parallel'] > 1) {
     $cmdoptionsforsinglerun = [
         'add-core-features-to-theme',
         'axe',
+        'scss-deprecations',
     ];
 
     foreach ($cmdoptionsforsinglerun as $option) {

admin/tool/behat/cli/util.php

@@ -58,6 +58,7 @@ list($options, $unrecognized) = cli_get_params(
         'optimize-runs' => '',
         'add-core-features-to-theme' => false,
         'axe'         => true,
+        'scss-deprecations' => false,
     ),
     array(
         'h' => 'help',
@@ -73,16 +74,18 @@ $help = "
 Behat utilities to manage the test environment
 
 Usage:
-  php util.php [--install|--drop|--enable|--disable|--diag|--updatesteps|--no-axe|--help] [--parallel=value [--maxruns=value]]
+  php util.php  [--install|--drop|--enable|--disable|--diag|--updatesteps|--no-axe|--scss-deprecations|--help]
+                [--parallel=value [--maxruns=value]]
 
 Options:
---install      Installs the test environment for acceptance tests
---drop         Drops the database tables and the dataroot contents
---enable       Enables test environment and updates tests list
---disable      Disables test environment
---diag         Get behat test environment status code
---updatesteps  Update feature step file.
---no-axe       Disable axe accessibility tests.
+--install           Installs the test environment for acceptance tests
+--drop              Drops the database tables and the dataroot contents
+--enable            Enables test environment and updates tests list
+--disable           Disables test environment
+--diag              Get behat test environment status code
+--updatesteps       Update feature step file.
+--no-axe            Disable axe accessibility tests.
+--scss-deprecations Enable SCSS deprecation checks.
 
 -j, --parallel Number of parallel behat run operation
 -m, --maxruns Max parallel processes to be executed at one time.

admin/tool/behat/cli/util_single_run.php

@@ -53,6 +53,7 @@ list($options, $unrecognized) = cli_get_params(
         'optimize-runs' => '',
         'add-core-features-to-theme' => false,
         'axe'         => true,
+        'scss-deprecations' => false,
     ),
     array(
         'h' => 'help',
@@ -73,13 +74,14 @@ Usage:
   php util_single_run.php [--install|--drop|--enable|--disable|--diag|--updatesteps|--help]
 
 Options:
---install        Installs the test environment for acceptance tests
---drop           Drops the database tables and the dataroot contents
---enable         Enables test environment and updates tests list
---disable        Disables test environment
---diag           Get behat test environment status code
---updatesteps    Update feature step file.
---no-axe         Disable axe accessibility tests.
+--install           Installs the test environment for acceptance tests
+--drop              Drops the database tables and the dataroot contents
+--enable            Enables test environment and updates tests list
+--disable           Disables test environment
+--diag              Get behat test environment status code
+--updatesteps       Update feature step file.
+--no-axe            Disable axe accessibility tests.
+--scss-deprecations Enable SCSS deprecation checks.
 
 -o, --optimize-runs Split features with specified tags in all parallel runs.
 -a, --add-core-features-to-theme Add all core features to specified theme's
@@ -189,6 +191,9 @@ if ($options['install']) {
     // Configure axe according to option.
     behat_config_manager::set_behat_run_config_value('axe', $options['axe']);
 
+    // Define whether to run Behat with SCSS deprecation checks.
+    behat_config_manager::set_behat_run_config_value('scss-deprecations', $options['scss-deprecations']);
+
     // Enable test mode.
     $timestart = microtime(true);
     mtrace('Creating Behat configuration ...', '');

lib/behat/classes/behat_session_trait.php

@@ -1007,6 +1007,35 @@ EOF;
         }
     }
 
+    /**
+     * Internal step definition to find deprecated styles.
+     *
+     * Part of behat_hooks class as is part of the testing framework, is auto-executed
+     * after each step so no features will splicitly use it.
+     *
+     * @throws Exception Unknown type, depending on what we caught in the hook or basic \Exception.
+     * @see Moodle\BehatExtension\Tester\MoodleStepTester
+     */
+    public function look_for_deprecated_styles() {
+        if (!behat_config_manager::get_behat_run_config_value('scss-deprecations')) {
+            return;
+        }
+
+        if (!$this->running_javascript()) {
+            return;
+        }
+
+        // Look for any DOM element with deprecated message in before pseudo-element.
+        $js = <<<EOF
+            [...document.querySelectorAll('*')].some(
+                el => window.getComputedStyle(el, ':before').content === '"Deprecated style in use"'
+            );
+        EOF;
+        if ($this->evaluate_script($js)) {
+            throw new \Exception(html_entity_decode("Deprecated style in use", ENT_COMPAT));
+        }
+    }
+
     /**
      * Converts HTML tags to line breaks to display the info in CLI
      *
@@ -1045,6 +1074,9 @@ EOF;
 
         // Look for exceptions.
         $this->look_for_exceptions();
+
+        // Look for deprecated styles.
+        $this->look_for_deprecated_styles();
     }
 
     /**

lib/behat/classes/util.php

@@ -512,10 +512,12 @@ class behat_util extends testing_util {
         $siteinfo = parent::get_site_info();
 
         $accessibility = empty(behat_config_manager::get_behat_run_config_value('axe')) ? 'No' : 'Yes';
+        $scssdeprecations = empty(behat_config_manager::get_behat_run_config_value('scss-deprecations')) ? 'No' : 'Yes';
 
         $siteinfo .= <<<EOF
 Run optional tests:
 - Accessibility: {$accessibility}
+- SCSS deprecations: {$scssdeprecations}
 
 EOF;
 

lib/pagelib.php

@@ -2116,6 +2116,10 @@ class moodle_page {
             $this->add_body_class($this->_devicetypeinuse . 'theme');
         }
 
+        if (!empty($CFG->themedesignermode)) {
+            $this->add_body_class('themedesignermode');
+        }
+
         // Add class for behat site to apply behat related fixes.
         if (defined('BEHAT_SITE_RUNNING')) {
             $this->add_body_class('behat-site');

theme/boost/scss/moodle.scss

@@ -52,3 +52,4 @@ $breadcrumb-divider-rtl: "◀" !default;
 @import "moodle/process-monitor";
 @import "moodle/moodlenet";
 @import "moodle/dropdown";
+@import "moodle/deprecated";

theme/boost/scss/moodle/course.scss

@@ -605,13 +605,6 @@ body:not(.editing)  .sitetopic ul.section {
     margin-left: 0;
 }
 
-.path-course-view li.activity form.togglecompletion .btn {
-    padding: 0;
-}
-.path-course-view li.activity form.togglecompletion img {
-    max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
-}
-
 .path-course-view {
     &.editing {
         li.activity span.autocompletion img {
@@ -622,15 +615,6 @@ body:not(.editing)  .sitetopic ul.section {
     }
 }
 
-.path-course-view li.activity form.togglecompletion .ajaxworking {
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    right: 22px;
-    top: 3px;
-    background: url([[pix:i/ajaxloader]]) no-repeat;
-}
-
 li.section.hidden span.commands a.editing_hide,
 li.section.hidden span.commands a.editing_show {
     cursor: default;

theme/boost/scss/moodle/deprecated.scss

@@ -0,0 +1,58 @@
+/**
+ Deprecations
+ */
+
+//
+// Deprecation mixin.
+//
+@mixin deprecated-styles() {
+    /* stylelint-disable declaration-no-important */
+    body.behat-site &,
+    body.behat-site#{&},
+    body.themedesignermode &,
+    body.themedesignermode#{&} {
+        outline: 3px dotted $red !important;
+        background-color: lighten($red, 50%) !important;
+        &::before {
+            content: "Deprecated style in use" !important;
+            color: $red !important;
+            font-size: smaller !important;
+        }
+    }
+    /* stylelint-enable */
+}
+
+//
+// Deprecated styles.
+//
+
+// All deprecated styles should include "deprecated-styles" mixin.
+// Example:
+// .foo {
+//     .bar {
+//         color: $blue;
+//         @include deprecated-styles();
+//     }
+//     color: $red;
+//     @include deprecated-styles();
+// }
+
+// The .togglecompletion usage was deprecated in 311 and finally removed in 403.
+// Replaced by core_renderer::activity_information() and proper use of templates.
+.path-course-view li.activity form.togglecompletion {
+    @include deprecated-styles();
+}
+.path-course-view li.activity form.togglecompletion .ajaxworking {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    right: 22px;
+    top: 3px;
+    background: url([[pix:i/ajaxloader]]) no-repeat;
+}
+.path-course-view li.activity form.togglecompletion .btn {
+    padding: 0;
+}
+.path-course-view li.activity form.togglecompletion img {
+    max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
+}

theme/boost/style/moodle.css

@@ -28459,29 +28459,12 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
   margin-left: 0;
 }
 
-.path-course-view li.activity form.togglecompletion .btn {
-  padding: 0;
-}
-
-.path-course-view li.activity form.togglecompletion img {
-  max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
-}
-
 .path-course-view.editing li.activity span.autocompletion img {
   /* Use the same spacing as the filler. */
   margin-right: 0.5rem;
   margin-left: 0.5rem;
 }
 
-.path-course-view li.activity form.togglecompletion .ajaxworking {
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  right: 22px;
-  top: 3px;
-  background: url([[pix:i/ajaxloader]]) no-repeat;
-}
-
 li.section.hidden span.commands a.editing_hide,
 li.section.hidden span.commands a.editing_show {
   cursor: default;
@@ -38804,6 +38787,44 @@ div.editor_atto_toolbar button .icon {
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 
+/**
+ Deprecations
+ */
+.path-course-view li.activity form.togglecompletion {
+  /* stylelint-disable declaration-no-important */
+  /* stylelint-enable */
+}
+body.behat-site .path-course-view li.activity form.togglecompletion,
+.path-course-view li.activity form.togglecompletion body.behat-site.path-course-view li.activity form.togglecompletion, body.themedesignermode .path-course-view li.activity form.togglecompletion,
+.path-course-view li.activity form.togglecompletion body.themedesignermode.path-course-view li.activity form.togglecompletion {
+  outline: 3px dotted #ca3120 !important;
+  background-color: #fceeed !important;
+}
+body.behat-site .path-course-view li.activity form.togglecompletion::before,
+.path-course-view li.activity form.togglecompletion body.behat-site.path-course-view li.activity form.togglecompletion::before, body.themedesignermode .path-course-view li.activity form.togglecompletion::before,
+.path-course-view li.activity form.togglecompletion body.themedesignermode.path-course-view li.activity form.togglecompletion::before {
+  content: "Deprecated style in use" !important;
+  color: #ca3120 !important;
+  font-size: smaller !important;
+}
+
+.path-course-view li.activity form.togglecompletion .ajaxworking {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  right: 22px;
+  top: 3px;
+  background: url([[pix:i/ajaxloader]]) no-repeat;
+}
+
+.path-course-view li.activity form.togglecompletion .btn {
+  padding: 0;
+}
+
+.path-course-view li.activity form.togglecompletion img {
+  max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
+}
+
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

theme/classic/style/moodle.css

@@ -28459,29 +28459,12 @@ body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
   margin-left: 0;
 }
 
-.path-course-view li.activity form.togglecompletion .btn {
-  padding: 0;
-}
-
-.path-course-view li.activity form.togglecompletion img {
-  max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
-}
-
 .path-course-view.editing li.activity span.autocompletion img {
   /* Use the same spacing as the filler. */
   margin-right: 0.5rem;
   margin-left: 0.5rem;
 }
 
-.path-course-view li.activity form.togglecompletion .ajaxworking {
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  right: 22px;
-  top: 3px;
-  background: url([[pix:i/ajaxloader]]) no-repeat;
-}
-
 li.section.hidden span.commands a.editing_hide,
 li.section.hidden span.commands a.editing_show {
   cursor: default;
@@ -38738,6 +38721,44 @@ div.editor_atto_toolbar button .icon {
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 
+/**
+ Deprecations
+ */
+.path-course-view li.activity form.togglecompletion {
+  /* stylelint-disable declaration-no-important */
+  /* stylelint-enable */
+}
+body.behat-site .path-course-view li.activity form.togglecompletion,
+.path-course-view li.activity form.togglecompletion body.behat-site.path-course-view li.activity form.togglecompletion, body.themedesignermode .path-course-view li.activity form.togglecompletion,
+.path-course-view li.activity form.togglecompletion body.themedesignermode.path-course-view li.activity form.togglecompletion {
+  outline: 3px dotted #ca3120 !important;
+  background-color: #fceeed !important;
+}
+body.behat-site .path-course-view li.activity form.togglecompletion::before,
+.path-course-view li.activity form.togglecompletion body.behat-site.path-course-view li.activity form.togglecompletion::before, body.themedesignermode .path-course-view li.activity form.togglecompletion::before,
+.path-course-view li.activity form.togglecompletion body.themedesignermode.path-course-view li.activity form.togglecompletion::before {
+  content: "Deprecated style in use" !important;
+  color: #ca3120 !important;
+  font-size: smaller !important;
+}
+
+.path-course-view li.activity form.togglecompletion .ajaxworking {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  right: 22px;
+  top: 3px;
+  background: url([[pix:i/ajaxloader]]) no-repeat;
+}
+
+.path-course-view li.activity form.togglecompletion .btn {
+  padding: 0;
+}
+
+.path-course-view li.activity form.togglecompletion img {
+  max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */
+}
+
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;