Moving the story desktop system layer buttons. (ampproject#20949)

* Removing the desktop sharing pill and moving all the buttons to the top right corner. * Removing the AMP_STORY_SYSTEM_LAYER_SHARE_WIDGET_LABEL localization ID. * Removing the share pill code from the visual diff tests. * Fixing unit tests since the share menu is now always pre-rendered.
noranazmy · Mar 22, 2019 · 7d989f0 · 7d989f0
1 parent 7312a92
commit 7d989f0
Show file tree

Hide file tree

Showing 51 changed files with 15 additions and 558 deletions.
diff --git a/examples/visual-tests/amp-story/amp-story-bookend.html b/examples/visual-tests/amp-story/amp-story-bookend.html
@@ -23,16 +23,6 @@
         display: none;
       }
 
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-      .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
-
       h1.hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/amp-story-bookend.rtl.html b/examples/visual-tests/amp-story/amp-story-bookend.rtl.html
@@ -23,16 +23,6 @@
         display: none;
       }
 
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
-
       h1.hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/amp-story-consent.html b/examples/visual-tests/amp-story/amp-story-consent.html
@@ -25,16 +25,6 @@
         display: none;
       }
 
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
-
       h1#hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/amp-story-consent.rtl.html b/examples/visual-tests/amp-story/amp-story-consent.rtl.html
@@ -25,16 +25,6 @@
         display: none;
       }
 
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
-
       h1#hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/amp-story-cta-layer.html b/examples/visual-tests/amp-story/amp-story-cta-layer.html
@@ -24,16 +24,6 @@
         left: 50%;
         transform: translate(-50%, -50%);
       }
-
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
     </style>
     <script>
       // TODO(#17108): Remove this when getMode().test is set.

diff --git a/examples/visual-tests/amp-story/amp-story-grid-layer-template-fill.html b/examples/visual-tests/amp-story/amp-story-grid-layer-template-fill.html
@@ -14,16 +14,6 @@
       amp-story-page {
         background: yellow;
       }
-
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
     </style>
     <script>
       // TODO(#17108): Remove this when getMode().test is set.

diff --git a/examples/visual-tests/amp-story/amp-story-grid-layer-template-horizontal.html b/examples/visual-tests/amp-story/amp-story-grid-layer-template-horizontal.html
@@ -15,16 +15,6 @@
         background: white;
         font-family: sans-serif;
       }
-
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
     </style>
     <script>
       // TODO(#17108): Remove this when getMode().test is set.

diff --git a/examples/visual-tests/amp-story/amp-story-grid-layer-template-thirds.html b/examples/visual-tests/amp-story/amp-story-grid-layer-template-thirds.html
@@ -15,16 +15,6 @@
         background: white;
         font-family: sans-serif;
       }
-
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
     </style>
     <script>
       // TODO(#17108): Remove this when getMode().test is set.

diff --git a/examples/visual-tests/amp-story/amp-story-grid-layer-template-vertical.html b/examples/visual-tests/amp-story/amp-story-grid-layer-template-vertical.html
@@ -15,16 +15,6 @@
         background: white;
         font-family: sans-serif;
       }
-
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
     </style>
     <script>
       // TODO(#17108): Remove this when getMode().test is set.

