Bug 1240913 - Add @allowfullscreen to appease swapFrameLoaders. r=ochameau draft
authorJ. Ryan Stinnett <jryans@gmail.com>
Tue, 19 Apr 2016 15:35:04 -0500
changeset 364634 651a682c1454b8539b05ac3abae8b6282ac238b9
parent 364633 979e20375575fbd350c4ec9c819a48c0a253552d
child 364635 30343ea1f03b39b91d096efdd4434e3312bf69ab
child 366024 045b63d34ab734b6b4f24c2f7adfe9fdcc8b1442
child 366447 0dcb5e91c8de259e73ed8483a119e651b5bc457c
child 367557 aba8c8b9e83f12dc2773df1feacf8ad37cabf8ba
push id17509
push userbmo:jryans@gmail.com
push dateSat, 07 May 2016 02:35:54 +0000
reviewersochameau
bugs1240913
milestone49.0a1
Bug 1240913 - Add @allowfullscreen to appease swapFrameLoaders. r=ochameau We don't really need fullscreen access here, but we do need the same access to browser features as regular browser tabs. The `swapFrameLoaders` platform API we use compares such features before allowing the swap to proceed. MozReview-Commit-ID: DVPUC1QKBgJ
devtools/client/responsive.html/components/browser.js
--- a/devtools/client/responsive.html/components/browser.js
+++ b/devtools/client/responsive.html/components/browser.js
@@ -98,19 +98,25 @@ module.exports = createClass({
 
         /**
          * React uses a whitelist for attributes, so we need some way to set
          * attributes it does not know about, such as @mozbrowser.  If this were
          * the only issue, we could use componentDidMount or ref: node => {} to
          * set the atttibutes. In the case of @remote, the attribute must be set
          * before the element is added to the DOM to have any effect, which we
          * are able to do with this approach.
+         *
+         * @noisolation and @allowfullscreen are needed so that these frames
+         * have the same access to browser features as regular browser tabs.
+         * The `swapFrameLoaders` platform API we use compares such features
+         * before allowing the swap to proceed.
          */
         dangerouslySetInnerHTML: {
           __html: `<iframe class="browser" mozbrowser="true" remote="true"
-                           noisolation="true" src="${location}"
-                           width="100%" height="100%"></iframe>`
+                           noisolation="true" allowfullscreen="true"
+                           src="${location}" width="100%" height="100%">
+                   </iframe>`
         }
       }
     );
   },
 
 });