🚀 [Story performance] Remove media query matcher (#36747)

* Removing media query matcher * Removed from some more places * Updated zindex
ampproject · Nov 5, 2021 · 75d33b2 · 75d33b2
1 parent 0f65ac4
commit 75d33b2
Show file tree

Hide file tree

Showing 6 changed files with 0 additions and 227 deletions.
diff --git a/css/Z_INDEX.md b/css/Z_INDEX.md
@@ -168,4 +168,3 @@
 | `.i-amphtml-story-access-logo::before`                                                           | -1         | [extensions/amp-story/1.0/amp-story-access.css](/extensions/amp-story/1.0/amp-story-access.css)                                                                         |
 | `.i-amphtml-story-consent-logo::before`                                                          | -1         | [extensions/amp-story/1.0/amp-story-consent.css](/extensions/amp-story/1.0/amp-story-consent.css)                                                                       |
 | `.i-amphtml-story-page-open-attachment-icon::after`                                              | -1         | [extensions/amp-story/1.0/amp-story-open-page-attachment.css](/extensions/amp-story/1.0/amp-story-open-page-attachment.css)                                             |
-| `.i-amphtml-story-media-query-matcher`                                                           | -1         | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)                                                                                       |
diff --git a/extensions/amp-story/1.0/amp-story-media-query-service.js b/extensions/amp-story/1.0/amp-story-media-query-service.js
diff --git a/extensions/amp-story/1.0/amp-story.css b/extensions/amp-story/1.0/amp-story.css
@@ -197,7 +197,6 @@ amp-story .amp-video-eq:not(.amp-video-eq-play), .i-amphtml-story-no-audio-ui .a
 }
 
 /** Page level */
-.i-amphtml-story-media-query-matcher,
 amp-story-page {
   bottom: 0 !important;
   height: auto !important;
@@ -212,13 +211,6 @@ amp-story-page {
   z-index: 0 !important;
 }
 
-.i-amphtml-story-media-query-matcher {
-  height: inherit !important;
-  width: inherit !important;
-  border: 0 !important;
-  z-index: -1 !important;
-}
-
 amp-story-page[active] {
   z-index: 1 !important;
 }

diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js
@@ -78,7 +78,6 @@ import {findIndex, lastItem, toArray} from '#core/types/array';
 import {getConsentPolicyState} from '../../../src/consent';
 import {getDetail} from '#utils/event-helper';
 import {getLocalizationService} from './amp-story-localization-service';
-import {getMediaQueryService} from './amp-story-media-query-service';
 import {getMode, isModeDevelopment} from '../../../src/mode';
 import {getHistoryState as getWindowHistoryState} from '#core/window/history';
 import {isExperimentOn} from '#experiments';
@@ -354,7 +353,6 @@ export class AmpStory extends AMP.BaseElement {
       page.setAttribute('active', '');
     }
 
-    this.initializeStyles_();
     this.initializeListeners_();
     this.initializeListenersForDev_();
     this.initializePageIds_();
@@ -475,41 +473,6 @@ export class AmpStory extends AMP.BaseElement {
     this.onResize();
   }
 
-  /** @private */
-  initializeStyles_() {
-    const mediaQueryEls = this.element.querySelectorAll('media-query');
-
-    if (mediaQueryEls.length) {
-      this.initializeMediaQueries_(mediaQueryEls);
-    }
-  }
-
-  /**
-   * Registers the media queries
-   * @param {!NodeList<!Element>} mediaQueryEls
-   * @private
-   */
-  initializeMediaQueries_(mediaQueryEls) {
-    const service = getMediaQueryService(this.win);
-
-    const onMediaQueryMatch = (matches, className) => {
-      this.mutateElement(() => {
-        this.element.classList.toggle(className, matches);
-      });
-    };
-
-    toArray(mediaQueryEls).forEach((el) => {
-      const className = el.getAttribute('class-name');
-      const media = el.getAttribute('media');
-
-      if (className && media) {
-        service.onMediaQueryMatch(media, (matches) =>
-          onMediaQueryMatch(matches, className)
-        );
-      }
-    });
-  }
-
   /**
    * Initializes page ids by deduplicating them.
    * @private

diff --git a/extensions/amp-story/1.0/test/test-amp-story-media-query-service.js b/extensions/amp-story/1.0/test/test-amp-story-media-query-service.js
diff --git a/src/service/index.js b/src/service/index.js
@@ -492,17 +492,6 @@ export const Services = {
     );
   },
 
-  /**
-   * @param {!Window} win
-   * @return {?../extensions/amp-story/1.0/amp-story-media-query-service.AmpStoryMediaQueryService}
-   */
-  storyMediaQueryService: (win) => {
-    return (
-      /** @type {?../extensions/amp-story/1.0/amp-story-media-query-service.AmpStoryMediaQueryService} */
-      (getExistingServiceOrNull(win, 'story-media-query'))
-    );
-  },
-
   /**
    * Get promise with story request service
    * @param {!Window} win