report(html): replace Typed OM getComputedStyle() with CSSOM equivalent #5984
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
paulirish
requested changes
Sep 7, 2018
| @@ -130,17 +130,21 @@ class ReportUIFeatures { | |||
|
|
|||
| _setupHeaderAnimation() { | |||
| const scoresWrapper = this._dom.find('.lh-scores-wrapper', this._document); | |||
| this.headerOverlap = /** @type {number} */ | |||
| (Number(window.getComputedStyle(scoresWrapper).marginTop.replace('px', ''))); | |||
| const computedMarginTop = scoresWrapper.style.marginTop ? | |||
There was a problem hiding this comment.
computedStyle should get you the value even if an inline style is present so i'm not sure why this is necessary. whatcha thinkin?
| const computedMarginTop = scoresWrapper.style.marginTop ? | ||
| window.getComputedStyle(scoresWrapper).marginTop : '0px'; | ||
| this.headerOverlap = computedMarginTop ? | ||
| /** @type {number} */ (Number(computedMarginTop.replace('px', ''))) : 0; |
There was a problem hiding this comment.
I know you're copying what was here but parseFloat(computedMarginTop) should do the same. (unless there's some tsc thing i'm not thinking of).
could even do parseFloat(computedMarginTop|| 0) to drop your ternary?
| this.headerHeight = /** @type {number} */ | ||
| (Number(window.getComputedStyle(this.headerBackground).height.replace('px', ''))); | ||
| const computedHeight = this.headerBackground.style.height ? | ||
| window.getComputedStyle(this.headerBackground).height : '0px'; |
There was a problem hiding this comment.
2 above comments apply here too.
|
I appreciate your feedback @paulirish |
brendankenny
requested changes
Sep 7, 2018
| (scoresWrapper.computedStyleMap().get('margin-top').value); | ||
|
|
||
| const computedMarginTop = window.getComputedStyle(scoresWrapper).marginTop; | ||
| this.headerOverlap = /** @type {number} */ (parseFloat(computedMarginTop || '0')); |
There was a problem hiding this comment.
parseFloat returns a number, so no longer need to cast
| // @ts-ignore - TODO: move off CSSOM to support other browsers | ||
| this.headerHeight = this.headerBackground.computedStyleMap().get('height').value; | ||
| const computedHeight = window.getComputedStyle(this.headerBackground).height; | ||
| this.headerHeight = /** @type {number} */ (parseFloat(computedHeight || '0')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Replace Typed OM's
element.getComputedStyle()with CSSOMwindow.getComputedStyle()Typed OM is not widely supported yet. Our delivered JS should work properly in all major browsers
https://developers.google.com/web/updates/2018/03/cssom#computed
Related Issues/PRs
fixes #5966
Yeah, this replacement looks a bit hacky. But I've not found a more elegant way