Bug 1173909-Give loop showcase FramedExamples dashed borders and CSS style exclusion

2024-09-13 09:24:08 -07:00 · 2015-06-17 11:50:45 -07:00 · 2015-06-17 11:50:45 -07:00 · f8246cd713
commit f8246cd713
parent 7ce7471d77
5 changed files with 130 additions and 57 deletions
--- a/browser/components/loop/ui/index.html
+++ b/browser/components/loop/ui/index.html
@ -9,9 +9,12 @@
    <link rel="stylesheet" type="text/css" href="../content/shared/css/reset.css">
    <link rel="stylesheet" type="text/css" href="../content/shared/css/common.css">
    <link rel="stylesheet" type="text/css" href="../content/shared/css/conversation.css">
-    <link rel="stylesheet" type="text/css" href="../content/css/panel.css">
-    <link rel="stylesheet" type="text/css" href="../content/css/contacts.css">
-    <link rel="stylesheet" type="text/css" href="../content/css/webapp.css">
+    <link class="fx-embedded-panel" rel="stylesheet" type="text/css"
+          href="../content/css/panel.css">
+    <link class="fx-embedded-panel" rel="stylesheet" type="text/css"
+          href="../content/css/contacts.css">
+    <link class="standalone" rel="stylesheet" type="text/css"
+          href="../content/css/webapp.css">
    <link rel="stylesheet" type="text/css" href="ui-showcase.css">
 </head>
  <body>
