MDL-84867 tool_behat: Improve SCSS deprecation failure information

- Improve SCSS deprecated-styles @mixin to receive a paramenter of the
  deprecated selector.
- Update all the current deprecated styles that are using deprecated-styles @mixin
  to include the deprecated selector as parameter.
- Improve the 'look_for_deprecated_styles' behat function.

lib/behat/classes/behat_session_trait.php

@@ -1038,14 +1038,25 @@ EOF;
             return;
         }
 
-        // Look for any DOM element with deprecated message in before pseudo-element.
+        // Look for DOM elements with deprecated message in before pseudo-element.
         $js = <<<EOF
-            [...document.querySelectorAll('*')].some(
-                el => window.getComputedStyle(el, ':before').content === '"Deprecated style in use"'
-            );
+            [...document.querySelectorAll('*')].flatMap(el => {
+                const beforeContent = window.getComputedStyle(el, ':before').content;
+                if (beforeContent.startsWith('"Deprecated style in use')) {
+                    const deprecatedClass = beforeContent.match(/\(([^)]+)\)/)?.[1] ?? 'unknown';
+                    return [deprecatedClass + ' (found in: ' + el.classList + ')'];
+                }
+                return [];
+            });
         EOF;
-        if ($this->evaluate_script($js)) {
-            throw new \Exception(html_entity_decode("Deprecated style in use", ENT_COMPAT));
+
+        $deprecations = $this->evaluate_script($js);
+        if ($deprecations) {
+            $deprecationdata = "Deprecated styles found:\n";
+            foreach ($deprecations as $deprecation) {
+                $deprecationdata .= "  {$deprecation}\n";
+            }
+            throw new \Exception(html_entity_decode($deprecationdata, ENT_COMPAT));
         }
     }
 

theme/boost/scss/moodle/deprecated.scss

@@ -5,7 +5,7 @@
 //
 // Deprecation mixin.
 //
-@mixin deprecated-styles() {
+@mixin deprecated-styles($deprecatedrule) {
     /* stylelint-disable declaration-no-important */
     body.behat-site &,
     body.behat-site#{&},
@@ -14,7 +14,7 @@
         outline: 3px dotted $red !important;
         background-color: lighten($red, 50%) !important;
         &::before {
-            content: "Deprecated style in use" !important;
+            content: "Deprecated style in use (#{$deprecatedrule})" !important;
             color: $red !important;
             font-size: smaller !important;
         }
@@ -44,7 +44,7 @@
 // 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();
+    @include deprecated-styles(".togglecompletion");
 }
 .path-course-view li.activity form.togglecompletion .ajaxworking {
     width: 16px;

theme/boost/style/moodle.css

@@ -38769,7 +38769,7 @@ body.behat-site .path-course-view li.activity form.togglecompletion,
 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;
+  content: "Deprecated style in use (.togglecompletion)" !important;
   color: #ca3120 !important;
   font-size: smaller !important;
 }

theme/classic/style/moodle.css

@@ -38703,7 +38703,7 @@ body.behat-site .path-course-view li.activity form.togglecompletion,
 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;
+  content: "Deprecated style in use (.togglecompletion)" !important;
   color: #ca3120 !important;
   font-size: smaller !important;
 }