🚀 [Story performance] Remove share menu from main amp-story bundle

build-system/test-configs/dep-check-config.js

@@ -265,12 +265,11 @@ exports.rules = [
       'extensions/amp-story-education/0.1/amp-story-education.js->extensions/amp-story/1.0/amp-story-localization-service.js',
 
       // Story share menu
-      'extensions/amp-story-share-menu/0.1/amp-story-share-menu.js->extensions/amp-story/1.0/utils.js',
+      'extensions/amp-story-share-menu/0.1/amp-story-share-menu.js->extensions/amp-social-share/0.1/amp-social-share.js',
       'extensions/amp-story-share-menu/0.1/amp-story-share-menu.js->extensions/amp-story/1.0/amp-story-store-service.js',
-      'extensions/amp-story-share-menu/0.1/amp-story-share-menu.js->extensions/amp-story/1.0/amp-story-localization-service.js',
+      'extensions/amp-story-share-menu/0.1/amp-story-share-menu.js->extensions/amp-story/1.0/utils.js',
       'extensions/amp-story-share-menu/0.1/amp-story-share-menu.js->extensions/amp-story/1.0/request-utils.js',
       'extensions/amp-story-share-menu/0.1/amp-story-share-menu.js->extensions/amp-story/1.0/toast.js',
-      'extensions/amp-story/1.0/amp-story-share.js->extensions/amp-story-share-menu/0.1/amp-story-share-menu.js',
 
       // Story Shopping
       'extensions/amp-story-shopping/0.1/amp-story-shopping-config.js->extensions/amp-story/1.0/amp-story-store-service.js',

examples/visual-tests/amp-story/share-menu.html

@@ -5,12 +5,10 @@
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-story"
         src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
-    <script async custom-element="amp-video"
-        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
     <title>amp-story share menu visual diff</title>
     <meta name="viewport"
           content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link rel="canonical" href="./template-vertical.html">
+    <link rel="canonical" href="./share-menu.html">
     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
     <style amp-custom>
       amp-story-page {
@@ -28,28 +26,30 @@
         text-align: center;
         text-shadow: 3px 3px rgba(0, 0, 0, 0.5);
       }
+      /* Since it doesn't have shadow root, we need to enforce the height */
+      amp-story-share-menu {
+        height: 100%;
+      }
     </style>
-    <script>
-      // TODO(#17108): Remove this when getMode().test is set.
-      __AMP_TEST = true;
+      <script>
+        __AMP_TEST = true;
+        /**
+         * On load, open the share menu.
+         */
+        document.addEventListener('ampstory:load', () => {
 
-      /**
-       * On load, open the share menu.
-       */
-      document.addEventListener('ampstory:load', () => {
-        const storyEl = document.querySelector('amp-story');
+          // Automatically open the share menu.
+          const storyEl = document.querySelector('amp-story');
+          const shareMenuAction = new CustomEvent('ampstory:dispatchaction', {
+            detail: {
+              action: 'toggleShareMenu',
+              data: true,
+            }
+          });
 
-        // Automatically open the share menu.
-        const openShareMenuEvent = new CustomEvent('ampstory:dispatchaction', {
-          detail: {
-            action: 'toggleShareMenu',
-            data: true,
-          }
+          storyEl.dispatchEvent(shareMenuAction);
         });
-
-        storyEl.dispatchEvent(openShareMenuEvent);
-      });
-    </script>
+      </script>
   </head>
 
   <body>
@@ -61,8 +61,8 @@
 
       <amp-story-page id="cover">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image981_1600x900.jpg" width="3" height="5">
+          </amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 id="hello-world">Hello world!</h1>

examples/visual-tests/amp-story/share-menu.rtl.html

@@ -5,12 +5,10 @@
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-story"
         src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
-    <script async custom-element="amp-video"
-        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
     <title>amp-story share menu visual diff</title>
     <meta name="viewport"
           content="width=device-width,minimum-scale=1,initial-scale=1">
-    <link rel="canonical" href="./template-vertical.html">
+    <link rel="canonical" href="./share-menu.html">
     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
     <style amp-custom>
       amp-story-page {
@@ -28,26 +26,28 @@
         text-align: center;
         text-shadow: 3px 3px rgba(0, 0, 0, 0.5);
       }
+      /* Since it doesn't have shadow root, we need to enforce the height */
+      amp-story-share-menu {
+        height: 100%;
+      }
     </style>
     <script>
-      // TODO(#17108): Remove this when getMode().test is set.
       __AMP_TEST = true;
-
       /**
        * On load, open the share menu.
        */
       document.addEventListener('ampstory:load', () => {
-        const storyEl = document.querySelector('amp-story');
 
         // Automatically open the share menu.
-        const openShareMenuEvent = new CustomEvent('ampstory:dispatchaction', {
+        const storyEl = document.querySelector('amp-story');
+        const shareMenuAction = new CustomEvent('ampstory:dispatchaction', {
           detail: {
             action: 'toggleShareMenu',
             data: true,
           }
         });
 
-        storyEl.dispatchEvent(openShareMenuEvent);
+        storyEl.dispatchEvent(shareMenuAction);
       });
     </script>
   </head>
@@ -61,14 +61,13 @@
 
       <amp-story-page id="cover">
         <amp-story-grid-layer template="fill">
-          <amp-video autoplay layout="fill" poster="/examples/visual-tests/picsum.photos/image981_1600x900.jpg">
-          </amp-video>
+          <amp-img layout="fill" src="/examples/visual-tests/picsum.photos/image981_1600x900.jpg" width="3" height="5">
+          </amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <h1 id="hello-world">مرحبا بالعالم</h1>
         </amp-story-grid-layer>
       </amp-story-page>
-
       <amp-story-social-share layout="nodisplay">
         <script type="application/json">
           {
@@ -86,7 +85,6 @@ <h1 id="hello-world">مرحبا بالعالم</h1>
           }
         </script>
       </amp-story-social-share>
-
     </amp-story>
   </body>
 

extensions/amp-story-share-menu/0.1/amp-story-share-menu.js

@@ -1,10 +1,10 @@
 import {userAssert} from '#core/assert';
 import {Keys_Enum} from '#core/constants/key-codes';
 import * as Preact from '#core/dom/jsx';
+import {Layout_Enum} from '#core/dom/layout';
 import {closestAncestorElementBySelector} from '#core/dom/query';
 import {isObject} from '#core/types';
 import {map} from '#core/types/object';
-import {getWin} from '#core/window';
 import {
   copyTextToClipboard,
   isCopyingToClipboardSupported,
@@ -20,15 +20,15 @@ import {Toast} from 'extensions/amp-story/1.0/toast';
 
 import {CSS} from '../../../build/amp-story-share-menu-0.1.css';
 import {getAmpdoc} from '../../../src/service-helpers';
-import {localize} from '../../amp-story/1.0/amp-story-localization-service';
 import {
   Action,
   StateProperty,
   UIType,
-  getStoreService,
 } from '../../amp-story/1.0/amp-story-store-service';
 import {createShadowRootWithStyle} from '../../amp-story/1.0/utils';
 
+import '../../amp-social-share/0.1/amp-social-share';
+
 /** @const {string} Class to toggle the share menu. */
 export const VISIBLE_CLASS = 'i-amphtml-story-share-menu-visible';
 
@@ -52,13 +52,13 @@ const SHARE_PROVIDER_LOCALIZED_STRING_ID = map({
  * Key for share providers in config.
  * @const {string}
  */
-export const SHARE_PROVIDERS_KEY = 'shareProviders';
+const SHARE_PROVIDERS_KEY = 'shareProviders';
 
 /**
  * Deprecated key for share providers in config.
  * @const {string}
  */
-export const DEPRECATED_SHARE_PROVIDERS_KEY = 'share-providers';
+const DEPRECATED_SHARE_PROVIDERS_KEY = 'share-providers';
 
 /**
  * @param {!Node} child
@@ -70,52 +70,53 @@ const renderShareItemElement = (child) => (
 /**
  * Share menu UI.
  */
-export class AmpStoryShareMenu {
+export class AmpStoryShareMenu extends AMP.BaseElement {
   /**
-   * @param {!Element} hostEl
+   * @param {!Element} element
    */
-  constructor(hostEl) {
-    /** @private @const {!Window} */
-    this.win_ = getWin(hostEl);
+  constructor(element) {
+    super(element);
 
     /** @private {?Element} */
-    this.element_ = null;
-
-    /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
-    this.storeService_ = getStoreService(this.win_);
+    this.rootEl_ = null;
 
     /** @private @const {!Element} */
     this.storyEl_ = userAssert(
-      closestAncestorElementBySelector(hostEl, 'amp-story')
+      closestAncestorElementBySelector(element, 'amp-story')
     );
 
     /** @const @private {!../../../src/service/vsync-impl.Vsync} */
-    this.vsync_ = Services.vsyncFor(this.win_);
+    this.vsync_ = Services.vsyncFor(this.win);
 
-    /** @private {!Element} */
-    this.hostEl_ = hostEl;
+    /** @private {?../../../src/service/localization.LocalizationService} */
+    this.localizationService_ = null;
+
+    /** @private {?../../../extensions/amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */
+    this.storeService_ = null;
   }
 
   /**
    * Builds and appends the component in the story. Could build either the
    * amp-social-share button to display the native system sharing, or a fallback
    * UI.
+   * @return {!Promise}
    */
-  build() {
-    if (this.element_) {
+  buildCallback() {
+    if (this.rootEl_) {
       return;
     }
 
-    const providersList = this.buildProvidersList_();
-    this.element_ = this.buildDialog_(providersList);
-    // TODO(mszylkowski): import '../../amp-social-share/0.1/amp-social-share' when this file is lazy loaded.
-    Services.extensionsFor(this.win_).installExtensionForDoc(
-      getAmpdoc(this.storyEl_),
-      'amp-social-share'
-    );
-
-    this.vsync_.mutate(() => {
-      createShadowRootWithStyle(this.hostEl_, this.element_, CSS);
+    return Promise.all([
+      Services.storyStoreServiceForOrNull(this.win).then(
+        (service) => (this.storeService_ = service)
+      ),
+      Services.localizationServiceForOrNull(this.element).then(
+        (service) => (this.localizationService_ = service)
+      ),
+    ]).then(() => {
+      const providersList = this.buildProvidersList_();
+      this.rootEl_ = this.buildDialog_(providersList);
+      createShadowRootWithStyle(this.element, this.rootEl_, CSS);
       this.initializeListeners_();
     });
   }
@@ -140,7 +141,7 @@ export class AmpStoryShareMenu {
       true /** callToInitialize */
     );
 
-    this.win_.addEventListener('keyup', (event) => {
+    this.win.addEventListener('keyup', (event) => {
       if (event.key == Keys_Enum.ESCAPE) {
         event.preventDefault();
         this.close_();
@@ -155,8 +156,8 @@ export class AmpStoryShareMenu {
    */
   onShareMenuStateUpdate_(isOpen) {
     this.vsync_.mutate(() => {
-      this.element_.classList.toggle(VISIBLE_CLASS, isOpen);
-      this.element_.setAttribute('aria-hidden', !isOpen);
+      this.rootEl_.classList.toggle(VISIBLE_CLASS, isOpen);
+      this.rootEl_.setAttribute('aria-hidden', !isOpen);
     });
   }
 
@@ -168,8 +169,8 @@ export class AmpStoryShareMenu {
   onUIStateUpdate_(uiState) {
     this.vsync_.mutate(() => {
       uiState !== UIType.MOBILE
-        ? this.element_.setAttribute('desktop', '')
-        : this.element_.removeAttribute('desktop');
+        ? this.rootEl_.setAttribute('desktop', '')
+        : this.rootEl_.removeAttribute('desktop');
     });
   }
 
@@ -202,8 +203,7 @@ export class AmpStoryShareMenu {
         <div class="i-amphtml-story-share-menu-container">
           <button
             class="i-amphtml-story-share-menu-close-button"
-            aria-label={localize(
-              this.storyEl_,
+            aria-label={this.localizationService_.getLocalizedString(
               LocalizedStringId_Enum.AMP_STORY_CLOSE_BUTTON_LABEL
             )}
             role="button"
@@ -285,7 +285,9 @@ export class AmpStoryShareMenu {
         type={provider}
       >
         <span class="i-amphtml-story-share-label">
-          {localize(this.win_.document, shareProviderLocalizedStringId)}
+          {this.localizationService_.getLocalizedString(
+            shareProviderLocalizedStringId
+          )}
         </span>
       </amp-social-share>
     );
@@ -304,11 +306,10 @@ export class AmpStoryShareMenu {
    * @private
    */
   maybeRenderLinkShareButton_() {
-    if (!isCopyingToClipboardSupported(this.win_.document)) {
+    if (!isCopyingToClipboardSupported(this.win.document)) {
       return;
     }
-    const label = localize(
-      this.storyEl_,
+    const label = this.localizationService_.getLocalizedString(
       LocalizedStringId_Enum.AMP_STORY_SHARING_PROVIDER_NAME_LINK
     );
     return renderShareItemElement(
@@ -332,9 +333,8 @@ export class AmpStoryShareMenu {
     const url = Services.documentInfoForDoc(
       getAmpdoc(this.storyEl_)
     ).canonicalUrl;
-    if (!copyTextToClipboard(this.win_, url)) {
-      const failureString = localize(
-        this.storyEl_,
+    if (!copyTextToClipboard(this.win, url)) {
+      const failureString = this.localizationService_.getLocalizedString(
         LocalizedStringId_Enum.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT
       );
       Toast.show(this.storyEl_, failureString);
@@ -351,12 +351,24 @@ export class AmpStoryShareMenu {
   buildCopySuccessfulToast_(url) {
     return (
       <div class="i-amphtml-story-copy-successful">
-        {localize(
-          this.storyEl_,
+        {this.localizationService_.getLocalizedString(
           LocalizedStringId_Enum.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT
         )}
         <div class="i-amphtml-story-copy-url">{url}</div>
       </div>
     );
   }
+
+  /** @override */
+  isLayoutSupported(layout) {
+    return layout == Layout_Enum.CONTAINER;
+  }
 }
+
+/**
+ * This extension installs the share widget.
+ */
+
+AMP.extension('amp-story-share-menu', '0.1', (AMP) => {
+  AMP.registerElement('amp-story-share-menu', AmpStoryShareMenu);
+});