Unify API for CSS for all types of ampdocs (#11072)

* Unify API for CSS for all types of ampdocs * test fixes
ampproject · Aug 24, 2017 · 53f4f95 · 53f4f95
1 parent f45a7e4
commit 53f4f95
Show file tree

Hide file tree

Showing 16 changed files with 493 additions and 383 deletions.
diff --git a/extensions/amp-access-laterpay/0.1/laterpay-impl.js b/extensions/amp-access-laterpay/0.1/laterpay-impl.js
@@ -16,8 +16,7 @@
 
 import {CSS} from '../../../build/amp-access-laterpay-0.1.css';
 import {dev, user} from '../../../src/log';
-import {installStyles} from '../../../src/style-installer';
-import {installStylesForShadowRoot} from '../../../src/shadow-embed';
+import {installStylesForDoc} from '../../../src/style-installer';
 import {getMode} from '../../../src/mode';
 import {dict} from '../../../src/utils/object';
 import {listen} from '../../../src/event-helper';
@@ -151,13 +150,7 @@ export class LaterpayVendor {
     this.xhr_ = Services.xhrFor(this.ampdoc.win);
 
     // Install styles.
-    if (this.ampdoc.isSingleDoc()) {
-      const root = /** @type {!Document} */ (this.ampdoc.getRootNode());
-      installStyles(root, CSS, () => {}, false, TAG);
-    } else {
-      const root = /** @type {!ShadowRoot} */ (this.ampdoc.getRootNode());
-      installStylesForShadowRoot(root, CSS, false, TAG);
-    }
+    installStylesForDoc(this.ampdoc, CSS, () => {}, false, TAG);
   }
 
   /**

diff --git a/extensions/amp-access/0.1/amp-access.js b/extensions/amp-access/0.1/amp-access.js
@@ -27,8 +27,7 @@ import {assertHttpsUrl, getSourceOrigin} from '../../../src/url';
 import {cancellation} from '../../../src/error';
 import {evaluateAccessExpr} from './access-expr';
 import {getValueForExpr, tryParseJson} from '../../../src/json';
-import {installStyles} from '../../../src/style-installer';
-import {installStylesForShadowRoot} from '../../../src/shadow-embed';
+import {installStylesForDoc} from '../../../src/style-installer';
 import {isExperimentOn} from '../../../src/experiments';
 import {isObject} from '../../../src/types';
 import {listenOnce} from '../../../src/event-helper';
@@ -72,13 +71,7 @@ export class AccessService {
     this.ampdoc = ampdoc;
 
     // Install styles.
-    if (ampdoc.isSingleDoc()) {
-      const root = /** @type {!Document} */ (ampdoc.getRootNode());
-      installStyles(root, CSS, () => {}, false, TAG);
-    } else {
-      const root = /** @type {!ShadowRoot} */ (ampdoc.getRootNode());
-      installStylesForShadowRoot(root, CSS, false, TAG);
-    }
+    installStylesForDoc(ampdoc, CSS, () => {}, false, TAG);
 
     const accessElement = ampdoc.getElementById('amp-access');
 

diff --git a/extensions/amp-form/0.1/amp-form.js b/extensions/amp-form/0.1/amp-form.js
@@ -19,7 +19,6 @@ import {FormEvents} from './form-events';
 import {installFormProxy} from './form-proxy';
 import {triggerAnalyticsEvent} from '../../../src/analytics';
 import {createCustomEvent} from '../../../src/event-helper';
