Bug 1240896 - Use iframe mozbrowser in RDM. r=gl
authorJ. Ryan Stinnett <jryans@gmail.com>
Wed, 23 Mar 2016 15:29:44 -0500
changeset 292126 0070ee7b52a376efcff2c6ddc7acb2ccae79670f
parent 292125 165addeb1e58bf6791cc60c4c28f71a1558059a4
child 292127 d9b17ba5ebc289b478e96cb8934de305fdff2129
push id74762
push usercbook@mozilla.com
push dateThu, 07 Apr 2016 09:56:20 +0000
treeherdermozilla-inbound@772253c53374 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1240896
milestone48.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1240896 - Use iframe mozbrowser in RDM. r=gl MozReview-Commit-ID: LJ78ao7ubDE
devtools/client/responsive.html/components/browser.js
--- a/devtools/client/responsive.html/components/browser.js
+++ b/devtools/client/responsive.html/components/browser.js
@@ -30,19 +30,31 @@ module.exports = createClass({
       isResizing,
     } = this.props;
 
     let className = "browser";
     if (isResizing) {
       className += " resizing";
     }
 
-    return dom.iframe(
+    // innerHTML expects & to be an HTML entity
+    location = location.replace(/&/g, "&amp;");
+
+    return dom.div(
       {
-        className,
-        src: location,
-        width,
-        height,
+        /**
+         * 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.
+         */
+        dangerouslySetInnerHTML: {
+          __html: `<iframe class="${className}" mozbrowser="true" remote="true"
+                           noisolation="true" src="${location}"
+                           width="${width}" height="${height}"></iframe>`
+        }
       }
     );
   },
 
 });