--- a/browser/components/loop/ui/react-frame-component.js
+++ b/browser/components/loop/ui/react-frame-component.js
@ -29,31 +29,55 @@ window.Frame = React.createClass({
    head: React.PropTypes.node,
    width: React.PropTypes.number,
    height: React.PropTypes.number,
-    onContentsRendered: React.PropTypes.func
+    onContentsRendered: React.PropTypes.func,
+    className: React.PropTypes.string,
+    /* By default, <link rel="stylesheet> nodes from the containing frame's
+       head will be cloned into this iframe.  However, if the link also has
+       a "class" attribute, we only clone it if that class attribute is the
+       same as cssClass.  This allows us to avoid injecting stylesheets that
+       aren't intended for this rendering of this component. */
+    cssClass: React.PropTypes.string
  },
  render: function() {
    return React.createElement("iframe", {
      style: this.props.style,
      head: this.props.head,
      width: this.props.width,
-      height: this.props.height
+      height: this.props.height,
+      className: this.props.className
    });
  },
  componentDidMount: function() {
    this.renderFrameContents();
  },
  renderFrameContents: function() {
-    var doc = this.getDOMNode().contentDocument;
-    if (doc && doc.readyState === "complete") {
+    function isStyleSheet(node) {
+      return node.tagName.toLowerCase() === "link" &&
+        node.getAttribute("rel") === "stylesheet";
+    }
+
+    var childDoc = this.getDOMNode().contentDocument;
+    if (childDoc && childDoc.readyState === "complete") {
      // Remove this from the queue.
      window.queuedFrames.splice(window.queuedFrames.indexOf(this), 1);

-      var iframeHead = doc.querySelector("head");
+      var iframeHead = childDoc.querySelector("head");
      var parentHeadChildren = document.querySelector("head").children;

      [].forEach.call(parentHeadChildren, function(parentHeadNode) {
+
+        // if this node is a CSS stylesheet...
+        if (isStyleSheet(parentHeadNode)) {
+          // and it has a class different from the one that this frame does,
+          // return immediately instead of appending it.
+          if (parentHeadNode.hasAttribute("class") && this.props.cssClass &&
+            parentHeadNode.getAttribute("class") !== this.props.cssClass) {
+            return;
+          }
+        }
+
        iframeHead.appendChild(parentHeadNode.cloneNode(true));
-      });
+      }.bind(this));

      var contents = React.createElement("div",
        undefined,
@ -61,14 +85,14 @@ window.Frame = React.createClass({
        this.props.children
      );

-      React.render(contents, doc.body, this.fireOnContentsRendered.bind(this));
+      React.render(contents, childDoc.body, this.fireOnContentsRendered);

      // Set the RTL mode. We assume for now that rtl is the only query parameter.
      //
      // See also "ShowCase" in ui-showcase.jsx
      if (document.location.search === "?rtl=1") {
-        doc.documentElement.setAttribute("lang", "ar");
-        doc.documentElement.setAttribute("dir", "rtl");
+        childDoc.documentElement.setAttribute("lang", "ar");
+        childDoc.documentElement.setAttribute("dir", "rtl");
      }
    } else {
      // Queue it, only if it isn't already. We do need to set the timeout
@ -76,7 +100,7 @@ window.Frame = React.createClass({
      if (window.queuedFrames.indexOf(this) === -1) {
        window.queuedFrames.push(this);
      }
-      setTimeout(this.renderFrameContents.bind(this), 0);
+      setTimeout(this.renderFrameContents, 0);
    }
  },
  /**
--- a/browser/components/loop/ui/ui-showcase.css
+++ b/browser/components/loop/ui/ui-showcase.css
@ -57,7 +57,9 @@ body {
  margin: 0 auto; /* width is usually set programmatically */
 }

-.showcase > section .comp.dashed {
+.showcase > section .comp.dashed,
+.showcase > section .comp > iframe.dashed
+{
  border: 1px dashed #ccc;
 }

--- a/browser/components/loop/ui/ui-showcase.js
+++ b/browser/components/loop/ui/ui-showcase.js
@ -100,9 +100,9 @@
   * @returns {loop.store.ActiveRoomStore}
   */
  function makeActiveRoomStore(options) {
-    var dispatcher = new loop.Dispatcher();
+    var roomDispatcher = new loop.Dispatcher();

-    var store = new loop.store.ActiveRoomStore(dispatcher, {
+    var store = new loop.store.ActiveRoomStore(roomDispatcher, {
      mozLoop: navigator.mozLoop,
      sdkDriver: mockSDK
    });
@ -370,7 +370,9 @@
    propTypes: {
      width: React.PropTypes.number,
      height: React.PropTypes.number,
-      onContentsRendered: React.PropTypes.func
+      onContentsRendered: React.PropTypes.func,
+      dashed: React.PropTypes.bool,
+      cssClass: React.PropTypes.string
    },

    makeId: function(prefix) {
@ -378,6 +380,15 @@
    },

    render: function() {
+      var height = this.props.height;
+      var width = this.props.width;
+
+      // make room for a 1-pixel border on each edge
+      if (this.props.dashed) {
+        height += 2;
+        width += 2;
+      }
+
      var cx = React.addons.classSet;
      return (
        React.createElement("div", {className: "example"}, 
@ -385,10 +396,11 @@
            this.props.summary, 
            React.createElement("a", {href: this.makeId("#")}, " ¶")
          ), 
-          React.createElement("div", {className: cx({comp: true, dashed: this.props.dashed}), 
-               style: this.props.style}, 
-            React.createElement(Frame, {width: this.props.width, height: this.props.height, 
-                   onContentsRendered: this.props.onContentsRendered}, 
+          React.createElement("div", {className: "comp"}, 
+            React.createElement(Frame, {width: width, height: height, 
+                   onContentsRendered: this.props.onContentsRendered, 
+                   className: cx({dashed: this.props.dashed}), 
+                   cssClass: this.props.cssClass}, 
              this.props.children
            )
          )
@ -815,8 +827,9 @@
          ), 

          React.createElement(Section, {name: "StandaloneRoomView"}, 
-            React.createElement(FramedExample, {width: 644, height: 483, 
-              summary: "Standalone room conversation (ready)"}, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
+                           summary: "Standalone room conversation (ready)"}, 
              React.createElement("div", {className: "standalone"}, 
                React.createElement(StandaloneRoomView, {
                  dispatcher: dispatcher, 
@ -826,8 +839,9 @@
              )
            ), 

-            React.createElement(FramedExample, {width: 644, height: 483, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
              summary: "Standalone room conversation (joined)", 
+              cssClass: "standalone", 
              onContentsRendered: joinedRoomStore.forcedUpdate}, 
              React.createElement("div", {className: "standalone"}, 
                React.createElement(StandaloneRoomView, {
@ -838,7 +852,8 @@
              )
            ), 

-            React.createElement(FramedExample, {width: 644, height: 483, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
                           onContentsRendered: updatingActiveRoomStore.forcedUpdate, 
                           summary: "Standalone room conversation (has-participants, 644x483)"}, 
                React.createElement("div", {className: "standalone"}, 
@ -852,7 +867,8 @@
                )
            ), 

-            React.createElement(FramedExample, {width: 644, height: 483, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
                           onContentsRendered: localFaceMuteRoomStore.forcedUpdate, 
                           summary: "Standalone room conversation (local face mute, has-participants, 644x483)"}, 
              React.createElement("div", {className: "standalone"}, 
@ -865,7 +881,8 @@
              )
            ), 

-            React.createElement(FramedExample, {width: 644, height: 483, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
                           onContentsRendered: remoteFaceMuteRoomStore.forcedUpdate, 
                           summary: "Standalone room conversation (remote face mute, has-participants, 644x483)"}, 
              React.createElement("div", {className: "standalone"}, 
@ -878,7 +895,8 @@
              )
            ), 

-            React.createElement(FramedExample, {width: 800, height: 660, 
+            React.createElement(FramedExample, {width: 800, height: 660, dashed: true, 
+                           cssClass: "standalone", 
                           onContentsRendered: updatingSharingRoomStore.forcedUpdate, 
              summary: "Standalone room convo (has-participants, receivingScreenShare, 800x660)"}, 
                React.createElement("div", {className: "standalone"}, 
@ -894,7 +912,8 @@
                )
            ), 

-            React.createElement(FramedExample, {width: 644, height: 483, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
                           summary: "Standalone room conversation (full - FFx user)"}, 
              React.createElement("div", {className: "standalone"}, 
                React.createElement(StandaloneRoomView, {
@ -904,8 +923,9 @@
              )
            ), 

-            React.createElement(FramedExample, {width: 644, height: 483, 
-              summary: "Standalone room conversation (full - non FFx user)"}, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
+                           summary: "Standalone room conversation (full - non FFx user)"}, 
              React.createElement("div", {className: "standalone"}, 
                React.createElement(StandaloneRoomView, {
                  dispatcher: dispatcher, 
@ -914,8 +934,9 @@
              )
            ), 

-            React.createElement(FramedExample, {width: 644, height: 483, 
-              summary: "Standalone room conversation (feedback)"}, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
+                           summary: "Standalone room conversation (feedback)"}, 
              React.createElement("div", {className: "standalone"}, 
                React.createElement(StandaloneRoomView, {
                  dispatcher: dispatcher, 
@ -925,7 +946,8 @@
              )
            ), 

-            React.createElement(FramedExample, {width: 644, height: 483, 
+            React.createElement(FramedExample, {width: 644, height: 483, dashed: true, 
+                           cssClass: "standalone", 
                           summary: "Standalone room conversation (failed)"}, 
              React.createElement("div", {className: "standalone"}, 
                React.createElement(StandaloneRoomView, {
@ -937,7 +959,7 @@
          ), 

          React.createElement(Section, {name: "StandaloneRoomView (Mobile)"}, 
-            React.createElement(FramedExample, {width: 600, height: 480, 
+            React.createElement(FramedExample, {width: 600, height: 480, cssClass: "standalone", 
                           onContentsRendered: updatingActiveRoomStore.forcedUpdate, 
                           summary: "Standalone room conversation (has-participants, 600x480)"}, 
                React.createElement("div", {className: "standalone"}, 
@ -953,7 +975,7 @@
          ), 

          React.createElement(Section, {name: "TextChatView (standalone)"}, 
-            React.createElement(FramedExample, {width: 200, height: 400, 
+            React.createElement(FramedExample, {width: 200, height: 400, cssClass: "standalone", 
                          summary: "Standalone Text Chat conversation (200 x 400)"}, 
              React.createElement("div", {className: "standalone text-chat-example"}, 
                React.createElement(TextChatView, {
@ -995,7 +1017,7 @@

    // Wait until all the FramedExamples have been fully loaded.
    setTimeout(function waitForQueuedFrames() {
-      if (window.queuedFrames.length != 0) {
+      if (window.queuedFrames.length !== 0) {
        setTimeout(waitForQueuedFrames, 500);
        return;
      }
--- a/browser/components/loop/ui/ui-showcase.jsx
+++ b/browser/components/loop/ui/ui-showcase.jsx
@ -370,7 +370,9 @@
    propTypes: {
      width: React.PropTypes.number,
      height: React.PropTypes.number,
-      onContentsRendered: React.PropTypes.func
+      onContentsRendered: React.PropTypes.func,
+      dashed: React.PropTypes.bool,
+      cssClass: React.PropTypes.string
    },

    makeId: function(prefix) {
@ -378,6 +380,15 @@
    },

    render: function() {
+      var height = this.props.height;
+      var width = this.props.width;
+
+      // make room for a 1-pixel border on each edge
+      if (this.props.dashed) {
+        height += 2;
+        width += 2;
+      }
+
      var cx = React.addons.classSet;
      return (
        <div className="example">
@ -385,10 +396,11 @@
            {this.props.summary}
            <a href={this.makeId("#")}>&nbsp;¶</a>
          </h3>
-          <div className={cx({comp: true, dashed: this.props.dashed})}
-               style={this.props.style}>
-            <Frame width={this.props.width} height={this.props.height}
-                   onContentsRendered={this.props.onContentsRendered}>
+          <div className="comp">
+            <Frame width={width} height={height}
+                   onContentsRendered={this.props.onContentsRendered}
+                   className={cx({dashed: this.props.dashed})}
+                   cssClass={this.props.cssClass}>
              {this.props.children}
            </Frame>
          </div>
@ -815,8 +827,9 @@
          </Section>

          <Section name="StandaloneRoomView">
-            <FramedExample width={644} height={483}
-              summary="Standalone room conversation (ready)">
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
+                           summary="Standalone room conversation (ready)">
              <div className="standalone">
                <StandaloneRoomView
                  dispatcher={dispatcher}
@ -826,8 +839,9 @@
              </div>
            </FramedExample>

-            <FramedExample width={644} height={483}
+            <FramedExample width={644} height={483} dashed={true}
              summary="Standalone room conversation (joined)"
+              cssClass="standalone"
              onContentsRendered={joinedRoomStore.forcedUpdate}>
              <div className="standalone">
                <StandaloneRoomView
@ -838,7 +852,8 @@
              </div>
            </FramedExample>

-            <FramedExample width={644} height={483}
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
                           onContentsRendered={updatingActiveRoomStore.forcedUpdate}
                           summary="Standalone room conversation (has-participants, 644x483)">
                <div className="standalone">
@ -852,7 +867,8 @@
                </div>
            </FramedExample>

-            <FramedExample width={644} height={483}
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
                           onContentsRendered={localFaceMuteRoomStore.forcedUpdate}
                           summary="Standalone room conversation (local face mute, has-participants, 644x483)">
              <div className="standalone">
@ -865,7 +881,8 @@
              </div>
            </FramedExample>

-            <FramedExample width={644} height={483}
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
                           onContentsRendered={remoteFaceMuteRoomStore.forcedUpdate}
                           summary="Standalone room conversation (remote face mute, has-participants, 644x483)">
              <div className="standalone">
@ -878,7 +895,8 @@
              </div>
            </FramedExample>

-            <FramedExample width={800} height={660}
+            <FramedExample width={800} height={660} dashed={true}
+                           cssClass="standalone"
                           onContentsRendered={updatingSharingRoomStore.forcedUpdate}
              summary="Standalone room convo (has-participants, receivingScreenShare, 800x660)">
                <div className="standalone">
@ -894,7 +912,8 @@
                </div>
            </FramedExample>

-            <FramedExample width={644} height={483}
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
                           summary="Standalone room conversation (full - FFx user)">
              <div className="standalone">
                <StandaloneRoomView
@ -904,8 +923,9 @@
              </div>
            </FramedExample>

-            <FramedExample width={644} height={483}
-              summary="Standalone room conversation (full - non FFx user)">
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
+                           summary="Standalone room conversation (full - non FFx user)">
              <div className="standalone">
                <StandaloneRoomView
                  dispatcher={dispatcher}
@ -914,8 +934,9 @@
              </div>
            </FramedExample>

-            <FramedExample width={644} height={483}
-              summary="Standalone room conversation (feedback)">
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
+                           summary="Standalone room conversation (feedback)">
              <div className="standalone">
                <StandaloneRoomView
                  dispatcher={dispatcher}
@ -925,7 +946,8 @@
              </div>
            </FramedExample>

-            <FramedExample width={644} height={483}
+            <FramedExample width={644} height={483} dashed={true}
+                           cssClass="standalone"
                           summary="Standalone room conversation (failed)">
              <div className="standalone">
                <StandaloneRoomView
@ -937,7 +959,7 @@
          </Section>

          <Section name="StandaloneRoomView (Mobile)">
-            <FramedExample width={600} height={480}
+            <FramedExample width={600} height={480} cssClass="standalone"
                           onContentsRendered={updatingActiveRoomStore.forcedUpdate}
                           summary="Standalone room conversation (has-participants, 600x480)">
                <div className="standalone">
@ -953,7 +975,7 @@
          </Section>

          <Section name="TextChatView (standalone)">
-            <FramedExample width={200} height={400}
+            <FramedExample width={200} height={400} cssClass="standalone"
                          summary="Standalone Text Chat conversation (200 x 400)">
              <div className="standalone text-chat-example">
                <TextChatView