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

Improve theme designer mode - part2

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Waiting for peer review
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.9
    • Fix Version/s: None
    • Component/s: Themes
    • Labels:
    • 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

      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 "#F00"
      4. Reload the page
      5. Verify the navdrawer background color is now red

      [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 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 "#F00" Reload the page Verify the navdrawer background color is now red [data-region= "drawer" ] { background-color: # 000 ; }
    • Affected Branches:
      MOODLE_39_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-69117-master

      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

          Issue Links

            Activity

              People

              Assignee:
              Unassigned
              Reporter:
              basbrands Bas Brands
              Participants:
              Component watchers:
              Bas Brands
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated:

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 2 days
                  2d