Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-66999

Misuse of @extend in SCSS

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 3.6.6, 3.7.2, 3.8
    • Fix Version/s: 3.9
    • Component/s: Themes
    • Labels:
    • Testing Instructions:
      Hide

      MDL-66999 tests

      Please test these steps in both themes Classic and Boost

      1. changes for @extend .text-muted

      1. Login as admin
      2. Navigate to Site Administration > Plugins > Plugin overview
      3. Verify the plugin component names are displayed in a lighter shade of gray as shown in this screenshot

      2. changes for @extend .small

      1. Navigate to Site Administration
      2. In the search box type “experimental”
      3. Verify the Setting path “Administration / Development / Experimental / Experimental settings” is displayed in a small, light-gray type

      3. removed .form-control-danger from maintenance mode

      1. Open a terminal and go to the Moodle installation's root directory.
      2. Enter the following command:
        php admin/cli/maintenance.php --enablelater=1
      3. Navigate to your Moodle homepage
      4. Verify you see this maintenance message with a warning style
      5. Turn off maintenance mode by typing
        php admin/cli/maintenance.php --disable

      4. Replace .form-overridden with .alert

      1. Open your Moodle config.php in an editor
      2. After “$CFG->admin = ‘admin’” add a new line and add
        $CFG->debugdisplay = 1;
      3. Navigate to Site Administration > Development > Debugging
      4. Verify you see the message “Defined in config.php” in an alert style just below “Display debug messages”

      5. .table-warning classes

      1. As admin in a course navigate to Administration/Course administration/Users/Permissions
      2. Choose a role to override from the Advanced role override select drop-down
      3. Click a radio button (other than Inherit) for at least one capability
      4. Press the 'Save changes' button
      5. Again choose the same role from the Advanced role override select drop-down
      6. You should now see a background highlighted colour for the selected capability or capabilities you changed from 'Inherit'

      6 Extend .col-xs classes

      1. Create a new calendar event in the calendar
      2. Create a new event of type Site and name “Test Event”
      3. Click the new event in the calender
      4. Verify the modal showing the event show icons left of the event date and type

      7 Extend .btn-block

      1. As admin navigate to Site Administration > Users > Permissions > Site administrators
      2. Verify the “Add” and Remove” buttons look similar to the screenshot below

      8 Remove .h2 from calendar current

      1. Navigate to the Moodle calendar
      2. Verify the current month name is styles as a h2

      9 Replace .p0 from chat

      1. As admin in a course create a new chat
      2. Open the chat and look at the input field
      3. Verify the input field looks similar to this

      10 .text-warning and related

      1. Open a file manager and go to the Moodle installation's root directory.
      2. Open the blocks folder
      3. Rename the folder tags to tags_moved
      4. As admin navigate to Site Administration > Plugins > Blocks > Manage blocks
      5. Find the tags block
      6. Verify you see “tags (Missing from disk) in the orange warning color
      7. Go back to your file manager and rename tags_moved to tags

      11 .modal styles YUI modals

      1. Edit your moodle profile
      2. Scroll down to the Description form field and click the Image icon on the Atto toolbar
      3. Verify the “Image properties” Modal looks similar to the screenshot below

      12 Use .table classes in the badges renderer

      1. As admin create 2 new enabled system badges that can be awarded by a teacher
      2. Navigate to url badges/view.php?type=1
      3. Verify the 2 new badges are listed in a table styled like the screenshot below

      13 Filepicker display buttons

      1. Navigate to your private files
      2. Click the “Add files” icon in the file field
      3. In the opened filepicker click the “Recent files” link
      4. Verify the top right display buttons are styled similar to this
      5. Verify the active view “Display folder with file icons” is a shade darker when active

      14 form styles

      1. As an admin create a new forum in a course
      2. In the forum settings page in section “Whole forum grading” choose grade type “point” and grading method “marking guide”
      3. Save changes and step through the “marking guide creation form
      4. Go to the course participants page and enrol a test user
      5. Login as this user and add a posting to the forum
      6. Log back in as admin
      7. Navigate back to your forum and click the Grade users button
      8. Verify the page looks similar to this

      15 Remove extends for tables

      1. As admin navigate to any of these pages and verify the tables are striped
      2. Site Administration > Development > XMLDB editor (striped and small)
      3. Site Administration > Users > Permissions > Define roles : click the cog icon for a role (striped and small)
      4. Site Administration > Reports > Logs : click “Get these logs” (striped and small)

      16 Remove extends for grading

      1. As an admin create a new forum in a course
      2. In the forum settings page in section “Whole forum grading” choose grade type “point” and grading method “rubric”
      3. Click save and display
      4. The next page should be the “Advanced grading page”
      5. Verify you see large buttons on the page styled like this

      1. Continue this test and click on the “Define new grading form.. “ button
      2. In the “Define rubrick” page scroll down untill you see the “Add criterion” button
      3. Verify it looks similar to this

      17 Remove extends for questions

      1. As an admin create a new quiz in a course
      2. add one question in the quiz
      3. As a student attempt the quiz
      4. As a teacher mark the student in the quiz
      5. When marking the student add a comment
      6. Verify the answer, comment and response history boxes look similar to this

      18 User styles

      1. As admin navigate to a course
      2. Create a course group and add a test user to the group, make sure the group has a description
      3. Navigate to the course participants page
      4. In the Filter dropdown select your group
      5. Verify you see the group description in a container box

      19 remove extends from bs2compate

      1. No tests needed, these styles are not used but available for legacy themes

      20 phpunittest

      1. Run the php unit tests and verify the results are okay
      2. vendor/bin/phpunit --verbose "qbehaviour_adaptive_mark_display_test" question/behaviour/adaptive/tests/mark_display_test.php

       

      Show
      MDL-66999 tests Please test these steps in both themes Classic and Boost 1. changes for @extend .text-muted Login as admin Navigate to Site Administration > Plugins > Plugin overview Verify the plugin component names are displayed in a lighter shade of gray as shown in this screenshot 2. changes for @extend .small Navigate to Site Administration In the search box type “experimental” Verify the Setting path “Administration / Development / Experimental / Experimental settings” is displayed in a small, light-gray type 3. removed .form-control-danger from maintenance mode Open a terminal and go to the Moodle installation's root directory. Enter the following command: php admin/cli/maintenance.php --enablelater=1 Navigate to your Moodle homepage Verify you see this maintenance message with a warning style Turn off maintenance mode by typing php admin/cli/maintenance.php --disable 4. Replace .form-overridden with .alert Open your Moodle config.php in an editor After “$CFG->admin = ‘admin’” add a new line and add $CFG->debugdisplay = 1; Navigate to Site Administration > Development > Debugging Verify you see the message “Defined in config.php” in an alert style just below “Display debug messages” 5. .table-warning classes As admin in a course navigate to Administration/Course administration/Users/Permissions Choose a role to override from the Advanced role override select drop-down Click a radio button (other than Inherit) for at least one capability Press the 'Save changes' button Again choose the same role from the Advanced role override select drop-down You should now see a background highlighted colour for the selected capability or capabilities you changed from 'Inherit' 6 Extend .col-xs classes Create a new calendar event in the calendar Create a new event of type Site and name “Test Event” Click the new event in the calender Verify the modal showing the event show icons left of the event date and type 7 Extend .btn-block As admin navigate to Site Administration > Users > Permissions > Site administrators Verify the “Add” and Remove” buttons look similar to the screenshot below 8 Remove .h2 from calendar current Navigate to the Moodle calendar Verify the current month name is styles as a h2 9 Replace .p0 from chat As admin in a course create a new chat Open the chat and look at the input field Verify the input field looks similar to this 10 .text-warning and related Open a file manager and go to the Moodle installation's root directory. Open the blocks folder Rename the folder tags to tags_moved As admin navigate to Site Administration > Plugins > Blocks > Manage blocks Find the tags block Verify you see “tags (Missing from disk) in the orange warning color Go back to your file manager and rename tags_moved to tags 11 .modal styles YUI modals Edit your moodle profile Scroll down to the Description form field and click the Image icon on the Atto toolbar Verify the “Image properties” Modal looks similar to the screenshot below 12 Use .table classes in the badges renderer As admin create 2 new enabled system badges that can be awarded by a teacher Navigate to url badges/view.php?type=1 Verify the 2 new badges are listed in a table styled like the screenshot below 13 Filepicker display buttons Navigate to your private files Click the “Add files” icon in the file field In the opened filepicker click the “Recent files” link Verify the top right display buttons are styled similar to this Verify the active view “Display folder with file icons” is a shade darker when active 14 form styles As an admin create a new forum in a course In the forum settings page in section “Whole forum grading” choose grade type “point” and grading method “marking guide” Save changes and step through the “marking guide creation form Go to the course participants page and enrol a test user Login as this user and add a posting to the forum Log back in as admin Navigate back to your forum and click the Grade users button Verify the page looks similar to this 15 Remove extends for tables As admin navigate to any of these pages and verify the tables are striped Site Administration > Development > XMLDB editor (striped and small) Site Administration > Users > Permissions > Define roles : click the cog icon for a role (striped and small) Site Administration > Reports > Logs : click “Get these logs” (striped and small) 16 Remove extends for grading As an admin create a new forum in a course In the forum settings page in section “Whole forum grading” choose grade type “point” and grading method “rubric” Click save and display The next page should be the “Advanced grading page” Verify you see large buttons on the page styled like this Continue this test and click on the “Define new grading form.. “ button In the “Define rubrick” page scroll down untill you see the “Add criterion” button Verify it looks similar to this 17 Remove extends for questions As an admin create a new quiz in a course add one question in the quiz As a student attempt the quiz As a teacher mark the student in the quiz When marking the student add a comment Verify the answer, comment and response history boxes look similar to this 18 User styles As admin navigate to a course Create a course group and add a test user to the group, make sure the group has a description Navigate to the course participants page In the Filter dropdown select your group Verify you see the group description in a container box 19 remove extends from bs2compate No tests needed, these styles are not used but available for legacy themes 20 phpunittest Run the php unit tests and verify the results are okay vendor/bin/phpunit --verbose "qbehaviour_adaptive_mark_display_test" question/behaviour/adaptive/tests/mark_display_test.php  
    • Affected Branches:
      MOODLE_36_STABLE, MOODLE_37_STABLE, MOODLE_38_STABLE
    • Fixed Branches:
      MOODLE_39_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-66999-master

      Description

      Partially covered in MDL-58930, but others too.

      We are mis-using @extend and it's causing us issues in our compilation time.

      https://webinista.com/updates/dont-use-extend-sass/ explains it a little

        Attachments

        1. 10 - Replace text colors.png
          10 - Replace text colors.png
          671 kB
        2. 11 - YUI modal.png
          11 - YUI modal.png
          631 kB
        3. 12 - Table classes for badges.png
          12 - Table classes for badges.png
          755 kB
        4. 13 - Filepicker display buttons.png
          13 - Filepicker display buttons.png
          574 kB
        5. 14 - forum grading.png
          14 - forum grading.png
          617 kB
        6. 15 - remove extends tables.png
          15 - remove extends tables.png
          716 kB
        7. 16-2 add criterion button.png
          16-2 add criterion button.png
          677 kB
        8. 16 - advanced grading buttons.png
          16 - advanced grading buttons.png
          653 kB
        9. 17 - questions.png
          17 - questions.png
          636 kB
        10. 18 - user styles.png
          18 - user styles.png
          631 kB
        11. 1 - text-muted.png
          1 - text-muted.png
          668 kB
        12. 2 - small.png
          2 - small.png
          615 kB
        13. 3 - maintenance.png
          3 - maintenance.png
          608 kB
        14. 4 - form-overridden.png
          4 - form-overridden.png
          755 kB
        15. 5 - table-warning.png
          5 - table-warning.png
          721 kB
        16. 6 - col-xs classes.png
          6 - col-xs classes.png
          603 kB
        17. 7 - btn-block.png
          7 - btn-block.png
          643 kB
        18. 8 - h2 calendar.png
          8 - h2 calendar.png
          611 kB
        19. 9 - Replace p0 chat.png
          9 - Replace p0 chat.png
          366 kB
        20. MDL-66999_boost.jpg
          MDL-66999_boost.jpg
          1004 kB
        21. MDL-66999_classic.jpg
          MDL-66999_classic.jpg
          1.11 MB
        22. Screen Shot 2016-09-29 at 11.39.44.png
          Screen Shot 2016-09-29 at 11.39.44.png
          233 kB

          Issue Links

            Activity

              People

              Assignee:
              basbrands Bas Brands
              Reporter:
              dobedobedoh Andrew Nicols
              Peer reviewer:
              Mathew May
              Integrator:
              Adrian Greeve
              Tester:
              Ferran Recio
              Participants:
              Component watchers:
              Bas Brands
              Votes:
              0 Vote for this issue
              Watchers:
              9 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                15/Jun/20

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 week, 1 hour, 1 minute
                  1w 1h 1m