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
          after-patch-my-page.png
          71 kB
        2. after-patch-tenant-switch.png
          after-patch-tenant-switch.png
          73 kB
        3. Annotation 2020-08-07 185052.png
          Annotation 2020-08-07 185052.png
          10 kB
        4. Annotation 2020-08-10 164824.png
          Annotation 2020-08-10 164824.png
          3 kB
        5. Annotation 2020-08-11 115003.png
          Annotation 2020-08-11 115003.png
          19 kB
        6. Annotation 2020-08-12 152551.png
          Annotation 2020-08-12 152551.png
          4 kB
        7. Annotation 2020-08-13 115735.png
          Annotation 2020-08-13 115735.png
          21 kB
        8. Annotation 2020-08-13 120838.png
          Annotation 2020-08-13 120838.png
          71 kB
        9. before-patch-my-page.png
          before-patch-my-page.png
          147 kB
        10. before-patch-tenant-switch.png
          before-patch-tenant-switch.png
          65 kB
        11. image.png
          image.png
          10 kB
        12. Screenshot_1.png
          Screenshot_1.png
          101 kB
        13. Screenshot_2.png
          Screenshot_2.png
          155 kB
        14. Screenshot_3.png
          Screenshot_3.png
          94 kB
        15. Screenshot_4.png
          Screenshot_4.png
          55 kB
        16. show source maps.png
          show source maps.png
          1.30 MB

          Issue Links

            Activity

              People

              Assignee:
              basbrands Bas Brands
              Reporter:
              basbrands Bas Brands
              Peer reviewer:
              Gareth J Barnard
              Integrator:
              Andrew Nicols
              Tester:
              Janelle Barcega
              Participants:
              Component watchers:
              Bas Brands
              Votes:
              5 Vote for this issue
              Watchers:
              6 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