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

Add throttle to the course page scroll event handling and prevent unnecessary updates

XMLWordPrintable

    • MOODLE_500_STABLE
    • MOODLE_500_STABLE
    • MDL-83673-main
    • Hide

      Prepare the scenario:

      1. Login as admin
      2. Enable developer debug: go to "site administration -> developer -> debugging" and set debug messages to DEVELOPER
      3. Create a course with enough activities and sections to have at least two pages of scroll. You can use the make test course tool: php admin/tool/generator/cli/maketestcourse.php --size=S --shortname=MDL-83673-test
      4. Go to the course
      5. In the page footer, click on the "CourseEditor%" button to open de reactive debug panel.
      6. Click the "Unpin" button on the reactive debug panel to scroll the page and keep the panel visible. Scale the panel a big because you will need to the "state events log"
      7. Open the course index

      Test scroll:

      1. Go to the top of the course page
        1. Check the General section is highlighted in the course index.
      2. Click the "Reset panel" button to clean the "state events log"
        1. Check the state events log is empty
      3. Scroll down just a few pixels. Scrolling down just a few lines is important because the highlighted element in the course index must remain in the general section.
        1. Check the state events log remains empty.
      4. Scroll down slowly until the highlighted element in the course index change.
        1. Check is only one "= Transaction =" line in the state events log.
      Show
      Prepare the scenario: Login as admin Enable developer debug: go to "site administration -> developer -> debugging" and set debug messages to DEVELOPER Create a course with enough activities and sections to have at least two pages of scroll. You can use the make test course tool: php admin/tool/generator/cli/maketestcourse.php --size=S --shortname= MDL-83673 -test Go to the course In the page footer, click on the "CourseEditor%" button to open de reactive debug panel. Click the "Unpin" button on the reactive debug panel to scroll the page and keep the panel visible. Scale the panel a big because you will need to the "state events log" Open the course index Test scroll: Go to the top of the course page Check the General section is highlighted in the course index. Click the "Reset panel" button to clean the "state events log" Check the state events log is empty Scroll down just a few pixels. Scrolling down just a few lines is important because the highlighted element in the course index must remain in the general section. Check the state events log remains empty. Scroll down slowly until the highlighted element in the course index change. Check is only one "= Transaction =" line in the state events log.
    • Hide

      Code verified against automated checks.

      Checked MDL-83673 using repository: https://github.com/ferranrecio/moodle.git

      More information about this report

      Built on: Mon 09 Dec 2024 10:43:51 AM UTC

      Show
      Code verified against automated checks. Checked MDL-83673 using repository: https://github.com/ferranrecio/moodle.git main (0 errors / 0 warnings) [branch: MDL-83673-main | CI Job ] More information about this report Built on: Mon 09 Dec 2024 10:43:51 AM UTC
    • Hide

      Launching automatic jobs for branch MDL-83673-main

      Built on: Mon Dec 9 10:25:56 AM UTC 2024

      Show
      Launching automatic jobs for branch MDL-83673 -main https://ci.moodle.org/view/Testing/job/DEV.02%20-%20Developer-requested%20PHPUnit/17665/ PHPUnit (sqlsrv) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/60178/ Behat (NonJS - boost and classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/60179/ Behat (Firefox - boost) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/60180/ Behat (Firefox - classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/60181/ App tests (stable app version) Built on: Mon Dec 9 10:25:56 AM UTC 2024
    • 2
    • HQ 2024 Sprint I4.2 Moppies

      The course page has a scroll spy to highlight the current element in the course index.

      The logic is implemented in course/format/amd/src/local/content.js

      However, the module adds this._scrollHandler directly means the scroll callback is called several times when the user scrolls. Instead, it should wrap the function using the core/utils throttle function to prevent unnecessary calls and accelerate the page.

      Also, thanks to MDL-83658 noticed that the page item is updated on every scroll change, even when the value is unchanged. This issue should also update the state only when the page item changes. This is obvious using the reactive debug panel log.

        1. MDL-83673.png
          MDL-83673.png
          481 kB

            tusefomal Ferran Recio
            tusefomal Ferran Recio
            Laurent David Laurent David
            Amaia Anabitarte Amaia Anabitarte
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 7 hours, 8 minutes
                7h 8m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.