Skip to content

Match resizing behavior of iframe inside amp-ad and amp-iframe#4840

Merged
zhouyx merged 5 commits intoampproject:masterfrom
zhouyx:fill-ad-iframe
Sep 7, 2016
Merged

Match resizing behavior of iframe inside amp-ad and amp-iframe#4840
zhouyx merged 5 commits intoampproject:masterfrom
zhouyx:fill-ad-iframe

Conversation

@zhouyx
Copy link
Copy Markdown
Contributor

@zhouyx zhouyx commented Sep 6, 2016

The iframe inside amp-ad and iframe inside amp-iframe should behave the same during resizing. In amp-iframe we only try to change size for parent container (amp-iframe itself), and child iframe will always fill the size of its parent.
With this PR, I try to do the same thing for amp-ad and its child iframe.

checked we never set iframe_.widht/iframe_.height elsewhere, also tested ads pages manually.

This is to support render-start API sending resizing info. #4842

true /* success */, width, height, source, origin);
}, () => this.sendEmbedSizeResponse_(
false /* success */, width, height, source, origin));
let newHeight, newWidth;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Can/should code be shared with amp-iframe?

Now that you know the code, can you add some docs about the intention (here and in amp-iframe? Will make refactoring easier.

Copy link
Copy Markdown
Contributor Author

@zhouyx zhouyx Sep 6, 2016

Choose a reason for hiding this comment

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

  1. amp-iframe checks for attribute 'resizable' while amp-ad not.
  2. amp-iframe does not allow resize height to less than 100px.
  3. 'amp-adsends back resize response back, whileamp-iframe` doesn't.

Are these difference intentional or are they introduced because of different PRs?

You mean add docs comments to the code? will do that

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

1,2,3 are all for amp-iframe only

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We can think about if we want to eliminate those discrepancy and plan for a refactoring in a separate PR.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

For 1), amp-ad used to have resizable attribute, but is removed later. For 2) I can see the height limit definitely doesn't work for amp-ad. For 3) I think it makes sense to send response in both cases.
We need to figure out what are the desired behavior for amp-ad and amp-iframe resize respectively before we decide if the code should be shared or not. If we want to keep 1) 2) 3) different, I don't see much point of sharing code.
What's everyone's opinion on this? @cramforce @lannka @muxin

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I agree. Or we can think about code sharing in more granular level, for example, share a util function like: getContainerDimensionsForResize(containerElement, contentElement, newContentDimensions) which returns newContainerDimensions.

@lannka
Copy link
Copy Markdown
Contributor

lannka commented Sep 7, 2016

LGTM

@lannka lannka added LGTM and removed NEEDS REVIEW labels Sep 7, 2016
@zhouyx
Copy link
Copy Markdown
Contributor Author

zhouyx commented Sep 7, 2016

added comment to describe how we calculate newWidth/newHeight based on provided width/height.

@zhouyx
Copy link
Copy Markdown
Contributor Author

zhouyx commented Sep 7, 2016

Will merge this PR first to continue with #4842. We can work on refactoring/code sharing after we have a clear plan on what to expect.

true /* success */, width, height, source, origin);
}, () => this.sendEmbedSizeResponse_(
false /* success */, width, height, source, origin));
// Calculate new width and new height based on the requested size.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

... height of the container ...

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

How about this, might be shorter and clearer:
Calculate new width and height of the container to include the padding. If padding is negative, just use the requested width and height directly.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This is clearer. Cool! I'll apply it

@zhouyx zhouyx merged commit 7451572 into ampproject:master Sep 7, 2016
@zhouyx zhouyx deleted the fill-ad-iframe branch September 7, 2016 18:48
dreamofabear pushed a commit to dreamofabear/amphtml that referenced this pull request Sep 16, 2016
mityaha pushed a commit to brightcove-archive/ooyala_amphtml that referenced this pull request Nov 30, 2016
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.

4 participants