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

Improve theme designer mode - part 2

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Please test this using the Classic and Boost theme 

      Test source maps

       

      1. Login as admin
      2. Navigate to Site Administration > Appearance > Themes > Theme settings
      3. Check the themedesignermode radio
      4. Save changes
      5. Right click any element on the page and click "Inspect"
      6. Verify you see the names of scss files in the styles section of your browsers inspect window
      7. Click the name of the styles file
      8. Verify the browser shows the contents of the scss file

      Test prefixes removal

      1. Navigate to your profile
      2. Click the Edit profile link
      3. Verify the select for field "Email display" looks okay.

      Test performance

      1. Navigate to various pages in Moodle
      2. Verify loading pages is quicker with this patch (it should be more than 50% faster)

      Test changing Scss values

      For this test you will need to be able to edit Moodle's source files

      1. Navigate to the Moodle homepage
      2. Open file theme/boost/scss/moodle/drawer.scss
      3. On line 42 change the background color of the drawer to "#000"
      4. Reload the page
      5. Verify the navdrawer background color is now black

      [data-region="drawer"] {
          background-color: #000;
      }
      

      Show
      Please test this using the Classic and Boost theme  Test source maps   Login as admin Navigate to Site Administration > Appearance > Themes > Theme settings Check the themedesignermode radio Save changes Right click any element on the page and click "Inspect" Verify  you see the names of scss files in the styles section of your browsers inspect window Click the name of the styles file Verify  the browser shows the contents of the scss file Test prefixes removal Navigate to your profile Click the Edit profile link Verify the select for field "Email display" looks okay. Test performance Navigate to various pages in Moodle Verify loading pages is quicker with this patch (it should be more than 50% faster) Test changing Scss values For this test you will need to be able to edit Moodle's source files Navigate to the Moodle homepage Open file theme/boost/scss/moodle/drawer.scss On line 42 change the background color of the drawer to "#000" Reload the page Verify the navdrawer background color is now black [data-region= "drawer" ] { background-color: # 000 ; }
    • Affected Branches:
      MOODLE_310_STABLE, MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_310_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-69117-master-2

      Description

      MDL-67689 changed the way scssphp cached files which improved the performance when theme designer mode is turned on.

      After this change theme designer mode is still slow because of the use of a browser prefixes.

      And to make using the browser inspector more user-friendly scss source maps should be added.

        Attachments

        1. after-patch-my-page.png
          71 kB
          Hittesh Ahuja
        2. after-patch-tenant-switch.png
          73 kB
          Hittesh Ahuja
        3. Annotation 2020-08-07 185052.png
          10 kB
          Gareth J Barnard
        4. Annotation 2020-08-10 164824.png
          3 kB
          Gareth J Barnard
        5. Annotation 2020-08-11 115003.png
          19 kB
          Gareth J Barnard
        6. Annotation 2020-08-12 152551.png
          4 kB
          Gareth J Barnard
        7. Annotation 2020-08-13 115735.png
          21 kB
          Gareth J Barnard
        8. Annotation 2020-08-13 120838.png
          71 kB
          Gareth J Barnard
        9. before-patch-my-page.png
          147 kB
          Hittesh Ahuja
        10. before-patch-tenant-switch.png
          65 kB
          Hittesh Ahuja
        11. image.png
          10 kB
          Bas Brands
        12. Screenshot_1.png
          101 kB
          Janelle Barcega
        13. Screenshot_2.png
          155 kB
          Janelle Barcega
        14. Screenshot_3.png
          94 kB
          Janelle Barcega
        15. Screenshot_4.png
          55 kB
          Janelle Barcega
        16. show source maps.png
          1.30 MB
          Bas Brands

          Issue Links

            Activity

              People

              Assignee:
              basbrands Bas Brands
              Reporter:
              basbrands Bas Brands
              Peer reviewer:
              Gareth J Barnard Gareth J Barnard
              Integrator:
              Andrew Lyons Andrew Lyons
              Tester:
              Janelle Barcega Janelle Barcega
              Participants:
              Component watchers:
              Huong Nguyen, Bas Brands, Mathew May
              Votes:
              5 Vote for this issue
              Watchers:
              7 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                9/Nov/20

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 2 days, 3 hours, 12 minutes
                  2d 3h 12m