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

Layout calculation refactored #1094

Merged
merged 5 commits into from Dec 9, 2015
Merged

Conversation

dvoytenko
Copy link
Contributor

The goal is to create a clear sequence of defaults and calculations and separate it from UI.


// Layout specified directly.
if (layoutAttr) {
layout = parseLayout(layoutAttr.trim());
Copy link
Contributor

Choose a reason for hiding this comment

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

Quite sure the trim() can go, since there's no currently considered valid document that would need it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Agree. Removed.

@ampsauce
Copy link

ampsauce commented Dec 7, 2015

Tests failed. Automated cross-browser testing via Sauce Labs and Travis CI shows that the JavaScript changes in this pull request are: BUSTED

Commit: 66fb039
Build details: https://travis-ci.org/ampsauce/amphtml/builds/95469768

(Please note that this is a fully automated comment.)

if (!layout) {
if (widthAttr || heightAttr) {
if (!widthAttr || widthAttr == 'auto') {
layout = Layout.FIXED_HEIGHT;
Copy link
Contributor

Choose a reason for hiding this comment

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

Layout here is dependent on a width / height value that may have been previously set depending on a layout value, up in l. 148 etc. This circularity makes it really hard to understand what is going on, and it's unnecessary, since determineLayout in this PR gets by without it:
https://github.com/ampproject/amphtml/pull/1073/files

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I disagree that there's circularity. This order is correct to really understand how this works: width and height have to be defaulted first, before layout can be. We have to "think like AMP" here.

Copy link
Contributor

Choose a reason for hiding this comment

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

If amp wants to default width and height first, that's ok. But then it's not allowed to use layout in doing so - see line 144, where it's checking layout to particular values. That's the circularity I mean here...
Note that the circularity gives rise to rather funky interpretations based on the data returned by getNaturalDimensions. For instance, assume it returns {width: 'auto', height: '1px'} (yes I know it doesn't), and the given width/height attributes are not set. Now it'll affect l. 156 and set layout to FIXED_HEIGHT. Resolving the circularity leads to a stricter behavior, which is desirable in my opinion, because it's easier to understand locally. Specifically, the choice of layout no longer depends on the return value of getNaturalDimensions - it's sufficient to know that an element hasNaturalDimensions, and the actual dimensions are only used to set width and height.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

There can't be width:auto - that wouldn't be the natural dimension. You can simply default them to '1' if it's convenient for you code - you don't need to resolve them.

@dvoytenko
Copy link
Contributor Author

@ampsauce retry

@ampsauce
Copy link

ampsauce commented Dec 8, 2015

Tests failed. Automated cross-browser testing via Sauce Labs and Travis CI shows that the JavaScript changes in this pull request are: BUSTED

Commit: cca8d2a
Build details: https://travis-ci.org/ampsauce/amphtml/builds/95485150

(Please note that this is a fully automated comment.)

@dvoytenko
Copy link
Contributor Author

@powdercloud PTAL. Input and effective layout values have been separated.


// Input layout attributes.
const inputLayout = layoutAttr ? parseLayout(layoutAttr) : null;
assert(inputLayout || !layoutAttr, 'Unknown layout: %s', layoutAttr);
Copy link
Contributor

Choose a reason for hiding this comment

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

Is it cool to switch to assert? Sorry I don't know the practical difference in Javascript between that and exceptions ... I guess I wonder whether exceptions might be caught by something vs. assertions give up on the entire document, but I'm not familiar with assert in Javascript. Could be a non-issue, sorry.

Copy link
Contributor

Choose a reason for hiding this comment

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

Should the condition be something like this?
assert(inputLayout !== undefined, 'Unknown layout...);

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes. Asserts are fine. In this case I preferred it because the expressions look a lot cleaner.

The inputLayout !== undefined is equivalent. I'll switch to it.

@powdercloud
Copy link
Contributor

Thanks much @dvoytenko. I looked through this carefully and will try to do the equivalent thing for the validator. Looks like there is some test in travis (amp-audio related?) that's still unhappy.

@dvoytenko
Copy link
Contributor Author

@powdercloud PTAL

@powdercloud
Copy link
Contributor

@dvoytenko Thanks a lot, LGTM.

dvoytenko added a commit that referenced this pull request Dec 9, 2015
Layout calculation refactored
@dvoytenko dvoytenko merged commit 051aaea into ampproject:master Dec 9, 2015
@dvoytenko dvoytenko deleted the layout23 branch December 9, 2015 01:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants