Skip to content

core(page-functions): don't try to clone a ShadowRoot #9079

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.

Sign up for GitHub

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

Merged
patrickhulce merged 9 commits into from
Jun 7, 2019
Merged

core(page-functions): don't try to clone a ShadowRoot #9079

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a5f9343
#9048 Fix Avoid an excess DOM size error
NickolasBenakis May 29, 2019
5de9be9
bug-fix: Avoid an excess DOM size error #9079
NickolasBenakis May 29, 2019
bf80f17
bug-fix: Avoid an excess DOM size error #9079
NickolasBenakis May 29, 2019
f34fd58
updates
patrickhulce May 31, 2019
51449a0
fix tests I broke
patrickhulce May 31, 2019
a1528b6
Add test for nodes that cannot be inspected
NickolasBenakis Jun 1, 2019
13d4753
Update lighthouse-core/lib/page-functions.js
NickolasBenakis Jun 4, 2019
29b209d
Update lighthouse-core/test/lib/page-functions-test.js
NickolasBenakis Jun 4, 2019
cbd0e48
ShadowRoot
brendankenny Jun 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions lighthouse-core/lib/page-functions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,18 +113,20 @@ function getElementsInDocument(selector) {
*/
/* istanbul ignore next */
function getOuterHTMLSnippet(element, ignoreAttrs = []) {
const clone = element.cloneNode();

ignoreAttrs.forEach(attribute =>{
clone.removeAttribute(attribute);
});

const reOpeningTag = /^[\s\S]*?>/;
const match = clone.outerHTML.match(reOpeningTag);

return (match && match[0]) || '';
try {
const clone = element.cloneNode();
ignoreAttrs.forEach(attribute =>{
clone.removeAttribute(attribute);
Copy link
Contributor

@brendankenny brendankenny Jun 3, 2019

Choose a reason for hiding this comment

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

the types on this whole function get kind of broken if we aren't really accepting just Element.

removeAttribute and outerHTML (and more or less localName) exist only on Element.

Maybe we should type it as @param {Element|ShadowRoot} element and (if we don't need that localName check) have the conditional be just if (element instanceof ShadowRoot) element = element.host; (with a comment somewhere explaining that this function handles the ShadowRoot case).

It's still playing a little fast and loose with types (it doesn't help that the tsc built in types don't recognize ShadowRoot as a global value), but it simplifies things a bit.

});
const reOpeningTag = /^[\s\S]*?>/;
const match = clone.outerHTML.match(reOpeningTag);
return (match && match[0]) || '';
} catch (error) {
Copy link
Collaborator

@patrickhulce patrickhulce May 29, 2019

Choose a reason for hiding this comment

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

Suggested change
} catch (error) {
} catch (_) {

we name our unused variables _ :)

return element.localName;
Copy link
Collaborator

@patrickhulce patrickhulce May 29, 2019

Choose a reason for hiding this comment

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

Suggested change
return element.localName;
return `<${element.localName}>`;

Copy link
Collaborator

@patrickhulce patrickhulce May 29, 2019

Choose a reason for hiding this comment

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

just to match the expected output of this function under normal conditions

Copy link
Contributor Author

@NickolasBenakis NickolasBenakis May 29, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

Thanks a lot for the feedback @patrickhulce .
I 'll remove it , my bad.
I am checking the a11y tester case now, I 've never done this before :)
But I am trying to figure out

Copy link
Contributor Author

@NickolasBenakis NickolasBenakis May 30, 2019

Choose a reason for hiding this comment

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

image
It seems that it pass,
but I didnt add any error-prone element inside the a11y_tester.html.

Copy link
Collaborator

@patrickhulce patrickhulce May 30, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

That's expected :)

Steps:

  1. Run yarn smoke a11y, it should pass (you've already done this ✅)
  2. Temporarily comment out your fix
  3. Add an error-prone element inside a11y_tester.html
  4. Run yarn smoke a11y, it should fail
  5. Uncomment your fix
  6. Run yarn smoke a11y, it should pass
  7. Commit the changes! 🎉

Copy link
Contributor Author

@NickolasBenakis NickolasBenakis May 31, 2019

Choose a reason for hiding this comment

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

you mean something like this?

Copy link
Contributor Author

@NickolasBenakis NickolasBenakis May 31, 2019

Choose a reason for hiding this comment

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

image

Copy link
Contributor Author

@NickolasBenakis NickolasBenakis May 31, 2019

Choose a reason for hiding this comment

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

meh either way,
I run the test with npm run test
and it crashes...
well :'(

Copy link
Collaborator

@patrickhulce patrickhulce May 31, 2019

Choose a reason for hiding this comment

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

I meant something like

it('should handle dom nodes that cannot be inspected', () => {
  const element = dom.createElement('div');
  element.cloneNode = () => { throw new Erorr('oops!') };
  assert.equal(pageFunctions.getOuterHTMLSnippet(element), '<div>');
});

Copy link
Contributor Author

@NickolasBenakis NickolasBenakis Jun 3, 2019

Choose a reason for hiding this comment

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

@patrickhulce I commited the test case :)

}
}


/**
* Computes a memory/CPU performance benchmark index to determine rough device class.
* @see https://docs.google.com/spreadsheets/d/1E0gZwKsxegudkjJl8Fki_sOwHKpqgXwt8aBAfuUaB8A/edit?usp=sharing
Expand Down
Loading