Verified Commit 8149f97c authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3351356 by bnjmnm, longwave, dww, jan kellermann, smustgrave: Reduce... 

Issue #3351356 by bnjmnm, longwave, dww, jan kellermann, smustgrave: Reduce toolbar user button related browser reflow
parent a56ce007

core/modules/toolbar/js/toolbar.js

+2 −0
Original line number Diff line number Diff line
@@ -238,6 +238,7 @@ 
        Drupal.toolbar.models.toolbarModel.on(

          'change:activeTab change:orientation change:isOriented change:isTrayToggleVisible change:offsets',

          function () {

            const userButton = document.querySelector('#toolbar-item-user');

            const hasActiveTab = !!$(this.get('activeTab')).length > 0;

            const previousToolbarState = sessionStorage.getItem(

              'Drupal.toolbar.toolbarState',
@@ -255,6 +256,7 @@ 
              activeTray: $(this.get('activeTab')).attr('data-toolbar-tray'),

              isOriented: this.get('isOriented'),

              isFixed: this.get('isFixed'),

              userButtonMinWidth: userButton ? userButton.clientWidth : 0,

            };

            // Store toolbar UI state in session storage, so it can be accessed

            // by JavaScript that executes before the first paint.

core/modules/toolbar/tests/src/FunctionalJavascript/ToolbarStoredStateTest.php

+8 −0
Original line number Diff line number Diff line
@@ -54,6 +54,14 @@ public function testToolbarStoredState() { 
      $this->getSession()->evaluateScript("sessionStorage.getItem('Drupal.toolbar.toolbarState')")

    );



    // The userButtonMinWidth property will differ depending on the length of

    // the test-generated username, so it is checked differently and the value

    // is copied to the expected value array.

    $this->assertNotNull($toolbar_stored_state['userButtonMinWidth']);

    $this->assertIsNumeric($toolbar_stored_state['userButtonMinWidth']);

    $this->assertGreaterThan(60, $toolbar_stored_state['userButtonMinWidth']);

    $expected['userButtonMinWidth'] = $toolbar_stored_state['userButtonMinWidth'];



    $this->assertSame($expected, $toolbar_stored_state);



    $page->clickLink('toolbar-item-user');

core/modules/toolbar/toolbar.module

+7 −0
Original line number Diff line number Diff line
@@ -76,6 +76,7 @@ function toolbar_page_attachments(array &$page) { 
      activeTray,

      activeTabId,

      isOriented,

      userButtonMinWidth

    } = toolbarState;



    classesToAdd.push(
@@ -114,6 +115,12 @@ classesToAdd.push('toolbar-oriented'); 
      style.textContent = styleContent;

      style.setAttribute('data-toolbar-anti-flicker-loading', true);

      document.querySelector('head').appendChild(style);



      if (userButtonMinWidth) {

        const userButtonStyle = document.createElement('style');

        userButtonStyle.textContent = `#toolbar-item-user {min-width: ` + userButtonMinWidth +`px;}`

        document.querySelector('head').appendChild(userButtonStyle);

      }

    }

  }

  document.querySelector('html').classList.add(...classesToAdd);