Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core][Drawer] Refactor getScrollbarSize usages #43828

Merged
merged 4 commits into from
Sep 24, 2024

Conversation

BrianWoolfolk
Copy link
Contributor

@BrianWoolfolk BrianWoolfolk commented Sep 20, 2024

Fixes #43827

Refactors all usages of getScrollbarSize function, as mentioned the previous issue.

The main change was making the function to use Window instead of Document (and also consider using the main window as its default).

Then changing every invocation as one of the following:

  • getScrollbarSize(document) -> getScrollbarSize(window).
  • getScrollbarSize(ownerDocument(<NODE>)) -> getScrollbarSize(ownerWindow(<NODE>)).

@mui-bot
Copy link

mui-bot commented Sep 20, 2024

Netlify deploy preview

https://deploy-preview-43828--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 3f8687a

@BrianWoolfolk
Copy link
Contributor Author

It seems that I'm not able to add a label nor to take a decision for the @argos-ci check, could someone help me out here?

@BrianWoolfolk
Copy link
Contributor Author

BrianWoolfolk commented Sep 20, 2024

When working on this, I found a little inconsistency with function ownerWindow() regarding not being able to use ownerWindow(document) as a shorthand for document.defaultView, because it would get document.ownerDocument which is null, then grabbing the main document as default (maybe a bug if we're inside an iframe).

export default function ownerWindow(node: Node | undefined): Window {
  // NOTE: Just a concept, TS doesn't like this!
  // Check if node is document element
  if (node && node.defaultView) {
    return node.defaultView || window;
  }

  // node is not document
  const doc = ownerDocument(node);
  return doc.defaultView || window;
}

It might not be a big issue, but I found it odd to do:

  • getScrollbarSize(document.defaultView || window) with "document", instead of
  • getScrollbarSize(ownerWindow(<NODE>)) as we do with any other Node.

I might be going through a rabbit hole here, but I think this could do for another refactoring issue.

@Janpot Janpot added the component: modal This is the name of the generic UI component, not the React module! label Sep 22, 2024
@@ -63,7 +63,7 @@ describe('<MenuList />', () => {
});

describe('actions: adjustStyleForScrollbar', () => {
const expectedPadding = `${getScrollbarSize(document)}px`;
const expectedPadding = `${getScrollbarSize(document.defaultView)}px`;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe for those tests, the following could be in order:

Suggested change
const expectedPadding = `${getScrollbarSize(document.defaultView)}px`;
const expectedPadding = `${getScrollbarSize(window)}px`;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, didn't see it at first, but makes sense. It would also remove the need of checking for null in the function. I'll make a commit

@@ -1,7 +1,10 @@
// A change of the browser zoom change the scrollbar size.
// Credit https://github.com/twbs/bootstrap/blob/488fd8afc535ca3a6ad4dc581f5e89217b6a36ac/js/src/util/scrollbar.js#L14-L18
export default function getScrollbarSize(doc: Document): number {
export default function getScrollbarSize(win?: Window | null): number {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
export default function getScrollbarSize(win?: Window | null): number {
export default function getScrollbarSize(win: Window = window): number {

win = window;
}
const documentWidth = win.document.documentElement.clientWidth;
return Math.abs(win.innerWidth - documentWidth);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could remove the abs here as per #43827 (comment)

Suggested change
return Math.abs(win.innerWidth - documentWidth);
return win.innerWidth - documentWidth;

// https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
const documentWidth = doc.documentElement.clientWidth;
return Math.abs(doc.defaultView!.innerWidth - documentWidth);
if (!win) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be removed

Copy link
Member

@Janpot Janpot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@Janpot Janpot merged commit 5c0aeb6 into mui:master Sep 24, 2024
19 checks passed
@oliviertassinari oliviertassinari added the core Infrastructure work going on behind the scenes label Oct 2, 2024
@oliviertassinari oliviertassinari changed the title [material-ui][Drawer] Refactor getScrollbarSize usages [core][Drawer] Refactor getScrollbarSize usages Oct 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: modal This is the name of the generic UI component, not the React module! core Infrastructure work going on behind the scenes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[core] Refactor getScrollbarSize to operate on window instead of document
4 participants