Update in-browser developer tools

1 files changed, 2 insertions, 574 deletions

diff --git a/src/chrome/browser/browser.css b/src/chrome/browser/browser.css
index d5362d6..92ea050 100644
--- a/src/chrome/browser/browser.css
+++ b/src/chrome/browser/browser.css
@@ -1,4 +1,5 @@
 @import url("chrome://os/skin/browser.css");
+@import url("chrome://browser/skin/devtools.css");
 @import url("chrome://browser/skin/padlock/padlock.css");
 @import url("chrome://global/skin/");
 
@@ -2269,553 +2270,7 @@ toolbar[mode="text"] #addonbar-closebutton > .toolbarbutton-icon {
   font-size: 120%;
 }
 
-
-/* Responsive Mode */
-
-.browserContainer[responsivemode] {
-  background-color: #222;
-  padding: 0 20px 20px 20px;
-}
-
-.browserStack[responsivemode] {
-  box-shadow: 0 0 7px black;
-}
-
-.devtools-responsiveui-toolbar {
-  -moz-appearance: none;
-  background: transparent;
-  /* text color is textColor from dark theme, since no theme is applied to
-   * the responsive toolbar.
-   */
-  color: hsl(210,30%,85%);
-  margin: 10px 0;
-  padding: 0;
-  box-shadow: none;
-  border-bottom-width: 0;
-}
-
-.devtools-responsiveui-menulist,
-.devtools-responsiveui-toolbarbutton {
-  -moz-appearance: none;
-  -moz-box-align: center;
-  min-width: 32px;
-  min-height: 22px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  border: 1px solid hsla(210,8%,5%,.45);
-  border-radius: 0;
-  background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
-  margin: 0 3px;
-  color: inherit;
-}
-
-.devtools-responsiveui-menulist .menulist-editable-box {
-  -moz-appearance: none;
-  background-color: transparent;
-}
-
-.devtools-responsiveui-menulist html|*.menulist-editable-input {
-  -moz-appearance: none;
-  color: inherit;
-  text-align: center;
-}
-
-.devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
-  background: hsla(212,7%,57%,.35);
-}
-
-.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
-  -moz-box-orient: horizontal;
-}
-
-.devtools-responsiveui-menulist:-moz-focusring,
-.devtools-responsiveui-toolbarbutton:-moz-focusring {
-  outline: 1px dotted hsla(210,30%,85%,0.7);
-  outline-offset: -4px;
-}
-
-.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
-  display: none;
-}
-
-.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
-  border-color: hsla(210,8%,5%,.6);
-  background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
-  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-responsiveui-menulist[open=true],
-.devtools-responsiveui-toolbarbutton[open=true],
-.devtools-responsiveui-toolbarbutton[checked=true] {
-  border-color: hsla(210,8%,5%,.6) !important;
-  background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
-  box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-responsiveui-toolbarbutton[checked=true] {
-  color: hsl(208,100%,60%);
-}
-
-.devtools-responsiveui-toolbarbutton[checked=true]:hover {
-  background-color: transparent !important;
-}
-
-.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
-  background-color: hsla(210,8%,5%,.2) !important;
-}
-
-.devtools-responsiveui-menulist > .menulist-label-box {
-  text-align: center;
-}
-
-.devtools-responsiveui-menulist > .menulist-dropmarker {
-  -moz-appearance: none;
-  display: -moz-box;
-  background-color: transparent;
-  list-style-image: url("chrome://global/skin/devtools/dropmarker.svg");
-  -moz-box-align: center;
-  border-width: 0;
-  min-width: 16px;
-}
-
-.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-  -moz-appearance: none;
-  color: inherit;
-  border-width: 0;
-  border-inline-end: 1px solid hsla(210,8%,5%,.45);
-  box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-responsiveui-toolbarbutton[type=menu-button] {
-  padding: 0 1px;
-  -moz-box-align: stretch;
-}
-
-.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
-.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-  -moz-appearance: none !important;
-  list-style-image: url("chrome://global/skin/devtools/dropmarker.svg");
-  -moz-box-align: center;
-  padding: 0 3px;
-}
-
-.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
-.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
-  margin-left: 0;
-}
-
-.devtools-responsiveui-close {
-  list-style-image: url("chrome://global/skin/devtools/close.png");
-}
-
-.devtools-responsiveui-rotate {
-  list-style-image: url("chrome://global/skin/devtools/responsiveui-rotate.png");
-}
-
-@media (min-resolution: 2dppx) {
-  .devtools-responsiveui-close {
-    list-style-image: url("chrome://global/skin/devtools/close@2x.png");
-  }
-
-  .devtools-responsiveui-rotate {
-    list-style-image: url("chrome://global/skin/devtools/responsiveui-rotate@2x.png");
-  }
-}
-
-.devtools-responsiveui-touch {
-  list-style-image: url("chrome://global/skin/devtools/responsiveui-touch.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-.devtools-responsiveui-touch[checked] {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-@media (min-resolution: 2dppx) {
-  .devtools-responsiveui-touch {
-    list-style-image: url("chrome://global/skin/devtools/responsiveui-touch@2x.png");
-    -moz-image-region: rect(0px,32px,32px,0px);
-  }
-
-  .devtools-responsiveui-touch[checked] {
-    -moz-image-region: rect(0px,64px,32px,32px);
-  }
-}
-
-.devtools-responsiveui-screenshot {
-  list-style-image: url("chrome://global/skin/devtools/responsiveui-screenshot.png");
-}
-
-@media (min-resolution: 2dppx) {
-  .devtools-responsiveui-screenshot {
-    list-style-image: url("chrome://global/skin/devtools/responsiveui-screenshot@2x.png");
-  }
-}
-
-.devtools-responsiveui-resizebarV {
-  width: 7px;
-  height: 24px;
-  cursor: ew-resize;
-  transform: translate(12px, -12px);
-  background-size: cover;
-  background-image: url("chrome://global/skin/devtools/responsive-vertical-resizer.png");
-}
-
-.devtools-responsiveui-resizebarH {
-  width: 24px;
-  height: 7px;
-  cursor: ns-resize;
-  transform: translate(-12px, 12px);
-  background-size: cover;
-  background-image: url("chrome://global/skin/devtools/responsive-horizontal-resizer.png");
-}
-
-.devtools-responsiveui-resizehandle {
-  width: 16px;
-  height: 16px;
-  cursor: se-resize;
-  transform: translate(12px, 12px);
-  background-size: cover;
-  background-image: url("chrome://global/skin/devtools/responsive-se-resizer.png");
-}
-
-/* Hide devtools manual resizer */
-.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
-.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
-.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
-  display: none;
-}
-
-/* Gives responsive mode a phone look'n feel */
-.browserStack[responsivemode].fxos-mode {
-  padding: 60px 15px 0;
-
-  border-radius: 25px / 20px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border: 1px solid #FFFFFF;
-  border-bottom-width: 0;
-
-  background-color: #353535;
-
-  box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
-
-  background-image: linear-gradient(to right, #111 11%, #333 56%);
-  min-width: 320px;
-}
-
-.devtools-responsiveui-hardware-buttons {
-  -moz-appearance: none;
-  padding: 20px;
-
-  border: 1px solid #FFFFFF;
-  border-bottom-left-radius: 25px;
-  border-bottom-right-radius: 25px;
-  border-top-width: 0;
-
-  box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
-
-  background-image: linear-gradient(to right, #111 11%, #333 56%);
-}
-
-.devtools-responsiveui-home-button {
-  width: 40px;
-  height: 30px;
-  list-style-image: url("chrome://global/skin/devtools/responsiveui-home.png");
-}
-
-.devtools-responsiveui-sleep-button {
-  -moz-appearance: none;
-  /* compensate browserStack top padding */
-  margin-top: -67px;
-  margin-right: 10px;
-
-  min-width: 10px;
-  width: 50px;
-  height: 5px;
-
-  border: 1px solid #444;
-  border-top-right-radius: 12px;
-  border-top-left-radius: 12px;
-  border-bottom-color: transparent;
-
-  background-image: linear-gradient(to top, #111 11%, #333 56%);
-}
-
-.devtools-responsiveui-sleep-button:hover:active {
-  background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
-}
-
-.devtools-responsiveui-volume-buttons {
-  margin-left: -29px;
-}
-
-.devtools-responsiveui-volume-up-button,
-.devtools-responsiveui-volume-down-button {
-  -moz-appearance: none;
-  border: 1px solid red;
-  min-width: 8px;
-  height: 40px;
-
-  border: 1px solid #444;
-  border-right-color: transparent;
-
-  background-image: linear-gradient(to right, #111 11%, #333 56%);
-}
-
-.devtools-responsiveui-volume-up-button:hover:active,
-.devtools-responsiveui-volume-down-button:hover:active {
-  background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
-}
-
-.devtools-responsiveui-volume-up-button {
-  border-top-left-radius: 12px;
-}
-
-.devtools-responsiveui-volume-down-button {
-  border-bottom-left-radius: 12px;
-}
-
-@media (min-resolution: 2dppx) {
-  .devtools-responsiveui-resizebarV {
-    background-image: url("chrome://global/skin/devtools/responsive-vertical-resizer@2x.png");
-  }
-
-  .devtools-responsiveui-resizebarH {
-    background-image: url("chrome://global/skin/devtools/responsive-horizontal-resizer@2x.png");
-  }
-
-  .devtools-responsiveui-resizehandle {
-    background-image: url("chrome://global/skin/devtools/responsive-se-resizer@2x.png");
-  }
-}
-
-/* Developer toolbar */
-
-#developer-toolbar {
-  -moz-appearance: none;
-  padding: 0;
-  min-height: 32px;
-  background-color: #343C45; /* Toolbars */
-  border-top: 1px solid #060a0d;
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(206,37%,4%,.1) inset;
-}
-
-#developer-toolbar > toolbarbutton {
-  -moz-appearance: none;
-  border: none;
-  background: transparent;
-  margin: 0;
-  padding: 0 10px;
-  width: 32px;
-}
-
-.developer-toolbar-button > image {
-  margin: auto 10px;
-}
-
-.developer-toolbar-button > .toolbarbutton-icon,
-#developer-toolbar-closebutton > .toolbarbutton-icon {
-  width: 16px;
-  height: 16px;
-}
-
-#developer-toolbar-toolbox-button {
-  list-style-image: url("chrome://global/skin/devtools/toggle-tools.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-
-#developer-toolbar-toolbox-button > label {
-  display: none;
-}
-
-#developer-toolbar-toolbox-button:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
-#developer-toolbar-toolbox-button:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-
-#developer-toolbar-toolbox-button[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-@media (min-resolution: 2dppx) {
-  #developer-toolbar-toolbox-button {
-    list-style-image: url("chrome://global/skin/devtools/toggle-tools@2x.png");
-    -moz-image-region: rect(0px, 32px, 32px, 0px);
-  }
-
-  #developer-toolbar-toolbox-button:hover {
-    -moz-image-region: rect(0px, 64px, 32px, 32px);
-  }
-
-  #developer-toolbar-toolbox-button:hover:active {
-    -moz-image-region: rect(0px, 96px, 32px, 64px);
-  }
-
-  #developer-toolbar-toolbox-button[checked=true] {
-    -moz-image-region: rect(0px, 128px, 32px, 96px);
-  }
-}
-
-#developer-toolbar-closebutton {
-  list-style-image: url("chrome://global/skin/devtools/close.png");
-  -moz-appearance: none;
-  border: none;
-  margin: 0 4px;
-  min-width: 16px;
-  width: 16px;
-  opacity: 0.6;
-}
-
-@media (min-resolution: 2dppx) {
-  #developer-toolbar-closebutton {
-    list-style-image: url("chrome://global/skin/devtools/close@2x.png");
-  }
-}
-
-#developer-toolbar-closebutton > .toolbarbutton-icon {
-  /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
-     use evil CSS to give the impression of smaller content */
-  margin: -4px;
-}
-
-#developer-toolbar-closebutton > .toolbarbutton-text {
-  display: none;
-}
-
-#developer-toolbar-closebutton:hover {
-  opacity: 0.8;
-}
-
-#developer-toolbar-closebutton:hover:active {
-  opacity: 1;
-}
-
-/* GCLI */
-
-html|*#gcli-tooltip-frame,
-html|*#gcli-output-frame {
-  padding: 0;
-  border-width: 0;
-  background-color: transparent;
-}
-
-#gcli-output,
-#gcli-tooltip {
-  border-width: 0;
-  background-color: transparent;
-  -moz-appearance: none;
-}
-
-.gclitoolbar-input-node,
-.gclitoolbar-complete-node {
-  margin: 0;
-  -moz-box-align: center;
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-right: 8px;
-  text-shadow: none;
-  box-shadow: none;
-  border-width: 0;
-  background-color: transparent;
-}
-
-.gclitoolbar-input-node {
-  -moz-appearance: none;
-  color: hsl(210,30%,85%);
-  background-color: #242b33;
-  background-repeat: no-repeat;
-  background-position: 4px center;
-  box-shadow: 0 1px 1px hsla(206,37%,4%,.2) inset,
-              1px 0 0 hsla(206,37%,4%,.2) inset,
-              -1px 0 0 hsla(206,37%,4%,.2) inset;
-  line-height: 32px;
-  outline-style: none;
-  padding: 0;
-}
-
-.gclitoolbar-input-node[focused="true"] {
-  background-color: #232e38;
-}
-
-.gclitoolbar-input-node::before {
-  content: "";
-  display: inline-block;
-  -moz-box-ordinal-group: 0;
-  width: 16px;
-  height: 16px;
-  margin: 0 2px;
-  background-image: url("chrome://global/skin/devtools/commandline-icon.png");
-  background-position: 0 center;
-  background-size: 32px 16px;
-}
-
-.gclitoolbar-input-node[focused="true"]::before {
-  background-position: -16px center;
-}
-
-@media (min-resolution: 2dppx) {
-  .gclitoolbar-input-node::before {
-    background-image: url("chrome://global/skin/devtools/commandline-icon@2x.png");
-  }
-}
-
-.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
-  background-color: hsl(210,30%,85%);
-  color: hsl(210,24%,16%);
-  text-shadow: none;
-}
-
-.gclitoolbar-complete-node {
-  padding-left: 21px;
-  background-color: transparent;
-  color: transparent;
-  z-index: 100;
-  pointer-events: none;
-}
-
-.gcli-in-incomplete,
-.gcli-in-error,
-.gcli-in-ontab,
-.gcli-in-todo,
-.gcli-in-closebrace,
-.gcli-in-param,
-.gcli-in-valid {
-  margin: 0;
-  padding: 0;
-}
-
-.gcli-in-incomplete {
-  border-bottom: 2px dotted #999;
-}
-
-.gcli-in-error {
-  border-bottom: 2px dotted #F00;
-}
-
-.gcli-in-ontab {
-  color: hsl(210,0%,35%);
-}
-
-.gcli-in-todo {
-  color: hsl(210,50%,35%);
-}
-
-.gcli-in-closebrace {
-  color: hsl(0,0%,80%);
-}
+/* Click-to-play plugins */
 
 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0px;
@@ -2871,33 +2326,6 @@ html|*#gcli-output-frame {
   margin: 0;
 }
 
-/* Error counter */
-
-#developer-toolbar-toolbox-button[error-count]:before {
-  color: #FDF3DE;
-  min-width: 16px;
-  text-shadow: none;
-  background-image: linear-gradient(#B4211B, #8A1915);
-  border-radius: 1px;
-  margin-inline-end: 5px;
-}
-
-.messageImage[value="plugin-hidden"] {
-  list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
-  -moz-image-region: rect(0, 16px, 16px, 0);
-}
-
-/* Keep any changes to this style in sync with pluginProblem.css */
-notification.pluginVulnerable {
-  background-color: rgb(72,72,72);
-  background-image: url(chrome://mozapps/skin/plugins/contentPluginStripe.png);
-  color: white;
-}
-
-notification.pluginVulnerable .messageImage {
-  list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
-}
-
 /* Badge toolbar item */
 
 .toolbarbutton-badge-container,