From bb4fcac8f5ba889f040a29d93b814cb3af0f59fe Mon Sep 17 00:00:00 2001
From: Enrique Marroquin <5449100+Enriqe@users.noreply.github.com>
Date: Tue, 4 Feb 2020 15:13:39 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=8D=20[amp-story-player]=20Extract=20i?=
 =?UTF-8?q?frame=20css=20to=20different=20file=20(#26613)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* split iframe css into different file

* update owners pattern to include amp-story-*

* add comments
---
 build-system/tasks/css.js       |  7 ++++++
 css/OWNERS                      |  4 +++
 css/amp-story-player-iframe.css | 43 +++++++++++++++++++++++++++++++++
 css/amp-story-player.css        |  4 +++
 src/amp-story-player.js         | 11 +++------
 5 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 css/amp-story-player-iframe.css

diff --git a/build-system/tasks/css.js b/build-system/tasks/css.js
index 539e611df614..49e397b762e2 100644
--- a/build-system/tasks/css.js
+++ b/build-system/tasks/css.js
@@ -55,10 +55,17 @@ const cssEntryPoints = [
     outCss: 'video-autoplay-out.css',
   },
   {
+    // Publisher imported CSS for `src/amp-story-player.js`.
     path: 'amp-story-player.css',
     outJs: 'amp-story-player.css.js',
     outCss: 'amp-story-player-v0.css',
   },
+  {
+    // Internal CSS used for the iframes inside `src/amp-story-player.js`.
+    path: 'amp-story-player-iframe.css',
+    outJs: 'amp-story-player-iframe.css.js',
+    outCss: 'amp-story-player-iframe-v0.css',
+  },
 ];
 
 /**
diff --git a/css/OWNERS b/css/OWNERS
index 68ea9f7bbf65..086d6b752a6d 100644
--- a/css/OWNERS
+++ b/css/OWNERS
@@ -10,5 +10,9 @@
         {name: 'camelburrito', requestReviews: false},
       ],
     },
+    {
+      pattern: '{amp-story-*}.css',
+      owners: [{name: 'newmuis'}, {name: 'gmajoulet'}, {name: 'enriqe'}],
+    },
   ],
 }
diff --git a/css/amp-story-player-iframe.css b/css/amp-story-player-iframe.css
new file mode 100644
index 000000000000..1a52f07f7ba2
--- /dev/null
+++ b/css/amp-story-player-iframe.css
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2020 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.
+ */
+
+:host {
+  all: initial;
+  display: block;
+  border-radius: 0 !important;
+  width: 360px;
+  height: 600px;
+  overflow: auto;
+}
+
+.story-player-iframe {
+  height: 100%;
+  width: 100%;
+  flex: 0 0 100%;
+  border: 0;
+  opacity: 0;
+  transition: opacity 500ms ease;
+}
+
+main {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+
+.i-amphtml-story-player-loaded iframe {
+  opacity: 1;
+}
diff --git a/css/amp-story-player.css b/css/amp-story-player.css
index 0b1bf7c47db1..92b293701a45 100644
--- a/css/amp-story-player.css
+++ b/css/amp-story-player.css
@@ -29,6 +29,10 @@ amp-story-player a:first-of-type {
   display: block;
 }
 
+amp-story-player a:not(:first-of-type) {
+  visibility: hidden;
+}
+
 amp-story-player::after {
   content: " ";
   position: absolute;
diff --git a/src/amp-story-player.js b/src/amp-story-player.js
index 38cd13459ab0..d2048455d0ac 100644
--- a/src/amp-story-player.js
+++ b/src/amp-story-player.js
@@ -23,6 +23,8 @@ import {
   removeFragment,
 } from './url';
 import {dict} from './utils/object';
+// Source for this constant is css/amp-story-player-iframe.css
+import {cssText} from '../build/amp-story-player-iframe.css';
 import {findIndex} from './utils/array';
 import {setStyle} from './style';
 import {toArray} from './types';
@@ -34,13 +36,6 @@ const LoadStateClass = {
   ERROR: 'i-amphtml-story-player-error',
 };
 
-/** @const {string} */
-const CSS = `
-  :host { all: initial; display: block; border-radius: 0 !important; width: 360px; height: 600px; overflow: auto; }
-  .story-player-iframe { height: 100%; width: 100%; flex: 0 0 100%; border: 0; opacity: 0; transition: opacity 500ms ease; }
-  main { display: flex; flex-direction: row; height: 100%; }
-  .i-amphtml-story-player-loaded iframe { opacity: 1; }`;
-
 /**
  * Note that this is a vanilla JavaScript class and should not depend on AMP
  * services, as v0.js is not expected to be loaded in this context.
@@ -112,7 +107,7 @@ export class AmpStoryPlayer {
 
     // Inject default styles
     const styleEl = this.doc_.createElement('style');
-    styleEl.textContent = CSS;
+    styleEl.textContent = cssText;
     shadowRoot.appendChild(styleEl);
     shadowRoot.appendChild(this.rootEl_);
   }