-import {installStylesForShadowRoot} from '../../../src/shadow-embed';
 import {iterateCursor} from '../../../src/dom';
 import {formOrNullForElement, setFormForElement} from '../../../src/form';
 import {
@@ -38,7 +37,7 @@ import {
   childElementByAttr,
   ancestorElementsByTag,
 } from '../../../src/dom';
-import {installStyles} from '../../../src/style-installer';
+import {installStylesForDoc} from '../../../src/style-installer';
 import {CSS} from '../../../build/amp-form-0.1.css';
 import {
   getFormValidator,
@@ -937,14 +936,7 @@ export class AmpFormService {
    */
   installStyles_(ampdoc) {
     return new Promise(resolve => {
-      if (ampdoc.isSingleDoc()) {
-        const root = /** @type {!Document} */ (ampdoc.getRootNode());
-        installStyles(root, CSS, resolve);
-      } else {
-        const root = /** @type {!ShadowRoot} */ (ampdoc.getRootNode());
-        installStylesForShadowRoot(root, CSS);
-        resolve();
-      }
+      installStylesForDoc(ampdoc, CSS, resolve, false, TAG);
     });
   }
 

diff --git a/extensions/amp-web-push/0.1/web-push-service.js b/extensions/amp-web-push/0.1/web-push-service.js
@@ -19,8 +19,7 @@ import {user} from '../../../src/log';
 import {CSS} from '../../../build/amp-web-push-0.1.css';
 import {IFrameHost} from './iframehost';
 import {WindowMessenger} from './window-messenger';
-import {installStyles} from '../../../src/style-installer';
-import {installStylesForShadowRoot} from '../../../src/shadow-embed';
+import {installStylesForDoc} from '../../../src/style-installer';
 import {openWindowDialog} from '../../../src/dom';
 import {
   TAG,
@@ -111,13 +110,7 @@ export class WebPushService {
     this.ampdoc = ampdoc;
 
     // Install styles.
-    if (ampdoc.isSingleDoc()) {
-      const root = /** @type {!Document} */ (ampdoc.getRootNode());
-      installStyles(root, CSS, () => { }, false, TAG);
-    } else {
-      const root = /** @type {!ShadowRoot} */ (ampdoc.getRootNode());
-      installStylesForShadowRoot(root, CSS, false, TAG);
-    }
+    installStylesForDoc(ampdoc, CSS, () => {}, false, TAG);
 
     /** @private {!Object} */
     this.config_ = {

diff --git a/src/amp.js b/src/amp.js
@@ -24,7 +24,7 @@ import {startupChunk} from './chunk';
 import {fontStylesheetTimeout} from './font-stylesheet-timeout';
 import {installPerformanceService} from './service/performance-impl';
 import {installPullToRefreshBlocker} from './pull-to-refresh';
-import {installStyles, makeBodyVisible} from './style-installer';
+import {installStylesForDoc, makeBodyVisible} from './style-installer';
 import {installErrorReporting} from './error';
 import {installDocService} from './service/ampdoc-impl';
 import {installCacheServiceWorker} from './service-worker/install';
@@ -71,7 +71,7 @@ startupChunk(self.document, function initial() {
   const perf = Services.performanceFor(self);
   fontStylesheetTimeout(self);
   perf.tick('is');
-  installStyles(self.document, cssText, () => {
+  installStylesForDoc(ampdoc, cssText, () => {
     startupChunk(self.document, function services() {
       // Core services.
       installRuntimeServices(self);

diff --git a/src/inabox/amp-inabox.js b/src/inabox/amp-inabox.js
@@ -25,7 +25,7 @@ import {startupChunk} from '../chunk';
 import {fontStylesheetTimeout} from '../font-stylesheet-timeout';
 import {installIframeMessagingClient} from './inabox-iframe-messaging-client';
 import {installPerformanceService} from '../service/performance-impl';
-import {installStyles, makeBodyVisible} from '../style-installer';
+import {installStylesForDoc, makeBodyVisible} from '../style-installer';
 import {installErrorReporting} from '../error';
 import {installDocService} from '../service/ampdoc-impl';
 import {installCacheServiceWorker} from '../service-worker/install';
@@ -78,7 +78,7 @@ startupChunk(self.document, function initial() {
   const fullCss = cssText
       + 'html.i-amphtml-inabox{width:100%!important;height:100%!important}'
       + 'html.i-amphtml-inabox>body{position:initial!important}';
-  installStyles(self.document, fullCss, () => {
+  installStylesForDoc(ampdoc, fullCss, () => {
     startupChunk(self.document, function services() {
       // Core services.
       installRuntimeServices(self);

diff --git a/src/runtime.js b/src/runtime.js
@@ -21,7 +21,6 @@ import {
   createShadowDomWriter,
   createShadowRoot,
   importShadowBody,
-  installStylesForShadowRoot,
 } from './shadow-embed';
 import {VisibilityState} from './visibility-state';
 import {
@@ -67,7 +66,7 @@ import {
 } from './service/ampdoc-impl';
 import {installStandardActionsForDoc} from './service/standard-actions-impl';
 import {installStorageServiceForDoc} from './service/storage-impl';
-import {installStyles} from './style-installer';
+import {installStylesForDoc} from './style-installer';
 import {installTimerService} from './service/timer-impl';
 import {installTemplatesService} from './service/template-impl';
 import {installUrlReplacementsServiceForDoc} from
@@ -444,7 +443,9 @@ function prepareAndRegisterElement(global, extensions,
     name, implementationClass, opt_css) {
   addElementToExtension(extensions, name, implementationClass, opt_css);
   if (opt_css) {
-    installStyles(global.document, opt_css, () => {
+    const ampdocService = Services.ampdocServiceFor(global);
+    const ampdoc = ampdocService.getAmpDoc();
+    installStylesForDoc(ampdoc, opt_css, () => {
       registerElementClass(global, name, implementationClass, opt_css);
     }, false, name);
   } else {
@@ -467,7 +468,10 @@ function prepareAndRegisterElementShadowMode(global, extensions,
   registerElementClass(global, name, implementationClass, opt_css);
   if (opt_css) {
     addShadowRootFactoryToExtension(extensions, shadowRoot => {
-      installStylesForShadowRoot(shadowRoot, dev().assertString(opt_css),
+      const ampdocService = Services.ampdocServiceFor(global);
+      const ampdoc = ampdocService.getAmpDoc(shadowRoot);
+      installStylesForDoc(ampdoc, dev().assertString(opt_css),
+          /* callback */ null,
           /* isRuntimeCss */ false, name);
     });
   }
@@ -595,7 +599,7 @@ class MultidocManager {
     dev().fine(TAG, 'Attach to shadow root:', shadowRoot, ampdoc);
 
     // Install runtime CSS.
-    installStylesForShadowRoot(shadowRoot, cssText,
+    installStylesForDoc(ampdoc, cssText, /* callback */ null,
         /* opt_isRuntimeCss */ true);
 
     // Instal doc services.
@@ -692,7 +696,7 @@ class MultidocManager {
         hostElement, url, opt_initParams,
         (amp, shadowRoot, ampdoc) => {
           // Install extensions.
-          const extensionIds = this.mergeShadowHead_(shadowRoot, doc);
+          const extensionIds = this.mergeShadowHead_(ampdoc, shadowRoot, doc);
           installExtensionsInShadowDoc(this.extensions_, ampdoc, extensionIds);
 
           // Append body.
@@ -736,7 +740,7 @@ class MultidocManager {
           amp.writer = writer;
           writer.onBody(doc => {
             // Install extensions.
-            const extensionIds = this.mergeShadowHead_(shadowRoot, doc);
+            const extensionIds = this.mergeShadowHead_(ampdoc, shadowRoot, doc);
             // Apply all doc extensions.
             installExtensionsInShadowDoc(
                 this.extensions_, ampdoc, extensionIds);
@@ -775,12 +779,13 @@ class MultidocManager {
 
   /**
    * Processes the contents of the shadow document's head.
+   * @param {!./service/ampdoc-impl.AmpDoc} ampdoc
    * @param {!ShadowRoot} shadowRoot
    * @param {!Document} doc
    * @return {!Array<string>}
    * @private
    */
-  mergeShadowHead_(shadowRoot, doc) {
+  mergeShadowHead_(ampdoc, shadowRoot, doc) {
     const extensionIds = [];
     if (doc.head) {
       const parentLinks = {};
@@ -840,7 +845,8 @@ class MultidocManager {
               // Ignore.
               dev().fine(TAG, '- ignore boilerplate style: ', n);
             } else {
-              installStylesForShadowRoot(shadowRoot, n.textContent,
+              installStylesForDoc(ampdoc, n.textContent,
+                  /* callback */ null,
                   /* isRuntimeCss */ false, 'amp-custom');
               dev().fine(TAG, '- import style: ', n);
             }

diff --git a/src/service/ampdoc-impl.js b/src/service/ampdoc-impl.js
@@ -223,6 +223,13 @@ export class AmpDoc {
     return /** @type {?} */ (dev().assert(null, 'not implemented'));
   }
 
+  /**
+   * Returns the head node. It's either an element or a shadow root.
+   * @return {!Element|!ShadowRoot}
+   * @abstract
+   */
+  getHeadNode() {}
+
   /**
    * Returns `true` if the ampdoc's body is available.
    *
@@ -339,6 +346,11 @@ export class AmpDocSingle extends AmpDoc {
     return this.win.location.href;
   }
 
+  /** @override */
+  getHeadNode() {
+    return dev().assertElement(this.win.document.head);
+  }
+
   /** @override */
   isBodyAvailable() {
     return !!this.win.document.body;
@@ -422,6 +434,11 @@ export class AmpDocShadow extends AmpDoc {
     return this.url_;
   }
 
+  /** @override */
+  getHeadNode() {
+    return this.shadowRoot_;
+  }
+
   /** @override */
   isBodyAvailable() {
     return !!this.body_;

diff --git a/src/service/extensions-impl.js b/src/service/extensions-impl.js
@@ -37,7 +37,7 @@ import {
 } from '../polyfills/domtokenlist-toggle';
 import {installImg} from '../../builtins/amp-img';
 import {installPixel} from '../../builtins/amp-pixel';
-import {installStyles} from '../style-installer';
+import {installStylesLegacy} from '../style-installer';
 import {calculateExtensionScriptUrl} from './extension-location';
 
 const TAG = 'extensions';
@@ -420,7 +420,7 @@ export class Extensions {
     installPolyfillsInChildWindow(childWin);
 
     // Install runtime styles.
-    installStyles(childWin.document, cssText, () => {},
+    installStylesLegacy(childWin.document, cssText, /* callback */ null,
         /* opt_isRuntimeCss */ true, /* opt_ext */ 'amp-runtime');
 
     // Run pre-install callback.
@@ -455,7 +455,7 @@ export class Extensions {
         const elementDef = extension.elements[extensionId];
         if (elementDef && elementDef.css) {
           return new Promise(resolve => {
-            installStyles(
+            installStylesLegacy(
                 childWin.document,
                 /** @type {string} */ (elementDef.css),
                 /* completeCallback */ resolve,