From 11c16b7b7427dd8f164fc9da2454e2371667d729 Mon Sep 17 00:00:00 2001 From: Philip Bell Date: Tue, 10 Aug 2021 15:15:34 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=AE=20[Page=20attachments]=20`amp-stor?= =?UTF-8?q?y-page-attachment-ui-v2`=20experiment=20cleanup=20(#35421)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Clean up page-attachment css file. * Clean up experiment. * Update tests and template. * Remove experiment config variables * Protected variables. * whitespace * Cleanup visual tests. * Theme background * const and remove variable. * Whitespace * Revert config, save for follow up PR * Revert config, save for follow up PR --- examples/amp-story/attachment.html | 22 +- .../amp-story-page-attachment-desktop.js | 34 --- .../amp-story-page-attachment-v2.html | 198 ------------------ .../amp-story/amp-story-page-attachment-v2.js | 193 ----------------- .../amp-story/amp-story-page-attachment.html | 136 +++++++++++- .../amp-story/amp-story-page-attachment.js | 181 ++++++++++++++-- .../1.0/amp-story-draggable-drawer-header.css | 146 +++++-------- .../1.0/amp-story-draggable-drawer.css | 144 +++++++------ .../1.0/amp-story-draggable-drawer.js | 98 ++++----- .../1.0/amp-story-open-page-attachment.css | 148 ++++--------- .../1.0/amp-story-open-page-attachment.js | 109 +++------- .../1.0/amp-story-page-attachment-ui-v2.js | 26 --- .../1.0/amp-story-page-attachment.css | 158 +++++--------- .../1.0/amp-story-page-attachment.js | 135 ++---------- extensions/amp-story/1.0/amp-story-page.js | 7 +- .../amp-story/1.0/test/test-amp-story-page.js | 92 +++----- test/visual-diff/visual-tests | 30 +-- tools/experiments/experiments-config.js | 7 +- 18 files changed, 641 insertions(+), 1223 deletions(-) delete mode 100644 examples/visual-tests/amp-story/amp-story-page-attachment-desktop.js delete mode 100644 examples/visual-tests/amp-story/amp-story-page-attachment-v2.html delete mode 100644 examples/visual-tests/amp-story/amp-story-page-attachment-v2.js delete mode 100644 extensions/amp-story/1.0/amp-story-page-attachment-ui-v2.js diff --git a/examples/amp-story/attachment.html b/examples/amp-story/attachment.html index dbdb95f0bcdf..d279f9f26b15 100644 --- a/examples/amp-story/attachment.html +++ b/examples/amp-story/attachment.html @@ -61,7 +61,6 @@

Default amp-story-page-attachment.

- Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.

@@ -85,7 +84,6 @@

amp-story-page-attachment: dark theme.

- Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.

-

Lots of content. Opens to max of 80% then scrolls.

- -

In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.

- -

In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.

- -

Ut tristique et egestas quis ipsum. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Elementum curabitur vitae nunc sed velit dignissim. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. At elementum eu facilisis sed odio morbi. Imperdiet proin fermentum leo vel orci porta non. Quam lacus suspendisse faucibus interdum. Eu non diam phasellus vestibulum lorem sed risus. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut sem viverra aliquet eget sit amet. Nulla facilisi morbi tempus iaculis. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Donec ultrices tincidunt arcu non sodales. Amet venenatis urna cursus eget. Sapien et ligula ullamcorper malesuada proin. Tristique sollicitudin nibh sit amet commodo nulla facilisi. Venenatis tellus in metus vulputate eu scelerisque felis.

- Link in page attachment +

A little content. Opens to max of content.

 @@ -111,7 +102,6 @@

amp-story-page-attachment: one image.

- Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.

amp-story-page-attachment: two images & dark theme.

- Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.

Default amp-story-page-outlink.

- Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.

amp-story-page-outlink: logo & custom text.

- Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.

amp-story-page-outlink: no image.

- Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.

amp-story-page-outlink: dark theme.

- Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.

amp-story-page-outlink: custom pink background.

- Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.

amp-story-page-outlink: custom pink text.

- Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.

amp-story-page-outlink: custom navy background.

- Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.

amp-story-page-outlink: custom navy text.

- Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.

Legacy outlink (amp-story-page-attachment with an href) using title, data-title, cta-text, and data-cta-text attributes.

- Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.

{ - await page.waitForTimeout(1600); - }, - - 'open attachment': async (page, name) => { - await verifySelectorsVisible(page, name, [ - '.i-amphtml-story-page-open-attachment[active]', - ]); - await page.tap('.i-amphtml-story-page-attachment-label'); - await page.waitForTimeout(410); - }, -}; diff --git a/examples/visual-tests/amp-story/amp-story-page-attachment-v2.html b/examples/visual-tests/amp-story/amp-story-page-attachment-v2.html deleted file mode 100644 index 252aa8dac9d9..000000000000 --- a/examples/visual-tests/amp-story/amp-story-page-attachment-v2.html +++ /dev/null @@ -1,198 +0,0 @@ - - - - - - - - - AMP Story page attachment - - - - - - - - - - -

Some really cool video

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -

- - - - - -

Some really cool video

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -

- - - - - -

Some really cool video

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -

- - - - - -

Some really cool video

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -

- - - - - -

Some really cool video

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -

- - - - - -

Some really cool video

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -

