Move Mozilla DevTools to Platform - Part 3: Merge the browser/devtools and toolkit/devtools adjusting for directory collisions

16 files changed, 990 insertions, 0 deletions

diff --git a/toolkit/devtools/webide/themes/addons.css b/toolkit/devtools/webide/themes/addons.css
new file mode 100644
index 000000000..1ae41f2d9
--- /dev/null
+++ b/toolkit/devtools/webide/themes/addons.css
@@ -0,0 +1,79 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+button {
+  line-height: 20px;
+  font-size: 1em;
+  height: 30px;
+  max-height: 30px;
+  min-width: 120px;
+  padding: 3px;
+  color: #737980;
+  border: 1px solid rgba(23,50,77,.4);
+  border-radius: 5px;
+  background-color: #f1f1f1;
+  background-image: linear-gradient(#fff, rgba(255,255,255,.1));
+  box-shadow: 0 1px 1px 0 #fff, inset 0 2px 2px 0 #fff;
+  text-shadow: 0 1px 1px #fefffe;
+  -moz-appearance: none;
+  -moz-border-top-colors: none !important;
+  -moz-border-right-colors: none !important;
+  -moz-border-bottom-colors: none !important;
+  -moz-border-left-colors: none !important;
+}
+
+button:hover {
+  background-image: linear-gradient(#fff, rgba(255,255,255,.6));
+  cursor: pointer;
+}
+
+button:hover:active {
+  background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.6));
+}
+
+progress {
+  height: 30px;
+  vertical-align: middle;
+  padding: 0;
+  width: 120px;
+}
+
+li {
+  margin: 20px 0;
+}
+
+.name {
+  display: inline-block;
+  min-width: 280px;
+}
+
+.status {
+  display: inline-block;
+  min-width: 120px;
+}
+
+.warning {
+  color: #F06;
+  margin: 0;
+  font-size: 0.9em;
+}
+
+li[status="unknown"],
+li > .uninstall-button,
+li > .install-button,
+li > progress {
+  display: none;
+}
+
+li[status="installed"] > .uninstall-button,
+li[status="uninstalled"] > .install-button,
+li[status="preparing"] > progress,
+li[status="downloading"] > progress,
+li[status="installing"] > progress {
+  display: inline;
+}
+
+li:not([status="uninstalled"]) > .warning {
+  display: none;
+}
diff --git a/toolkit/devtools/webide/themes/config-view.css b/toolkit/devtools/webide/themes/config-view.css
new file mode 100644
index 000000000..b25a3b1eb
--- /dev/null
+++ b/toolkit/devtools/webide/themes/config-view.css
@@ -0,0 +1,78 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html, body {
+  background: white;
+}
+
+.action {
+  display: inline;
+}
+
+.action[hidden] {
+  display: none;
+}
+
+#device-fields {
+  font-family: sans-serif;
+  padding-left: 6px;
+  width: 100%;
+  table-layout: auto;
+  margin-top: 110px;
+}
+
+#custom-value-name {
+  width: 70%;
+}
+
+header {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-bottom: 1px solid #EEE;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 90px;
+  padding: 10px 20px;
+}
+
+#device-fields td {
+  background-color: #f1f1f1;
+  border-bottom: 1px solid #ccc;
+  border-right: 1px solid #fff;
+}
+
+#device-fields td:first-child {
+  min-width: 400px;
+}
+
+#device-fields td.preference-name, #device-fields td.setting-name {
+  width: 50%;
+  min-width: 400px;
+  word-break: break-all;
+}
+
+#device-fields button {
+  display: inline-block;
+  font-family: sans-serif;
+  font-size: 0.7rem;
+  white-space: nowrap;
+}
+
+#device-fields tr.hide, #device-fields button.hide {
+  display: none;
+}
+
+#device-fields .custom-input {
+  width: 300px;
+}
+
+#search {
+  margin-bottom: 20px;
+  width: 100%;
+}
+
+#search-bar {
+  width: 80%;
+}
diff --git a/toolkit/devtools/webide/themes/deck.css b/toolkit/devtools/webide/themes/deck.css
new file mode 100644
index 000000000..fd8e62250
--- /dev/null
+++ b/toolkit/devtools/webide/themes/deck.css
@@ -0,0 +1,59 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html {
+  font: message-box;
+  font-size: 15px;
+  font-weight: normal;
+  margin: 0;
+  height: 100%;
+  color: #737980;
+  background-color: #ededed;
+}
+
+body {
+  margin: 0;
+  padding: 20px;
+  background-image: linear-gradient(#fff, #ededed 100px);
+}
+
+h1 {
+  font-size: 2.5em;
+  font-weight: lighter;
+  line-height: 1.2;
+  margin: 0;
+  margin-bottom: .5em;
+}
+
+#controls {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+#controls > a {
+  color: #4C9ED9;
+  font-size: small;
+  cursor: pointer;
+  border-bottom: 1px dotted;
+  margin-left: 10px;
+}
+
+table {
+  font-family: monospace;
+  border-collapse: collapse;
+}
+
+th, td {
+  padding: 5px;
+  border: 1px solid #eee;
+}
+
+th {
+  min-width: 130px;
+}
+
+th:first-of-type, td:first-of-type {
+  text-align: left;
+}
diff --git a/toolkit/devtools/webide/themes/details.css b/toolkit/devtools/webide/themes/details.css
new file mode 100644
index 000000000..dc73d5357
--- /dev/null
+++ b/toolkit/devtools/webide/themes/details.css
@@ -0,0 +1,138 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+body {
+  margin: 0;
+  background-color: white;
+  font: message-box;
+}
+
+.hidden {
+  display: none;
+}
+
+h1, h3, p {
+  margin: 0;
+}
+
+#toolbar {
+  background-color: #D8D8D8;
+  border-bottom: 1px solid #AAA;
+}
+
+#toolbar > button {
+  -moz-appearance: none;
+  background-color: transparent;
+  border-width: 0 1px 0 0;
+  border-color: #AAA;
+  border-style: solid;
+  margin: 0;
+  padding: 0 12px;
+  font-family: inherit;
+  font-weight: bold;
+  height: 24px;
+}
+
+#toolbar > button:hover {
+  background-color: #CCC;
+  cursor: pointer;
+}
+
+#validation_status {
+  float: right;
+  text-transform: uppercase;
+  font-size: 10px;
+  line-height: 24px;
+  padding: 0 12px;
+  color: white;
+}
+
+
+header {
+  padding: 20px 0;
+}
+
+header > div {
+  vertical-align: top;
+  display: flex;
+  flex-direction: column;
+}
+
+#icon {
+  height: 48px;
+  width: 48px;
+  float: left;
+  margin: 0 20px;
+}
+
+h1, #type {
+  line-height: 24px;
+  height: 24px; /* avoid collapsing if empty */
+  display: block;
+}
+
+h1 {
+  font-size: 20px;
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+#type {
+  font-size: 10px;
+  text-transform: uppercase;
+  color: #777;
+}
+
+main {
+  padding-left: 88px;
+}
+
+h3 {
+  color: #999;
+  font-size: 10px;
+  font-weight: normal;
+}
+
+main > p {
+  margin-bottom: 20px;
+}
+
+.validation_messages {
+  margin-left: 74px;
+  list-style: none;
+  border-left: 4px solid transparent;
+  padding: 0 10px;;
+}
+
+
+body.valid #validation_status {
+  background-color: #81D135;
+}
+
+body.warning #validation_status {
+  background-color: #FFAC00;
+}
+
+body.error #validation_status {
+  background-color: #ED4C62;
+}
+
+#warningslist {
+  border-color: #FFAC00
+}
+
+#errorslist {
+  border-color: #ED4C62;
+}
+
+#validation_status > span {
+  display: none;
+}
+
+body.valid #validation_status > .valid,
+body.warning #validation_status > .warning,
+body.error #validation_status > .error {
+  display: inline;
+}
diff --git a/toolkit/devtools/webide/themes/icons.png b/toolkit/devtools/webide/themes/icons.png
new file mode 100644
index 000000000..5e1dd5c64
--- /dev/null
+++ b/toolkit/devtools/webide/themes/icons.png
diff --git a/toolkit/devtools/webide/themes/jar.mn b/toolkit/devtools/webide/themes/jar.mn
new file mode 100644
index 000000000..804f47f6a
--- /dev/null
+++ b/toolkit/devtools/webide/themes/jar.mn
@@ -0,0 +1,20 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+webide.jar:
+% skin webide classic/1.0 %skin/
+* skin/webide.css              (webide.css)
+  skin/icons.png               (icons.png)
+  skin/details.css             (details.css)
+  skin/newapp.css              (newapp.css)
+  skin/throbber.svg            (throbber.svg)
+  skin/deck.css                (deck.css)
+  skin/addons.css              (addons.css)
+  skin/prefs.css               (prefs.css)
+  skin/runtimedetails.css      (runtimedetails.css)
+  skin/permissionstable.css    (permissionstable.css)
+  skin/monitor.css             (monitor.css)
+  skin/config-view.css         (config-view.css)
+  skin/wifi-auth.css           (wifi-auth.css)
+  skin/logs.css                (logs.css)
diff --git a/toolkit/devtools/webide/themes/logs.css b/toolkit/devtools/webide/themes/logs.css
new file mode 100644
index 000000000..446b6e41c
--- /dev/null
+++ b/toolkit/devtools/webide/themes/logs.css
@@ -0,0 +1,18 @@
+html, body {
+  background: var(--theme-body-background);
+  color: var(--theme-body-color);
+}
+
+h1 {
+  font-size: 1.2em;
+}
+
+ul {
+  padding: 0;
+  font-size: 1em;
+}
+
+li {
+  list-style: none;
+  margin: 0;
+}
diff --git a/toolkit/devtools/webide/themes/monitor.css b/toolkit/devtools/webide/themes/monitor.css
new file mode 100644
index 000000000..ba4b298ed
--- /dev/null
+++ b/toolkit/devtools/webide/themes/monitor.css
@@ -0,0 +1,86 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Graph */
+.graph {
+  height: 500px;
+  width: 100%;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  margin-bottom: 30px;
+  background-color: white;
+}
+.graph > svg, .sidebar {
+  display: inline-block;
+  vertical-align: top;
+}
+.disabled {
+  opacity: 0.5;
+}
+.graph.disabled {
+  height: 30px;
+}
+.graph.disabled > svg {
+  visibility: hidden;
+}
+.curve path, .event-slot line {
+  fill: none;
+  stroke-width: 1.5px;
+}
+.axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+.axis path {
+  fill: none;
+  stroke: black;
+  stroke-width: 1px;
+  shape-rendering: crispEdges;
+}
+.tick text, .x.ruler text, .y.ruler text {
+  font-size: 0.9em;
+}
+.x.ruler text {
+  text-anchor: middle;
+}
+.y.ruler text {
+  text-anchor: end;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 150px;
+  overflow-x: hidden;
+}
+.sidebar label {
+  cursor: pointer;
+  display: block;
+}
+.sidebar span:not(.color) {
+  vertical-align: 13%;
+}
+.sidebar input {
+  visibility: hidden;
+}
+.sidebar input:hover {
+  visibility: visible;
+}
+.graph-title {
+  margin-top: 5px;
+  font-size: 1.2em;
+}
+.legend-color {
+  display: inline-block;
+  height: 10px;
+  width: 10px;
+  margin-left: 1px;
+  margin-right: 3px;
+}
+.legend-id {
+  font-size: .9em;
+}
+.graph.disabled > .sidebar > .legend {
+  display: none;
+}
diff --git a/toolkit/devtools/webide/themes/moz.build b/toolkit/devtools/webide/themes/moz.build
new file mode 100644
index 000000000..3bbe67297
--- /dev/null
+++ b/toolkit/devtools/webide/themes/moz.build
@@ -0,0 +1,7 @@
+# -*- Mode: python; c-basic-offset: 4; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+JAR_MANIFESTS += ['jar.mn']
diff --git a/toolkit/devtools/webide/themes/newapp.css b/toolkit/devtools/webide/themes/newapp.css
new file mode 100644
index 000000000..0b351a40a
--- /dev/null
+++ b/toolkit/devtools/webide/themes/newapp.css
@@ -0,0 +1,54 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+dialog {
+  -moz-appearance: none;
+  background-image: linear-gradient(rgb(255, 255, 255), rgb(237, 237, 237) 100px);
+  font-family: "Clear Sans", sans-serif;
+  color: #424E5A;
+  overflow-y: scroll;
+}
+
+.header-name {
+  font-size: 1.5rem;
+  font-weight: normal;
+  margin: 15px 0;
+}
+
+richlistbox {
+  -moz-appearance: none;
+  overflow-y: auto;
+  border: 1px solid #424E5A;
+}
+
+richlistitem {
+  padding: 6px 0;
+}
+
+richlistitem:not([selected="true"]):hover {
+  background-color: rgba(0,0,0,0.04);
+}
+
+richlistitem > vbox > label {
+  margin: 0;
+  font-size: 1.1em;
+}
+
+richlistbox > description {
+  margin: 8px;
+}
+
+richlistitem {
+  -moz-box-align: start;
+}
+
+richlistitem > image {
+  height: 24px;
+  width: 24px;
+  margin: 0 6px;
+}
+
+textbox {
+  font-size: 1.2rem;
+}
diff --git a/toolkit/devtools/webide/themes/permissionstable.css b/toolkit/devtools/webide/themes/permissionstable.css
new file mode 100644
index 000000000..3a45e0d74
--- /dev/null
+++ b/toolkit/devtools/webide/themes/permissionstable.css
@@ -0,0 +1,23 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html, body {
+  background: white;
+}
+
+.permissionstable td {
+  text-align: center;
+}
+
+.permallow {
+  color: rgb(152,207,57);
+}
+
+.permprompt {
+  color: rgb(0,158,237);
+}
+
+.permdeny {
+  color: rgb(204,73,8);
+}
diff --git a/toolkit/devtools/webide/themes/prefs.css b/toolkit/devtools/webide/themes/prefs.css
new file mode 100644
index 000000000..20c6d16eb
--- /dev/null
+++ b/toolkit/devtools/webide/themes/prefs.css
@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+li {
+  list-style: none;
+}
+
+li > label:hover {
+  background-color: rgba(0,0,0,0.02);
+}
+
+li > label > span {
+  display: inline-block;
+}
diff --git a/toolkit/devtools/webide/themes/runtimedetails.css b/toolkit/devtools/webide/themes/runtimedetails.css
new file mode 100644
index 000000000..91ced5bff
--- /dev/null
+++ b/toolkit/devtools/webide/themes/runtimedetails.css
@@ -0,0 +1,25 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html, body {
+  background: white;
+}
+
+#devicePrivileges {
+  font-family: monospace;
+  padding-left: 6px;
+}
+
+#devtools-check > a {
+  color: #4C9ED9;
+  cursor: pointer;
+}
+
+.action {
+  display: inline;
+}
+
+.action[hidden] {
+  display: none;
+}
diff --git a/toolkit/devtools/webide/themes/throbber.svg b/toolkit/devtools/webide/themes/throbber.svg
new file mode 100644
index 000000000..d89fb3851
--- /dev/null
+++ b/toolkit/devtools/webide/themes/throbber.svg
@@ -0,0 +1,22 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg  xmlns="http://www.w3.org/2000/svg"
+      width="24" height="24" viewBox="0 0 64 64">
+  <g>
+    <rect x="30" y="4" width="4" height="15" transform="rotate(0, 32, 32)" fill="#BBB"/>
+    <rect x="30" y="4" width="4" height="15" transform="rotate(30, 32, 32)" fill="#AAA"/>
+    <rect x="30" y="4" width="4" height="15" transform="rotate(60, 32, 32)" fill="#999"/>
+    <rect x="30" y="4" width="4" height="15" transform="rotate(90, 32, 32)" fill="#888"/>
+    <rect x="30" y="4" width="4" height="15" transform="rotate(120, 32, 32)" fill="#777"/>
+    <rect x="30" y="4" width="4" height="15" transform="rotate(150, 32, 32)" fill="#666"/>
+    <rect x="30" y="4" width="4" height="15" transform="rotate(180, 32, 32)" fill="#555"/>
+    <rect x="30" y="4" width="4" height="15" transform="rotate(210, 32, 32)" fill="#444"/>
+    <rect x="30" y="4" width="4" height="15" transform="rotate(240, 32, 32)" fill="#333"/>
+    <rect x="30" y="4" width="4" height="15" transform="rotate(270, 32, 32)" fill="#222"/>
+    <rect x="30" y="4" width="4" height="15" transform="rotate(300, 32, 32)" fill="#111"/>
+    <rect x="30" y="4" width="4" height="15" transform="rotate(330, 32, 32)" fill="#000"/>
+    <animateTransform attributeName="transform" type="rotate" calcMode="discrete" values="0 32 32;30 32 32;60 32 32;90 32 32;120 32 32;150 32 32;180 32 32;210 32 32;240 32 32;270 32 32;300 32 32;330 32 32" dur="0.8s" repeatCount="indefinite"/>
+  </g>
+</svg>
diff --git a/toolkit/devtools/webide/themes/webide.css b/toolkit/devtools/webide/themes/webide.css
new file mode 100644
index 000000000..76074c2c4
--- /dev/null
+++ b/toolkit/devtools/webide/themes/webide.css
@@ -0,0 +1,306 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/*
+ *
+ * Icons.png:
+ *
+ *  actions icons: 100x100. Starts at 0x0.
+ *  menu icons: 26x26. Starts at 312x0.
+ *  anchors icons: 27x16. Starts at 364x0.
+ *
+ */
+
+#main-toolbar {
+  padding: 0 12px;
+}
+
+#action-buttons-container {
+  -moz-box-pack: center;
+  height: 50px;
+}
+
+#panel-buttons-container {
+  height: 50px;
+  margin-top: -50px;
+  pointer-events: none;
+}
+
+#panel-buttons-container > .panel-button {
+  pointer-events: auto;
+}
+
+#action-busy-undetermined {
+  height: 24px;
+  width: 24px;
+}
+
+window.busy .action-button,
+window:not(.busy) #action-busy,
+window.busy-undetermined #action-busy-determined,
+window.busy-determined #action-busy-undetermined {
+  display: none;
+}
+
+/* Panel buttons */
+
+.panel-button {
+  -moz-appearance: none;
+  -moz-box-align: center;
+  border-width: 0;
+  background: none;
+}
+
+.panel-button-anchor {
+  list-style-image: url('icons.png');
+  -moz-image-region: rect(0px,491px,16px,464px);
+  width: 12px;
+  height: 7px;
+}
+
+.panel-button:hover > .panel-button-anchor {
+  -moz-image-region: rect(0px,545px,16px,518px);
+}
+
+/* Panel buttons - projects */
+
+#project-panel-button {
+  -moz-box-pack: start;
+  max-width: calc(50vw - 100px);
+}
+
+#project-panel-button > .panel-button-image {
+  width: 13px;
+  height: 13px;
+}
+
+#project-panel-button > .panel-button-image[src] {
+  /* with app icon */
+  width: 20px;
+  height: 20px;
+}
+
+#project-panel-button.no-project > .panel-button-image {
+  list-style-image: url("icons.png");
+  -moz-image-region: rect(260px,438px,286px,412px);
+}
+
+#project-panel-button > .panel-button-label {
+  -moz-box-flex: 1;
+}
+
+/* Panel buttons - runtime */
+
+#runtime-panel-button > .panel-button-image {
+  list-style-image: url('icons.png');
+  -moz-image-region: rect(78px,438px,104px,412px);
+  width: 13px;
+  height: 13px;
+}
+
+#runtime-panel-button[active="true"] > .panel-button-image {
+  -moz-image-region: rect(78px,464px,104px,438px);
+}
+
+/* Action buttons */
+
+.action-button {
+  -moz-appearance: none;
+  border-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style-image: url('icons.png');
+}
+
+.action-button[disabled="true"] {
+  opacity: 0.4;
+}
+
+.action-button > .toolbarbutton-icon {
+  width: 40px;
+  height: 40px;
+}
+
+.action-button > .toolbarbutton-text {
+  display: none;
+}
+
+#action-button-play  { -moz-image-region: rect(0,100px,100px,0) }
+#action-button-stop  { -moz-image-region: rect(0,200px,100px,100px) }
+#action-button-debug { -moz-image-region: rect(0,300px,100px,200px) }
+
+#action-button-play:not([disabled="true"]):hover  { -moz-image-region: rect(200px,100px,300px,0) }
+#action-button-stop:not([disabled="true"]):hover  { -moz-image-region: rect(200px,200px,300px,100px) }
+#action-button-debug:not([disabled="true"]):not([active="true"]):hover { -moz-image-region: rect(200px,300px,300px,200px) }
+
+#action-button-play.reload { -moz-image-region: rect(0,400px,100px,303px) }
+#action-button-play.reload:hover { -moz-image-region: rect(200px,400px,300px,303px) }
+
+#action-button-debug[active="true"] { -moz-image-region: rect(100px,300px,200px,200px) }
+
+/* Panels */
+
+panel > vbox {
+  overflow-x: hidden;
+}
+
+panel > .panel-arrowcontainer > .panel-arrowcontent {
+  padding: 12px 0;
+  min-width: 200px;
+  max-width: 400px;
+}
+
+.panel-item {
+  padding: 3px 12px;
+  margin: 0;
+  -moz-appearance: none;
+  border-width: 0;
+  font-size: 13px; /* height of the icons */
+}
+
+.panel-item:hover {
+  background: #CBF0FE;
+}
+
+.panel-header {
+  /* We can't use borders or vertical padding here because
+   * panels don't take these into account when calculated the
+   * height of the panel.
+   */
+  background-color: #EEE;
+  outline-width: 1px;
+  outline-color: #D5D5D5;
+  outline-style: solid;
+  color: #ACACAC;
+  text-transform: uppercase;
+  padding: 0 16px;
+  line-height: 200%;
+  margin: 5px 0;
+  font-size: 90%;
+  font-weight: bold;
+}
+
+.panel-item > .toolbarbutton-icon {
+  width: 13px;
+  height: 13px;
+  margin-right: 12px; /* to compensate panel-item padding */
+}
+
+.panel-item > .toolbarbutton-text {
+  text-align: start;
+}
+
+/* project panel */
+
+.project-panel-item-newapp,
+.project-panel-item-openpackaged,
+.project-panel-item-openhosted {
+  list-style-image: url("icons.png");
+}
+
+.project-panel-item-newapp       { -moz-image-region: rect(234px,438px,260px,412px) }
+.project-panel-item-openpackaged { -moz-image-region: rect(260px,438px,286px,412px) }
+.project-panel-item-openhosted   { -moz-image-region: rect(208px,438px,234px,412px) }
+
+/* runtime panel */
+
+#runtime-panel .panel-arrowcontent {
+  padding: 12px 0 0;
+}
+
+#runtime-panel-other {
+  margin-bottom: 12px;
+}
+
+#runtime-details,
+#runtime-screenshot,
+#runtime-permissions,
+#runtime-preferences,
+#runtime-disconnect,
+#runtime-panel-nousbdevice,
+#runtime-panel-noadbhelper,
+#runtime-panel-installsimulator,
+.runtime-panel-item-usb,
+.runtime-panel-item-wifi,
+.runtime-panel-item-other,
+.runtime-panel-item-simulator {
+  list-style-image: url("icons.png");
+}
+
+#runtime-details                { -moz-image-region: rect(156px,438px,182px,412px) }
+#runtime-screenshot             { -moz-image-region: rect(130px,438px,156px,412px) }
+#runtime-permissions            { -moz-image-region: rect(104px,438px,130px,412px) }
+#runtime-preferences            { -moz-image-region: rect(104px,462px,129px,438px) }
+#runtime-disconnect             { -moz-image-region: rect(52px,438px,78px,412px) }
+#runtime-panel-nousbdevice      { -moz-image-region: rect(156px,438px,182px,412px) }
+#runtime-panel-noadbhelper      { -moz-image-region: rect(234px,438px,260px,412px) }
+#runtime-panel-installsimulator { -moz-image-region: rect(0px,438px,26px,412px) }
+.runtime-panel-item-usb         { -moz-image-region: rect(52px,438px,78px,412px) }
+.runtime-panel-item-wifi        { -moz-image-region: rect(208px,438px,234px,412px) }
+.runtime-panel-item-other       { -moz-image-region: rect(26px,438px,52px,412px) }
+.runtime-panel-item-simulator   { -moz-image-region: rect(0px,438px,26px,412px) }
+
+#runtime-actions {
+  border-top: 1px solid rgba(221,221,221,1);
+}
+
+
+#runtime-actions > toolbarbutton {
+  border-top: 1px solid rgba(221,221,221,1);
+  background-color: rgba(233,233,233,1);
+  color: rgba(87,87,87,1);
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+#runtime-actions > toolbarbutton[disabled="true"] {
+  opacity: 0.4;
+}
+
+#runtime-actions > toolbarbutton:not([disabled="true"]):hover {
+  background-color: #CBF0FE;
+}
+
+#runtime-actions > toolbarbutton:last-child {
+  border-radius: 0 0 3px 3px;
+}
+
+/* Main view */
+
+#deck {
+  background-color: rgb(225, 225, 225);
+  background-image: url('chrome://browser/skin/devtools/app-manager/rocket.svg'), url('chrome://browser/skin/devtools/app-manager/noise.png');
+  background-repeat: no-repeat, repeat;
+  background-size: 35%, auto;
+  background-position: center center, top left;
+%ifndef XP_MACOSX
+  border-top: 1px solid #AAA;
+%endif
+}
+
+.devtools-horizontal-splitter {
+  -moz-appearance: none;
+  background-image: none;
+  background-color: transparent;
+  border: 0;
+  border-bottom: 1px solid rgba(118, 121, 125, .5);
+  min-height: 3px;
+  height: 3px;
+  margin-top: -3px;
+  position: relative;
+  border-bottom: 1px solid #aaa;
+}
+
+/* Toolbox */
+
+#notificationbox[toolboxfullscreen] > .devtools-horizontal-splitter,
+#notificationbox[toolboxfullscreen] > #deck,
+#notificationbox[toolboxfullscreen] > #deck > iframe {
+  min-height: 0;
+  max-height: 0;
+}
+
+#notificationbox[toolboxfullscreen] > #toolbox {
+  -moz-box-flex: 1;
+}
diff --git a/toolkit/devtools/webide/themes/wifi-auth.css b/toolkit/devtools/webide/themes/wifi-auth.css
new file mode 100644
index 000000000..1a9b02336
--- /dev/null
+++ b/toolkit/devtools/webide/themes/wifi-auth.css
@@ -0,0 +1,60 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html, body {
+  background: white;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 90%;
+}
+
+div {
+  margin-bottom: 1em;
+}
+
+#qr-code {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#qr-code-wrapper {
+  flex: 1;
+  width: 100%;
+  margin: 2em 0;
+  text-align: center;
+}
+
+#qr-code img {
+  height: 100%;
+}
+
+.toggle-scanner {
+  color: #4C9ED9;
+  font-size: small;
+  cursor: pointer;
+  border-bottom: 1px dotted;
+}
+
+#token {
+  display: none;
+}
+
+body[token] > #token {
+  display: flex;
+  flex-direction: column;
+}
+
+body[token] > #qr-code {
+  display: none;
+}
+
+#token pre,
+#token a {
+  align-self: center;
+}