Bug 1243403 - Implement the general design of the responsive design mode r=jryans
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 27 Jan 2016 17:51:57 -0500
changeset 326699 1c2c044db3ef02ac69decfee03c40aa14b12fe96
parent 326698 24320d1e9d99d14e391db8013e88736a6bff4247
child 326700 4df23c2aa5c20e013a828a49610779e74cbe6a23
child 327225 abe41be0080e9e222fe0bd3134efc0945dcf8ed3
push id10166
push users.kaspari@gmail.com
push dateThu, 28 Jan 2016 12:16:34 +0000
reviewersjryans
bugs1243403
milestone47.0a1
Bug 1243403 - Implement the general design of the responsive design mode r=jryans
devtools/client/responsive.html/components/viewport.js
devtools/client/responsive.html/index.css
--- a/devtools/client/responsive.html/components/viewport.js
+++ b/devtools/client/responsive.html/components/viewport.js
@@ -24,18 +24,21 @@ module.exports = createClass({
       location,
       viewport,
     } = this.props;
 
     // Additional elements will soon appear here around the Browser, like drag
     // handles, etc.
     return dom.div(
       {
-        className: "viewport",
+        className: "viewport"
       },
+      dom.div({
+        className: "viewport-header",
+      }),
       Browser({
         location,
         width: viewport.width,
         height: viewport.height,
       })
     );
   },
 
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -1,6 +1,33 @@
 /* TODO: May break up into component local CSS.  Pending future discussions by
  * React component group on how to best handle CSS. */
 
-iframe {
+html, body, #app, #viewports {
+  height: 100%;
+}
+
+#viewports {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/**
+ * Viewport Container
+ */
+
+.viewport {
+  border: 1px solid var(--theme-splitter-color);
+  box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
+}
+
+.viewport-header {
+  background-color: var(--theme-toolbar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  color: var(--theme-body-color-alt);
+  height: 16px;
+}
+
+.browser {
+  display: block;
   border: 0;
 }