- - - - - - - - - - - - Custom text - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/examples/visual-tests/amp-story/amp-story-page-attachment-v2.js b/examples/visual-tests/amp-story/amp-story-page-attachment-v2.js deleted file mode 100644 index b8407267a811..000000000000 --- a/examples/visual-tests/amp-story/amp-story-page-attachment-v2.js +++ /dev/null @@ -1,193 +0,0 @@ -/** - * Copyright 2019 The AMP HTML Authors. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -'use strict'; - -const { - verifySelectorsVisible, -} = require('../../../build-system/tasks/visual-diff/helpers'); - -module.exports = { - 'custom text - inline CTA pre-tap UI should display': async (page, name) => { - const pageID = 'inline-custom-text'; - const url = await page.url(); - await page.goto(`${url}#page=${pageID}`); - await page.waitForSelector( - `amp-story-page#${pageID}[active][distance="0"]` - ); - await verifySelectorsVisible(page, name, [ - '.i-amphtml-story-page-open-attachment[active]', - ]); - }, - - 'dark theme - inline CTA pre-tap UI should display': async (page, name) => { - const pageID = 'inline-dark-theme'; - const url = await page.url(); - await page.goto(`${url}#page=${pageID}`); - await page.waitForSelector( - `amp-story-page#${pageID}[active][distance="0"]` - ); - await verifySelectorsVisible(page, name, [ - '.i-amphtml-story-page-open-attachment[active]', - ]); - }, - - '1 img - dark theme - inline CTA pre-tap UI should display': async ( - page, - name - ) => { - const pageID = 'inline-dark-theme-1-image'; - const url = await page.url(); - await page.goto(`${url}#page=${pageID}`); - await page.waitForSelector( - `amp-story-page#${pageID}[active][distance="0"]` - ); - await verifySelectorsVisible(page, name, [ - '.i-amphtml-story-page-open-attachment[active]', - ]); - }, - - '2 imgs - dark theme - inline CTA pre-tap UI should display': async ( - page, - name - ) => { - const pageID = 'inline-dark-theme-2-images'; - const url = await page.url(); - await page.goto(`${url}#page=${pageID}`); - await page.waitForSelector( - `amp-story-page#${pageID}[active][distance="0"]` - ); - await verifySelectorsVisible(page, name, [ - '.i-amphtml-story-page-open-attachment[active]', - ]); - }, - - '2 imgs - light theme - inline CTA pre-tap UI should display': async ( - page, - name - ) => { - const pageID = 'inline-light-theme-2-images'; - const url = await page.url(); - await page.goto(`${url}#page=${pageID}`); - await page.waitForSelector( - `amp-story-page#${pageID}[active][distance="0"]` - ); - await verifySelectorsVisible(page, name, [ - '.i-amphtml-story-page-open-attachment[active]', - ]); - }, - - 'outlink CTA pre-tap UI should display': async (page, name) => { - const pageID = 'outlink-default'; - const url = await page.url(); - await page.goto(`${url}#page=${pageID}`); - await page.waitForSelector( - `amp-story-page#${pageID}[active][distance="0"]` - ); - await verifySelectorsVisible(page, name, [ - '.i-amphtml-story-page-open-attachment[active]', - ]); - }, - - 'custom text - outlink CTA pre-tap UI should display': async (page, name) => { - const pageID = 'outlink-custom-text'; - const url = await page.url(); - await page.goto(`${url}#page=${pageID}`); - await page.waitForSelector( - `amp-story-page#${pageID}[active][distance="0"]` - ); - await verifySelectorsVisible(page, name, [ - '.i-amphtml-story-page-open-attachment[active]', - ]); - }, - - 'no img - outlink CTA pre-tap UI should display': async (page, name) => { - const pageID = 'outlink-no-image'; - const url = await page.url(); - await page.goto(`${url}#page=${pageID}`); - await page.waitForSelector( - `amp-story-page#${pageID}[active][distance="0"]` - ); - await verifySelectorsVisible(page, name, [ - '.i-amphtml-story-page-open-attachment[active]', - ]); - }, - - 'custom img - outlink CTA pre-tap UI should display': async (page, name) => { - const pageID = 'outlink-custom-image'; - const url = await page.url(); - await page.goto(`${url}#page=${pageID}`); - await page.waitForSelector( - `amp-story-page#${pageID}[active][distance="0"]` - ); - await verifySelectorsVisible(page, name, [ - '.i-amphtml-story-page-open-attachment[active]', - ]); - }, - - 'dark theme - outlink CTA pre-tap UI should display': async (page, name) => { - const pageID = 'outlink-dark-theme'; - const url = await page.url(); - await page.goto(`${url}#page=${pageID}`); - await page.waitForSelector( - `amp-story-page#${pageID}[active][distance="0"]` - ); - await verifySelectorsVisible(page, name, [ - '.i-amphtml-story-page-open-attachment[active]', - ]); - }, - - 'pink background - outlink CTA pre-tap UI should display': async ( - page, - name - ) => { - const pageID = 'outlink-custom-background-color'; - const url = await page.url(); - await page.goto(`${url}#page=${pageID}`); - await page.waitForSelector( - `amp-story-page#${pageID}[active][distance="0"]` - ); - await verifySelectorsVisible(page, name, [ - '.i-amphtml-story-page-open-attachment[active]', - ]); - }, - - 'pink text - outlink CTA pre-tap UI should display': async (page, name) => { - const url = await page.url(); - const pageID = 'outlink-custom-text-color'; - await page.goto(`${url}#page=${pageID}`); - await page.waitForSelector( - `amp-story-page#${pageID}[active][distance="0"]` - ); - await verifySelectorsVisible(page, name, [ - '.i-amphtml-story-page-open-attachment[active]', - ]); - }, - - 'Legacy amp-story-page-attachment with href should display': async ( - page, - name - ) => { - const url = await page.url(); - const pageID = 'outlink-legacy'; - await page.goto(`${url}#page=${pageID}`); - await page.waitForSelector( - `amp-story-page#${pageID}[active][distance="0"]` - ); - await verifySelectorsVisible(page, name, [ - '.i-amphtml-story-page-open-attachment[active]', - ]); - }, -}; diff --git a/examples/visual-tests/amp-story/amp-story-page-attachment.html b/examples/visual-tests/amp-story/amp-story-page-attachment.html index 6457d533423b..e38eef31a1bf 100644 --- a/examples/visual-tests/amp-story/amp-story-page-attachment.html +++ b/examples/visual-tests/amp-story/amp-story-page-attachment.html @@ -49,21 +49,143 @@ poster-landscape-src="/examples/visual-tests/picsum.photos/image981_1600x900.jpg" poster-square-src="/examples/visual-tests/picsum.photos/image981_1600x1600.jpg" supports-landscape> - +

Some really cool video

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- - + + + + + +

Some really cool video

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ + + + + +

Some really cool video

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ + + + + +

Some really cool video

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ + + + + +

Some really cool video

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- - + + + +

Some really cool video

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ + + + + + + + + + + + Custom text + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/visual-tests/amp-story/amp-story-page-attachment.js b/examples/visual-tests/amp-story/amp-story-page-attachment.js index a2f607575ec0..8432d92f91dd 100644 --- a/examples/visual-tests/amp-story/amp-story-page-attachment.js +++ b/examples/visual-tests/amp-story/amp-story-page-attachment.js @@ -1,5 +1,5 @@ /** - * Copyright 2019 The AMP HTML Authors. All Rights Reserved. + * Copyright 2021 The AMP HTML Authors. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -20,25 +20,174 @@ const { } = require('../../../build-system/tasks/visual-diff/helpers'); module.exports = { - 'open attachment UI element': async (page, unusedName) => { - await page.waitForTimeout(1600); + 'custom text - inline CTA pre-tap UI should display': async (page, name) => { + const pageID = 'inline-custom-text'; + const url = await page.url(); + await page.goto(`${url}#page=${pageID}`); + await page.waitForSelector( + `amp-story-page#${pageID}[active][distance="0"]` + ); + await verifySelectorsVisible(page, name, [ + '.i-amphtml-story-page-open-attachment[active]', + ]); + }, + + 'dark theme - inline CTA pre-tap UI should display': async (page, name) => { + const pageID = 'inline-dark-theme'; + const url = await page.url(); + await page.goto(`${url}#page=${pageID}`); + await page.waitForSelector( + `amp-story-page#${pageID}[active][distance="0"]` + ); + await verifySelectorsVisible(page, name, [ + '.i-amphtml-story-page-open-attachment[active]', + ]); + }, + + '1 img - dark theme - inline CTA pre-tap UI should display': async ( + page, + name + ) => { + const pageID = 'inline-dark-theme-1-image'; + const url = await page.url(); + await page.goto(`${url}#page=${pageID}`); + await page.waitForSelector( + `amp-story-page#${pageID}[active][distance="0"]` + ); + await verifySelectorsVisible(page, name, [ + '.i-amphtml-story-page-open-attachment[active]', + ]); + }, + + '2 imgs - dark theme - inline CTA pre-tap UI should display': async ( + page, + name + ) => { + const pageID = 'inline-dark-theme-2-images'; + const url = await page.url(); + await page.goto(`${url}#page=${pageID}`); + await page.waitForSelector( + `amp-story-page#${pageID}[active][distance="0"]` + ); + await verifySelectorsVisible(page, name, [ + '.i-amphtml-story-page-open-attachment[active]', + ]); + }, + + '2 imgs - light theme - inline CTA pre-tap UI should display': async ( + page, + name + ) => { + const pageID = 'inline-light-theme-2-images'; + const url = await page.url(); + await page.goto(`${url}#page=${pageID}`); + await page.waitForSelector( + `amp-story-page#${pageID}[active][distance="0"]` + ); + await verifySelectorsVisible(page, name, [ + '.i-amphtml-story-page-open-attachment[active]', + ]); + }, + + 'outlink CTA pre-tap UI should display': async (page, name) => { + const pageID = 'outlink-default'; + const url = await page.url(); + await page.goto(`${url}#page=${pageID}`); + await page.waitForSelector( + `amp-story-page#${pageID}[active][distance="0"]` + ); + await verifySelectorsVisible(page, name, [ + '.i-amphtml-story-page-open-attachment[active]', + ]); + }, + + 'custom text - outlink CTA pre-tap UI should display': async (page, name) => { + const pageID = 'outlink-custom-text'; + const url = await page.url(); + await page.goto(`${url}#page=${pageID}`); + await page.waitForSelector( + `amp-story-page#${pageID}[active][distance="0"]` + ); + await verifySelectorsVisible(page, name, [ + '.i-amphtml-story-page-open-attachment[active]', + ]); + }, + + 'no img - outlink CTA pre-tap UI should display': async (page, name) => { + const pageID = 'outlink-no-image'; + const url = await page.url(); + await page.goto(`${url}#page=${pageID}`); + await page.waitForSelector( + `amp-story-page#${pageID}[active][distance="0"]` + ); + await verifySelectorsVisible(page, name, [ + '.i-amphtml-story-page-open-attachment[active]', + ]); + }, + + 'custom img - outlink CTA pre-tap UI should display': async (page, name) => { + const pageID = 'outlink-custom-image'; + const url = await page.url(); + await page.goto(`${url}#page=${pageID}`); + await page.waitForSelector( + `amp-story-page#${pageID}[active][distance="0"]` + ); + await verifySelectorsVisible(page, name, [ + '.i-amphtml-story-page-open-attachment[active]', + ]); + }, + + 'dark theme - outlink CTA pre-tap UI should display': async (page, name) => { + const pageID = 'outlink-dark-theme'; + const url = await page.url(); + await page.goto(`${url}#page=${pageID}`); + await page.waitForSelector( + `amp-story-page#${pageID}[active][distance="0"]` + ); + await verifySelectorsVisible(page, name, [ + '.i-amphtml-story-page-open-attachment[active]', + ]); + }, + + 'pink background - outlink CTA pre-tap UI should display': async ( + page, + name + ) => { + const pageID = 'outlink-custom-background-color'; + const url = await page.url(); + await page.goto(`${url}#page=${pageID}`); + await page.waitForSelector( + `amp-story-page#${pageID}[active][distance="0"]` + ); + await verifySelectorsVisible(page, name, [ + '.i-amphtml-story-page-open-attachment[active]', + ]); + }, + + 'pink text - outlink CTA pre-tap UI should display': async (page, name) => { + const url = await page.url(); + const pageID = 'outlink-custom-text-color'; + await page.goto(`${url}#page=${pageID}`); + await page.waitForSelector( + `amp-story-page#${pageID}[active][distance="0"]` + ); + await verifySelectorsVisible(page, name, [ + '.i-amphtml-story-page-open-attachment[active]', + ]); }, - 'open attachment': async (page, name) => { + 'Legacy amp-story-page-attachment with href should display': async ( + page, + name + ) => { + const url = await page.url(); + const pageID = 'outlink-legacy'; + await page.goto(`${url}#page=${pageID}`); + await page.waitForSelector( + `amp-story-page#${pageID}[active][distance="0"]` + ); await verifySelectorsVisible(page, name, [ '.i-amphtml-story-page-open-attachment[active]', ]); - await page.tap('.i-amphtml-story-page-attachment-label'); - await page.waitForTimeout(410); }, - /** - * TODO(@ampproject/wg-stories): fix flaky test: - * https://percy.io/ampproject/amphtml/builds-next/8331061/changed/473805330 - * - * 'open attachment UI element with link': async (page, unusedName) => { - * const screen = page.touchscreen; - * await screen.tap(200, 240); - * await page.waitForSelector('amp-story-page#page-2[active]'); - * }, - */ }; diff --git a/extensions/amp-story/1.0/amp-story-draggable-drawer-header.css b/extensions/amp-story/1.0/amp-story-draggable-drawer-header.css index 01c6bb14625c..841fb9be6db6 100644 --- a/extensions/amp-story/1.0/amp-story-draggable-drawer-header.css +++ b/extensions/amp-story/1.0/amp-story-draggable-drawer-header.css @@ -16,94 +16,65 @@ @import './amp-story-shadow-reset.css'; +:host { + border-radius: inherit !important; /* Propogate border-radius */ +} + .i-amphtml-story-draggable-drawer-header { display: flex !important; - position: relative !important; - height: 40px !important; - background: #fff !important; - border-radius: 8px 8px 0 0 !important; - box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.12) !important; + justify-content: center !important; + position: sticky !important; + top: 0 !important; + border-radius: inherit !important; z-index: 1 !important; + --i-amphtml-draggable-drawer-background-color: #fff !important; + --i-amphtml-draggable-drawer-text-color: #202125 !important; + --i-amphtml-draggable-drawer-handle-color: rgba(0, 0, 0, .2) !important; + background: var(--i-amphtml-draggable-drawer-background-color) !important; +} + +/* Draggable handle UI */ +:not([desktop]).i-amphtml-story-draggable-drawer-header:before { + content: '' !important; + position: absolute !important; + top: 8px !important; + width: 40px !important; + height: 3px !important; + background-color: var(--i-amphtml-draggable-drawer-handle-color) !important; + border-radius: 3px !important; } -.i-amphtml-story-draggable-drawer-theme-dark { - background: rgba(32, 33, 37, 1) !important; +[theme="dark"].i-amphtml-story-draggable-drawer-header { + --i-amphtml-draggable-drawer-background-color: #202125 !important; + --i-amphtml-draggable-drawer-text-color: #fff !important; + --i-amphtml-draggable-drawer-handle-color: rgba(255, 255, 255, .2) !important; +} + +:not([desktop]).i-amphtml-story-draggable-drawer-header { + height: 20px !important; } .i-amphtml-story-page-attachment-close-button { display: block !important; - padding: 8px !important; - height: 24px !important; - width: 24px !important; + padding: 15px !important; + width: 14px !important; + height: 14px !important; background-origin: content-box !important; - background-image: url('data:image/svg+xml;charset=utf-8,') !important; + background-image: url('data:image/svg+xml;charset=utf-8,') !important; background-repeat: no-repeat !important; - color: rgba(0, 0, 0, 0.87) !important; cursor: pointer !important; + margin-inline-start: auto !important; /* RTL support */ /* default button style overrides */ box-sizing: content-box !important; border: none !important; background-color: transparent !important; } -.i-amphtml-story-draggable-drawer-theme-dark .i-amphtml-story-page-attachment-close-button { - background-image: url('data:image/svg+xml;charset=utf-8,') !important; +[theme="dark"] .i-amphtml-story-page-attachment-close-button { + background-image: url('data:image/svg+xml;charset=utf-8,') !important; } -.i-amphtml-story-page-attachment-title { - font-family: 'Roboto', sans-serif !important; - width: calc(100% - 80px) !important; - padding-right: 40px !important; - color: rgba(0, 0, 0, 0.87) !important; - font-size: 16px !important; - line-height: 40px !important; - overflow: hidden !important; - text-align: center !important; - text-overflow: ellipsis !important; - white-space: nowrap !important; -} - -/** Overrides. */ - -.i-amphtml-story-draggable-drawer-theme-dark .i-amphtml-story-page-attachment-title, -.i-amphtml-story-draggable-drawer-theme-dark .i-amphtml-story-page-attachment-close-button { - color: #9AA0A6 !important; -} - -.i-amphtml-story-draggable-drawer-header-attachment-remote { - display: none !important; -} - -/* For amp-story-page-attachment-ui-v2 experiment. */ - -:host { - border-radius: inherit !important; /* Propogate border-radius */ -} - -.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-draggable-drawer-header { - --i-amphtml-draggable-drawer-background-color: #fff !important; - --i-amphtml-draggable-drawer-text-color: #202125 !important; - --i-amphtml-draggable-drawer-handle-color: rgba(0, 0, 0, .2) !important; - background: var(--i-amphtml-draggable-drawer-background-color) !important; - justify-content: center !important; - box-shadow: none !important; - border-radius: inherit !important; - height: auto !important; - position: sticky !important; - top: 0 !important; -} - -[theme="dark"].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-draggable-drawer-header { - --i-amphtml-draggable-drawer-background-color: #202125 !important; - --i-amphtml-draggable-drawer-text-color: #fff !important; - --i-amphtml-draggable-drawer-handle-color: rgba(255, 255, 255, .2) !important; -} - -:not([desktop]).i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-draggable-drawer-header { - height: 20px !important; -} - -.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-draggable-drawer-header .i-amphtml-story-draggable-drawer-header-title-and-close { +.i-amphtml-story-draggable-drawer-header .i-amphtml-story-draggable-drawer-header-title-and-close { opacity: 1 !important; height: 44px !important; width: 100% !important; @@ -114,7 +85,7 @@ border-radius: inherit !important; } -:not([desktop]).i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-draggable-drawer-header .i-amphtml-story-draggable-drawer-header-title-and-close { +:not([desktop]).i-amphtml-story-draggable-drawer-header .i-amphtml-story-draggable-drawer-header-title-and-close { position: absolute !important; opacity: 0 !important; transition: opacity .3s, visibility .3s !important; @@ -122,37 +93,26 @@ visibility: hidden !important; } -:not([desktop]).i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-draggable-drawer-header.i-amphtml-story-draggable-drawer-header-stuck .i-amphtml-story-draggable-drawer-header-title-and-close { +:not([desktop]).i-amphtml-story-draggable-drawer-header.i-amphtml-story-draggable-drawer-header-stuck .i-amphtml-story-draggable-drawer-header-title-and-close { opacity: 1 !important; visibility: visible !important; } -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-title { - font-size: 14px !important; +.i-amphtml-story-page-attachment-title { position: absolute !important; - padding: 0 !important; + font-family: 'Roboto', sans-serif !important; + width: calc(100% - 80px) !important; color: var(--i-amphtml-draggable-drawer-text-color) !important; + font-size: 14px !important; + line-height: 40px !important; + overflow: hidden !important; + text-align: center !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; } -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-close-button { - margin-inline-start: auto !important; /* RTL support */ - width: 14px !important; - height: 14px !important; - background-image: url('data:image/svg+xml;charset=utf-8,') !important; - padding: 15px !important; -} - -[theme="dark"].i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-close-button { - background-image: url('data:image/svg+xml;charset=utf-8,') !important; -} +/** Overrides. */ -/* Draggable handle UI */ -:not([desktop]).i-amphtml-amp-story-page-attachment-ui-v2:before { - content: '' !important; - position: absolute !important; - top: 8px !important; - width: 40px !important; - height: 3px !important; - background-color: var(--i-amphtml-draggable-drawer-handle-color) !important; - border-radius: 3px !important; +.i-amphtml-story-draggable-drawer-header-attachment-remote { + display: none !important; } diff --git a/extensions/amp-story/1.0/amp-story-draggable-drawer.css b/extensions/amp-story/1.0/amp-story-draggable-drawer.css index 2568a69e4d8a..976e3206bc5f 100644 --- a/extensions/amp-story/1.0/amp-story-draggable-drawer.css +++ b/extensions/amp-story/1.0/amp-story-draggable-drawer.css @@ -26,6 +26,17 @@ transform: translate3d(0, 100%, 0) !important; transition: transform 0.25s cubic-bezier(0.4, 0.0, 1, 1), visibility 0s linear 0.4s !important; visibility: hidden !important; + --i-amphtml-draggable-drawer-background-color: #fff !important; + --i-amphtml-draggable-drawer-text-color: #202125 !important; +} + +[theme="dark"].amp-story-draggable-drawer-root { + --i-amphtml-draggable-drawer-background-color: #202125 !important; + --i-amphtml-draggable-drawer-text-color: #fff !important; +} + +[desktop] .amp-story-draggable-drawer-root { + background: none !important; } .amp-story-draggable-drawer-root[hidden] { @@ -44,99 +55,57 @@ .i-amphtml-story-draggable-drawer-container { height: calc(100% - 40px) !important; - background: rgba(255, 255, 255, 1) !important; + background: var(--i-amphtml-draggable-drawer-background-color) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; transition: background 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important; } -.i-amphtml-story-draggable-drawer-theme-dark .i-amphtml-story-draggable-drawer-container { - background: rgba(32, 33, 37, 1) !important; -} - .i-amphtml-story-draggable-drawer-container[hidden] { display: block !important; background: rgba(255, 255, 255, 0.92) !important; } -.i-amphtml-story-draggable-drawer-theme-dark .i-amphtml-story-draggable-drawer-container[hidden] { - background: rgba(32, 33, 37, 0.82) !important; -} - .i-amphtml-story-draggable-drawer-content { opacity: 1 !important; transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important; + background: var(--i-amphtml-draggable-drawer-background-color) !important; + color: var(--i-amphtml-draggable-drawer-text-color) !important; } - -.i-amphtml-story-draggable-drawer-container[hidden] .i-amphtml-story-draggable-drawer-content { - opacity: 0 !important; +amp-story:not([desktop]) .i-amphtml-story-draggable-drawer-content { + border-radius: inherit !important; } -.i-amphtml-story-draggable-drawer-container[hidden] .i-amphtml-story-draggable-drawer-content > * { +amp-story:not([desktop]) .i-amphtml-story-page-attachment-remote .i-amphtml-story-draggable-drawer-spacer { + /* Hide spacer in remote attachment. */ display: none !important; } -[desktop] .amp-story-draggable-drawer-root { - display: flex !important; - align-items: center !important; - justify-content: center !important; - background: rgba(0, 0, 0, 0.55) !important; - opacity: 0 !important; - transition: opacity 0.15s cubic-bezier(0.4, 0.0, 1, 1), transform 0s linear 0.15s, visibility 0s linear 0.4s !important; -} - -[desktop] .amp-story-draggable-drawer-root.i-amphtml-story-draggable-drawer-open { - opacity: 1 !important; - transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1), visibility 0s linear 0s !important; - transform: translate3d(0, 0, 0) !important; -} -[desktop] .i-amphtml-story-draggable-drawer { - height: 60vh !important; - width: 800px !important; - border-radius: 8px !important; - overflow: hidden !important; -} - -/* For amp-story-page-attachment-ui-v2 experiment. */ - -[desktop] .i-amphtml-amp-story-page-attachment-ui-v2.amp-story-draggable-drawer-root { - background: none !important; -} - -.i-amphtml-amp-story-page-attachment-ui-v2.amp-story-draggable-drawer-root { - --i-amphtml-draggable-drawer-background-color: #fff !important; - --i-amphtml-draggable-drawer-text-color: #202125 !important; -} - -[theme="dark"].i-amphtml-amp-story-page-attachment-ui-v2.amp-story-draggable-drawer-root { - --i-amphtml-draggable-drawer-background-color: #202125 !important; - --i-amphtml-draggable-drawer-text-color: #fff !important; +.i-amphtml-story-draggable-drawer-container[hidden] .i-amphtml-story-draggable-drawer-content { + opacity: 0 !important; } -amp-story:not([desktop]) .i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-container { - border-radius: 16px !important; - height: 100% !important; +.i-amphtml-story-draggable-drawer-container[hidden] .i-amphtml-story-draggable-drawer-content > * { + display: none !important; } -amp-story:not([desktop]) .i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-container { +amp-story:not([desktop]) .i-amphtml-story-draggable-drawer-container { border-radius: 16px 16px 0 0 !important; -} - -amp-story:not([desktop]) .i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-container { + height: 100% !important; background: none !important; /* This makes the spacer elmement take up all available space to push content to the bottom of the screen. */ display: flex !important; flex-direction: column !important; } -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-spacer { +.i-amphtml-story-draggable-drawer-spacer { /* spacer is mobile only */ display: none !important; } -amp-story:not([desktop]) .i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-spacer { +amp-story:not([desktop]) .i-amphtml-story-draggable-drawer-spacer { /* Removes default button background. */ background: none !important; /* This placeholder element takes up all available space when drawer-content is less than 80vh. */ @@ -146,16 +115,65 @@ amp-story:not([desktop]) .i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-s min-height: calc(var(--story-page-vh) * 20) !important; } -body:not(.amp-mode-keyboard-active) amp-story:not([desktop]) .i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-spacer { +body:not(.amp-mode-keyboard-active) amp-story:not([desktop]) .i-amphtml-story-draggable-drawer-spacer { /* Remove outline if user is not navigating via keyboard */ outline: none !important; } -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-content { - background: var(--i-amphtml-draggable-drawer-background-color) !important; - color: var(--i-amphtml-draggable-drawer-text-color) !important; + +[desktop] .amp-story-draggable-drawer-root { + display: flex !important; + align-items: center !important; + justify-content: center !important; + background: rgba(0, 0, 0, 0.55) !important; + opacity: 0 !important; + transition: opacity 0.15s cubic-bezier(0.4, 0.0, 1, 1), transform 0s linear 0.15s, visibility 0s linear 0.4s !important; } -amp-story:not([desktop]) .i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-draggable-drawer-content { - border-radius: inherit !important; +[desktop] .amp-story-draggable-drawer-root.i-amphtml-story-draggable-drawer-open { + opacity: 1 !important; + transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1), visibility 0s linear 0s !important; + transform: translate3d(0, 0, 0) !important; +} + +[desktop] .i-amphtml-story-draggable-drawer { + height: 60vh !important; + width: 800px !important; + border-radius: 8px !important; + overflow: hidden !important; +} + +/* Remote-attachment overrides. */ + +.amp-story-draggable-drawer-root.i-amphtml-story-page-attachment-remote { + /* Faster duration for outlink drawer. */ + transition-duration: .2s !important; +} + +/* Opening progress bar animation. */ + +.i-amphtml-story-page-attachment-remote.i-amphtml-story-draggable-drawer-open:after { + content: "" !important; + position: absolute !important; + width: 100% !important; + height: 4px !important; + color: black !important; + bottom: 0 !important; + background-color: var(--i-amphtml-outlink-cta-text-color) !important; + opacity: .6 !important; + transform-origin: left !important; + animation: progress-bar-animation .6s both cubic-bezier(0.4, 0.0, 1, 1) !important; +} + +[dir="rtl"] .i-amphtml-story-page-attachment-remote.i-amphtml-story-draggable-drawer-open:after { + transform-origin: right !important; +} + +@keyframes progress-bar-animation { + 0% { + transform: scaleX(0) + } + 100% { + transform: scaleX(1) + } } diff --git a/extensions/amp-story/1.0/amp-story-draggable-drawer.js b/extensions/amp-story/1.0/amp-story-draggable-drawer.js index 5d68daae15b0..94ffe93c8f6d 100644 --- a/extensions/amp-story/1.0/amp-story-draggable-drawer.js +++ b/extensions/amp-story/1.0/amp-story-draggable-drawer.js @@ -1,5 +1,5 @@ /** - * Copyright 2019 The AMP HTML Authors. All Rights Reserved. + * Copyright 2021 The AMP HTML Authors. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -30,7 +30,6 @@ import {dev, devAssert} from '../../../src/log'; import {getLocalizationService} from './amp-story-localization-service'; import {htmlFor} from '#core/dom/static-template'; import {isAmpElement} from '../../../src/amp-element-helpers'; -import {isPageAttachmentUiV2ExperimentOn} from './amp-story-page-attachment-ui-v2'; import {listen} from '../../../src/event-helper'; import {resetStyles, setImportantStyles, toggle} from '#core/dom/style'; @@ -125,7 +124,6 @@ export class DraggableDrawer extends AMP.BaseElement { this.openThreshold_ = Infinity; /** - * For amp-story-page-attachment-ui-v2 experiment * Used for offsetting drag. * @private {?number} */ @@ -156,27 +154,19 @@ export class DraggableDrawer extends AMP.BaseElement { ) ); - if (isPageAttachmentUiV2ExperimentOn(this.win)) { - const spacerEl = this.win.document.createElement('button'); - spacerEl.classList.add('i-amphtml-story-draggable-drawer-spacer'); - spacerEl.classList.add('i-amphtml-story-system-reset'); - spacerEl.setAttribute('role', 'button'); - const localizationService = getLocalizationService( - devAssert(this.element) + const spacerEl = this.win.document.createElement('button'); + spacerEl.classList.add('i-amphtml-story-draggable-drawer-spacer'); + spacerEl.classList.add('i-amphtml-story-system-reset'); + spacerEl.setAttribute('role', 'button'); + const localizationService = getLocalizationService(devAssert(this.element)); + if (localizationService) { + const localizedCloseString = localizationService.getLocalizedString( + LocalizedStringId.AMP_STORY_CLOSE_BUTTON_LABEL ); - if (localizationService) { - const localizedCloseString = localizationService.getLocalizedString( - LocalizedStringId.AMP_STORY_CLOSE_BUTTON_LABEL - ); - spacerEl.setAttribute('aria-label', localizedCloseString); - } - this.containerEl.insertBefore(spacerEl, this.contentEl); - this.contentEl.appendChild(headerShadowRootEl); - this.element.classList.add('i-amphtml-amp-story-page-attachment-ui-v2'); - this.headerEl.classList.add('i-amphtml-amp-story-page-attachment-ui-v2'); - } else { - templateEl.insertBefore(headerShadowRootEl, templateEl.firstChild); + spacerEl.setAttribute('aria-label', localizedCloseString); } + this.containerEl.insertBefore(spacerEl, this.contentEl); + this.contentEl.appendChild(headerShadowRootEl); this.element.appendChild(templateEl); this.element.setAttribute('aria-hidden', true); @@ -214,39 +204,37 @@ export class DraggableDrawer extends AMP.BaseElement { true /** callToInitialize */ ); - if (isPageAttachmentUiV2ExperimentOn(this.win)) { - const spacerEl = dev().assertElement( - this.element.querySelector('.i-amphtml-story-draggable-drawer-spacer') + const spacerEl = dev().assertElement( + this.element.querySelector('.i-amphtml-story-draggable-drawer-spacer') + ); + + // Handle click on spacer element to close. + spacerEl.addEventListener('click', () => { + this.close_(); + }); + + // For displaying sticky header on mobile. + new this.win.IntersectionObserver((e) => { + this.headerEl.classList.toggle( + 'i-amphtml-story-draggable-drawer-header-stuck', + !e[0].isIntersecting ); + }).observe(spacerEl); - // Handle click on spacer element to close. - spacerEl.addEventListener('click', () => { - this.close_(); - }); + // Update spacerElHeight_ on resize for drag offset. + new this.win.ResizeObserver((e) => { + this.spacerElHeight_ = e[0].contentRect.height; + }).observe(spacerEl); - // For displaying sticky header on mobile. - new this.win.IntersectionObserver((e) => { - this.headerEl.classList.toggle( - 'i-amphtml-story-draggable-drawer-header-stuck', - !e[0].isIntersecting - ); - }).observe(spacerEl); - - // Update spacerElHeight_ on resize for drag offset. - new this.win.ResizeObserver((e) => { - this.spacerElHeight_ = e[0].contentRect.height; - }).observe(spacerEl); - - // Reset scroll position on end of close transiton. - this.element.addEventListener('transitionend', (e) => { - if ( - e.propertyName === 'transform' && - this.state === DrawerState.CLOSED - ) { - this.containerEl./*OK*/ scrollTop = 0; - } - }); - } + // Reset scroll position on end of close transiton. + this.element.addEventListener('transitionend', (e) => { + if ( + e.propertyName === 'transform' && + this.state_ === DrawerState.CLOSED + ) { + this.containerEl./*OK*/ scrollTop = 0; + } + }); } /** @@ -534,10 +522,8 @@ export class DraggableDrawer extends AMP.BaseElement { return; } this.state = DrawerState.DRAGGING_TO_OPEN; - let drag = Math.max(deltaY, -this.dragCap_); - if (isPageAttachmentUiV2ExperimentOn(this.win)) { - drag -= this.spacerElHeight_; - } + const drag = Math.max(deltaY, -this.dragCap_) - this.spacerElHeight_; + translate = `translate3d(0, calc(100% + ${drag}px), 0)`; break; case DrawerState.OPEN: diff --git a/extensions/amp-story/1.0/amp-story-open-page-attachment.css b/extensions/amp-story/1.0/amp-story-open-page-attachment.css index 1bac23a104d7..f95320e66d44 100644 --- a/extensions/amp-story/1.0/amp-story-open-page-attachment.css +++ b/extensions/amp-story/1.0/amp-story-open-page-attachment.css @@ -14,72 +14,25 @@ * limitations under the License. */ -/** amp-story-page open attachment message Shadow DOM. */ - -@keyframes open-attachment-fly-in { - 0% { - opacity: 0; - transform: translateY(6px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes open-attachment-icon { - 0% { - transform: translateY(14px); - } - to { - transform: translateY(0); - } -} - -@keyframes open-attachment-icon-explode { - 0% { - transform: scale(0); - } - to { - transform: scale(1); - box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.12); - } -} - -@keyframes open-attachment-icon-color { - 0% { - background: #fff; - } - to { - background: rgba(0, 0, 0, 0.87); - text-shadow: none; - } -} - -@keyframes open-attachment-bar-left { - 0% { - transform: rotate(0deg); - } - to { - transform: rotate(-30deg); - } -} - -@keyframes open-attachment-bar-right { - 0% { - transform: rotate(0deg); - } - to { - transform: rotate(30deg); - } -} - /** * Hiding the element and only showing it on the active page so the animation * triggers every time the page becomes active. */ .i-amphtml-story-page-open-attachment { display: none !important; + --i-amphtml-chip-background-color: rgba(255, 255, 255, 0.5) !important; + --i-amphtml-img-background-color: white !important; + --i-amphtml-label-text-color: white !important; + --i-amphtml-arrow-color: black !important; + --i-amphtml-page-attachment-ui-animation-delay: 1s !important; + --i-amphtml-page-attachment-ui-animation-duration: .6s !important; +} + +[theme="dark"].i-amphtml-story-page-open-attachment { + --i-amphtml-chip-background-color: rgba(0, 0, 0, 0.5) !important; + --i-amphtml-img-background-color: black !important; + --i-amphtml-label-text-color: black !important; + --i-amphtml-arrow-color: white !important; } .i-amphtml-story-page-open-attachment[active] { @@ -94,11 +47,15 @@ background: linear-gradient(0, rgba(0, 0, 0, 0.15), transparent) !important; pointer-events: none !important; z-index: 3 !important; - animation: open-attachment-fly-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) both !important; -webkit-touch-callout: default !important; /* Allow long pressing the button to open context menu in iOS */ text-decoration: none !important; } +.i-amphtml-story-page-open-attachment:not([active]) { + /* Prevent tabbing to inactive page's buttons */ + visibility: hidden !important; +} + .i-amphtml-story-page-open-attachment > * { cursor: pointer !important; pointer-events: auto !important; @@ -169,45 +126,7 @@ white-space: nowrap !important; } -/** For amp-story-inline-page-attachment-v2 experiment elements. */ -.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment { - --i-amphtml-chip-background-color: rgba(255, 255, 255, 0.5) !important; - --i-amphtml-img-background-color: white !important; - --i-amphtml-label-text-color: white !important; - --i-amphtml-arrow-color: black !important; - --i-amphtml-page-attachment-ui-animation-delay: 1s !important; - --i-amphtml-page-attachment-ui-animation-duration: .6s !important; -} - -[theme="dark"].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment { - --i-amphtml-chip-background-color: rgba(0, 0, 0, 0.5) !important; - --i-amphtml-img-background-color: black !important; - --i-amphtml-label-text-color: black !important; - --i-amphtml-arrow-color: white !important; -} - -.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment { - display: flex !important; - align-items: center !important; - justify-content: center !important; - flex-direction: column !important; - position: absolute !important; - bottom: 0 !important; - left: 0 !important; - width: 100% !important; - background: linear-gradient(0, rgba(0, 0, 0, 0.15), transparent) !important; - pointer-events: none !important; - -webkit-touch-callout: default !important; /* Allow long pressing the button to open context menu in iOS */ - text-decoration: none !important; - animation: none !important; -} - -.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment:not([active]) { - /* Prevent tabbing to inactive page's buttons */ - visibility: hidden !important; -} - -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-label { + .i-amphtml-story-page-attachment-label { font-family: 'Roboto', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; @@ -220,13 +139,11 @@ line-height: 18px !important; } -/** For amp-story-inline-page-attachment-v2 inline default. */ -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-open-attachment-label { + .i-amphtml-story-page-open-attachment-label { color: var(--i-amphtml-label-text-color) !important; } -/** For amp-story-inline-page-attachment-v2 inline with images. */ -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-inline-page-attachment-chip { + .i-amphtml-story-inline-page-attachment-chip { background-color: var(--i-amphtml-chip-background-color) !important; display: flex !important; border-radius: 24px !important; @@ -235,7 +152,7 @@ margin-bottom: 12px !important; } -.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment[active] .i-amphtml-story-inline-page-attachment-chip { +.i-amphtml-story-page-open-attachment[active] .i-amphtml-story-inline-page-attachment-chip { animation: tap-scale var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important; } @@ -283,7 +200,7 @@ background-repeat: no-repeat !important; } -.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment[active] .i-amphtml-story-inline-page-attachment-arrow:before { +.i-amphtml-story-page-open-attachment[active] .i-amphtml-story-inline-page-attachment-arrow:before { animation: move-up-arrow-in-circle var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important; } @@ -291,30 +208,31 @@ background-image: url('data:image/svg+xml;charset=utf-8,') !important; } -.i-amphtml-amp-story-page-attachment-ui-v2:not([href]) .i-amphtml-story-page-attachment-label { +.i-amphtml-story-page-open-attachment:not([href]) .i-amphtml-story-page-attachment-label { margin-bottom: 20px !important; color: var(--i-amphtml-label-text-color) !important; } -/** For amp-story-outlink-page-attachment-v2 outlink. */ -.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment { +/** For amp-story-page-outlink button. */ + +.i-amphtml-story-page-open-attachment { --i-amphtml-outlink-cta-background-color: white !important; --i-amphtml-outlink-cta-text-color: black !important; background: linear-gradient(0, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)) !important; } -[theme="dark"].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment { +[theme="dark"].i-amphtml-story-page-open-attachment { --i-amphtml-outlink-cta-background-color: black !important; --i-amphtml-outlink-cta-text-color: white !important; background: linear-gradient(0, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0)) !important; } -[href].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment { +[href].i-amphtml-story-page-open-attachment { /* Outlink attachments do not need the linear gradient. */ background: none !important; } -[href].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment[active] { +[href].i-amphtml-story-page-open-attachment[active] { animation: tap-scale var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important; } @@ -326,7 +244,7 @@ filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.3)) !important; } -.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-open-attachment[active] .i-amphtml-story-outlink-page-attachment-arrow { +.i-amphtml-story-page-open-attachment[active] .i-amphtml-story-outlink-page-attachment-arrow { animation: move-up-arrow var(--i-amphtml-page-attachment-ui-animation-duration) var(--i-amphtml-page-attachment-ui-animation-delay) both !important; } @@ -396,6 +314,10 @@ color: var(--i-amphtml-outlink-cta-text-color) !important; } +[href] .i-amphtml-story-page-attachment-label:only-child { + padding-inline-start: 8px !important; +} + .i-amphtml-story-outlink-page-attachment-label:only-child { padding-inline-start: 8px !important; } diff --git a/extensions/amp-story/1.0/amp-story-open-page-attachment.js b/extensions/amp-story/1.0/amp-story-open-page-attachment.js index d8c942136a45..9efdfcb5a237 100644 --- a/extensions/amp-story/1.0/amp-story-open-page-attachment.js +++ b/extensions/amp-story/1.0/amp-story-open-page-attachment.js @@ -27,7 +27,6 @@ import { maybeMakeProxyUrl, } from './utils'; import {htmlFor, htmlRefs} from '#core/dom/static-template'; -import {isPageAttachmentUiV2ExperimentOn} from './amp-story-page-attachment-ui-v2'; import {toWin} from '#core/window'; /** @@ -39,43 +38,27 @@ const CtaAccentElement = { }; /** + * For amp-story-page-attachment elements. * @param {!Element} element * @return {!Element} */ -export const buildOldAttachmentElement = (element) => +export const buildInlineElement = (element) => htmlFor(element)` - - - - - - - `; - -/** - * For amp-story-page-attachment-ui-v2. - * No image by default, if images are defined they are appended to the template. - * @param {!Element} element - * @return {!Element} - */ -export const buildOpenInlineAttachmentElement = (element) => - htmlFor(element)` - +
`; /** - * For amp-story-page-attachment-ui-v2. + * UI template for amp-story-page-outlink elements and + * the legacy amp-story-page-attachment with href. * @param {!Element} element * @return {!Element} */ -const buildOpenOutlinkAttachmentElement = (element) => +const buildOutlinkElement = (element) => htmlFor(element)` - +
@@ -83,11 +66,11 @@ const buildOpenOutlinkAttachmentElement = (element) => `; /** - * For amp-story-page-attachment-ui-v2. + * Link icon used in amp-story-page-outlink UI and drawer. * @param {!Element} element * @return {!Element} */ -export const buildOpenAttachmentElementLinkIcon = (element) => +export const buildOutlinkLinkIconElement = (element) => htmlFor(element)` @@ -101,59 +84,16 @@ export const buildOpenAttachmentElementLinkIcon = (element) => * @return {!Element} */ export const renderPageAttachmentUI = (pageEl, attachmentEl) => { - if (isPageAttachmentUiV2ExperimentOn(pageEl.getAmpDoc().win)) { - // Outlinks can be an amp-story-page-outlink or the legacy version, - // an amp-story-page-attachment with an href. - const isOutlink = - attachmentEl.tagName === 'AMP-STORY-PAGE-OUTLINK' || - attachmentEl.getAttribute('href'); - if (isOutlink) { - return renderOutlinkPageAttachmentUI(pageEl, attachmentEl); - } else { - return renderInlinePageAttachmentUi(pageEl, attachmentEl); - } - } - // This codepath can be removed after amp-story-page-attachment-ui-v2 is launched. - return renderOldPageAttachmentUI(pageEl, attachmentEl); -}; - -/** - * Renders default page attachment UI. - * @param {!Element} pageEl - * @param {!Element} attachmentEl - * @return {!Element} - */ -const renderOldPageAttachmentUI = (pageEl, attachmentEl) => { - const openAttachmentEl = buildOldAttachmentElement(pageEl); - - // If the attachment is a link, copy href to the element so it can be previewed on hover and long press. - const attachmentHref = attachmentEl.getAttribute('href'); - if (attachmentHref) { - openAttachmentEl.setAttribute('href', attachmentHref); - } - - const textEl = openAttachmentEl.querySelector( - '.i-amphtml-story-page-open-attachment-label' - ); - - const openLabelAttr = - attachmentEl.getAttribute('cta-text') || - attachmentEl.getAttribute('data-cta-text'); - const openLabel = - (openLabelAttr && openLabelAttr.trim()) || - getLocalizationService(pageEl).getLocalizedString( - LocalizedStringId.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL - ); - - // Copy title to the element if it exists. - const attachmentTitle = attachmentEl.getAttribute('data-title'); - if (attachmentTitle) { - openAttachmentEl.setAttribute('title', attachmentTitle); + // Outlinks can be an amp-story-page-outlink or the legacy version, + // an amp-story-page-attachment with an href. + const isOutlink = + attachmentEl.tagName === 'AMP-STORY-PAGE-OUTLINK' || + attachmentEl.getAttribute('href'); + if (isOutlink) { + return renderOutlinkUI(pageEl, attachmentEl); + } else { + return renderInlineUi(pageEl, attachmentEl); } - - textEl.textContent = openLabel; - - return openAttachmentEl; }; /** @@ -162,8 +102,8 @@ const renderOldPageAttachmentUI = (pageEl, attachmentEl) => { * @param {!Element} attachmentEl * @return {!Element} */ -const renderOutlinkPageAttachmentUI = (pageEl, attachmentEl) => { - const openAttachmentEl = buildOpenOutlinkAttachmentElement(pageEl); +const renderOutlinkUI = (pageEl, attachmentEl) => { + const openAttachmentEl = buildOutlinkElement(pageEl); // amp-story-page-outlink requires an anchor element child for SEO and analytics optimisations. // amp-story-page-attachment uses this same codepath and allows an href attribute. @@ -181,7 +121,8 @@ const renderOutlinkPageAttachmentUI = (pageEl, attachmentEl) => { // Copy title to the element if it exists. const attachmentTitle = - anchorChild?.getAttribute('title') || attachmentEl.getAttribute('title'); + anchorChild?.getAttribute('title') || + attachmentEl.getAttribute('data-title'); if (attachmentTitle) { openAttachmentEl.setAttribute('title', attachmentTitle); } @@ -224,7 +165,7 @@ const renderOutlinkPageAttachmentUI = (pageEl, attachmentEl) => { chipEl.prepend(ctaImgEl); } else if (!openImgAttr) { // Attach link icon SVG by default. - const linkImage = buildOpenAttachmentElementLinkIcon(attachmentEl); + const linkImage = buildOutlinkLinkIconElement(attachmentEl); chipEl.prepend(linkImage); } @@ -237,8 +178,8 @@ const renderOutlinkPageAttachmentUI = (pageEl, attachmentEl) => { * @param {!Element} attachmentEl * @return {!Element} */ -const renderInlinePageAttachmentUi = (pageEl, attachmentEl) => { - const openAttachmentEl = buildOpenInlineAttachmentElement(pageEl); +const renderInlineUi = (pageEl, attachmentEl) => { + const openAttachmentEl = buildInlineElement(pageEl); // Set theme. const theme = attachmentEl.getAttribute('theme'); diff --git a/extensions/amp-story/1.0/amp-story-page-attachment-ui-v2.js b/extensions/amp-story/1.0/amp-story-page-attachment-ui-v2.js deleted file mode 100644 index a32ebc9d8157..000000000000 --- a/extensions/amp-story/1.0/amp-story-page-attachment-ui-v2.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * Copyright 2021 The AMP HTML Authors. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import {isExperimentOn} from '#experiments'; - -/** - * Returns true if new inline attachment UI is enabled. - * @param {!Window} win - * @return {boolean} - */ -export const isPageAttachmentUiV2ExperimentOn = (win) => { - return isExperimentOn(win, 'amp-story-page-attachment-ui-v2'); -}; diff --git a/extensions/amp-story/1.0/amp-story-page-attachment.css b/extensions/amp-story/1.0/amp-story-page-attachment.css index 19f32f9c6f79..30da06536541 100644 --- a/extensions/amp-story/1.0/amp-story-page-attachment.css +++ b/extensions/amp-story/1.0/amp-story-page-attachment.css @@ -21,9 +21,26 @@ } .i-amphtml-story-page-attachment-remote { - height: 48px !important; + height: 56px !important; bottom: 0 !important; top: auto !important; + --i-amphtml-outlink-cta-background-color: white !important; + --i-amphtml-outlink-cta-text-color: black !important; +} + +[theme="dark"].i-amphtml-story-page-attachment-remote { + --i-amphtml-outlink-cta-background-color: black !important; + --i-amphtml-outlink-cta-text-color: white !important; +} + +amp-story[desktop] .i-amphtml-story-page-attachment-remote { + /* Shows outlink url preview on mobile only. */ + display: none !important; +} + +.i-amphtml-story-page-attachment-remote > a:first-child { + /* Hides the element child in amp-story-page-outlink which is always the first direct child a element. */ + display: none !important; } .i-amphtml-story-page-attachment-remote .i-amphtml-story-draggable-drawer-container { @@ -42,80 +59,15 @@ justify-content: space-between !important; line-height: 48px !important; text-decoration: none !important; -} - -.i-amphtml-story-page-attachment-remote-title { - max-width: calc(100% - 30px /* 24px icon + 6px margin */) !important; - overflow: hidden !important; - text-overflow: ellipsis !important; -} - -.i-amphtml-story-draggable-drawer-theme-dark .i-amphtml-story-page-attachment-remote-title { - color: #9AA0A6 !important; -} - -.i-amphtml-story-page-attachment-remote-icon { - display: block !important; - height: 24px !important; - width: 24px !important; - padding: 0px !important; - background-image: url('data:image/svg+xml;charset=utf-8,') !important; -} - -/** Remote attachment opening animation */ - -.i-amphtml-story-page-attachment-expand { - position: relative !important; - width: 100% !important; - height: 100% !important; - background: #FFF !important; - z-index: 100000 !important; /** System layer + 1 */ - animation: i-amphtml-open-3p-attachment 120ms cubic-bezier(0.0, 0.0, 0.2, 1) forwards !important; -} - -@keyframes i-amphtml-open-3p-attachment { - 0% { - transform: scaleX(0); - opacity: 0.3; - } - 100% { - transform: scaleX(1); - opacity: 1; - } -} - -/** For amp-story-outlink-page-attachment-v2 experiment elements. */ - -amp-story[desktop] .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote { - /* Shows outlink url preview on mobile only. */ - display: none !important; -} - -.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote { - height: 56px !important; - --i-amphtml-outlink-cta-background-color: white !important; - --i-amphtml-outlink-cta-text-color: black !important; -} - -[theme="dark"].i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote { - --i-amphtml-outlink-cta-background-color: black !important; - --i-amphtml-outlink-cta-text-color: white !important; -} - -[href].i-amphtml-amp-story-page-attachment-ui-v2.amp-story-draggable-drawer-root.i-amphtml-story-draggable-drawer-open { - /* Faster duration for outlink drawer. */ - transition-duration: .3s !important; -} - -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-content { height: 56px !important; padding-inline-start: 12px !important; padding-inline-end: 18px !important; background: var(--i-amphtml-outlink-cta-background-color) !important; } -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-content .i-amphtml-story-page-attachment-remote-img, -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-content .i-amphtml-story-page-open-attachment-link-icon { + +.i-amphtml-story-page-attachment-remote-content .i-amphtml-story-page-attachment-remote-img, +.i-amphtml-story-page-attachment-remote-content .i-amphtml-story-page-open-attachment-link-icon { width: 32px !important; height: 32px !important; flex-shrink: 0 !important; @@ -126,11 +78,14 @@ amp-story[desktop] .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-pa overflow: hidden !important; } -.i-amphtml-amp-story-page-attachment-ui-v2 svg.i-amphtml-story-page-open-attachment-link-icon { +.i-amphtml-story-page-open-attachment-link-icon { fill: var(--i-amphtml-outlink-cta-text-color) !important; } -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-title { +.i-amphtml-story-page-attachment-remote-title { + max-width: calc(100% - 30px /* 24px icon + 6px margin */) !important; + overflow: hidden !important; + text-overflow: ellipsis !important; font-size: 14px !important; padding: 0 12px !important; color: var(--i-amphtml-outlink-cta-text-color) !important; @@ -138,62 +93,49 @@ amp-story[desktop] .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-pa display: flex !important; } -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-title :first-child { +.i-amphtml-story-page-attachment-remote-title :first-child { font-weight: bold !important; } -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-title :first-child:after { +.i-amphtml-story-page-attachment-remote-title :first-child:after { /* For RTL supportted space. */ content: "\00a0 " !important; } -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-title :nth-child(2) { +.i-amphtml-story-page-attachment-remote-title :nth-child(2) { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } -.i-amphtml-amp-story-page-attachment-ui-v2 .i-amphtml-story-page-attachment-remote-icon { - margin-inline-start: auto !important; - width: 20px !important; +.i-amphtml-story-page-attachment-remote-icon { + display: block !important; height: 20px !important; + width: 20px !important; + padding: 0px !important; + margin-inline-start: auto !important; flex-shrink: 0 !important; fill: var(--i-amphtml-outlink-cta-text-color) !important; - background: none !important; } -.i-amphtml-story-page-attachment-remote > a:first-child { - /* Hides the element child in amp-story-page-outlink which is always the first direct child a element. */ - display: none !important; -} +/** Remote attachment opening animation */ -.i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote.i-amphtml-story-draggable-drawer-open:after { - content: "" !important; - position: absolute !important; +.i-amphtml-story-page-attachment-expand { + position: relative !important; width: 100% !important; - height: 4px !important; - color: black !important; - bottom: 0 !important; - background-color: var(--i-amphtml-outlink-cta-text-color) !important; - opacity: .6 !important; - transform-origin: left !important; - animation: progress-bar-animation .6s both cubic-bezier(0.4, 0.0, 1, 1) !important; -} - -[dir="rtl"] .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote.i-amphtml-story-draggable-drawer-open:after { - transform-origin: right !important; -} - -@keyframes progress-bar-animation { - 0% { - transform: scaleX(0) - } - 100% { - transform: scaleX(1) - } + height: 100% !important; + background: #FFF !important; + z-index: 100000 !important; /** System layer + 1 */ + animation: i-amphtml-open-3p-attachment 120ms cubic-bezier(0.0, 0.0, 0.2, 1) forwards !important; } -amp-story:not([desktop]) .i-amphtml-amp-story-page-attachment-ui-v2.i-amphtml-story-page-attachment-remote .i-amphtml-story-draggable-drawer-spacer { - /* Hide spacer in remote attachment. */ - display: none !important; +@keyframes i-amphtml-open-3p-attachment { + 0% { + transform: scaleX(0); + opacity: 0.3; + } + 100% { + transform: scaleX(1); + opacity: 1; + } } diff --git a/extensions/amp-story/1.0/amp-story-page-attachment.js b/extensions/amp-story/1.0/amp-story-page-attachment.js index 2acfd6faf876..2d48919efebd 100644 --- a/extensions/amp-story/1.0/amp-story-page-attachment.js +++ b/extensions/amp-story/1.0/amp-story-page-attachment.js @@ -20,21 +20,17 @@ import {HistoryState, setHistoryState} from './history'; import {LocalizedStringId} from '#service/localization/strings'; import {Services} from '#service'; import {StoryAnalyticsEvent, getAnalyticsService} from './story-analytics'; -import {buildOpenAttachmentElementLinkIcon} from './amp-story-open-page-attachment'; +import {buildOutlinkLinkIconElement} from './amp-story-open-page-attachment'; import {closest} from '#core/dom/query'; import {dev, devAssert} from '../../../src/log'; import {getHistoryState} from '#core/window/history'; import {getLocalizationService} from './amp-story-localization-service'; import {htmlFor, htmlRefs} from '#core/dom/static-template'; -import {isPageAttachmentUiV2ExperimentOn} from './amp-story-page-attachment-ui-v2'; import {removeElement} from '#core/dom'; import {setImportantStyles, toggle} from '#core/dom/style'; import {triggerClickFromLightDom} from './utils'; -/** @const {string} */ -const DARK_THEME_CLASS = 'i-amphtml-story-draggable-drawer-theme-dark'; - /** * Distance to swipe before opening attachment. * @const {number} @@ -45,19 +41,11 @@ const OPEN_THRESHOLD_PX = 150; * Max pixels to transform the remote attachment URL preview. Equivilent to the height of preview element. * @const {number} */ -const DRAG_CAP_PX = 48; - -/** - * Max pixels to transform the remote attachment URL preview. Equivilent to the height of preview element. - * Used for the amp-story-outlink-page-attachment-v2 experiment. - * @const {number} - */ -const DRAG_CAP_PX_V2 = 56; +const DRAG_CAP_PX = 56; /** * Duration of post-tap URL preview progress bar animation minus 100ms. * The minus 100ms roughly accounts for the small system delay in opening a link. - * Used for the amp-story-outlink-page-attachment-v2 experiment. * @const {number} */ const POST_TAP_ANIMATION_DURATION = 500; @@ -105,13 +93,8 @@ export class AmpStoryPageAttachment extends DraggableDrawer { const theme = this.element.getAttribute('theme')?.toLowerCase(); if (theme && AttachmentTheme.DARK === theme) { - if (isPageAttachmentUiV2ExperimentOn(this.win)) { - this.headerEl.setAttribute('theme', theme); - this.element.setAttribute('theme', theme); - } else { - this.headerEl.classList.add(DARK_THEME_CLASS); - this.element.classList.add(DARK_THEME_CLASS); - } + this.headerEl.setAttribute('theme', theme); + this.element.setAttribute('theme', theme); } // Outlinks can be an amp-story-page-outlink or the legacy version, @@ -125,13 +108,6 @@ export class AmpStoryPageAttachment extends DraggableDrawer { this.buildInline_(); } - if ( - this.type_ === AttachmentType.OUTLINK && - !isPageAttachmentUiV2ExperimentOn(this.win) - ) { - this.buildRemote_(); - } - this.win.addEventListener('pageshow', (event) => { // On browser back, Safari does not reload the page but resumes its cached // version. This event's parameter lets us know when this happens so we @@ -150,12 +126,9 @@ export class AmpStoryPageAttachment extends DraggableDrawer { */ layoutCallback() { super.layoutCallback(); - // Outlink attachment v2 renders an image and must be built in layoutCallback. - if ( - this.type_ === AttachmentType.OUTLINK && - isPageAttachmentUiV2ExperimentOn(this.win) - ) { - this.buildRemoteV2_(); + // Outlink renders an image and must be built in layoutCallback. + if (this.type_ === AttachmentType.OUTLINK) { + this.buildOutlink_(); } } @@ -184,17 +157,12 @@ export class AmpStoryPageAttachment extends DraggableDrawer { titleEl.textContent = this.element.getAttribute('data-title'); } - if (isPageAttachmentUiV2ExperimentOn(this.win)) { - const titleAndCloseWrapperEl = this.headerEl.appendChild( - htmlFor(this.element)` + const titleAndCloseWrapperEl = this.headerEl.appendChild( + htmlFor(this.element)`
` - ); - titleAndCloseWrapperEl.appendChild(closeButtonEl); - titleAndCloseWrapperEl.appendChild(titleEl); - } else { - this.headerEl.appendChild(closeButtonEl); - this.headerEl.appendChild(titleEl); - } + ); + titleAndCloseWrapperEl.appendChild(closeButtonEl); + titleAndCloseWrapperEl.appendChild(titleEl); const templateEl = this.element.querySelector( '.i-amphtml-story-draggable-drawer' @@ -210,50 +178,13 @@ export class AmpStoryPageAttachment extends DraggableDrawer { } /** - * Builds remote page attachment's drawer UI. - * Can be removed when amp-story-page-attachment-ui-v2 is laumched. + * Builds outlink CTA drawer UI. * @private */ - buildRemote_() { + buildOutlink_() { this.setDragCap_(DRAG_CAP_PX); this.setOpenThreshold_(OPEN_THRESHOLD_PX); - this.headerEl.classList.add( - 'i-amphtml-story-draggable-drawer-header-attachment-remote' - ); - this.element.classList.add('i-amphtml-story-page-attachment-remote'); - // Use an anchor element to make this a real link in vertical rendering. - const link = htmlFor(this.element)` - - - - `; - // URL will be validated and resolved based on the canonical URL if relative - // when navigating. - link.setAttribute('href', this.element.getAttribute('href')); - this.contentEl.appendChild(link); - - this.contentEl.querySelector( - '.i-amphtml-story-page-attachment-remote-title' - ).textContent = - this.element.getAttribute('data-title') || - Services.urlForDoc(this.element).getSourceOrigin( - this.element.getAttribute('href') || - // Used if amp-story-page-attachment-ui-v2 is off and - // this.elmement is an amp-story-page-outlink. - this.element.querySelector('a').getAttribute('href') - ); - } - - /** - * Builds remote V2 page attachment's drawer UI. - * Used for the amp-story-page-attachment-ui-v2 experiment. - * @private - */ - buildRemoteV2_() { - this.setDragCap_(DRAG_CAP_PX_V2); - this.setOpenThreshold_(OPEN_THRESHOLD_PX); - this.headerEl.classList.add( 'i-amphtml-story-draggable-drawer-header-attachment-remote' ); @@ -292,7 +223,7 @@ export class AmpStoryPageAttachment extends DraggableDrawer { link.prepend(ctaImgEl); } else if (!openImgAttr) { // Attach link icon SVG by default. - const linkImage = buildOpenAttachmentElementLinkIcon(link); + const linkImage = buildOutlinkLinkIconElement(link); link.prepend(linkImage); } @@ -399,14 +330,7 @@ export class AmpStoryPageAttachment extends DraggableDrawer { ); if (this.type_ === AttachmentType.OUTLINK) { - if ( - isPageAttachmentUiV2ExperimentOn(this.win) || - this.element.parentElement.querySelector('amp-story-page-outlink') - ) { - this.openRemoteV2_(); - } else { - this.openRemote_(); - } + this.openRemote_(); } } @@ -415,7 +339,7 @@ export class AmpStoryPageAttachment extends DraggableDrawer { * and redirects to the specified URL. * @private */ - openRemoteV2_() { + openRemote_() { // If the element is an amp-story-page-outlink the click target is its anchor element child. // This is for SEO and analytics optimisation. // Otherwise the element is the legacy version, amp-story-page-attachment with an href, @@ -448,31 +372,6 @@ export class AmpStoryPageAttachment extends DraggableDrawer { } } - /** - * Triggers a remote attachment opening animation, and redirects to the - * specified URL. - * @private - */ - openRemote_() { - const animationEl = this.win.document.createElement('div'); - animationEl.classList.add('i-amphtml-story-page-attachment-expand'); - const storyEl = closest(this.element, (el) => el.tagName === 'AMP-STORY'); - - this.mutateElement(() => { - storyEl.appendChild(animationEl); - }).then(() => { - // Give some time for the 120ms CSS animation to run (cf - // amp-story-page-attachment.css). The navigation itself will take some - // time, depending on the target and network conditions. - this.win.setTimeout(() => { - const clickTarget = this.element.parentElement - .querySelector('.i-amphtml-story-page-open-attachment-host') - .shadowRoot.querySelector('a.i-amphtml-story-page-open-attachment'); - triggerClickFromLightDom(clickTarget, this.element); - }); - }, 50); - } - /** * Ensures the history state we added when opening the drawer is popped, * and closes the drawer either directly, or through the onPop callback. diff --git a/extensions/amp-story/1.0/amp-story-page.js b/extensions/amp-story/1.0/amp-story-page.js index 3e8b569292ef..65efbaf2e2ed 100644 --- a/extensions/amp-story/1.0/amp-story-page.js +++ b/extensions/amp-story/1.0/amp-story-page.js @@ -71,7 +71,6 @@ import {getMode} from '../../../src/mode'; import {htmlFor} from '#core/dom/static-template'; import {isAutoplaySupported} from '#core/dom/video'; import {isExperimentOn} from '#experiments'; -import {isPageAttachmentUiV2ExperimentOn} from './amp-story-page-attachment-ui-v2'; import {isPrerenderActivePage} from './prerender-active-page'; import {listen, listenOnce} from '../../../src/event-helper'; import {CSS as pageAttachmentCSS} from '../../../build/amp-story-open-page-attachment-0.1.css'; @@ -1828,10 +1827,8 @@ export class AmpStoryPage extends AMP.BaseElement { container.setAttribute('role', 'button'); container.addEventListener('click', (e) => { - if (isPageAttachmentUiV2ExperimentOn(this.win)) { - // Prevent default so link can be opened programmatically after URL preview is shown. - e.preventDefault(); - } + // Prevent default so link can be opened programmatically after URL preview is shown. + e.preventDefault(); this.openAttachment(); }); diff --git a/extensions/amp-story/1.0/test/test-amp-story-page.js b/extensions/amp-story/1.0/test/test-amp-story-page.js index 188670204a1b..4e720eaa2cf8 100644 --- a/extensions/amp-story/1.0/test/test-amp-story-page.js +++ b/extensions/amp-story/1.0/test/test-amp-story-page.js @@ -1,5 +1,5 @@ /** - * Copyright 2018 The AMP HTML Authors. All Rights Reserved. + * Copyright 2021 The AMP HTML Authors. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -29,7 +29,6 @@ import {htmlFor} from '#core/dom/static-template'; import {installFriendlyIframeEmbed} from '../../../../src/friendly-iframe-embed'; import {registerServiceBuilder} from '../../../../src/service-helpers'; import {scopedQuerySelectorAll} from '#core/dom/query'; -import {toggleExperiment} from '#experiments'; const extensions = ['amp-story:1.0', 'amp-audio']; @@ -670,11 +669,12 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => { expect(openAttachmentEl).to.exist; }); - it('should build the open attachment UI with target="_top" to navigate in top window. For viewers, this ensures the link will open in the parent window.', async () => { + it('should build the legacy outlinking amp-story-page-attachment UI with target="_top" to navigate in top window. For viewers, this ensures the link will open in the parent window.', async () => { const attachmentEl = win.document.createElement( 'amp-story-page-attachment' ); attachmentEl.setAttribute('layout', 'nodisplay'); + attachmentEl.setAttribute('href', 'google.com'); element.appendChild(attachmentEl); page.buildCallback(); @@ -688,15 +688,12 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => { expect(openAttachmentEl.getAttribute('target')).to.eql('_top'); }); - it('should build the new outlink page attachment UI with target="_top" to navigate in top level browsing context. For viewers, this ensures the link will open in the parent window.', async () => { - toggleExperiment(win, 'amp-story-page-attachment-ui-v2', true); - - const attachmentEl = win.document.createElement( - 'amp-story-page-attachment' - ); - attachmentEl.setAttribute('layout', 'nodisplay'); - attachmentEl.setAttribute('href', 'google.com'); - element.appendChild(attachmentEl); + it('should build amp-story-page-outlink UI with target="_top" to navigate in top level browsing context. For viewers, this ensures the link will open in the parent window.', async () => { + const outlinkEl = win.document.createElement('amp-story-page-outlink'); + outlinkEl.setAttribute('layout', 'nodisplay'); + element.appendChild(outlinkEl); + const anchorEl = win.document.createElement('a'); + outlinkEl.appendChild(anchorEl); page.buildCallback(); await page.layoutCallback(); @@ -724,9 +721,7 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => { expect(openoutlinkEl).to.exist; }); - it('should build the inline page attachment UI with one image', async () => { - toggleExperiment(win, 'amp-story-page-attachment-ui-v2', true); - + it('should build the amp-story-page-attachment UI with one image', async () => { const attachmentEl = win.document.createElement( 'amp-story-page-attachment' ); @@ -750,13 +745,10 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => { ).to.exist; }); - it('should build the inline page attachment UI with two images', async () => { - toggleExperiment(win, 'amp-story-page-attachment-ui-v2', true); - + it('should build the amp-story-page-attachment UI with two images', async () => { const attachmentEl = win.document.createElement( 'amp-story-page-attachment' ); - attachmentEl.setAttribute('layout', 'nodisplay'); attachmentEl.setAttribute('cta-image', 'nodisplay'); attachmentEl.setAttribute('cta-image-2', 'nodisplay'); @@ -777,9 +769,7 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => { ).to.equal(2); }); - it('should NOT rewrite the attachment UI images to a proxy URL', async () => { - toggleExperiment(win, 'amp-story-page-attachment-ui-v2', true); - + it('should NOT rewrite the amp-story-page-attachment UI images to a proxy URL', async () => { const attachmentEl = win.document.createElement( 'amp-story-page-attachment' ); @@ -803,14 +793,12 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => { expect(imgEl.getAttribute('style')).to.contain(src); }); - it('should build the new default outlink page attachment UI', async () => { - toggleExperiment(win, 'amp-story-page-attachment-ui-v2', true); - - const attachmentEl = createElementWithAttributes( - win.document, - 'amp-story-page-attachment', - {'layout': 'nodisplay', 'href': 'www.google.com'} + it('should build the amp-story-page-attachment with href (legacy) UI', async () => { + const attachmentEl = win.document.createElement( + 'amp-story-page-attachment' ); + attachmentEl.setAttribute('layout', 'nodisplay'); + attachmentEl.setAttribute('href', 'www.google.com'); element.appendChild(attachmentEl); await page.buildCallback(); @@ -823,26 +811,17 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => { expect( openAttachmentEl.querySelector( - '.i-amphtml-story-outlink-page-attachment-outlink-chip' + '.i-amphtml-story-page-open-attachment-link-icon' ) ).to.exist; }); - it('should build the new outlink page attachment UI with icon', async () => { - toggleExperiment(win, 'amp-story-page-attachment-ui-v2', true); - - const attachmentEl = createElementWithAttributes( - win.document, - 'amp-story-page-attachment', - { - 'layout': 'nodisplay', - 'href': 'www.google.com', - 'theme': 'custom', - 'cta-accent-color': 'pink', - 'cta-accent-element': 'text', - } - ); - element.appendChild(attachmentEl); + it('should build the amp-story-page-outlink UI', async () => { + const outlinkEl = win.document.createElement('amp-story-page-outlink'); + outlinkEl.setAttribute('layout', 'nodisplay'); + element.appendChild(outlinkEl); + const anchorChild = win.document.createElement('a'); + outlinkEl.appendChild(anchorChild); await page.buildCallback(); await page.layoutCallback(); @@ -859,12 +838,12 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => { ).to.exist; }); - it('should build the open attachment UI with custom CTA label', async () => { + it('should build the open attachment UI with custom text', async () => { const attachmentEl = win.document.createElement( 'amp-story-page-attachment' ); attachmentEl.setAttribute('layout', 'nodisplay'); - attachmentEl.setAttribute('cta-text', 'Custom label'); + attachmentEl.setAttribute('cta-text', 'Custom text'); element.appendChild(attachmentEl); page.buildCallback(); @@ -872,9 +851,9 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => { page.setState(PageState.PLAYING); const openAttachmentLabelEl = element.querySelector( - '.i-amphtml-story-page-open-attachment-label' + '.i-amphtml-story-page-attachment-label' ); - expect(openAttachmentLabelEl.textContent).to.equal('Custom label'); + expect(openAttachmentLabelEl.textContent).to.equal('Custom text'); }); it('should use cta-text attribute when data-cta-text also exist', async () => { @@ -891,16 +870,14 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => { page.setState(PageState.PLAYING); const openAttachmentLabelEl = element.querySelector( - '.i-amphtml-story-page-open-attachment-label' + '.i-amphtml-story-page-attachment-label' ); expect(openAttachmentLabelEl.textContent).to.equal('CTA text'); }); it('should propogate the amp-story-page-attachment title attribute to the cta button', async () => { - const attachmentEl = win.document.createElement( - 'amp-story-page-attachment' - ); + const attachmentEl = win.document.createElement('amp-story-page-outlink'); attachmentEl.setAttribute('layout', 'nodisplay'); attachmentEl.setAttribute('title', 'cta title'); element.appendChild(attachmentEl); @@ -917,15 +894,14 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => { }); it('should propogate the amp-story-page-outlink title attribute to the cta button', async () => { - toggleExperiment(win, 'amp-story-page-attachment-ui-v2', true); - const attachmentEl = win.document.createElement('amp-story-page-outlink'); - attachmentEl.setAttribute('layout', 'nodisplay'); - element.appendChild(attachmentEl); + const outlinkEl = win.document.createElement('amp-story-page-outlink'); + outlinkEl.setAttribute('layout', 'nodisplay'); + element.appendChild(outlinkEl); const anchorChild = win.document.createElement('a'); anchorChild.setAttribute('href', 'google.com'); anchorChild.setAttribute('title', 'cta title'); - attachmentEl.appendChild(anchorChild); + outlinkEl.appendChild(anchorChild); page.buildCallback(); await page.layoutCallback(); diff --git a/test/visual-diff/visual-tests b/test/visual-diff/visual-tests index 2af65c0e27e4..2165da01320e 100644 --- a/test/visual-diff/visual-tests +++ b/test/visual-diff/visual-tests @@ -632,24 +632,6 @@ ], "interactive_tests": "examples/visual-tests/amp-story/amp-story-sidebar.js" }, - { - "url": "examples/visual-tests/amp-story/amp-story-page-attachment.html", - "name": "amp-story: page attachment", - "viewport": {"width": 320, "height": 480}, - "loading_complete_selectors": [ - ".i-amphtml-story-loaded", - ], - "interactive_tests": "examples/visual-tests/amp-story/amp-story-page-attachment.js" - }, - { - "url": "examples/visual-tests/amp-story/amp-story-page-attachment.html", - "name": "amp-story: page attachment desktop", - "viewport": {"width": 1440, "height": 900}, - "loading_complete_selectors": [ - ".i-amphtml-story-loaded", - ], - "interactive_tests": "examples/visual-tests/amp-story/amp-story-page-attachment-desktop.js" - }, { // TODO(#21749, @ampproject/wg-stories): Re-enable test. "flaky": true, @@ -894,22 +876,22 @@ "loading_complete_selectors": [".i-amphtml-story-360-loaded"] }, { - "url": "examples/visual-tests/amp-story/amp-story-page-attachment-v2.html", - "name": "amp-story-page-attachment-v2: new inline & outlink CTA buttons", + "url": "examples/visual-tests/amp-story/amp-story-page-attachment.html", + "name": "amp-story-page-attachment: new inline & outlink CTA buttons", "viewport": {"width": 320, "height": 480}, "loading_complete_selectors": [ ".i-amphtml-story-loaded", ], - "interactive_tests": "examples/visual-tests/amp-story/amp-story-page-attachment-v2.js" + "interactive_tests": "examples/visual-tests/amp-story/amp-story-page-attachment.js" }, { - "url": "examples/visual-tests/amp-story/amp-story-page-attachment-v2.html", - "name": "amp-story-page-attachment-v2: page attachment desktop", + "url": "examples/visual-tests/amp-story/amp-story-page-attachment.html", + "name": "amp-story-page-attachment: page attachment desktop", "viewport": {"width": 1440, "height": 900}, "loading_complete_selectors": [ ".i-amphtml-story-loaded", ], - "interactive_tests": "examples/visual-tests/amp-story/amp-story-page-attachment-v2.js" + "interactive_tests": "examples/visual-tests/amp-story/amp-story-page-attachment.js" } ] } diff --git a/tools/experiments/experiments-config.js b/tools/experiments/experiments-config.js index 7165f92bf205..46eb45f826eb 100644 --- a/tools/experiments/experiments-config.js +++ b/tools/experiments/experiments-config.js @@ -1,5 +1,5 @@ /** - * Copyright 2019 The AMP HTML Authors. All Rights Reserved. + * Copyright 2021 The AMP HTML Authors. All Rights Reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -188,11 +188,6 @@ export const EXPERIMENTS = [ name: 'New desktop one-panel UI with background blur for stories.', spec: 'https://github.com/ampproject/amphtml/projects/128', }, - { - id: 'amp-story-page-attachment-ui-v2', - name: 'New UI for all new page attachments in stories format', - spec: 'https://github.com/ampproject/amphtml/projects/123', - }, { id: 'flexible-bitrate', name: 'Adaptive bitrate algorithm for videos on documents from the AMPProject CDN',