diff --git a/examples/visual-tests/amp-story/amp-story-page-attachment.html b/examples/visual-tests/amp-story/amp-story-page-attachment.html
@@ -24,16 +24,6 @@
         display: none;
       }
 
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-      .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
-
       amp-story-page-attachment {
         color: rgba(0, 0, 0, 0.87);
         font-size: 16px;

diff --git a/examples/visual-tests/amp-story/amp-story-pagination-buttons.html b/examples/visual-tests/amp-story/amp-story-pagination-buttons.html
@@ -22,15 +22,6 @@
       amp-story-page {
         background-color: white;
       }
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
     </style>
     <script type="application/ld+json">
       {

diff --git a/examples/visual-tests/amp-story/amp-story-sidebar.html b/examples/visual-tests/amp-story/amp-story-sidebar.html
@@ -21,15 +21,6 @@
         /* Hide the spinner for loading pages, since this causes flakes */
         display: none;
       }
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
       h1.hello-world {
         color: white;
         text-shadow: 3px 3px rgba(0, 0, 0, 0.5);

diff --git a/examples/visual-tests/amp-story/amp-story-tooltip.html b/examples/visual-tests/amp-story/amp-story-tooltip.html
@@ -21,16 +21,6 @@
         display: none;
       }
 
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
-
       h1.hello-world {
         color: white;
         text-shadow: 3px 3px rgba(0, 0, 0, 0.5);

diff --git a/examples/visual-tests/amp-story/basic.html b/examples/visual-tests/amp-story/basic.html
@@ -24,16 +24,6 @@
         display: none;
       }
 
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
-
       h1.hello-world {
         color: white;
         text-shadow: 3px 3px rgba(0, 0, 0, 0.5);

diff --git a/examples/visual-tests/amp-story/basic.rtl.html b/examples/visual-tests/amp-story/basic.rtl.html
@@ -24,16 +24,6 @@
         display: none;
       }
 
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
-
       h1.hello-world {
         color: white;
         text-shadow: 3px 3px rgba(0, 0, 0, 0.5);

diff --git a/examples/visual-tests/amp-story/embed-mode-1.html b/examples/visual-tests/amp-story/embed-mode-1.html
@@ -23,16 +23,6 @@
         display: none;
       }
 
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
-
       h1#hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/embed-mode-2.html b/examples/visual-tests/amp-story/embed-mode-2.html
@@ -23,16 +23,6 @@
         display: none;
       }
 
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
-
       h1#hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/info-dialog.html b/examples/visual-tests/amp-story/info-dialog.html
@@ -23,16 +23,6 @@
         display: none;
       }
 
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
-
       h1#hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/info-dialog.rtl.html b/examples/visual-tests/amp-story/info-dialog.rtl.html
@@ -23,16 +23,6 @@
         display: none;
       }
 
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
-
       h1#hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/share-menu.html b/examples/visual-tests/amp-story/share-menu.html
@@ -23,16 +23,6 @@
         display: none;
       }
 
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
-
       h1#hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/share-menu.rtl.html b/examples/visual-tests/amp-story/share-menu.rtl.html
@@ -23,16 +23,6 @@
         display: none;
       }
 
-      /*
-       * The share pill text does not show in the same place consistently, and
-       * as such causes the visual tests to be flaky.  This hides the share pill
-       * with visibility: hidden, so as to keep other elements in the same place
-       * that they would otherwise be, while deflaking the tests.  See #19890.
-       */
-       .i-amphtml-story-share-pill {
-        visibility: hidden;
-      }
-
       h1#hello-world {
         color: white;
         text-align: center;

diff --git a/extensions/amp-story/1.0/_locales/ar.js b/extensions/amp-story/1.0/_locales/ar.js
@@ -78,9 +78,6 @@ export default /** @const {!LocalizedStringBundleDef} */ ({
   [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
     string: 'وات ساب',
   },
-  [LocalizedStringId.AMP_STORY_SYSTEM_LAYER_SHARE_WIDGET_LABEL]: {
-    string: 'شارك',
-  },
   [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
     string: 'قم بتوسيع نافذتك لعرض هذه التجربة',
   },

diff --git a/extensions/amp-story/1.0/_locales/de.js b/extensions/amp-story/1.0/_locales/de.js
@@ -78,9 +78,6 @@ export default /** @const {!LocalizedStringBundleDef} */ ({
   [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
     string: 'WhatsApp',
   },
-  [LocalizedStringId.AMP_STORY_SYSTEM_LAYER_SHARE_WIDGET_LABEL]: {
-    string: 'Teilen',
-  },
   [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
     string: ' Vergrößern Sie das Fenster um dieses Erlebnis zu sehen',
   },

diff --git a/extensions/amp-story/1.0/_locales/default.js b/extensions/amp-story/1.0/_locales/default.js
@@ -57,9 +57,6 @@ export default /** @const {!LocalizedStringBundleDef} */ ({
   [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
     string: ':(',
   },
-  [LocalizedStringId.AMP_STORY_SYSTEM_LAYER_SHARE_WIDGET_LABEL]: {
-    string: 'Share',
-  },
   [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_HEIGHT_SIZE_TEXT]: {
     string: 'Expand the height of your window to view this experience',
   },

diff --git a/extensions/amp-story/1.0/_locales/en-GB.js b/extensions/amp-story/1.0/_locales/en-GB.js
@@ -78,9 +78,6 @@ export default /** @const {!LocalizedStringBundleDef} */ ({
   [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
     string: 'WhatsApp',
   },
-  [LocalizedStringId.AMP_STORY_SYSTEM_LAYER_SHARE_WIDGET_LABEL]: {
-    string: 'Share',
-  },
   [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
     string: 'Expand your window to view this experience',
   },