commit 2be32c6085b8303c3f8c41ba61c341c36b57802a
parent 518a0055a90254c5018aef0e6b0e906464043342
Author: Lootyhoof <lootyhoofer@gmail.com>
Date: Tue, 20 Nov 2018 22:52:49 +0000
Update in-browser developer tools
Diffstat:
2 files changed, 573 insertions(+), 574 deletions(-)
diff --git 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,
diff --git a/src/chrome/browser/devtools.css b/src/chrome/browser/devtools.css
@@ -0,0 +1,571 @@
+/* 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/. */
+
+/* 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-textinput {
+ -moz-appearance: none;
+ background: #333;
+ color: #fff;
+ border: 1px solid #111;
+ border-radius: 2px;
+ padding: 0 5px;
+ width: 200px;
+ margin: 0;
+}
+
+.devtools-responsiveui-textinput[attention] {
+ border-color: #38ace6;
+ background: rgba(56,172,230,0.4);
+}
+
+.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 > .menulist-editable-box > .menulist-editable-input {
+ -moz-appearance: none;
+ color: hsl(210,30%,85%);
+ text-align: center;
+}
+
+.devtools-responsiveui-menulist > .menulist-editable-box > .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://devtools/skin/images/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://devtools/skin/images/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://devtools/skin/images/close.svg");
+}
+
+.devtools-responsiveui-close > image {
+ filter: invert(1);
+}
+
+.devtools-responsiveui-rotate {
+ list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate.png");
+}
+
+@media (min-resolution: 1.1dppx) {
+ .devtools-responsiveui-rotate {
+ list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate@2x.png");
+ }
+}
+
+.devtools-responsiveui-touch {
+ list-style-image: url("chrome://devtools/skin/images/responsivemode/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: 1.1dppx) {
+ .devtools-responsiveui-touch {
+ list-style-image: url("chrome://devtools/skin/images/responsivemode/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://devtools/skin/images/responsivemode/responsiveui-screenshot.png");
+}
+
+@media (min-resolution: 1.1dppx) {
+ .devtools-responsiveui-screenshot {
+ list-style-image: url("chrome://devtools/skin/images/responsivemode/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://devtools/skin/images/responsivemode/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://devtools/skin/images/responsivemode/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://devtools/skin/images/responsivemode/responsive-se-resizer.png");
+}
+
+/* FxOS custom mode with additional buttons and phone look'n feel */
+
+/* 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 {
+ -moz-user-focus: ignore;
+ width: 40px;
+ height: 30px;
+ list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-home.png");
+}
+
+.devtools-responsiveui-sleep-button {
+ -moz-user-focus: ignore;
+ -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-user-focus: ignore;
+ -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: 1.1dppx) {
+ .devtools-responsiveui-resizebarV {
+ background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer@2x.png");
+ }
+
+ .devtools-responsiveui-resizebarH {
+ background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer@2x.png");
+ }
+
+ .devtools-responsiveui-resizehandle {
+ background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer@2x.png");
+ }
+}
+
+/* Developer toolbar */
+
+/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
+ We are copy/pasting variables from light-theme and dark-theme,
+ since they aren't loaded in this context (within browser.css). */
+:root[devtoolstheme="light"] #developer-toolbar {
+ --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */
+ --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */
+ --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */
+ --gcli-input-color: #393f4c; /* --theme-body-color */
+ --gcli-border-color: #dde1e4; /* --theme-splitter-color */
+ --selection-background: #4c9ed9; /* --theme-selection-background */
+ --selection-color: #f5f7fa; /* --theme-selection-color */
+ --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
+ --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
+}
+
+:root[devtoolstheme="dark"] #developer-toolbar {
+ --gcli-background-color: #272b35; /* --theme-toolbar-background */
+ --gcli-input-background: #272b35; /* --theme-tab-toolbar-background */
+ --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */
+ --gcli-input-color: #b6babf; /* --theme-body-color-alt */
+ --gcli-border-color: #454d5d; /* --theme-splitter-color */
+ --selection-background: #5675b9; /* --theme-selection-background */
+ --selection-color: #f5f7fa; /* --theme-selection-color */
+ --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme); /* --theme-command-line-image */
+ --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus); /* --theme-command-line-image-focus */
+}
+
+#developer-toolbar {
+ -moz-appearance: none;
+ padding: 0;
+ min-height: 32px;
+ background-color: var(--gcli-background-color);
+ border-top: 1px solid var(--gcli-border-color);
+}
+
+#developer-toolbar > toolbarbutton {
+ -moz-appearance: none;
+ border: none;
+ background-color: transparent;
+ margin: 0;
+ padding: 0 10px;
+ width: 32px;
+}
+
+.developer-toolbar-button > image {
+ margin: auto 10px;
+}
+
+:root[devtoolstheme="light"] #developer-toolbar > .developer-toolbar-button:not([checked=true]) > image,
+:root[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before {
+ filter: invert(1);
+}
+
+.developer-toolbar-button > .toolbarbutton-icon {
+ width: 16px;
+ height: 16px;
+}
+
+#developer-toolbar-toolbox-button {
+ list-style-image: url("chrome://devtools/skin/images/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: 1.1dppx) {
+ #developer-toolbar-toolbox-button {
+ list-style-image: url("chrome://devtools/skin/images/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);
+ }
+}
+
+/* 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;
+ border-radius: 0;
+}
+
+.gclitoolbar-input-node {
+ -moz-appearance: none;
+ color: var(--gcli-input-color);
+ background-color: var(--gcli-input-background);
+ background-repeat: no-repeat;
+ background-position: 4px center;
+ box-shadow: 1px 0 0 var(--gcli-border-color) inset,
+ -1px 0 0 var(--gcli-border-color) inset;
+
+ line-height: 32px;
+ outline-style: none;
+ padding: 0;
+}
+
+.gclitoolbar-input-node[focused="true"] {
+ background-color: var(--gcli-input-focused-background);
+}
+
+.gclitoolbar-input-node::before {
+ content: "";
+ display: inline-block;
+ -moz-box-ordinal-group: 0;
+ width: 16px;
+ height: 16px;
+ margin: 0 2px;
+ background-image: var(--command-line-image);
+}
+
+.gclitoolbar-input-node[focused="true"]::before {
+ background-image: var(--command-line-image-focus);
+}
+
+.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
+ background-color: var(--selection-background);
+ color: var(--selection-color);
+ 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%);
+}
+
+/* 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;
+}
