commit d5a0c75b5b85d3f85a6612671fc96c33774b6b78 parent f8d4d7f611d8742449d91443bceac329a687a7ca Author: Lootyhoof <lootyhoofer@gmail.com> Date: Sun, 4 Dec 2016 21:21:20 +0000 Move devtools to /global Diffstat:
342 files changed, 10377 insertions(+), 16808 deletions(-)
diff --git a/src/chrome.manifest b/src/chrome.manifest @@ -3,5 +3,3 @@ skin mozapps darkmoon chrome/mozapps/ skin global darkmoon chrome/global/ skin ostarget darkmoon chrome/ostarget/general/ skin ostarget darkmoon chrome/ostarget/aero/ os=WINNT osversion>=6 -skin appver darkmoon chrome/appver/26/ appversion<27.0.0b1 -skin appver darkmoon chrome/appver/27/ appversion>=27.0.0b1 diff --git a/src/chrome/appver/26/browser.css b/src/chrome/appver/26/browser.css @@ -1,88 +0,0 @@ -/* Developer toolbar */ - -#developer-toolbar { - padding: 0; - min-height: 32px; - background-image: url("chrome://browser/skin/devtools/background-noise-toolbar.png"), linear-gradient(#303840, #2d3640); - 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-button { - -moz-appearance: none; - border: none; - background: transparent; - margin: 0; - padding: 0 10px; - width: 32px; -} - -.developer-toolbar-button > image { - margin: auto 10px; -} - -#developer-toolbar-toolbox-button { - list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} - -#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); -} - -/* 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%); - padding-left: 20px; - 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; - background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0); -} - -.gclitoolbar-input-node[focused="true"] { - background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16); - background-color: #232e38; -} -\ No newline at end of file diff --git a/src/chrome/appver/26/devtools/app-manager/connection-footer.css b/src/chrome/appver/26/devtools/app-manager/connection-footer.css @@ -1,222 +0,0 @@ -/* 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/. */ - -/************** LAYOUT **************/ - -#connection-footer { - display: flex; - flex-direction: column; - height: 50px; -} - -#banners-and-logs { - display: flex; -} - -#logs { - display: flex; - width: 40%; - padding: 0; - width: 100%; -} - -.banner { - display: none; - width: 60%; -} - -#connection-footer[status="connected"] #banner-connected, -#connection-footer[status="connecting"] #banner-connecting, -#connection-footer[status="disconnected"] #banner-disconnected, -#connection-footer[status="disconnecting"] #banner-disconnecting { - display: flex; -} - -body.show-simulators .banner, -body.edit-connection .banner { - display: none !important; -} - -body.show-simulators #banner-simulators, -body.edit-connection #banner-editing { - display: flex !important; -} - -#banner-logs { - width: 40%; - display: flex; -} - -#logs > pre { - overflow: auto; - white-space: pre-line; -} - -#status.banner-box { - width: 100% !important; -} - -.banner-box { - display: flex; - flex-direction: column; - justify-content: center; - width: 100%; -} - -#banner-connected > .banner-box { - align-items: flex-start; -} - -#start-simulator-box { - display: inline; -} - -/************** PIXELS **************/ - -* { - margin: 0; - padding: 0; - -moz-box-sizing: border-box; - font-size: 0.9rem; -} - -body { - color: #333; - background-color: white; - font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; -} - -button { - background: linear-gradient(to bottom, #49535C, #394148); - box-shadow: 0px 1px 1px #3C444D, inset 0 1px 0px rgba(255,255,255,0.1); - color: #9FA6AD; - text-shadow: 0px 1px 1px rgba(0,0,0,0.6); - border: 1px solid #111; - cursor: pointer; - border-radius: 3px; - padding: 3px 10px; -} - -button.left { - margin-right: 0px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -button.right { - margin-left: -6px; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -button.action-primary { - background: linear-gradient(to bottom, #276DA3, #1E5580); - color: #EEE; -} - -button.action-cancel { - background: linear-gradient(to bottom, #B32B02, #942300); - color: #EEE; -} - -#banners-and-logs { - border-top: #111 solid; - border-width: 1px 0; - background: linear-gradient(to bottom, #323A42, #29313A); - color: #A8BABF; - box-shadow: inset 0 0 1px #424A51; -} - -#status { - background: linear-gradient(to bottom, #454F59, #404952); - box-shadow: inset 0 0 1px #606D78, inset 0 1px 0 #5E6973; -} - -#logs > pre { - border: 1px solid #111; - box-shadow: 0px 1px 1px #49525A, inset 0 0 5px rgba(0,0,0,0.3); - font-size: 10px; - background: #22272D; - padding: 5px; - height: 100%; - padding-left: 20px; - position: relative; -} - -#logs > pre span{ - text-shadow: 0 1px 2px #000; - color: #3195FB; - position: fixed; - right: calc(30% - 15px); - bottom: -1px; -} - -#logs > pre b { - font-size: 10px; - color: #70C4FF; -} - -.banner-box { - box-shadow: inset 0 0 1px #667480, inset 0 1px 0 #5E6973; - border-right: 1px solid #111; - background-position: center right; - background-size: 1px 100%; - background-repeat: no-repeat; - padding: 10px 20px; - position: relative; -} - -.connected-status { - color: #B3BFC9; - text-shadow: 0px 1px 2px rgba(0,0,0,0.9); - padding-bottom: 10px; -} - -.connected-status { - font-size: 150%; - top: 10%; - padding-right: 3px; - position: relative; -} - -.connected-indicator { - box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0px 1px rgba(255,255,255,0.3); - height: 100%; - flex: 0 0 10px; -} - -#banner-connected .connected-indicator, -#banner-connecting .connected-indicator { - background: linear-gradient(to bottom, #69B8FF, #339FFF ); -} - -#banner-simulators .connected-indicator, -#banner-disconnected .connected-indicator, -#banner-editing .connected-indicator, -#banner-disconnecting .connected-indicator { - background: linear-gradient(to bottom, #375A87, #1C4375 ); -} - -#banner-simulators .banner-content > * { - display: inline-block; -} - -#banner-simulators[simulator-count="0"] .found-simulator, -#banner-simulators:not([simulator-count="0"]) .no-simulator { - display: none; -} - -#connection-no-device, -[device-count="0"] > #connection-found-device, -#connection-manual, -#connection-assisted { - display: none; -} - -#connection-found-device, -[device-count="0"] > #connection-no-device, -[adb-available="true"] > #connection-assisted, -[adb-available="false"] > #connection-manual { - display: inline; -} diff --git a/src/chrome/appver/26/devtools/app-manager/device.css b/src/chrome/appver/26/devtools/app-manager/device.css @@ -1,399 +0,0 @@ -/* 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/. */ - -/***************** GENERAL *****************/ - -* { - margin: 0; - padding: 0; - -moz-box-sizing: border-box; -} - -html, body { - height: 100%; -} - -body { - font-size: 0.9rem; - color: #333; - background-color: rgb(225, 225, 225); - font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; - display: flex; - flex-direction: column; -} - -template { - display: none; -} - -h1 { - font-size: 20px; -} - -#content { - display: flex; - flex-direction: row; - height: 100%; - overflow: hidden; -} - -#detail { - background-image: url("chrome://browser/skin/devtools/noise.png"); - display: flex; - flex-grow: 1; - z-index: 1; - overflow: hidden; -} - -#meta { - background-size: 100%; - padding-top: 50px; -} - -#connection-footer { - border-width: 0; - height: 50px; - min-height: 50px; -} - - - -/***************** APP BUTTONS *****************/ - - - -.app-buttons { - display: block; - margin-left: 20px; - color: #BBB; -} - -button { - margin: 0; - font-size: 11px; - border: 1px solid #CCC; - padding: 5px 15px; - cursor: pointer; - background: rgba(255,255,255,0.4); - text-transform: uppercase; - border-radius: 3px; - border-width: 1px; -} - -.app-buttons > button { - display: none; -} - -.app-buttons > button[disabled] { - background-color: transparent; - opacity: 0.4; - pointer-events: none; -} - -.app[running="false"] > .app-buttons > .button-start, -.app[running="true"] > .app-buttons > .button-stop, -.app[running="true"] > .app-buttons > .button-debug { - display: inline-block; -} - -.button-debug { - color: #3498DB; -} - -.button-debug:hover { - background-color: #3498DB; - color: #FFF; -} - -.button-debug[disabled] { - color: #3498DB; -} - -.button-start { - color: #18BC9C -} - -.button-start:hover { - background-color: #18BC9C; - color: #FFF; -} - -.button-start[disabled] { - color: #18BC9C -} - -.button-stop { - color: #E74C3C; -} - -.button-stop:hover { - background-color: #E74C3C; - color: #FFF; -} - -.button-stop[disabled] { - color: #E74C3C; -} - - - -/***************** PERMISSIONS *****************/ - - - - -.permission-table { - display: flex; - flex-direction: column; - height: 100%; -} - -.permission-table-body { - overflow: auto; - display: flex; - flex-grow: 1; - flex-direction: column; -} - -.permission-table-header, -.permission-table-footer { - display: flex; - background: #FFF; - border-top: 1px solid #CCC; - z-index: 2; - flex-shrink: 0; -} - -.permission-table-header > div, -.permission-table-footer > div { - z-index: 2; - flex-grow: 1; - background: linear-gradient(to bottom, #49535C, #394148); - box-shadow: 0px 1px 3px rgba(12, 20, 30, 0.5), inset 0 1px 0px rgba(255,255,255,0.1); - color: #9FA6AD; - text-shadow: 0px 1px 1px rgba(0,0,0,0.6); - border: 0; - margin: auto 0; - padding: 5px; - text-align: center; - background: transparent; - box-shadow: none; - text-shadow: none; -} - -.permission-table-header > div { - flex-basis: 20%; -} - -.permission-table-header > div:first-child { - text-align: left; - padding-left: 10px; - flex-basis: 30%; -} - -.permission-table-header { - border: 0; - border-bottom: 1px solid #CCC; - box-shadow: 0 1px 4px rgba(0,0,0,0.3); -} - -.permission-table-footer { - box-shadow: 0 -1px 4px rgba(0,0,0,0.3); -} - -.permission { - display: flex; - flex-grow: 1; -} - -.permission:nth-child(odd) { - background: #E4E4E4; -} - -.permission:hover { - background: #EEE; -} - -.permission > div { - flex-grow: 1; - flex-basis: 20%; - text-align: center; - padding: 3px; - border-right: 1px solid #CCC; - border-bottom: 1px solid #CCC; -} - -.permission > div:first-child { - text-align: left; - padding: 3px 10px; - flex-basis: 30%; - font-weight: bold; -} - -.permission > div[permission="1"]:before, .allow-label:after { - color: #98CF39; - content: ' \2713'; -} - -.permission > div[permission="2"]:before, .deny-label:after { - color: #CC4908; - content: ' \2715'; -} - -.permission > div[permission="3"]:before, .prompt-label:after { - color: #009EED; - content: ' !'; -} - - - - -/***************** SIDEBAR *****************/ - - - - -#sidebar { - background: #EEE; - position: relative; - box-shadow: 0 1px 6px rgba(0,0,0,0.3); - display: flex; - flex-direction: column; - flex: 0 0 350px; - overflow: hidden; - z-index: 100; -} - -.sidebar-item { - background-color: #F6F6F6; - box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); - color: #666; - line-height: 120%; - cursor: pointer; - display: flex; - padding: 15px 10px; - display: block; - text-align: left; - flex-grow: 1; -} - -.sidebar-item > * { - flex-shrink: 0; -} - -.sidebar-item:hover { - background-color: #EEE; -} - -.sidebar-item.selected { - background-color: #46AFE3; - color: #FFF; -} - -.help { - float: right; - padding: 0 5px; -} - -/***************** HEADER *****************/ - -header { - padding-top: 140px; - background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7)); - color: #FFF; - text-shadow: 0 1px 2px rgba(0,0,0,0.8); - padding: 10px; -} - - - -/***************** APPS *****************/ - - - - -.apps { - display: flex; - flex-direction: column; - overflow: auto; -} - -.app { - display: flex; - align-items: center; - order: 1; -} - -.app-name { - flex-grow: 1; - font-weight: bold; -} - -.app { - padding: 10px 20px; - border-bottom: 1px solid #CCC; -} - -.app:hover { - background-color: #EFEFEF; -} - -.app-icon { - width: 32px; - height: 32px; - margin-right: 10px; -} - - - -/***************** NOT CONNECTED *****************/ - - - -body:not(.notconnected) > #notConnectedMessage, -body.notconnected > #content { - display: none; -} - -#notConnectedMessage { - flex-grow: 1; - flex-direction: column; - margin: 50px auto; -} - -#notConnectedMessage > span { - padding: 20px; - border: 1px solid #CCC; - border-radius: 5px; -} - -#notConnectedMessage > span:before { - content: ''; - background: url("chrome://browser/skin/devtools/error.svg") no-repeat; - background-size: 18px; - height: 24px; - width: 24px; - position: relative; - top: 10px; - display: inline-block; -} - - - -/***************** TABS *****************/ - -#tabs { - flex-grow: 1; - overflow: auto; -} - -.tabpanel:not(.selected) { - display: none; -} - -#tabs-headers { - flex-shrink: 0; - display: flex; - flex-direction: column; -} diff --git a/src/chrome/appver/26/devtools/app-manager/index.css b/src/chrome/appver/26/devtools/app-manager/index.css @@ -1,93 +0,0 @@ -/* 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/. */ - -* { - margin: 0; - padding: 0; - -moz-box-sizing: border-box; - font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; -} - -#tabs { - box-shadow: inset -4px 0 0 rgba(0,0,0,0.3); - background: #252C33; -} - -.button { - width: 80px; - height: 85px; - padding-bottom: 5px; - -moz-appearance: none; - border: none; - border-bottom: 1px solid #121214; - background-color: transparent; - color: #B5B8BB; - cursor: pointer; - text-align: center; - -moz-box-align: end; - font-size: 10px; - text-shadow: 0 1px 0 #333; - color: #9FA6AD; -} - -.button:first-child { - border-top: none; -} - -.button[selected] { - box-shadow: inset -4px 0 0 rgba(0,0,0,0.3), inset 2px 0 0 #DEFFFF, inset 3px 0 0 #8DC7E8, inset 4px 0 1px #1D6496; - color: #DCE8F3; - background-color: #1A4766; - border-color: #191B1E; -} - -.button::-moz-focus-inner { - border-width: 0; -} - -.panel { - border-width: 0; -} - -.panel:not([selected="true"]) { - display: none; -} - -.projects-button { - background: url('chrome://browser/skin/devtools/app-manager/index-icons.svg') no-repeat; - background-position: left -5px; -} - -.projects-button[selected] { - background-position: right -5px; -} - -.device-button { - background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg'); - background-position: left -85px, top left; - background-repeat: no-repeat, no-repeat; - background-size: 160px 240px, 2px 80px; -} - -.device-button[selected] { - background-position: right -85px, top left; -} - -.help-button { - border-bottom: 0; - background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg'); - background-position: left -165px, top left; - background-repeat: no-repeat, no-repeat; - background-size: 160px 240px, 2px 80px; -} - -.help-button[selected] { - background-position: right -165px, top left; -} - -#connection-footer { - border-width: 0; - height: 50px; - min-height: 50px; -} diff --git a/src/chrome/appver/26/devtools/app-manager/projects.css b/src/chrome/appver/26/devtools/app-manager/projects.css @@ -1,497 +0,0 @@ -/* 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/. */ - -* { - margin: 0; - padding: 0; - -moz-box-sizing: border-box; - font-size: 0.9rem; -} - -html, body { - height: 100%; -} - -template { - display: none; -} - -body { - display: flex; - color: #333; - background-color: white; - font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; - overflow: hidden; -} - -body:not(.connected) button.device-action { - display: none; -} - -strong { - color: #111; -} - - -/********* SIDEBAR ***********/ - - - -#sidebar { - display: flex; - flex-direction: column; - flex: 0 0 350px; - overflow: hidden; - z-index: 100; - background-color: #E9EAEB; - position: relative; - box-shadow: 3px 0 1.5px rgba(0,0,0,0.08); -} - -#project-list { - height: 100%; - overflow: auto; -} - -#project-list:not([projects-count="0"]) > #no-project { - display: none; -} - -#no-project { - padding: 100px 20px 0; - font-weight: bold; - color: #BBB; - font-size: 22px; -} - - -/********* PROJECT MENU ***********/ - - -.project-item { - padding: 10px 0; - background-color: #F0F1F2; - box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); - color: #666; - line-height: 120%; - cursor: pointer; - display: flex; - position: relative; -} - -.project-item:hover { - background-color: #EEE; -} - -.project-item > * { - flex-shrink: 0; -} - -.project-item.selected { - background-color: #46AFE3; -} - -.project-item.selected strong { - color: #FFF; -} - -.project-item.selected p, -.project-item.selected span { - color: #C1DCF0; -} - -.button-remove { - background-image: url("chrome://browser/skin/devtools/remove.svg"); - background-size: 20px; - width: 20px; - height: 20px; - position: absolute; - right: 5px; - bottom: 5px; - visibility: hidden; - opacity: 0.5; -} - -.project-item:hover .button-remove { - visibility: visible; -} - -.project-item-status { - width: 6px; - margin: -10px 0; - border-right: 1px solid rgba(0,0,0,0.1); - box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 0 0 rgba(0,0,0,0.2); -} - -.project-item-status[status="warning"] { - background-color: #F2B33F; -} - -.project-item-status[status="valid"] { - background-color: #70BF53; -} - -.project-item-status[status="error"] { - background-color: #ED4C62; -} - -.project-item-icon { - width: 32px; - height: 32px; - margin: 0 10px; -} - -.project-item-meta { - flex-grow: 1; - flex-shrink: 1 !important; -} - -.project-item-type { - font-size: 10px; - line-height: 20px; - float: right; - padding-right: 10px; - color: #7597B9; - text-transform: uppercase; -} - -.project-item-description { - color: #888; - font-size: 90%; -} - -/********* ADD PROJECT ***********/ - -#new-packaged-project { - box-shadow: 0 -1px 5px rgba(0,0,0,0.1); - background-position: calc(100% - 10px) 10px; -} - -#new-packaged-project, -#new-hosted-project { - background-color: #EEE; - border: none; - border-top: 1px solid #DDD; - padding: 10px; - font-weight: bold; -} - -#new-packaged-project:hover, -#new-hosted-project:hover { - background-color: #DDD; -} - -#new-hosted-project-wrapper { - display: flex; - align-items: center; -} - -#new-packaged-project, -#new-hosted-project-click { - background-image: url("chrome://browser/skin/devtools/plus.svg"); - background-size: 20px; - background-repeat: no-repeat; - cursor: pointer; -} - -#new-hosted-project-click { - background-position: top right; - width: 20px; - height: 20px; - margin-left: 5px; -} - -#url-input { - flex-grow: 1; - width: 90%; - box-shadow: none; - border-radius: 3px; - border: 1px solid #DDD; - padding: 4px; - margin-top: 4px; -} - - -/********* LENSE ***********/ - - -#lense { - height: 100%; - flex-grow: 1; - display: flex; - z-index: 1; - overflow: hidden; - background-color: rgb(225, 225, 225); - background-image: url("chrome://browser/skin/devtools/rocket.svg"), url("chrome://browser/skin/devtools/noise.png"); - background-repeat: no-repeat, repeat; - background-size: 35%, auto; - background-position: center center, top left; -} - -#lense > div { - display: flex; - flex-grow: 1; - flex-direction: column; -} - - -/********* PROJECT ***********/ - - -.project-details { - background-color: rgb(225, 225, 225); - padding: 10px; - line-height: 160%; - display: flex; - flex-direction: column; -} - -.project-metadata { - flex-grow: 1; -} - -.project-status { - display: flex; -} - -.project-title { - flex-direction: row; - display: flex; - align-items: flex-start; - padding-bottom: 10px; - border-bottom: 1px solid #CCC; - margin-bottom: 10px; -} - -.project-title > h1 { - flex-grow: 1; - font-size: 24px; -} - -.project-location { - color: gray; - font-size: 10px; - cursor: pointer; - font-family: monospace; -} - -.project-location:hover { - text-decoration: underline; -} - -.project-header { - display: flex; - border-bottom: 1px solid #CCC; - margin: 10px 20px 10px 20px; - padding-bottom: 10px; -} - -.project-icon { - flex-shrink: 0; - width: 64px; - height: 64px; - margin-right: 10px; -} - -.project-location { - font-size: 11px; - color: #999; -} - -.project-description { - font-style: italic; - color: #333; -} - -.project-status > p { - text-transform: uppercase; - font-size: 10px; - padding: 2px 10px; - border-radius: 2px; - margin-top: 6px; - line-height: 10px; -} - -.project-validation { - color: #FFF; -} - -[status="valid"] > .project-validation { - background-color: #70BF53; -} - -[status="warning"] > .project-validation { - background-color: #F2B33F; -} - -[status="error"] > .project-validation { - background-color: #ED4C62; -} - - - -/********* PROJECT BUTTONS ***********/ - - - -.project-buttons { - display: flex; - margin-left: 20px; - color: #BBB; -} - -.project-buttons > button { - margin: 0; - font-size: 11px; - border: 1px solid #CCC; - border-left-width: 0; - padding: 5px 15px; - cursor: pointer; - background: rgba(255,255,255,0.4); - text-transform: uppercase; -} - -.project-buttons > button[disabled] { - background-color: transparent; - opacity: 0.4; - pointer-events: none; -} - -.project-buttons > button:first-child { - border-left-width: 1px; -} - -.project-button-debug { - color: #3498DB; -} - -.project-button-debug:hover { - background-color: #3498DB; - color: #FFF; -} - -.project-button-debug[disabled] { - color: #3498DB; -} - -.project-button-update { - color: #777; -} - -.project-button-update:hover { - background-color: #777; - color: #FFF; -} - -.project-button-update[disabled] { - color: #777; -} - - - -/********* ERRORS AND WARNINGS ***********/ - -.project-warnings, -.project-errors, -.project-item-warnings, -.project-item-errors { - display: none; -} - -[status="warning"] > .project-item-warnings, -[status="error"] > .project-item-errors, -[status="warning"] > .project-warnings, -[status="error"] > .project-errors { - display: block; -} - -.project-warnings { - margin: 20px 20px 0; - padding: 10px 10px; - border-left: 3px solid #ECB51E; - background-color: rgba(236, 181, 20, 0.1); - font-family: monospace; -} - -.project-errors { - margin: 20px; - padding: 10px 10px; - border-left: 3px solid #ED4C62; - background-color: rgba(237,76,98,0.1); - font-family: monospace; -} - -.project-item-warnings { - background-image: url("chrome://browser/skin/devtools/warning.svg"); -} - -.project-item-errors { - background-image: url("chrome://browser/skin/devtools/error.svg"); - color: rgb(227, 79, 34); -} - -.project-item-warnings, -.project-item-errors { - background-repeat: no-repeat; - background-size: 12px; - background-position: left center; - margin-top: 6px; -} - -.project-item-warnings > span, -.project-item-errors > span { - font-size: 11px; - padding-left: 16px; - font-weight: bold; -} - - -/********* MANIFEST EDITOR ***********/ - -.manifest-editor { - display: flex; - flex-direction: column; - flex-grow: 1; - background-color: #E1E1E1; -} - -.manifest-editor > h2 { - font-size: 18px; - margin: 1em 30px; - display: none; -} - -[type="packaged"] > .editable { - display: block; -} - -[type="hosted"] > .viewable { - display: block; -} - -.variables-view { - flex-grow: 1; - border: 0; - border-top: 5px solid #C9C9C9; -} - -/* Bug 925921: Remove when the manifest editor is always on */ - -.manifest-editor { - display: none; -} - -.project-details { - flex-grow: 1; -} - -#lense[manifest-editable] .manifest-editor { - display: flex; -} - -#lense[manifest-editable] .project-details { - flex-grow: 0; -} - -/* End blocks to remove */ diff --git a/src/chrome/appver/26/devtools/commandline.css b/src/chrome/appver/26/devtools/commandline.css @@ -1,155 +0,0 @@ -/* 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/. */ - -.gcli-body { - margin: 0; - font: message-box; - color: hsl(210,30%,85%); -} - -#gcli-output-root, -#gcli-tooltip-root { - border: 1px solid hsl(206,37%,4%); - box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset; - background-image: url("chrome://browser/skin/devtools/background-noise-toolbar.png"), - linear-gradient(hsla(209,18%,18%,0.9), hsl(209,23%,18%)); - border-radius: 3px; -} - -#gcli-output-root { - padding: 5px 10px; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - border-bottom: 0; -} - -#gcli-tooltip-root { - padding: 5px 0px; -} - -#gcli-tooltip-connector { - margin-top: -1px; - margin-left: 8px; - width: 20px; - height: 10px; - border-left: 1px solid hsl(206,37%,4%); - border-right: 1px solid hsl(206,37%,4%); - background-color: hsl(209,23%,18%); - background-image: url("chrome://browser/skin/devtools/background-noise-toolbar.png"); -} - -.gcli-tt-description, -.gcli-tt-error { - padding: 0 10px; -} - -.gcli-row-out { - padding: 0 5px; - line-height: 1.2em; - border-top: none; - border-bottom: none; - color: hsl(210,30%,85%); -} - -.gcli-row-out p, -.gcli-row-out h1, -.gcli-row-out h2, -.gcli-row-out h3 { - margin: 5px 0; -} - -.gcli-row-out h1, -.gcli-row-out h2, -.gcli-row-out h3, -.gcli-row-out h4, -.gcli-row-out h5, -.gcli-row-out th, -.gcli-row-out strong, -.gcli-row-out pre { - color: hsl(210,30%,95%); -} - -.gcli-row-out pre { - font-size: 80%; -} - -.gcli-row-out td { - white-space: nowrap; -} - -.gcli-out-shortcut, -.gcli-help-synopsis { - padding: 0 3px; - margin: 0 4px; - font-weight: normal; - font-size: 90%; - border-radius: 3px; - background-color: hsl(209,23%,18%); - border: 1px solid hsl(206,37%,4%); -} - -.gcli-out-shortcut:before, -.gcli-help-synopsis:before { - color: hsl(210,30%,85%); - -moz-padding-end: 2px; -} - -.gcli-help-arrow { - color: #666; -} - -.gcli-help-description { - margin: 0 20px; - padding: 0; -} - -.gcli-help-parameter { - margin: 0 30px; - padding: 0; -} - -.gcli-help-header { - margin: 10px 0 6px; -} - -.gcli-menu-name { - -moz-padding-start: 8px; -} - -.gcli-menu-desc { - -moz-padding-end: 8px; - color: hsl(210,30%,75%); -} - -.gcli-menu-option:hover { - background-color: hsla(0,0%,0%,.3); -} - -.gcli-menu-highlight, -.gcli-menu-highlight.gcli-menu-option:hover { - background-color: hsla(0,100%,100%,.1); -} - -.gcli-menu-typed { - color: hsl(25,78%,50%); -} - -.gcli-menu-more { - font-size: 80%; - text-align: right; - -moz-padding-end: 8px; -} - -.gcli-addon-disabled { - opacity: 0.6; - text-decoration: line-through; -} - -.gcli-breakpoint-label { - font-weight: bold; -} - -.gcli-breakpoint-lineText { - font-family: monospace; -} diff --git a/src/chrome/appver/26/devtools/common.css b/src/chrome/appver/26/devtools/common.css @@ -1,508 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - - - - - - - - - -/* Font for code */ - -:root { - font: message-box; -} - -.devtools-monospace { - font-family: monospace; - font-size: 108%; -} - -/* Toolbar and Toolbar items */ - -.devtools-toolbar { - -moz-appearance: none; - padding: 4px 3px; - color: hsl(210,30%,85%); - background-image: url("chrome://browser/skin/devtools/background-noise-toolbar.png"), linear-gradient(#3e4750, #3e4750); - border-bottom: 1px solid #060a0d; - box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset; -} - -.devtools-menulist, -.devtools-toolbarbutton { - -moz-appearance: none; - -moz-box-align: center; - min-width: 78px; - min-height: 22px; - text-shadow: 0 -1px 0 hsla(210,8%,5%,.45); - border: 1px solid hsla(210,8%,5%,.45); - border-radius: 3px; - 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); - color: inherit; -} - -.devtools-toolbarbutton > .toolbarbutton-menubutton-button { - -moz-box-orient: horizontal; -} - -.devtools-menulist { - margin: 0 2px; -} - -.devtools-menulist:-moz-focusring, -.devtools-toolbarbutton:-moz-focusring { - outline: 1px dotted hsla(210,30%,85%,0.7); - outline-offset: -4px; -} - -.devtools-toolbarbutton > .toolbarbutton-text { - margin: 1px 6px; -} - -.devtools-toolbarbutton:not([label]) { - min-width: 32px; -} - -.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { - display: none; -} - -.devtools-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-menulist[open=true], -.devtools-toolbarbutton[open=true], -.devtools-toolbarbutton[checked=true] { - border-color: hsla(210,8%,5%,.6); - 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-toolbarbutton[checked=true] { - color: hsl(208,100%,60%) !important; -} - -.devtools-toolbarbutton[checked=true]:hover:active { - background-color: hsla(210,8%,5%,.2); -} - -.devtools-option-toolbarbutton { - -moz-appearance: none; - list-style-image: url("chrome://browser/skin/devtools/option-icon.png"); - -moz-image-region: rect(0px 16px 16px 0px); - background: none; - border: none; -} - -.devtools-option-toolbarbutton[open=true] { - -moz-image-region: rect(0px 32px 16px 16px); -} - -.devtools-menulist > .menulist-label-box { - text-align: center; -} - -.devtools-menulist > .menulist-dropmarker { - -moz-appearance: none; - background-color: transparent; - display: -moz-box; - list-style-image: url("chrome://browser/skin/devtools/dropmarker.png"); - border-width: 0; - min-width: 18px; -} - -.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { - -moz-appearance: none; - border-width: 0; - -moz-border-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); - padding: 0 1px; -} - -.devtools-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-toolbarbutton[type=menu-button] { - padding: 0 1px; - -moz-box-align: stretch; -} - -.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, -.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { - -moz-appearance: none !important; - list-style-image: url("chrome://browser/skin/devtools/dropmarker.png"); - border: 0; -} - -/* Text input */ - -.devtools-textinput, -.devtools-searchinput { - -moz-appearance: none; - margin: 0 3px; - min-height: 22px; - background-color: transparent; - border: 1px solid hsla(210,8%,5%,.6); - border-radius: 20px; - background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35)); - padding: 3px 8px; - box-shadow: 0 1px 1px hsla(210,8%,5%,.3) inset, - 0 0 0 1px hsla(210,16%,76%,.1) inset, - 0 1px 0 hsla(210,16%,76%,.15); - color: inherit; -} - -.devtools-searchinput { - background-image: url("chrome://browser/skin/devtools/magnifying-glass.png"), linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35)); - background-repeat: no-repeat; - background-position: 4px center, top left, top left; - padding-top: 0; - padding-bottom: 0; - -moz-padding-start: 18px; - -moz-padding-end: 12px; - font-size: inherit; -} - -.devtools-searchinput:-moz-locale-dir(rtl) { - background-position: calc(100% - 4px) center, top left, top left; -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons { - display: none; -} - -.devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder { - opacity: 1.0; - color: hsl(208,10%,66%); -} - -.devtools-no-search-result { - box-shadow: inset 0 0 0 1px hsla(0,68%,6%,.35); - border-color: hsl(10,70%,40%) hsl(10,75%,37%) hsl(10,80%,35%) !important; - background-image: url("chrome://browser/skin/devtools/magnifying-glass.png"), linear-gradient(hsla(1,16%,76%,.45), hsla(1,16%,76%,.75)); -} - -/* Close button */ - -.devtools-closebutton { - list-style-image: url("chrome://browser/skin/devtools/close.png"); - -moz-appearance: none; - border: none; - margin: 0 4px; - min-width: 16px; - width: 16px; - opacity: 0.6; -} - -.devtools-closebutton > .toolbarbutton-text { - display: none; -} - -.devtools-closebutton:hover { - opacity: 0.8; -} - -.devtools-closebutton:active { - opacity: 1; -} - -/* Splitters */ - -.devtools-horizontal-splitter { - -moz-appearance: none; - background-image: none; - border-top: 1px solid black; - border-bottom-width: 0; - min-height: 3px; - height: 3px; - margin-bottom: -3px; - position: relative; -} - -.devtools-side-splitter { - -moz-appearance: none; - background-image: none; - border: 0; - -moz-border-start: 1px solid black; - min-width: 0; - width: 3px; - -moz-margin-end: -3px; - position: relative; - cursor: e-resize; -} - -/* In-tools sidebar */ - -.devtools-toolbox-side-iframe { - min-width: 465px; -} - -.devtools-sidebar-tabs { - -moz-appearance: none; - margin: 0; -} - -.devtools-sidebar-tabs > tabpanels { - padding: 0; -} - -.devtools-sidebar-tabs > tabs { - -moz-appearance: none; - font: inherit; - position: static; - color: hsl(210,30%,85%); - margin-bottom: 0; - padding: 0; - background-image: url("chrome://browser/skin/devtools/background-noise-toolbar.png"), linear-gradient(#3e4750, #3e4750); - box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset; - border-width: 0 0 1px 0; - border-color: hsla(210,8%,5%,.6); - border-style: solid; - overflow: hidden; -} - -.devtools-sidebar-tabs > tabs > .tabs-right, -.devtools-sidebar-tabs > tabs > .tabs-left { - display: none; -} - -.devtools-sidebar-tabs > tabs > tab { - -moz-appearance: none; - /* We want to match the height of a toolbar with a toolbarbutton - * First, we need to replicated the padding of toolbar (4px), - * then we need to take the border of the buttons into account (1px). - */ - padding: 5px 3px !important; - -moz-padding-start: 6px; - padding: 0; - min-width: 78px; - /* toolbar's min-height is button min-height (25px) + padding (2 * 4px): 33px. - * -1px because the parent element (<tabs>) comes with a 1px bottom border. - */ - min-height: 32px; - text-shadow: 0 -1px 0 hsla(210,8%,5%,.45); - text-align: center; - color: inherit; - -moz-box-flex: 1; - border-width: 0; - position: static; - -moz-margin-start: -1px; -} - -.devtools-sidebar-tabs > tabs > tab:-moz-focusring { - position: static; -} - -.devtools-sidebar-tabs > tabs > tab:first-of-type { - -moz-margin-start: -3px; -} - -.devtools-sidebar-tabs > tabs > tab { - background-size: 100% 100%, 1px 100%, 1px 100%, 1px 100%; - background-repeat: no-repeat; - background-position: 2px, 0, 1px, 2px; -} - -.devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab { - background-position: calc(100% - 3px), 100%, calc(100% - 1px), calc(100% - 2px); -} - -.devtools-sidebar-tabs > tabs > tab:last-of-type { - -moz-border-end-width: 0; -} - - -.devtools-sidebar-tabs > tabs > tab { - background-image: linear-gradient(transparent, transparent), linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)), linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)), linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)); -} - -.devtools-sidebar-tabs > tabs > tab:hover { - background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)), linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)), linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)); -} - -.devtools-sidebar-tabs > tabs > tab:hover:active { - background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)), linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)), linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)); -} - -.devtools-sidebar-tabs > tabs > tab[selected=true] + tab { - background-image: linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(hsla(206,37%,4%,.6), hsla(206,37%,4%,.7)), linear-gradient(hsla(204,45%,98%,.1), hsla(204,45%,98%,.1)); -} - -.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover { - background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), linear-gradient(transparent, transparent), linear-gradient(hsla(206,37%,4%,.6), hsla(206,37%,4%,.7)), linear-gradient(hsla(204,45%,98%,.1), hsla(204,45%,98%,.1)); -} - -.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active { - background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), linear-gradient(transparent, transparent), linear-gradient(hsla(206,37%,4%,.6), hsla(206,37%,4%,.7)), linear-gradient(hsla(204,45%,98%,.1), hsla(204,45%,98%,.1)); -} - -.devtools-sidebar-tabs > tabs > tab[selected=true] { - color: #f5f7fa; - background-image: linear-gradient(#2f607b, #294d68), linear-gradient(transparent, transparent), linear-gradient(hsla(206,37%,4%,.6), hsla(206,37%,4%,.7)), linear-gradient(hsla(204,45%,98%,.1), hsla(204,45%,98%,.1)); - box-shadow: 0 1px 0 hsla(0,0%,100%,.1) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset; -} - -.devtools-sidebar-tabs > tabs > tab[selected=true]:hover { - background-image: linear-gradient(#274f64, #224056), linear-gradient(transparent, transparent), linear-gradient(hsla(206,37%,4%,.6), hsla(206,37%,4%,.7)), linear-gradient(hsla(204,45%,98%,.1), hsla(204,45%,98%,.1)); - box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset; -} - -.devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active { - background-image: linear-gradient(#1f3e4f, #1b3243), linear-gradient(transparent, transparent), linear-gradient(hsla(206,37%,4%,.6), hsla(206,37%,4%,.7)), linear-gradient(hsla(204,45%,98%,.1), hsla(204,45%,98%,.1)); - box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset; -} - - -/* Autocomplete Popup */ -/* Dark and light theme */ - -.devtools-autocomplete-popup { - -moz-appearance: none !important; - border: 1px solid hsl(210,11%,10%); - box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset; - background-color: transparent; - background-image: linear-gradient(to bottom, hsla(209,18%,18%,0.9), hsl(210,11%,16%)); - border-radius: 3px; - max-height: 40rem; -} - -.devtools-autocomplete-listbox { - -moz-appearance: none !important; - background-color: transparent; - border-width: 0px !important; -} - -.devtools-autocomplete-listbox > richlistitem, -.devtools-autocomplete-listbox > richlistitem[selected] { - width: 100%; - background-color: transparent; - border-radius: 4px; -} - -.devtools-autocomplete-listbox.dark-theme > richlistitem[selected], -.devtools-autocomplete-listbox.dark-theme > richlistitem:hover { - background-color: rgba(0,0,0,0.5); -} - -.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value, -.devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value { - color: hsl(208,100%,60%); -} - -.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label { - color: #eee; -} - -.devtools-autocomplete-listbox.dark-theme > richlistitem > label { - color: #ccc; -} - -.devtools-autocomplete-listbox > richlistitem > .initial-value, -.devtools-autocomplete-listbox > richlistitem > .autocomplete-value { - margin: 0; - padding: 1px 0; -} - -.devtools-autocomplete-listbox > richlistitem > .autocomplete-count { - text-align: right; -} - -/* Rest of the light theme */ - -.devtools-autocomplete-popup.light-theme { - border: 1px solid hsl(210,24%,90%); - box-shadow: 0 1px 0 hsla(209,29%,90%,.25) inset; - background-image: linear-gradient(to bottom, hsla(209,18%,100%,0.9), hsl(210,24%,95%)); -} - -.devtools-autocomplete-listbox.light-theme > richlistitem[selected], -.devtools-autocomplete-listbox.light-theme > richlistitem:hover { - background-color: rgba(128,128,128,0.3); -} - -.devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value, -.devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value { - color: #222; -} - -.devtools-autocomplete-listbox.light-theme > richlistitem > label { - color: #666; -} - -/* Responsive container */ - -.devtools-responsive-container { - -moz-box-orient: horizontal; -} - -@media (max-width: 700px) { - .devtools-responsive-container { - -moz-box-orient: vertical; - } - - .devtools-responsive-container > .devtools-side-splitter { - border: 0; - margin: 0; - border-top: 1px solid black; - min-height: 3px; - height: 3px; - margin-bottom: -3px; - /* In some edge case the cursor is not changed to n-resize */ - cursor: n-resize; - } - - .devtools-responsive-container > .devtools-sidebar-tabs { - min-height: 35vh; - max-height: 75vh; - } -} - -/* Tooltip widget (see browser/devtools/shared/widgets/Tooltip.js) */ - -.devtools-tooltip.devtools-tooltip-tooltip { - /* If the tooltip uses a <tooltip> XUL element */ - -moz-appearance: none; - padding: 4px; - background: #eee; - border-radius: 3px; -} - -.devtools-tooltip.devtools-tooltip-panel .panel-arrowcontent { - /* If the tooltip uses a <panel> XUL element instead */ - padding: 4px; -} - -.devtools-tooltip-simple-text { - background: linear-gradient(1deg, transparent 0%, rgba(94,136,176,0.1) 100%); - max-width: 400px; - margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */ - padding: 8px 12px; - text-shadow: 0 1px 0 #fff; - white-space: pre-wrap; -} - -.devtools-tooltip-simple-text:first-child { - margin-top: -4px; -} - -.devtools-tooltip-simple-text:last-child { - margin-bottom: -4px; -} - -.devtools-tooltip-tiles { - background-color: #eee; - background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), - linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); - background-size: 20px 20px; - background-position: 0 0, 10px 10px; -} diff --git a/src/chrome/appver/26/devtools/computedview.css b/src/chrome/appver/26/devtools/computedview.css @@ -1,176 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - -/* Take away these two :visited rules to get a core dumper */ -/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */ -.link, -.link:visited { - color: #0091ff; -} -.link, -.helplink, -.link:visited, -.helplink:visited { - text-decoration: none; -} -.link:hover { - text-decoration: underline; -} - -/* From content */ - -* { - -moz-box-sizing: border-box; -} - -:root { - height: 100%; -} - -body { - margin: 0; - display : flex; - flex-direction: column; - height: 100%; -} - -#propertyContainer { - -moz-user-select: text; - overflow: auto; - min-height: 0; - flex: 1; -} - -.property-view-hidden, -.property-content-hidden { - display: none; -} - -.property-view { - clear: both; - padding: 2px 0 2px 17px; -} - -.property-view > * { - display: inline-block; - vertical-align: middle; -} - -.property-name { - width: 50%; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - outline: 0; -} - -.property-value { - width: 50%; - max-width: 100%; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - background-image: url("chrome://browser/skin/devtools/arrow-e.png"); - background-repeat: no-repeat; - background-size: 5px 8px; - background-position: 2px center; - padding-left: 10px; - outline: 0; -} - -.other-property-value { - background-image: url("chrome://browser/skin/devtools/arrow-e.png"); - background-repeat: no-repeat; - background-size: 5px 8px; - background-position: left center; - padding-left: 8px; -} - -@media (min-width: 400px) { - .property-name { - width: 200px; - } - .property-value { - width: auto; - } -} - -.property-content { - padding-left: 17px; -} - -/* From skin */ -.expander { - visibility: hidden; - margin-left: -12px!important; -} - -.expandable { - visibility: visible; -} - -.match { - visibility: hidden; -} - -.matchedselectors > p { - clear: both; - margin: 0 2px 0 0; - padding: 2px; - overflow-x: hidden; - border-style: dotted; - border-color: rgba(128,128,128,0.4); - border-width: 1px 1px 0 1px; -} - -.matchedselectors > p:last-of-type { - border-bottom-width: 1px; -} - -/* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */ -.rule-text { - direction: ltr; -} - -.matched { - text-decoration: line-through; -} - -.parentmatch { - opacity: 0.5; -} - -#noResults { - font-size: 110%; - margin: 5px; - text-align: center; -} - -.onlyuserstyles { - cursor: pointer; -} - -.legendKey { - margin: 0 5px; -} - -.devtools-toolbar { - width: 100%; -} - -.link { - padding: 0 3px; - cursor: pointer; - float: right; -} - -.computedview-colorswatch { - display: inline-block; - border-radius: 50%; - width: 1em; - height: 1em; - vertical-align: text-top; - -moz-margin-end: 5px; -} diff --git a/src/chrome/appver/26/devtools/dark-theme.css b/src/chrome/appver/26/devtools/dark-theme.css @@ -1,195 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - -/* According to: - * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17 - */ -.theme-body { - background: #131c26; - color: #8fa1b2; -} - -.theme-twisty { - cursor: pointer; - width: 14px; - height: 14px; - background-repeat: no-repeat; - background-image: url("chrome://browser/skin/devtools/controls.png"); - background-position: -28px -14px; -} - -.theme-twisty:-moz-focusring { - outline-style: none; -} - -.theme-twisty[open] { - background-position: -42px -14px; -} - -.theme-checkbox { - display: inline-block; - border: 0; - width: 14px; - height: 14px; - padding: 0; - outline: none; - background-image: url("chrome://browser/skin/devtools/controls.png"); - background-position: -28px 0; -} - -.theme-checkbox[checked] { - background-position: -42px 0; -} - -.theme-selected { - background: #26394D; -} - -.theme-bg-darker, -.cm-s-mozilla .CodeMirror-gutters { - background-color: rgba(0,0,0,0.5); -} - -.theme-bg-contrast { /* contrast bg color to attract attention on a container */ - background: #a18650; -} - -.theme-link, -.cm-s-mozilla .cm-link { /* blue */ - color: #3689b2; -} - -/* - * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion - * failures in debug builds. - */ -.theme-link:visited, -.cm-s-mozilla .cm-link:visited { /* blue */ - color: #3689b2; -} - - -.theme-comment, -.cm-s-mozilla .cm-meta, -.cm-s-mozilla .cm-hr, -.cm-s-mozilla .cm-comment { /* grey */ - color: #5c6773; -} - -.theme-gutter { - background-color: #0f171f; - color: #667380; - border-color: #303b47; -} - -.theme-separator { /* grey */ - border-color: #303b47; -} - -.theme-fg-color1, -.cm-s-mozilla .cm-number { /* green */ - color: #5c9966; -} - -.theme-fg-color2, -.cm-s-mozilla .cm-attribute, -.cm-s-mozilla .cm-variable, -.cm-s-mozilla .cm-def, -.cm-s-mozilla .cm-property, -.cm-s-mozilla .cm-qualifier { /* blue */ - color: #3689b2; -} - -.theme-fg-color3, -.cm-s-mozilla .cm-builtin, -.cm-s-mozilla .cm-tag, -.cm-s-mozilla .cm-header { /* pink/lavender */ - color: #a673bf; -} - -.theme-fg-color4 { /* purple/violet */ - color: #6270b2; -} - -.theme-fg-color5, -.cm-s-mozilla .cm-bracket, -.cm-s-mozilla .cm-keyword { /* Yellow */ - color: #a18650; -} - -.theme-fg-color6, -.cm-s-mozilla .cm-string, -.cm-s-mozilla .cm-string-2 { /* Orange */ - color: #b26b47; -} - -.theme-fg-color7, -.cm-s-mozilla .cm-atom, -.cm-s-mozilla .cm-quote, -.cm-s-mozilla .cm-error { /* Red */ - color: #bf5656; -} - -.theme-fg-contrast { /* To be used for text on theme-bg-contrast */ - color: black; -} - -.ruleview-colorswatch, -.computedview-colorswatch, -.markupview-colorswatch { - box-shadow: 0 0 0 1px rgba(0,0,0,0.5); -} - -/* CodeMirror specific styles. - * Best effort to match the existing theme, some of the colors - * are duplicated here to prevent weirdness in the main theme. */ - -.CodeMirror { /* Inherit platform specific font sizing and styles */ - font-family: inherit; - font-size: inherit; - background: transparent; -} - -.CodeMirror pre, -.cm-s-mozilla .cm-variable-2, -.cm-s-mozilla .cm-variable-3, -.cm-s-mozilla .cm-operator, -.cm-s-mozilla .cm-special { /* theme-body color */ - color: #8fa1b2; -} - -.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor { - border-left: solid 1px #fff; -} - -.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */ - background: rgb(185, 215, 253); -} - -.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */ - background: rgb(176, 176, 176); -} - -.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */ - background: rgba(185, 215, 253, .15); -} - -div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */ - outline: solid 1px rgba(255, 255, 255, .25); - color: white; -} - -.cm-s-mozilla .CodeMirror-linenumber { /* line number text */ - color: #5f7387; -} - -.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */ - border-right-color: #343c45; -} - -.cm-s-markup-view pre { - line-height: 1.4em; - min-height: 1.4em; -} diff --git a/src/chrome/appver/26/devtools/debugger.css b/src/chrome/appver/26/devtools/debugger.css @@ -1,464 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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 { - background: #fff; -} - -/* Sources and breakpoints pane */ - -#sources-pane { - min-width: 50px; -} - -#sources-and-editor-splitter { - -moz-border-start-color: transparent; -} - -/* Sources toolbar */ - -#sources-toolbar { - border: none; /* Remove the devtools-toolbar's black bottom border. */ - -moz-border-end: 1px solid #222426; /* Match the sources list's dark margin. */ -} - -#sources-toolbar .devtools-toolbarbutton { - min-width: 32px; -} - -#pretty-print { - font-weight: bold; -} - -#black-box { - list-style-image: url("chrome://browser/skin/devtools/debugger-blackbox.png"); - -moz-image-region: rect(0px,16px,16px,0px); -} - -#black-box[checked] { - -moz-image-region: rect(0px,32px,16px,16px); -} - -#sources .black-boxed { - color: #888; -} - -#sources .black-boxed > .dbg-breakpoint { - display: none; -} - -#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { - background-image: none; - box-shadow: inset -1px 0 0 #222426; -} - -#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { - background-image: none; - box-shadow: inset 1px 0 0 #222426; -} - -/* Black box message and source progress meter */ - -#black-boxed-message, -#source-progress-container { - background: url("chrome://browser/skin/devtools/background-noise-toolbar.png") rgb(61,69,76); - /* Prevent the container deck from aquiring the height from this message. */ - min-height: 1px; - color: white; -} - -#source-progress { - min-height: 2em; - min-width: 40em; -} - -#black-boxed-message-label, -#black-boxed-message-button { - text-align: center; - font-size: 120%; -} - -#black-boxed-message-button { - margin-top: 1em; - padding: .25em; -} - -/* ListWidget items */ - -.list-widget-item { - padding: 2px; -} - -.list-widget-item:not(.selected):not(.empty):hover { - background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.85)), Highlight; -} - -.list-widget-item.selected.light { - background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.8)), Highlight; - color: #000; -} - -.list-widget-item.selected { - background: Highlight; - color: HighlightText; -} - -.list-widget-item.empty { - color: GrayText; - padding: 2px; -} - -/* Stack frames view */ - -.dbg-stackframe-details { - -moz-padding-start: 4px; -} - -.dbg-stackframe-menuitem[checked] { - margin-top: 3px; - margin-bottom: 3px; - outline: 1px solid #eee; - font-weight: 600; -} - -.dbg-stackframe-menuitem-details { - -moz-padding-start: 16px; -} - -/* Sources and breakpoints view */ - -.dbg-breakpoint { - -moz-margin-start: 4px; -} - -.dbg-breakpoint-line { - font-weight: 600; -} - -.dbg-breakpoint-text { - -moz-margin-start: 10px !important; - font-style: italic; - font-size: 90%; -} - -.dbg-breakpoint-checkbox { - width: 16px; - height: 16px; - margin: 2px; -} - -/* Instruments pane (watch expressions, variables, event listeners...) */ - -#instruments-pane > tabs > tab { - min-height: 1em !important; - padding: 0 !important; -} - -#instruments-pane > tabpanels > tabpanel { - background: #fff; -} - -/* Watch expressions view */ - -#expressions { - min-height: 10px; - max-height: 125px; -} - -.dbg-expression { - height: 20px; -} - -.dbg-expression-arrow { - width: 16px; - height: auto; - background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16); -} - -.dbg-expression-input { - -moz-padding-start: 2px !important; -} - -/* Event listeners view */ - -.dbg-event-listener { - padding: 4px 8px; -} - -.dbg-event-listener-type { - font-weight: 600; -} - -.dbg-event-listener-separator { - color: #999; -} - -.dbg-event-listener-targets { - color: #046; -} - -.dbg-event-listener-location { - color: #666; -} - -/* Searchbox and the search operations help panel */ - -.devtools-searchinput { - min-width: 220px; - -moz-margin-start: 1px; -} - -#filter-label { - -moz-margin-start: 2px; -} - -#searchbox-panel-operators { - margin-top: 5px; - margin-bottom: 8px; - -moz-margin-start: 2px; -} - -.searchbox-panel-operator-button { - min-width: 26px; - margin-top: 0; - margin-bottom: 0; - -moz-margin-start: 2px; - -moz-margin-end: 6px; - text-align: center; -} - -.searchbox-panel-operator-label { - padding-bottom: 2px; -} - -/* Searchbox results panel */ - -.results-panel { - padding: 4px; - opacity: 0.9; -} - -.results-panel-item { - background: #f4f4f4; - border: 1px solid #ddd; - border-top-color: #fff; - padding: 5px; - cursor: pointer; -} - -.results-panel-item:first-of-type { - border-top-color: #ddd; - border-radius: 4px 4px 0 0; -} - -.results-panel-item:last-of-type { - border-radius: 0 0 4px 4px; -} - -.results-panel-item:only-of-type { - border-radius: 4px; -} - -.results-panel-item:not(.selected):not(:hover) { - text-shadow: 0 1px #fff; -} - -.results-panel-item-pre { - -moz-margin-end: 5px !important; - color: #444; - cursor: inherit; -} - -.results-panel-item-name { - color: #111; - font-weight: 600; - cursor: inherit; -} - -.results-panel-item-details { - color: #7f7f7f; - cursor: inherit; -} - -/* Sources search view */ - -#globalsearch { - min-height: 10px; - box-shadow: inset 0 -4px 8px #eee; - background: url("chrome://browser/skin/devtools/background-noise-toolbar.png"); -} - -#globalsearch > vbox:not(:empty) { - min-height: 10px; - max-height: 125px; -} - -#globalsearch + .devtools-horizontal-splitter { - -moz-border-top-colors: #bfbfbf; -} - -.dbg-source-results { - padding: 0; - background: none !important; -} - -.dbg-results-header { - -moz-padding-start: 6px; -} - -.dbg-results-header-location { - font-weight: 600; -} - -.dbg-results-header-match-count { - -moz-padding-start: 6px; - color: GrayText; -} - -.dbg-results-line-number { - background: #e2e2e2; - min-width: 40px; - -moz-border-end: 1px solid #b4c4d3; - -moz-padding-end: 4px; - padding-top: 2px; - text-align: end; - color: #8c8c8c; -} - -.dbg-results-line-contents { - -moz-padding-start: 4px; - padding-top: 1px; - padding-bottom: 1px; -} - -.dbg-results-line-contents-string { - padding: 1px; -} - -.dbg-results-line-contents-string[match=true] { - background: rgba(255,255,0,0.5); - padding: 0; - border: 1px solid #aaa; - border-radius: 4px; - cursor: pointer; -} - -.dbg-results-line-contents-string[match=true][focusing] { - transition: transform 0.3s ease-in-out; -} - -.dbg-results-line-contents-string[match=true][focused] { - transition-duration: 0.1s; - transform: scale(1.75, 1.75); -} - -/* Toolbar controls */ - -#resumption-panel-desc { - width: 200px; -} - -#resumption-order-panel { - -moz-margin-start: -8px; -} - -#resume { - list-style-image: url("chrome://browser/skin/devtools/debugger-play.png"); - -moz-image-region: rect(0px,16px,16px,0px); -} - -#resume[checked] { - -moz-image-region: rect(0px,32px,16px,16px); -} - -#step-over { - list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png"); -} - -#step-in { - list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png"); -} - -#step-out { - list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png"); -} - -#debugger-controls > toolbarbutton, -#sources-controls > toolbarbutton { - margin: 0; - box-shadow: none; - border-radius: 0; - border-width: 0; - -moz-border-end-width: 1px; - outline-offset: -3px; -} - -#debugger-controls > toolbarbutton:last-of-type, -#sources-controls > toolbarbutton:last-of-type { - -moz-border-end-width: 0; -} - -#debugger-controls, -#sources-controls { - 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); - border: 1px solid hsla(210,8%,5%,.45); - border-radius: 3px; - margin: 0 3px; -} - -#instruments-pane-toggle { - background: none; - box-shadow: none; - border: none; - list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png"); - -moz-image-region: rect(0px,16px,16px,0px); -} - -#instruments-pane-toggle[pane-collapsed] { - list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png"); -} - -#instruments-pane-toggle:active { - -moz-image-region: rect(0px,32px,16px,16px); -} - -/* Horizontal vs. vertical layout */ - -#vertical-layout-panes-container { - min-height: 35vh; - max-height: 80vh; -} - -#body[layout=vertical] #instruments-pane { - margin: 0 !important; - /* To prevent all the margin hacks to hide the sidebar. */ -} - -#body[layout=vertical] .side-menu-widget-container { - box-shadow: none !important; -} - -#body[layout=vertical] .side-menu-widget-item-arrow { - background-image: none !important; -} - -#body[layout=vertical] .side-menu-widget-group, -#body[layout=vertical] .side-menu-widget-item { - -moz-margin-end: 0; -} - -.CodeMirror-gutters { - background-color: #d8d8d8; -} diff --git a/src/chrome/appver/26/devtools/font-inspector.css b/src/chrome/appver/26/devtools/font-inspector.css @@ -1,78 +0,0 @@ -* { - -moz-box-sizing: border-box; -} - -body { - margin: 0; - padding-bottom: 20px; -} - -#all-fonts { - padding: 0; - margin: 0; -} - -#showall { - border-radius: 0; - border: 1px solid black; - margin: 3px; - cursor: pointer; - position: fixed; - bottom: 0; - right: 0; -} - -.font { - padding: 10px 10px; -} - -.theme-dark .font { - border-bottom: 1px solid #444; -} - -.theme-light .font { - border-bottom: 1px solid #DDD; -} - -.font:last-of-type { - border-bottom: 0; -} - -.theme-light .font:nth-child(even) { - background: #F4F4F4; -} - -.font-preview { - height: 60px; - width: 100%; - border: 0; - display: block; -} - -.font-info { - display: block; -} - -.font-name { - display: inline; -} - -.font-css-code { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - padding: 5px; -} - -.theme-light .font-css-code, -.theme-light .font-url { - border: 1px solid #CCC; - background: white; -} - -.theme-dark .font-css-code, -.theme-dark .font-url { - border: 1px solid #333; - background: black; - color: white; -} diff --git a/src/chrome/appver/26/devtools/inspector.css b/src/chrome/appver/26/devtools/inspector.css @@ -1,58 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - - - - - - - - - -#inspector-inspect-toolbutton { - list-style-image: url("chrome://browser/skin/devtools/inspect-button.png"); - -moz-image-region: rect(0px 16px 16px 0px); -} - -#inspector-inspect-toolbutton[checked=true] { - -moz-image-region: rect(0px 32px 16px 16px); -} - -#inspector-toolbar { - padding-top: 4px; - padding-bottom: 4px; -} - -#inspector-toolbar:-moz-locale-dir(ltr) { - padding-left: 2px; - padding-right: 16px; /* use -moz-padding-end when/if bug 631729 gets fixed */ -} - -#inspector-toolbar:-moz-locale-dir(rtl) { - padding-left: 4px; - padding-right: 18px; /* use -moz-padding-end when/if bug 631729 gets fixed */ -} - -#inspector-searchbox { - transition-property: max-width, -moz-padding-end, -moz-padding-start; - transition-duration: 250ms; - transition-timing-function: ease; -} - -#inspector-searchbox:not([focused]):not([filled]) > .textbox-input-box { - overflow: hidden; -} - -#inspector-searchbox:not([focused]):not([filled]) { - max-width: 20px !important; - -moz-padding-end: 5px; - -moz-padding-start: 22px; - background-position: 8px center, top left, top left; -} - -#inspector-searchbox[focused], -#inspector-searchbox[filled] { - max-width: 200px !important; -} diff --git a/src/chrome/appver/26/devtools/layoutview.css b/src/chrome/appver/26/devtools/layoutview.css @@ -1,46 +0,0 @@ -/* 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/. */ - -.theme-dark .theme-body { - background-image: url("chrome://browser/skin/devtools/layout-background-grid.png"); -} - -.theme-light .theme-body { - background-image: url("chrome://browser/skin/devtools/layout-background-grid.png"), radial-gradient(circle at 50% 70%, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%); -} - -.theme-body { - color: hsl(210,100%,85%) !important; - -moz-box-sizing: border-box; -} - -#main { - border-color: hsla(210,100%,85%,0.7); - border-style: dotted; -} - -#main > .border { - color: hsl(210,53%,45%); -} - -.border > span { - background-color: hsl(210,100%,85%); - border-radius: 2px; - padding: 0 4px; -} - -#content { - border-color: hsla(210,100%,85%,0.7); - border-style: dotted -} - -#padding { - border-color: hsla(210,100%,85%,0.2); - border-style: solid; -} - -#borders { - border-style: solid; - border-color: hsl(210,100%,85%); -} diff --git a/src/chrome/appver/26/devtools/light-theme.css b/src/chrome/appver/26/devtools/light-theme.css @@ -1,194 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - -/* According to: - * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17 - */ -.theme-body { - background: white; - color: black; -} - -.theme-twisty { - cursor: pointer; - width: 14px; - height: 14px; - background-repeat: no-repeat; - background-image: url("chrome://browser/skin/devtools/controls.png"); - background-position: 0 -14px; -} - -.theme-twisty:-moz-focusring { - outline-style: none; -} - -.theme-twisty[open] { - background-position: -14px -14px; -} - -.theme-checkbox { - display: inline-block; - border: 0; - width: 14px; - height: 14px; - padding: 0; - outline: none; - background-image: url("chrome://browser/skin/devtools/controls.png"); - background-position: 0 0; -} - -.theme-checkbox[checked] { - background-position: -14px 0; -} - -.theme-selected { - background-color: #CCC; -} - -.theme-bg-darker, -.cm-s-mozilla .CodeMirror-gutters { - background: #EFEFEF; -} - -.theme-bg-contrast { /* contrast bg color to attract attention on a container */ - background: #a18650; -} - -.theme-link, -.cm-s-mozilla .cm-link { /* blue */ - color: hsl(208,56%,40%); -} - -/* - * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion - * failures in debug builds. - */ -.theme-link:visited, -.cm-s-mozilla .cm-link:visited { /* blue */ - color: hsl(208,56%,40%); -} - -.theme-comment, -.cm-s-mozilla .cm-meta, -.cm-s-mozilla .cm-hr, -.cm-s-mozilla .cm-comment { /* grey */ - color: hsl(90,2%,46%); -} - -.theme-gutter { - background-color: hsl(0,0%,90%); - color: #667380; - border-color: hsl(0,0%,65%); -} - -.theme-separator { /* grey */ - border-color: #cddae5; -} - -.theme-fg-color1, -.cm-s-mozilla .cm-number { /* green */ - color: hsl(72,100%,27%); -} - -.theme-fg-color2, -.cm-s-mozilla .cm-attribute, -.cm-s-mozilla .cm-builtin, -.cm-s-mozilla .cm-def, -.cm-s-mozilla .cm-property, -.cm-s-mozilla .cm-qualifier { /* blue */ - color: hsl(208,56%,40%); -} - -.theme-fg-color3, -.cm-s-mozilla .cm-variable, -.cm-s-mozilla .cm-tag, -.cm-s-mozilla .cm-header { /* dark blue */ - color: hsl(208,81%,21%) -} - -.theme-fg-color4 { /* Orange */ - color: hsl(24,85%,39%); -} - -.theme-fg-color5, -.cm-s-mozilla .cm-bracket, -.cm-s-mozilla .cm-keyword { /* Yellow */ - color: #a18650; -} - -.theme-fg-color6, -.cm-s-mozilla .cm-string, -.cm-s-mozilla .cm-string-2 { /* Orange */ - color: hsl(24,85%,39%); -} - -.theme-fg-color7, -.cm-s-mozilla .cm-atom, -.cm-s-mozilla .cm-quote, -.cm-s-mozilla .cm-error { /* Red */ - color: #bf5656; -} - -.theme-fg-contrast { /* To be used for text on theme-bg-contrast */ - color: black; -} - -.ruleview-colorswatch, -.computedview-colorswatch, -.markupview-colorswatch { - box-shadow: 0 0 0 1px #EFEFEF; -} - -/* CodeMirror specific styles. - * Best effort to match the existing theme, some of the colors - * are duplicated here to prevent weirdness in the main theme. */ - -.CodeMirror { /* Inherit platform specific font sizing and styles */ - font-family: inherit; - font-size: inherit; - background: transparent; -} - -.CodeMirror pre, -.cm-s-mozilla .cm-variable-2, -.cm-s-mozilla .cm-variable-3, -.cm-s-mozilla .cm-operator, -.cm-s-mozilla .cm-special { /* theme-body color */ - color: black; -} - -.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor { - border-left: solid 1px black; -} - -.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */ - background: rgb(185, 215, 253); -} - -.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */ - background: rgb(176, 176, 176); -} - -.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */ - background: rgba(185, 215, 253, .35); -} - -div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */ - outline: solid 1px rgba(0, 0, 0, .25); - color: black; -} - -.cm-s-mozilla .CodeMirror-linenumber { /* line number text */ - color: #667380; -} - -.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */ - border-right-color: #a6a6a6; -} - -.cm-s-markup-view pre { - line-height: 1.4em; - min-height: 1.4em; -} diff --git a/src/chrome/appver/26/devtools/markup-view.css b/src/chrome/appver/26/devtools/markup-view.css @@ -1,16 +0,0 @@ -/* 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/. */ - -* { - padding: 0; - margin: 0; -} - -.more-nodes { - padding-left: 16px; -} - -.styleinspector-propertyeditor { - border: 1px solid #CCC; -} diff --git a/src/chrome/appver/26/devtools/netmonitor.css b/src/chrome/appver/26/devtools/netmonitor.css @@ -1,549 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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 { - background: url("chrome://browser/skin/devtools/background-noise-toolbar.png"), hsl(208,11%,27%); -} - -/* Network requests table */ - -#requests-menu-empty-notice { - background: url("chrome://browser/skin/devtools/background-noise-toolbar.png"), hsl(208,11%,27%); - padding: 12px; - font-size: 110%; - color: #fff; -} - -#requests-menu-toolbar { - height: 32px; - padding: 0; -} - -.requests-menu-header:first-child { - -moz-padding-start: 4px; -} - -.requests-menu-subitem { - padding: 4px; -} - -.requests-menu-header:not(:last-child):-moz-locale-dir(ltr), -.requests-menu-subitem:not(:last-child):-moz-locale-dir(ltr) { - -moz-border-end: 1px solid hsla(210,8%,5%,.25); - box-shadow: 1px 0 0 hsla(210,16%,76%,.1); -} - -.requests-menu-header:not(:last-child):-moz-locale-dir(rtl), -.requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { - -moz-border-end: 1px solid hsla(210,8%,5%,.25); - box-shadow: -1px 0 0 hsla(210,16%,76%,.1); -} - -.requests-menu-header-button { - -moz-appearance: none; - background: none; - min-width: 20px; - min-height: 31px; /* Remaining 1px comes from border of the toolbar. */ - margin: 0; - border: none; - padding: 0; - color: inherit; - font-weight: inherit !important; - transition: background-color 0.1s ease-in-out; -} - -.requests-menu-header-button:hover { - background: rgba(0,0,0,0.10); -} - -.requests-menu-header-button:hover:active { - background: rgba(0,0,0,0.25); -} - -.requests-menu-header-button:not(:active)[sorted] { - background: rgba(0,0,0,0.15); -} - -.requests-menu-header-button:not(:active)[sorted=ascending] { - background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); - background-size: 100% 1px; - background-repeat: no-repeat; -} - -.requests-menu-header-button:not(:active)[sorted=descending] { - background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); - background-size: 100% 1px; - background-repeat: no-repeat; - background-position: bottom; -} - -/* Network requests table: specific column dimensions */ - -.requests-menu-status-and-method { - width: 8em; -} - -.requests-menu-status { - width: 10px; - height: 10px; -} - -.requests-menu-method { - text-align: center; - font-weight: 600; -} - -.requests-menu-file { - width: 20vw; - min-width: 4em; -} - -.requests-menu-domain { - width: 14vw; - min-width: 10em; -} - -.requests-menu-type { - text-align: center; - width: 4em; -} - -.requests-menu-size { - text-align: center; - width: 8em; -} - -/* Network requests table: status codes */ - -box.requests-menu-status { - background: #fff; - -moz-margin-start: 5px; - -moz-margin-end: 5px; - border-radius: 20px; - box-shadow: - 0 0 0 1px rgba(255,255,255,0.4) inset, - 0 -6px 4px 0 rgba(32,32,32,1.0) inset, - 0 0 8px 0 rgba(32,0,0,0.4); - transition: box-shadow 0.5s ease-in-out; -} - -box.requests-menu-status[code^="1"] { - box-shadow: - 0 0 2px 1px rgba(255,255,255,0.8) inset, - 0 -6px 4px 0 rgba(0,0,64,1.0) inset, - 0 0 8px 0 rgba(0,0,128,1.0); -} - -box.requests-menu-status[code^="2"] { - box-shadow: - 0 0 2px 1px rgba(255,255,255,0.8) inset, - 0 -6px 4px 0 rgba(0,64,0,1.0) inset, - 0 0 8px 0 rgba(0,128,0,1.0); -} - -box.requests-menu-status[code^="3"] { - box-shadow: - 0 0 2px 1px rgba(255,255,255,0.8) inset, - 0 -6px 4px 0 rgba(64,32,0,1.0) inset, - 0 0 8px 0 rgba(128,128,0,1.0); -} - -box.requests-menu-status[code^="4"] { - box-shadow: - 0 0 2px 1px rgba(255,255,255,0.8) inset, - 0 -6px 4px 0 rgba(64,0,0,1.0) inset, - 0 0 8px 0 rgba(128,0,0,1.0); -} - -box.requests-menu-status[code^="5"] { - box-shadow: - 0 0 2px 1px rgba(255,255,255,0.8) inset, - 0 -6px 4px 0 rgba(64,0,64,1.0) inset, - 0 0 8px 0 rgba(128,0,128,1.0); -} - -/* Network requests table: waterfall header */ - -#requests-menu-waterfall-label { - -moz-padding-start: 8px; - -moz-padding-end: 8px; -} - -.requests-menu-timings-division { - width: 100px; - padding-top: 2px; - -moz-padding-start: 4px; - -moz-border-start: 1px dotted #999; - font-size: 75%; - pointer-events: none; -} - -.requests-menu-timings-division:not(:first-child) { - -moz-margin-start: -100px !important; /* Don't affect layout. */ -} - -.requests-menu-timings-division:-moz-locale-dir(ltr) { - transform-origin: left center; -} - -.requests-menu-timings-division:-moz-locale-dir(rtl) { - transform-origin: right center; -} - -/* Network requests table: waterfall items */ - -.requests-menu-subitem.requests-menu-waterfall { - -moz-padding-start: 4px; - -moz-padding-end: 4px; - background-repeat: repeat-y; /* Background created on a <canvas> in js. */ - margin-top: -1px; /* Compensate borders. */ - margin-bottom: -1px; -} - -.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) { - background-position: right center; -} - -.requests-menu-timings:-moz-locale-dir(ltr) { - transform-origin: left center; -} - -.requests-menu-timings:-moz-locale-dir(rtl) { - transform-origin: right center; -} - -.requests-menu-timings-total:-moz-locale-dir(ltr) { - transform-origin: left center; -} - -.requests-menu-timings-total:-moz-locale-dir(rtl) { - transform-origin: right center; -} - -.requests-menu-timings-total { - -moz-padding-start: 8px; - font-size: 85%; - font-weight: 600; -} - -.requests-menu-timings-cap { - width: 4px; - height: 10px; - border: 1px solid #fff; -} - -.requests-menu-timings-cap.start { - -moz-border-end: none; -} - -.requests-menu-timings-cap.end { - -moz-border-start: none; -} - -.requests-menu-timings-cap.start:-moz-locale-dir(ltr) { - border-radius: 4px 0 0 4px; - transform-origin: right center; -} - -.requests-menu-timings-cap.start:-moz-locale-dir(rtl) { - border-radius: 0 4px 4px 0; - transform-origin: left center; -} - -.requests-menu-timings-cap.end:-moz-locale-dir(ltr) { - border-radius: 0 4px 4px 0; - transform-origin: left center; -} - -.requests-menu-timings-cap.end:-moz-locale-dir(rtl) { - border-radius: 4px 0 0 4px; - transform-origin: right center; -} - -.requests-menu-timings-box { - height: 10px; - border-top: 1px solid #fff; - border-bottom: 1px solid #fff; -} - -.requests-menu-timings-box.blocked, -.requests-menu-timings-cap.blocked { - background-color: rgba(255,32,32,0.8); - box-shadow: 0 0 8px 0 rgba(128,32,32,0.8), - 0 0 4px 0 rgba(255,255,255,1.0) inset; -} - -.requests-menu-timings-box.dns, -.requests-menu-timings-cap.dns { - background-color: rgba(255,128,255,0.6); - box-shadow: 0 0 8px 0 rgba(128,128,255,1.0), - 0 0 4px 0 rgba(255,255,255,1.0) inset; -} - -.requests-menu-timings-box.connect, -.requests-menu-timings-cap.connect { - background-color: rgba(255,128,16,0.4); - box-shadow: 0 0 8px 0 rgba(128,128,16,0.8), - 0 0 4px 0 rgba(255,255,255,1.0) inset; -} - -.requests-menu-timings-box.send, -.requests-menu-timings-cap.send { - background-color: rgba(255,255,128,0.4); - box-shadow: 0 0 8px 0 rgba(128,255,128,0.8), - 0 0 4px 0 rgba(255,255,255,1.0) inset; -} - -.requests-menu-timings-box.wait, -.requests-menu-timings-cap.wait { - background-color: rgba(255,255,255,0.2); - box-shadow: 0 0 8px 0 rgba(128,255,255,0.4), - 0 0 4px 0 rgba(255,255,255,1.0) inset; -} - -.requests-menu-timings-box.receive, -.requests-menu-timings-cap.receive { - background-color: rgba(255,255,255,1.0); - box-shadow: 0 0 8px 0 rgba(128,255,255,1.0), - 0 0 4px 0 rgba(255,255,255,1.0) inset; -} - -/* SideMenuWidget */ - -.side-menu-widget-item[odd] { - background: rgba(255,255,255,0.05); -} - -/* Network request details */ - -#details-pane { - background: hsl(208,11%,27%); - max-width: 500px; -} - -#details-pane-toggle { - background: none; - box-shadow: none; - border-color: transparent; - list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png"); - -moz-image-region: rect(0px,16px,16px,0px); -} - -#details-pane-toggle[pane-collapsed] { - list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png"); -} - -#details-pane-toggle:active { - -moz-image-region: rect(0px,32px,16px,16px); -} - -/* Network request details tabpanels */ - -.tabpanel-content { - background: url("chrome://browser/skin/devtools/background-noise-toolbar.png"), #3e4750; - box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset; - color: #fff; -} - -.tabpanel-summary-container { - padding: 1px; -} - -.tabpanel-summary-label { - -moz-padding-start: 4px; - -moz-padding-end: 3px; - font-weight: 600; - text-shadow: 0 1px 0 #000; - color: hsl(210,30%,85%); -} - -.tabpanel-summary-value { - -moz-padding-start: 3px; -} - -.variable-or-property:not(:focus) > .title > .token-string { - color: #10c !important; -} - -/* Headers tabpanel */ - -#headers-summary-status, -#headers-summary-version { - padding-bottom: 2px; -} - -#headers-summary-size { - padding-top: 2px; -} - -#headers-summary-resend { - margin: 0 6px; - min-height: 20px; -} - -/* Response tabpanel */ - -#response-content-info-header { - background: - url("chrome://browser/skin/devtools/background-noise-toolbar.png"), - linear-gradient(hsl(0,61%,40%), hsl(0,61%,31%)) repeat-x top left; - box-shadow: - inset 0 1px 0 hsla(210,40%,83%,.15), - inset 0 -1px 0 hsla(210,40%,83%,.05); - margin: 0; - padding: 5px 8px; -} - -#response-content-image-box { - padding-top: 10px; - padding-bottom: 10px; -} - -#response-content-image { - background: #fff; - border: 1px dashed GrayText; - margin-bottom: 10px; -} - -/* Timings tabpanel */ - -#timings-tabpanel .tabpanel-summary-label { - width: 10em; -} - -#timings-tabpanel .requests-menu-timings-box { - transition: transform 0.2s ease-out; - min-width: 1px; -} - -#timings-tabpanel .requests-menu-timings-total { - transition: transform 0.2s ease-out; -} - -/* Custom request form */ - -#custom-pane { - padding: 0.6em 0.5em; -} - -.custom-header { - font-size: 1.1em; -} - -.custom-section { - margin-top: 0.5em; -} - -#custom-method-value { - width: 4.5em; -} - -/* Footer */ - -#requests-menu-footer { - box-shadow: inset 0 1px 16px hsla(210,8%,5%,.3); -} - -.requests-menu-footer-button, -.requests-menu-footer-label { - min-width: 1em; - margin: 0; - border: none; - padding: 2px 1.5vw; - color: #fff; -} - -.requests-menu-footer-spacer { - min-width: 2px; -} - -.requests-menu-footer-spacer, -.requests-menu-footer-button { - -moz-border-end: 1px solid hsla(210,8%,5%,.25); - box-shadow: 1px 0 0 hsla(210,16%,76%,.1); -} - -.requests-menu-footer-button { - -moz-appearance: none; - background: rgba(0,0,0,0.025); -} - -.requests-menu-footer-button:hover { - background: rgba(0,0,0,0.20); -} - -.requests-menu-footer-button:hover:active { - background: rgba(0,0,0,0.35); -} - -.requests-menu-footer-button:not(:active)[checked] { - background-color: rgba(0,0,0,0.25); - background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); - background-size: 100% 1px; - background-repeat: no-repeat; -} - -.requests-menu-footer-label { - font-weight: 600; -} - -/* Responsive sidebar */ -@media (max-width: 700px) { - #requests-menu-toolbar { - height: 24px; - } - - .requests-menu-header-button { - min-height: 23px; /* Remaining 1px comes from border of the toolbar. */ - } - - .requests-menu-footer-button, - .requests-menu-footer-label { - padding: 2px 2vw; - } - - #details-pane { - max-width: none; - margin: 0 !important; - /* To prevent all the margin hacks to hide the sidebar. */ - } - - .requests-menu-status-and-method { - width: 16vw; - } - - .requests-menu-file, - .requests-menu-domain { - width: 30vw; - } - - .requests-menu-type { - width: 8vw; - } - - .requests-menu-size { - width: 16vw; - border-width: 0 !important; - box-shadow: none !important; - /* The "Timeline" header is not visible anymore, and thus the - right border and box-shadow of "Size" column should be hidden. */ - } -} - -@media (min-width: 701px) { - #network-table[type-overflows] .requests-menu-domain { - border-width: 0 !important; - box-shadow: none !important; - /* The "Type" header is not visible anymore, and thus the - right border and box-shadow of "Domain" column should be hidden. */ - } - - #network-table[domain-overflows] .requests-menu-file { - border-width: 0 !important; - box-shadow: none !important; - /* The "Domain" header is not visible anymore, and thus the - right border and box-shadow of "File" column should be hidden. */ - } -} diff --git a/src/chrome/appver/26/devtools/profiler.css b/src/chrome/appver/26/devtools/profiler.css @@ -1,88 +0,0 @@ -/* 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/. */ - - -.profiler-sidebar-empty-notice { - max-width: 176px; - padding: 10px; - background-color: rgb(61, 69, 76); - color: white; - font-weight: bold; -} - -.devtools-toolbar { - min-height: 33px; -} - -.profiler-sidebar { - min-width: 196px; -} - -.profiler-sidebar + .devtools-side-splitter { - -moz-border-start-color: transparent; -} - -.profiler-sidebar-item { - padding: 3px 5px; -} - -.profiler-sidebar-item, .side-menu-widget-item-contents { - cursor: default; -} - -.profiler-sidebar-item > h3 { - font-size: 13px; - display: block; - cursor: pointer; -} - -.profiler-sidebar-item > hbox { - margin-top: 2px; - color: rgb(140, 152, 165); -} - -.profiler-sidebar-item > hbox > a { - display: none; - text-decoration: underline; - cursor: pointer; -} - -[state=completed].selected .profiler-sidebar-item > hbox > a { - display: block; -} - -.selected .profiler-sidebar-item > hbox { - color: rgb(128, 195, 228); -} - -#profiler-controls > toolbarbutton { - margin: 0; - box-shadow: none; - border-radius: 0; - border-width: 0; - -moz-border-end-width: 1px; - outline-offset: -3px; -} - -#profiler-controls > toolbarbutton:last-of-type { - -moz-border-end-width: 0; -} - -#profiler-controls { - 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); - border: 1px solid hsla(210,8%,5%,.45); - border-radius: 3px; - margin: 0 3px; -} - -#profiler-start { - list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.png"); - -moz-image-region: rect(0px,16px,16px,0px); -} - -#profiler-start[checked] { - -moz-image-region: rect(0px,32px,16px,16px); -} -\ No newline at end of file diff --git a/src/chrome/appver/26/devtools/ruleview.css b/src/chrome/appver/26/devtools/ruleview.css @@ -1,145 +0,0 @@ -/* 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/. */ - -.ruleview { - height: 100%; -} - -.ruleview-rule-source { - -moz-padding-start: 5px; - cursor: pointer; - text-align: right; - float: right; - -moz-user-select: none; -} - -.ruleview-header { - border-top-width: 1px; - border-bottom-width: 1px; - border-top-style: solid; - border-bottom-style: solid; - padding: 1px 4px; - -moz-user-select: none; -} - -.ruleview-rule-pseudo-element { - padding-left:20px; - border-left: solid 10px; -} - -.ruleview-rule-source:hover { - text-decoration: underline; -} - -.ruleview-rule, -#noResults { - padding: 2px 4px; -} - -#noResults { - font: message-box; - color: GrayText; -} - -.ruleview-rule + .ruleview-rule { - border-top-width: 1px; - border-top-style: dotted; -} - -.ruleview-warning { - background: url("chrome://browser/skin/devtools/alerticon-warning.png"); - -moz-margin-start: 5px; - display: inline-block; - vertical-align: top; - width: 13px; - height: 12px; -} - -.ruleview-ruleopen { - -moz-padding-end: 5px; -} - -.ruleview-ruleclose { - cursor: text; - padding-right: 20px; -} - -.ruleview-propertylist { - list-style: none; - padding: 0; - margin: 0; -} - -.ruleview-rule:not(:hover) .ruleview-enableproperty { - visibility: hidden; -} - -.ruleview-expander { - display: inline-block; -} - -.ruleview-newproperty { - /* (enable checkbox width: 12px) + (expander width: 15px) */ - -moz-margin-start: 27px; -} - -.ruleview-namecontainer, -.ruleview-propertycontainer, -.ruleview-propertyname, -.ruleview-propertyvalue { - text-decoration: inherit; -} - -.ruleview-computedlist { - list-style: none; - padding: 0; -} - -.ruleview-computed { - -moz-margin-start: 35px; -} - -.ruleview-colorswatch { - border-radius: 50%; - width: 1em; - height: 1em; - vertical-align: text-top; - -moz-margin-end: 5px; -} - -.ruleview-overridden { - text-decoration: line-through; -} - -.styleinspector-propertyeditor { - border: 1px solid #CCC; - padding: 0; -} - -.ruleview-property { - border-left: 2px solid transparent; -} - -.ruleview-property > * { - vertical-align: middle; -} - -.ruleview-property[dirty] { - border-left-color: #68E268; -} - -.ruleview-namecontainer > .ruleview-propertyname, -.ruleview-propertycontainer > .ruleview-propertyvalue { - border-bottom: 1px dashed transparent; -} - -.ruleview-namecontainer:hover > .ruleview-propertyname, -.ruleview-propertycontainer:hover > .ruleview-propertyvalue { - border-bottom-color: hsl(0,0%,50%); -} - -.ruleview-selector-separator, .ruleview-selector-unmatched { - color: #888; -} - diff --git a/src/chrome/appver/26/devtools/shadereditor.css b/src/chrome/appver/26/devtools/shadereditor.css @@ -1,134 +0,0 @@ -/* 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 { - background: url("chrome://browser/skin/devtools/background-noise-toolbar.png"), hsl(208,11%,27%); -} - -#content { - background: #fff; -} - -/* Reload and waiting notices */ - -.notice-container { - background: transparent; - margin-top: -50vh; - color: #fff; -} - -#reload-notice { - font-size: 120%; -} - -#waiting-notice { - font-size: 110%; -} - -#waiting-notice::before { - display: inline-block; - content: ""; - background: url("chrome://global/skin/icons/loading_16.png") center no-repeat; - width: 16px; - height: 16px; - -moz-margin-end: 6px; -} - -#requests-menu-reload-notice-button { - min-height: 2em; -} - -/* Shaders pane */ - -#shaders-pane { - min-width: 150px; -} - -#shaders-pane + .devtools-side-splitter { - -moz-border-start-color: transparent; -} - -.side-menu-widget-item-checkbox { - -moz-appearance: none; - opacity: 0; - transition: opacity .15s ease-out 0s; -} - -/* Only show the checkbox when the source is hovered over, is selected, or if it - * is not checked. */ -.side-menu-widget-item:hover > .side-menu-widget-item-checkbox, -.side-menu-widget-item.selected > .side-menu-widget-item-checkbox, -.side-menu-widget-item-checkbox:not([checked]) { - opacity: 1; - transition: opacity .15s ease-out 0s; -} - -.side-menu-widget-item-checkbox .checkbox-check { - -moz-appearance: none; - background: none; - background-image: url("chrome://browser/skin/devtools/itemToggle.png"); - background-repeat: no-repeat; - background-clip: content-box; - background-size: 32px 16px; - background-position: -16px 0; - width: 16px; - height: 16px; - border: 0; -} - -.side-menu-widget-item-checkbox[checked] .checkbox-check { - background-position: 0 0; -} - -.side-menu-widget-item-checkbox:not([checked]) ~ .side-menu-widget-item-contents { - color: #888; -} - -/* Shader source editors */ - -#editors-splitter { - -moz-border-start-color: rgb(61,69,76); -} - -.editor-label { - background: url("chrome://browser/skin/devtools/background-noise-toolbar.png"), hsl(208,11%,27%); - border-top: 1px solid #222426; - padding: 1px 12px; - color: #fff; -} - -.editor-label[selected] { - background: linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%)) repeat-x top left; - box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15), - inset 0 -1px 0 hsla(210,40%,83%,.05); -} - -/* Responsive sidebar */ - -@media (max-width: 700px) { - #shaders-pane { - max-height: 60vh; - } - - .side-menu-widget-container { - box-shadow: none !important; - } - - .side-menu-widget-item-arrow { - background-image: none !important; - } - - .devtools-side-splitter { - border-top-color: transparent !important; - } - - .editor-label { - -moz-box-ordinal-group: 0; - } - - .editor-label:not([selected]) { - border-top: 1px solid hsla(210,8%,5%,.25); - box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15); - } -} diff --git a/src/chrome/appver/26/devtools/splitview.css b/src/chrome/appver/26/devtools/splitview.css @@ -1,114 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - -.splitview-nav-container { - background-color: hsl(208,11%,27%); - color: white; -} - -.loading .splitview-nav-container { - background-image: url(chrome://global/skin/icons/loading_16.png); - background-repeat: no-repeat; - background-position: center center; -} - -.splitview-nav { - -moz-appearance: none; - margin: 0; - box-shadow: inset -1px 0 0 #222426; -} - -.splitview-nav > li { - color: white; - background-clip: padding-box; - border-bottom: 1px solid hsla(210,16%,76%,.1); - box-shadow: inset 0 -1px 0 hsla(210,8%,5%,.25); - -moz-padding-end: 8px; - -moz-box-align: center; -} - -.splitview-nav { - list-style-image: none; - list-style: none; - padding: 0; - margin: 0; -} - -.splitview-nav > li { - outline: 0; - vertical-align: bottom; -} - -.placeholder { - -moz-box-flex: 1; - text-align: center; -} - -.splitview-nav > li.splitview-active { - background-image: url("chrome://browser/skin/devtools/itemArrow-ltr.png"), - linear-gradient(to right, black, black), - linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%)); - background-repeat: no-repeat, no-repeat, repeat-x; - background-position: center right, top right, top left; - background-size: auto, 1px 100%, auto; - border-bottom: 1px solid hsla(210,8%,5%,.25); - box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15), - inset 0 -1px 0 hsla(210,40%,83%,.05); -} - -.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) { - background-image: url("chrome://browser/skin/devtools/itemArrow-rtl.png"), - linear-gradient(to right, black, black), - linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%)); - background-repeat: no-repeat, no-repeat, repeat-x; - background-position: center left, top left, top right; -} - -/* Toolbars */ - -.devtools-toolbar { - height: 26px; - background-origin: border-box; - background-clip: border-box; - border-bottom: 1px solid hsla(210,8%,5%,.65); - padding: 3px; -} - -.splitview-main > toolbar:-moz-locale-dir(ltr) { - border-right: 1px solid hsla(210,8%,5%,.5); -} - -.splitview-main > toolbar:-moz-locale-dir(rtl) { - border-left: 1px solid hsla(210,8%,5%,.5); -} - -.devtools-toolbarbutton { - font-size: 11px; - padding: 0 8px; - width: auto; - min-width: 48px; - min-height: 0; -} - - -/* Resizers */ - -.splitview-landscape-splitter { - -moz-border-start-color: transparent; -} - -.splitview-portrait-resizer { - -moz-appearance: none; - background: linear-gradient(black 1px, rgba(255,255,255,0.2) 1px), - linear-gradient(hsl(210,11%,36%), hsl(210,11%,18%)); - height: 12px; - background-size: 10px 2px, 100% 12px; - background-clip: content-box, border-box; - background-repeat: repeat-y, no-repeat; - background-position: center center; - padding: 2px 0; - border-top: 1px solid hsla(210,8%,5%,.5); - border-bottom: 1px solid hsla(210,8%,5%,.5); -} diff --git a/src/chrome/appver/26/devtools/styleeditor.css b/src/chrome/appver/26/devtools/styleeditor.css @@ -1,131 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - -#style-editor-chrome { - background-color: hsl(208,11%,27%); -} - -.stylesheet-title, -.stylesheet-name { - text-decoration: none; - color: hsl(207,17%,88%); -} - -.stylesheet-name { - font-size: 13px; -} - -.stylesheet-rule-count, -.stylesheet-saveButton { - color: hsl(211,12%,60%); -} - -.stylesheet-saveButton { - text-decoration: underline; - cursor: pointer; -} - -.splitview-active .stylesheet-title, -.splitview-active .stylesheet-name { - color: hsl(0,0%,100%); -} - -.splitview-active .stylesheet-rule-count, -.splitview-active .stylesheet-saveButton { - color: hsl(200,66%,70%); -} - -.splitview-nav:focus { - outline: 0; /* focus ring is on the stylesheet name */ -} - -.splitview-nav > li.unsaved > hgroup .stylesheet-name { - font-style: italic; -} - -.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before, -.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after { - font-style: italic; -} - -.splitview-nav.empty > p { - padding: 0 10px; -} - -.stylesheet-enabled { - padding: 8px 0; - margin: 0 8px; - background-image: url("chrome://browser/skin/devtools/itemToggle.png"); - background-repeat: no-repeat; - background-clip: content-box; - background-position: 0 8px; - width: 24px; - height: 40px; -} - -.disabled > .stylesheet-enabled { - background-position: -24px 8px; -} - -.splitview-nav > li > .stylesheet-enabled:focus, -.splitview-nav > li:hover > .stylesheet-enabled { - outline: 0; -} - -.stylesheet-error-message { - color: red; -} - -.stylesheet-more > h3 { - font-size: 11px; - -moz-margin-end: 2px; -} - -.devtools-searchinput { - max-width: 25ex; - font-size: 11px; -} - -.placeholder { - color: white; -} - -.placeholder a { - text-decoration: underline; -} - -h1, -h2, -h3 { - font-size: inherit; - font-weight: normal; - margin: 0; - padding: 0; -} - -/* portrait mode */ -@media (max-width: 550px) { - .splitview-nav { - box-shadow: none; - } - - .splitview-nav > li.splitview-active { - background-size: 0 0, 0 0, auto; - } - - .stylesheet-enabled { - padding: 0; - background-position: 0 0; - height: 24px; - } - - .disabled > .stylesheet-enabled { - background-position: -24px 0; - } - - .splitview-nav > li > hgroup.stylesheet-info { - -moz-box-align: baseline; - } -} diff --git a/src/chrome/appver/26/devtools/toolbox.css b/src/chrome/appver/26/devtools/toolbox.css @@ -1,282 +0,0 @@ -/* 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/. */ - -#toolbox-controls { - margin: 0 4px; -} - -#toolbox-controls > toolbarbutton, -#toolbox-dock-buttons > toolbarbutton { - -moz-appearance: none; - border: none; - margin: 0 4px; - min-width: 16px; - width: 16px; -} - -#toolbox-dock-bottom { - list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png"); -} - -#toolbox-dock-side { - list-style-image: url("chrome://browser/skin/devtools/dock-side.png"); -} - -#toolbox-dock-window { - list-style-image: url("chrome://browser/skin/devtools/undock.png"); -} - -#toolbox-dock-window, -#toolbox-dock-bottom, -#toolbox-dock-side { - opacity: 0.6; -} - -#toolbox-dock-window:hover, -#toolbox-dock-bottom:hover, -#toolbox-dock-side:hover { - opacity: 1; -} - -#toolbox-controls-separator { - width: 3px; - background-image: linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)), - linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)), - linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)); - background-size: 1px 100%; - background-repeat: no-repeat; - background-position: 0, 1px, 2px; - -moz-margin-start: 8px; -} - - -/* Command buttons */ - -.command-button { - -moz-appearance: none; - border: none; - margin: 0; - padding: 0 8px; - width: 16px; -} - -.command-button:hover { - background-color: hsla(206,37%,4%,.2); -} -.command-button:hover:active, .command-button[checked=true]:not(:hover) { - background-color: hsla(206,37%,4%,.4); -} - -#command-button-paintflashing { - list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#command-button-paintflashing:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} -#command-button-paintflashing:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} -#command-button-paintflashing[checked=true] { - -moz-image-region: rect(0px, 64px, 16px, 48px); -} - -#command-button-responsive { - list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#command-button-responsive:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} -#command-button-responsive:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} -#command-button-responsive[checked=true] { - -moz-image-region: rect(0px, 64px, 16px, 48px); -} - -#command-button-tilt { - list-style-image: url("chrome://browser/skin/devtools/command-tilt.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#command-button-tilt:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -#command-button-tilt:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} - -#command-button-tilt[checked=true] { - -moz-image-region: rect(0px, 64px, 16px, 48px); -} - -#command-button-scratchpad { - list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} - -#command-button-scratchpad:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -#command-button-scratchpad:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} - -/* Tabs */ - -.devtools-tabbar { - -moz-appearance: none; - background-image: url("background-noise-toolbar.png"), - linear-gradient(#303840, #2d3640); - border-bottom: 1px solid #060a0d; - box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, - 0 -1px 0 hsla(206,37%,4%,.1) inset; - min-height: 32px; - padding: 0; -} - -#toolbox-tabs { - margin: 0; -} - -.devtools-tab { - -moz-appearance: none; - min-width: 32px; - min-height: 32px; - max-width: 110px; - color: #b6babf; - margin: 0; - padding: 0; - background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)); - background-size: 1px 100%; - background-repeat: no-repeat; - background-position: left, right; - border-top: 1px solid #060a0d; - border-right: 1px solid hsla(206,37%,4%,.45); -} - -.devtools-tab > image { - -moz-margin-end: 0; - -moz-margin-start: 4px; - opacity: 0.6; -} - -#toolbox-tab-options > image { - margin: 0 8px; -} - -.devtools-tab:hover > image { - opacity: 0.8; -} - -.devtools-tab:active > image, -.devtools-tab[selected=true] > image { - opacity: 1; -} - -.devtools-tab:hover { - background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(206,37%,4%,.1), hsla(206,37%,4%,.2)); - background-size: 1px 100%, - 1px 100%, - 100%; - background-repeat: no-repeat, - no-repeat, - repeat-x; - background-position: left, right; - color: #ced3d9; -} -.devtools-tab:hover:active { - background-color: hsla(206,37%,4%,.2); - color: #f5f7fa; -} - -.devtools-tab[selected=true] { - color: #f5f7fa; - background-image: radial-gradient(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)), - radial-gradient(farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)), - linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3)); - background-size: 100% 1px, - 100% 5px, - 1px 100%, - 1px 100%, - 100%; - background-repeat: no-repeat, - no-repeat, - no-repeat, - no-repeat, - repeat-x; - background-position: top right, top left, left, right; - box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset; -} - -.devtools-tab:not([selected=true]).highlighted { - color: #f5f7fa; - background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%), - radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2)); - background-size: 100% 1px, - 100% 5px, - 1px 100%, - 1px 100%, - 100%; - background-repeat: no-repeat, - no-repeat, - no-repeat, - no-repeat, - repeat-x; - background-position: top right, top left, left, right; -} - -.devtools-tab:not(.highlighted) > .highlighted-icon, -.devtools-tab[selected=true] > .highlighted-icon, -.devtools-tab:not([selected=true]).highlighted > .default-icon { - visibility: collapse; -} - -#options-panel { - background-image: url("chrome://browser/skin/newtab/noise.png"); -} - -.options-vertical-pane { - margin: 15px; - width: calc(50% - 30px); - min-width: 400px; - -moz-padding-start: 5px; -} - -.options-vertical-pane > label { - padding: 5px 0; - font-size: 1.4rem; -} - -.options-groupbox { - -moz-margin-start: 15px; - padding: 4px; -} - -.options-groupbox > * { - padding: 2px; -} - -.options-citation-label { - font-size: 1rem !important; - /* !important is required otherwise font-size will still be 1.4rem */ - font-style: italic; - padding: 4px 0 0; /* To align it with the checkbox */ - color: #444; -} - -.options-citation-label + label { - padding: 3px 0 0 !important; /* To align it with the checkbox */ - font-style: italic; -} diff --git a/src/chrome/appver/26/devtools/webconsole.css b/src/chrome/appver/26/devtools/webconsole.css @@ -1,331 +0,0 @@ -/* 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/. */ - -/* General output styles */ - -a { - -moz-user-focus: normal; - -moz-user-input: enabled; - cursor: pointer; - text-decoration: underline; -} - -/* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited - * assertion when loading HTML page with links in XUL iframe */ -*:visited { } - -.message { - display: flex; - flex: 0 0 auto; - -moz-margin-start: 6px; - -moz-margin-end: 8px; - width: calc(100% - 6px - 8px); -} - -.message > .timestamp { - flex: 0 0 auto; - color: GrayText; - margin: 4px 0; -} - -.message > .icon { - background: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 0, 1, 0, 0) no-repeat; - background-position: center 0.5em; - flex: 0 0 auto; - margin: 0 6px; - padding: 0 4px; - width: 8px; -} - -.message > .body { - flex: 1 1 100%; - white-space: pre-wrap; - word-wrap: break-word; - margin-top: 4px; -} - -/* The red bubble that shows the number of times a message is repeated */ -.message > .repeats { - -moz-user-select: none; - flex: 0 0 auto; - margin: 2px 6px; - padding: 0 6px; - height: 1.25em; - color: white; - background-color: red; - border-radius: 40px; - font: message-box; - font-size: 0.9em; - font-weight: 600; -} - -.message > .repeats[value="1"] { - display: none; -} - -.message > .location { - -moz-margin-start: 6px; - flex: 0 0 auto; - align-self: flex-start; - width: 10em; - margin-top: 4px; - text-align: end; - color: -moz-nativehyperlinktext; - text-overflow: ellipsis; - text-decoration: none; - overflow: hidden; - white-space: nowrap; -} - -.message > .location:hover, -.message > .location:focus { - text-decoration: underline; -} - -.jsterm-input-container { - background: white; -} - -#output-wrapper { - background: #fff; - color: #000; - direction: ltr; - border-bottom: 1px solid ThreeDShadow; - overflow: auto; -} - -#output-container { - -moz-user-select: text; - -moz-box-flex: 1; - display: flex; - flex-direction: column; - align-items: flex-start; -} - -.filtered-by-type, -.filtered-by-string { - display: none; -} - -.hidden-message { - display: block; - visibility: hidden; - height: 0; - overflow: hidden; -} - -/* WebConsole colored drops */ - -.webconsole-filter-button { - -moz-user-focus: normal; -} - -.webconsole-filter-button[checked] { - color: white !important; -} - -.webconsole-filter-button > .toolbarbutton-menubutton-button:before { - content: ""; - display: inline-block; - height: 8px; - width: 8px; - border-radius: 50%; - margin-left: 5px; - border-width: 1px; - border-style: solid; -} - -/* Network styles */ -.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#444444, #000000); - border-color: #777; -} - -.message[category=network] > .icon { - -moz-border-start: solid #000 6px; -} - -.message[category=network][severity=error] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 0, 16, 8, 8); -} - -.message[category=network] > .body { - display: flex; -} - -.message[category=network] .method { - flex: 0 0 auto; -} - -.message[category=network]:not(.navigation-marker) .url { - flex: 1 1 auto; - /* Make sure the URL is very small initially, let flex change width as needed. */ - width: 100px; - min-width: 5em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.message[category=network] .status { - flex: 0 0 auto; - -moz-margin-start: 6px; -} - -.message[category=network].mixed-content .url { - color: #FF0000; -} - -.message .learn-more-link { - color: #0000EE; - margin: 0 6px; -} - -/* CSS styles */ -.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#2DC3F3, #00B6F0); - border-color: #1BA2CC; -} - -.message[category=cssparser] > .icon { - -moz-border-start: solid #00b6f0 6px; -} - -.message[category=cssparser][severity=error] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 8, 16, 16, 8); -} - -.message[category=cssparser][severity=warn] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 8, 24, 16, 16); -} - -/* JS styles */ -.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#FCB142, #FB9500); - border-color: #E98A00; -} - -.message[category=exception] > .icon { - -moz-border-start: solid #fb9500 6px; -} - -.message[category=exception][severity=error] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 16, 16, 24, 8); -} - -.message[category=exception][severity=warn] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 16, 24, 24, 16); -} - -/* Web Developer styles */ -.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#B9B9B9, #AAAAAA); - border-color: #929292; -} - -.message[category=console] > .icon { - -moz-border-start: solid #cbcbcb 6px; -} - -.message[category=console][severity=error] > .icon, -.message[category=output][severity=error] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 16, 32, 8); -} - -.message[category=console][severity=warn] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 24, 32, 16); -} - -.message[category=console][severity=info] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 32, 32, 24); -} - -/* Input and output styles */ -.message[category=input] > .icon, -.message[category=output] > .icon { - -moz-border-start: solid #808080 6px; -} - -.message[category=input] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 40, 32, 32); -} - -.message[category=output] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 48, 32, 40); -} - -/* JSTerm Styles */ -.jsterm-input-node, -.jsterm-complete-node { - border: none; - padding: 0 0 0 16px; - -moz-appearance: none; -} - -.jsterm-input-node { - background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16) no-repeat; - background-position: 0%; -} - -:-moz-any(.jsterm-input-node, - .jsterm-complete-node) > .textbox-input-box > .textbox-textarea { - overflow-x: hidden; -} - -.jsterm-complete-node > .textbox-input-box > .textbox-textarea { - color: GrayText; -} - -.inlined-variables-view .body { - display: flex; - flex-direction: column; -} -.inlined-variables-view iframe { - display: block; - flex: 1; - margin-bottom: 15px; - -moz-margin-end: 15px; - border: 1px solid #ccc; - border-radius: 4px; - box-shadow: 0 0 12px #dfdfdf; -} - -#webconsole-sidebar > tabs { - height: 0; - border: none; -} - -/* Security styles */ - -.message[category=security] > .icon { - -moz-border-start: solid red 6px; -} - -.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#FF3030, #FF7D7D); - border-color: #D12C2C; -} - -.message[category=security][severity=error] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 32, 16, 40, 8); -} - -.message[category=security][severity=warn] > .icon { - background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 32, 24, 40, 16); -} - -.navigation-marker { - color: #aaa; - background: linear-gradient(#fff, #bbb, #fff) no-repeat left 50%; - background-size: 100% 2px; - margin-top: 6px; - margin-bottom: 6px; - font-size: 0.9em; -} - -.navigation-marker .url { - background: #fff; - -moz-padding-end: 9px; - text-decoration: none; -} diff --git a/src/chrome/appver/26/devtools/webconsole_networkpanel.css b/src/chrome/appver/26/devtools/webconsole_networkpanel.css @@ -1,100 +0,0 @@ -/* 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 { - font-family: sans-serif; - font-size: 11px; - background: #EEE; - color: #000; -} - -#header { - padding: 5px; - overflow-x:auto; - display: block; -} - -h1 { - font-size: 13px; - line-height: 15px; - padding: 3px 10px; - vertical-align: bottom; - margin: 0px; - background: linear-gradient(#BBB, #999); - border-radius: 2px; - text-shadow: #FFF 0px 1px 0px; -} - -h1 .info { - font-size: 11px; - line-height: 15px; - vertical-align: bottom; - float: right; - color: #333; - padding-right: 3px; -} - -.property-table { - padding: 2px 5px; - background: linear-gradient(#FFF, #F8F8F8); - color: #333; - width: 100%; - max-height: 330px; - overflow: auto; - display: block; -} - -.property-name { - font-size: 11px; - font-weight: bold; - padding-right: 4px; - color: #000; - white-space: nowrap; - text-align: right; - vertical-align: top; - width: 10%; -} - -.property-value { - padding-right: 5px; - font-size: 11px; - word-wrap: break-word; - width: 90%; -} - -div.group { - margin-top: 10px; -} - -div.group, -#header { - background: #FFF; - border-color: #E1E1E1; - border-style: solid; - border-width: 1px; - box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.2); - border-radius: 4px 4px 4px 4px; -} - -img#responseImageNode { - box-shadow: rgba(0,0,0,0.2) 0px 3px 3.5px; - max-width: 100%; -} - -#responseImageNodeDiv { - padding: 5px; -} - -#responseBodyFetchLink, #requestBodyFetchLink { - padding: 5px; - margin: 0; - cursor: pointer; - font-weight: bold; - font-size: 1.1em; - text-decoration: underline; -} - -.longStringEllipsis { - margin-left: 0.6em; -} diff --git a/src/chrome/appver/26/devtools/widgets.css b/src/chrome/appver/26/devtools/widgets.css @@ -1,772 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - -/* Generic pane helpers */ - -.generic-toggled-side-pane { - min-width: 50px; - -moz-margin-start: 0px !important; - /* Unfortunately, transitions don't work properly with locale-aware properties, - so both the left and right margins are set via js, while the start margin - is always overridden here. */ -} - -.generic-toggled-side-pane[animated] { - transition: margin 0.25s ease-in-out; -} - -/* BreacrumbsWidget */ - -.breadcrumbs-widget-container { - -moz-margin-end: 3px; - /* A fake 1px-shadow is included in the border-images of the - breadcrumbs-widget-items, to match toolbar-buttons style. - This negative margin compensates the extra row of pixels created - by the shadow.*/ - margin-bottom: -1px; -} - -/* Preloading hack, LTR */ - -.breadcrumbs-widget-container:-moz-locale-dir(ltr)::after { - content: ''; - display: block; - background-image: - url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png"), - url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png"), - url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png"), - url("chrome://browser/skin/devtools/(breadcrumbs/ltr-start-selected-pressed.png"), - url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png"), - url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png"), - url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png"), - url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png"), - url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png"), - url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png"), - url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png"), - url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png"); -} - -/* Preloading hack, RTL */ - -.breadcrumbs-widget-container:-moz-locale-dir(rtl)::after { - content: ''; - display: block; - background-image: - url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png"), - url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png"), - url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png"), - url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png"), - url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png"), - url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png"), - url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png"), - url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png"), - url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png"), - url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png"), - url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png"), - url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png"); -} - -.scrollbutton-up, -.scrollbutton-down { - -moz-appearance: none; - 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); - border: 1px solid hsla(210,8%,5%,.45); - margin: 0 0 1px; -} - -.scrollbutton-up:not([disabled]):active:hover, -.scrollbutton-down:not([disabled]):active:hover { - 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); - border-color: hsla(210,8%,5%,.6); -} - -.scrollbutton-up > .toolbarbutton-icon, -.scrollbutton-down > .toolbarbutton-icon { - -moz-appearance: none; - list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png"); - -moz-image-region: rect(0px,7px,16px,0px); - margin: 0 5px; -} - -.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon, -.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon { - -moz-image-region: rect(0px,14px,16px,7px); -} - -.scrollbutton-up[disabled] > .toolbarbutton-icon, -.scrollbutton-down[disabled] > .toolbarbutton-icon { - opacity: 0.5; -} - -.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl), -.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) { - transform: scaleX(-1); -} - -.breadcrumbs-widget-item { - background: transparent; - -moz-appearance: none; - overflow: hidden; - min-width: 85px; - max-width: 250px; - min-height: 25px; - border-style: solid; - border-width: 1px 13px 2px 13px; - margin: 0 -11px 0 0; - padding: 0 9px; - outline: none; - color: hsl(210,30%,85%); -} - -.breadcrumbs-widget-item:-moz-focusring > label { - border-bottom: 1px dotted hsla(210,30%,85%,0.4); -} - -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag { - color: hsl(208,100%,60%); -} - -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id { - color: hsl(205,100%,70%); -} - -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes { - color: hsl(20,100%,70%); -} - -.breadcrumbs-widget-item-id, -.breadcrumbs-widget-item-classes { - color: #8d99a6; -} - -.breadcrumbs-widget-item-pseudo-classes { - color: hsl(20,100%,85%); -} - -/* Breadcrumbs LTR */ - -.breadcrumbs-widget-item:-moz-locale-dir(ltr) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(ltr) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item[checked]:-moz-locale-dir(ltr) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(ltr) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(ltr) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(ltr) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(ltr) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(ltr) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) { - border-left-width: 0; -} - -.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) { - border-right-width: 0; -} - -/* Breadcrumbs RTL */ - -.breadcrumbs-widget-item:-moz-locale-dir(rtl) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(rtl) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item[checked]:-moz-locale-dir(rtl) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(rtl) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(rtl) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(rtl) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) { - border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch; -} - -.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) { - border-right-width: 0; -} - -.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) { - border-left-width: 0; -} - -/* SideMenuWidget */ - -.side-menu-widget-container[theme="dark"] { - background: url("chrome://browser/skin/devtools/background-noise-toolbar.png"), hsl(208,11%,27%); - color: #fff; -} - -.side-menu-widget-container[theme="light"] { - background: #fff; - color: #000; -} - -/* SideMenuWidget container */ - -.side-menu-widget-container[with-arrows=true]:-moz-locale-dir(ltr) { - box-shadow: inset -1px 0 0 #222426; -} - -.side-menu-widget-container[with-arrows=true]:-moz-locale-dir(rtl) { - box-shadow: inset 1px 0 0 #222426; -} - -.side-menu-widget-container[with-arrows=true] .side-menu-widget-group { - /* To allow visibility of the dark margin shadow. */ - -moz-margin-end: 1px; -} - -.side-menu-widget-container[with-arrows=true] .side-menu-widget-item { - /* To compensate for the arrow image's dark margin. */ - -moz-margin-end: -1px; -} - -/* SideMenuWidget groups */ - -.side-menu-widget-group-title { - padding: 4px; -} - -.side-menu-widget-group-title[theme="dark"] { - background-image: linear-gradient(#1f3e4f, #1b3243); - text-shadow: 0 -1px 0 hsla(210,8%,5%,.45); - box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, - 0 -2px 0 hsla(206,37%,4%,.05) inset, - 0 -1px 1px hsla(206,37%,4%,.1) inset; -} - -.side-menu-widget-group-title[theme="light"] { - background-image: linear-gradient(#fff, #eee); -} - -/* SideMenuWidget items */ - -.side-menu-widget-item[theme="dark"] { - border-top: 1px solid hsla(210,8%,5%,.25); - border-bottom: 1px solid hsla(210,16%,76%,.1); - margin-top: -1px; - margin-bottom: -1px; -} - -.side-menu-widget-item[theme="light"] { - border-top: 1px solid hsla(210,8%,75%,.25); - margin-top: -1px; -} - -.side-menu-widget-item[theme="dark"]:last-of-type { - box-shadow: inset 0 -1px 0 hsla(210,8%,5%,.25); -} - -.side-menu-widget-item[theme="light"]:last-of-type { - box-shadow: inset 0 -1px 0 hsla(210,8%,75%,.25); -} - -.side-menu-widget-item[theme="dark"].selected { - background: linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%)) repeat-x top left !important; - box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15); -} - -.side-menu-widget-item[theme="light"].selected { - /* Nothing here yet */ -} - -.side-menu-widget-item.selected > .side-menu-widget-item-arrow { - background-size: auto, 1px 100%; - background-repeat: no-repeat; -} - -.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { - background-image: url("chrome://browser/skin/devtools/itemArrow-ltr.png"), linear-gradient(to right, #222426, #222426); - background-position: center right, top right; -} - -.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { - background-image: url("chrome://browser/skin/devtools/itemArrow-rtl.png"), linear-gradient(to right, #222426, #222426); - background-position: center left, top left; -} - -/* SideMenuWidget items contents */ - -.side-menu-widget-item-label { - padding: 4px 0px; -} - -.side-menu-widget-item-arrow { - -moz-margin-start: -8px; - width: 8px; -} - -.side-menu-widget-item-other { - background: url("chrome://browser/skin/devtools/background-noise-toolbar.png"), hsla(208,11%,27%, 0.65); -} - -.side-menu-widget-item-other.selected { - background: url("chrome://browser/skin/devtools/background-noise-toolbar.png"), hsla(208,11%,27%, 0.15); - box-shadow: inset 0 1px 0 hsla(210,40%,83%,.07), - inset 0 -1px 0 hsla(210,40%,83%,.07); -} - -.side-menu-widget-item-other:first-of-type { - border-top-left-radius: 4px; -} - -.side-menu-widget-item-other > label { - color: #f5f7fa; - text-shadow: 0 1px 1px #111; -} - -/* SideMenuWidget checkboxes */ - -.side-menu-widget-group-checkbox { - margin: 0; - -moz-margin-end: 4px; -} - -.side-menu-widget-item-checkbox { - margin: 0; - -moz-margin-start: 4px; - -moz-margin-end: -4px; -} - -/* SideMenuWidget misc */ - -.side-menu-widget-empty-notice-container { - padding: 12px; -} - -.side-menu-widget-empty-notice-container[theme="dark"] { - background: url("chrome://browser/skin/devtools/background-noise-toolbar.png"), hsl(208,11%,27%); - font-weight: 600; - color: #fff; -} - -.side-menu-widget-empty-notice-container[theme="light"] { - background: #fff; - padding: 4px 8px; - color: GrayText; -} - -/* VariablesView */ - -.variables-view-container { - background: #fff; -} - -.variables-view-empty-notice { - color: GrayText; - padding: 2px; -} - -.variables-view-scope > .title { - color: #fff; -} - -.variables-view-scope:focus > .title { - background: Highlight; - color: HighlightText; -} - -.variables-view-scope > .variables-view-element-details:not(:empty) { - -moz-margin-start: 2px; - -moz-margin-end: 1px; -} - -/* Generic traits applied to both variables and properties */ - -.variable-or-property { - transition: background 1s ease-in-out; - color: #000; -} - -.variable-or-property[changed] { - background: rgba(255,255,0,0.65); - transition-duration: 0.4s; -} - -.variable-or-property > .title > .value { - -moz-padding-start: 6px; - -moz-padding-end: 4px; -} - -.variable-or-property:focus > .title { - background: Highlight; - color: HighlightText; - border-radius: 4px; -} - -.variable-or-property[editable] > .title > .value { - cursor: text; -} - -.variable-or-property:not([non-header]) > .variables-view-element-details { - -moz-margin-start: 10px; -} - -/* Custom variables and properties traits */ - -.variables-view-variable { - -moz-margin-start: 1px; - -moz-margin-end: 1px; - border-bottom: 1px solid #eee; -} - -.variables-view-variable > .title > .name { - font-weight: 600; -} - -.variables-view-variable:not(:focus) > .title > .name { - color: #048; -} - -.variables-view-property:not(:focus) > .title > .name { - color: #881090; -} - -/* Token value colors */ - -.variable-or-property:not(:focus) > .title > .token-undefined { - color: #bbb; -} - -.variable-or-property:not(:focus) > .title > .token-null { - color: #999; -} - -.variable-or-property:not(:focus) > .title > .token-boolean { - color: #10c; -} - -.variable-or-property:not(:focus) > .title > .token-number { - color: #c00; -} - -.variable-or-property:not(:focus) > .title > .token-string { - color: #282; -} - -.variable-or-property:not(:focus) > .title > .token-other { - color: #333; -} - -/* Custom configurable/enumerable/writable or frozen/sealed/extensible - * variables and properties */ - -.variable-or-property[non-enumerable]:not([self]):not([exception]):not([return]):not([scope]) > .title > .name { - opacity: 0.5; -} - -.variable-or-property[non-configurable] > .title > .name { - border-bottom: 1px dashed #99f; -} - -.variable-or-property[non-writable] > .title > .name { - border-bottom: 1px dashed #f99; -} - -.variable-or-property-non-writable-icon { - background: url("chrome://browser/skin/identity-icons-https.png") no-repeat; - width: 16px; - height: 16px; - opacity: 0.5; -} - -@media (min-resolution: 2dppx) { - .variable-or-property-non-writable-icon { - background-image: url("chrome://browser/skin/identity-icons-https@2x.png"); - background-size: 32px; - } -} - -.variable-or-property-frozen-label, -.variable-or-property-sealed-label, -.variable-or-property-non-extensible-label { - -moz-padding-end: 4px; -} - -.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label, -.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label, -.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label { - color: #666; -} - -/* Special variables and properties */ - -.variable-or-property[safe-getter] > .title > .name { - border-bottom: 1px dashed #8b0; -} - -.variable-or-property[exception]:not(:focus) > .title > .name { - color: #a00; - text-shadow: 0 0 8px #fcc; -} - -.variable-or-property[return]:not(:focus) > .title > .name { - color: #0a0; - text-shadow: 0 0 8px #cfc; -} - -.variable-or-property[scope]:not(:focus) > .title > .name { - color: #00a; - text-shadow: 0 0 8px #ccf; -} - -/* Aligned values */ - -.variables-view-container[aligned-values] .title > .separator { - -moz-box-flex: 1; -} - -.variables-view-container[aligned-values] .title > .value { - width: 70vw; -} - -.variables-view-container[aligned-values] .title > .element-value-input { - width: calc(70vw - 10px); -} - -/* Actions first */ - -.variables-view-container[actions-first] .variables-view-delete { - -moz-box-ordinal-group: 0; -} - -/* Variables and properties tooltips */ - -.variable-or-property > tooltip > label { - margin: 0 2px 0 2px; -} - -.variable-or-property[non-enumerable] > tooltip > label[value=enumerable], -.variable-or-property[non-configurable] > tooltip > label[value=configurable], -.variable-or-property[non-writable] > tooltip > label[value=writable], -.variable-or-property[non-extensible] > tooltip > label[value=extensible] { - color: #800; - text-decoration: line-through; -} - -.variable-or-property[safe-getter] > tooltip > label[value=WebIDL] { - -moz-padding-start: 4px; - -moz-border-start: 1px dotted #000; - color: #080; -} - -/* Variables and properties editing */ - -.variables-view-delete { - list-style-image: url("chrome://browser/skin/devtools/vview-delete.png"); - -moz-image-region: rect(0,16px,16px,0); -} - -.variables-view-delete:hover { - -moz-image-region: rect(0,32px,16px,16px); -} - -.variables-view-delete:active { - -moz-image-region: rect(0,48px,16px,32px); -} - -.variables-view-delete > .toolbarbutton-text { - display: none; -} - -.variables-view-edit { - background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat; - width: 20px; - height: 16px; - cursor: pointer; -} - -.variables-view-throbber { - background: url("chrome://global/skin/icons/loading_16.png") center no-repeat; - width: 16px; - height: 16px; -} - -.element-value-input { - -moz-margin-start: 4px !important; - -moz-margin-end: 2px !important; -} - -.element-name-input { - -moz-margin-start: -2px !important; - -moz-margin-end: 2px !important; - color: #048; - font-weight: 600; -} - -.element-value-input, -.element-name-input { - border: 1px solid #999 !important; - box-shadow: 1px 2px 4px #aaa; -} - -/* Variables and properties searching */ - -.variables-view-searchinput { - min-height: 24px; -} - -.variable-or-property[non-match] { - border: none; - margin: 0; -} - -/* Expand/collapse arrow */ - -.arrow { - -moz-appearance: treetwisty; -} - -.arrow[open] { - -moz-appearance: treetwistyopen; -} - -.arrow[invisible] { - visibility: hidden; -} - -/* 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/. */ - -/* Manifest Editor overrides */ - -.variables-view-container.manifest-editor { - background-color: #F5F5F5; - padding: 20px 13px; -} - -.manifest-editor .variable-or-property:focus > .title { - background-color: #EDEDED; - color: #000; - border-radius: 4px; -} - -.manifest-editor .variables-view-property > .title > .name { - color: #27406A; -} - -.manifest-editor .variable-or-property > .title > label { - font-family: monospace; -} - -.manifest-editor .variable-or-property > .title > .token-string { - color: #54BC6A; - font-weight: bold; -} - -.manifest-editor .variable-or-property > .title > .token-boolean, -.manifest-editor .variable-or-property > .title > .token-number { - color: #009BD4; - font-weight: bold; -} - -.manifest-editor .variable-or-property > .title > .token-undefined { - color: #bbb; -} - -.manifest-editor .variable-or-property > .title > .token-null { - color: #999; -} - -.manifest-editor .variable-or-property > .title > .token-other { - color: #333; -} - -.manifest-editor .variables-view-variable { - border-bottom: none; -} - -.manifest-editor .variables-view-delete, -.manifest-editor .variables-view-delete:hover, -.manifest-editor .variables-view-delete:active { - list-style-image: none; - -moz-image-region: initial; -} - -.manifest-editor .variables-view-delete::before { - width: 12px; - height: 12px; - content: ""; - display: inline-block; - background-image: url("chrome://browser/skin/devtools/app-manager/remove.svg"); - background-size: 12px auto; -} diff --git a/src/chrome/appver/26/downloads.css b/src/chrome/appver/26/downloads.css @@ -1,4 +0,0 @@ -#downloadsPanel[hasdownloads] > #downloadsFooter { - background: rgb(75,75,75); - border-top: 1px solid rgb(75,75,75); -} -\ No newline at end of file diff --git a/src/chrome/appver/27/browser.css b/src/chrome/appver/27/browser.css @@ -1,172 +0,0 @@ -/* 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://browser/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://browser/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://browser/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://browser/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://browser/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://browser/skin/devtools/commandline-icon@2x.png"); - } -} -\ No newline at end of file diff --git a/src/chrome/appver/27/devtools/app-manager/device.css b/src/chrome/appver/27/devtools/app-manager/device.css @@ -1,410 +0,0 @@ -/* 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/. */ - -/***************** GENERAL *****************/ - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html, body { - height: 100%; -} - -body { - font-size: 0.9rem; - color: #333; - background-color: rgb(225, 225, 225); - font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; - display: flex; - flex-direction: column; -} - -template { - display: none; -} - -h1 { - font-size: 20px; -} - -#content { - display: flex; - flex-direction: row; - height: 100%; - overflow: hidden; -} - -#detail { - background-image: url("chrome://browser/skin/devtools/noise.png"); - display: flex; - flex-grow: 1; - z-index: 1; - overflow: hidden; -} - -#meta { - background-size: 100%; - padding-top: 50px; -} - -#connection-footer { - border-width: 0; - height: 50px; - min-height: 50px; -} - - -#root-actor-debug { - background: white; -} - -/***************** APP BUTTONS *****************/ - - - -.app-buttons { - display: block; - margin-left: 20px; - color: #BBB; -} - -button { - margin: 0; - font-size: 11px; - border: 1px solid #CCC; - padding: 5px 15px; - cursor: pointer; - background: rgba(255,255,255,0.4); - text-transform: uppercase; - border-radius: 3px; - border-width: 1px; -} - -.app-buttons > button { - display: none; -} - -.app-buttons > button[disabled] { - background-color: transparent; - opacity: 0.4; - pointer-events: none; -} - -.app[running="false"] > .app-buttons > .button-start, -.app[running="true"] > .app-buttons > .button-stop, -.app[running="true"] > .app-buttons > .button-debug { - display: inline-block; -} - -.button-debug { - color: #3498DB; -} - -.button-debug:hover { - background-color: #3498DB; - color: #FFF; -} - -.button-debug[disabled] { - color: #3498DB; -} - -.button-start { - color: #18BC9C -} - -.button-start:hover { - background-color: #18BC9C; - color: #FFF; -} - -.button-start[disabled] { - color: #18BC9C -} - -.button-stop { - color: #E74C3C; -} - -.button-stop:hover { - background-color: #E74C3C; - color: #FFF; -} - -.button-stop[disabled] { - color: #E74C3C; -} - - - -/***************** PERMISSIONS *****************/ - - - - -.permission-table { - display: flex; - flex-direction: column; - height: 100%; -} - -.permission-table-body { - overflow: auto; - display: flex; - flex-grow: 1; - flex-direction: column; -} - -.permission-table-header, -.permission-table-footer { - display: flex; - background: #FFF; - border-top: 1px solid #CCC; - z-index: 2; - flex-shrink: 0; -} - -.permission-table-header > div, -.permission-table-footer > div { - z-index: 2; - flex-grow: 1; - background: linear-gradient(to bottom, #49535C, #394148); - box-shadow: 0px 1px 3px rgba(12, 20, 30, 0.5), inset 0 1px 0px rgba(255,255,255,0.1); - color: #9FA6AD; - text-shadow: 0px 1px 1px rgba(0,0,0,0.6); - border: 0; - margin: auto 0; - padding: 5px; - text-align: center; - background: transparent; - box-shadow: none; - text-shadow: none; -} - -.permission-table-header > div { - flex-basis: 20%; -} - -.permission-table-header > div:first-child { - text-align: start; - padding-left: 10px; - flex-basis: 30%; -} - -.permission-table-header { - border: 0; - border-bottom: 1px solid #CCC; - box-shadow: 0 1px 4px rgba(0,0,0,0.3); -} - -.permission-table-footer { - box-shadow: 0 -1px 4px rgba(0,0,0,0.3); -} - -.permission { - display: flex; - flex-grow: 1; -} - -.permission:nth-child(odd) { - background: #E4E4E4; -} - -.permission:hover { - background: #EEE; -} - -.permission > div { - flex-grow: 1; - flex-basis: 20%; - text-align: center; - padding: 3px; - border-right: 1px solid #CCC; - border-bottom: 1px solid #CCC; -} - -.permission > div:first-child { - text-align: start; - padding: 3px 10px; - flex-basis: 30%; - font-weight: bold; -} - -.permission > div[permission="1"]:before, .allow-label:after { - color: #98CF39; - content: ' \2713'; -} - -.permission > div[permission="2"]:before, .deny-label:after { - color: #CC4908; - content: ' \2715'; -} - -.permission > div[permission="3"]:before, .prompt-label:after { - color: #009EED; - content: ' !'; -} - - - - -/***************** SIDEBAR *****************/ - - - - -#sidebar { - background: #EEE; - position: relative; - box-shadow: 0 1px 6px rgba(0,0,0,0.3); - display: flex; - flex-direction: column; - flex: 0 0 350px; - overflow: hidden; - z-index: 100; -} - -.sidebar-item { - background-color: #F6F6F6; - box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); - color: #666; - line-height: 120%; - cursor: pointer; - display: flex; - padding: 15px 10px; - display: block; - text-align: start; - flex-grow: 1; -} - -.sidebar-item > * { - flex-shrink: 0; -} - -.sidebar-item:hover { - background-color: #EEE; -} - -.sidebar-item.selected { - background-color: #46AFE3; - color: #FFF; -} - -.help { - float: right; - padding: 0 5px; -} - -/***************** HEADER *****************/ - -header { - padding-top: 140px; - background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7)); - color: #FFF; - text-shadow: 0 1px 2px rgba(0,0,0,0.8); - padding: 10px; -} - - - -/***************** APPS & BROWSER TABS *****************/ - - - - -.apps, .browser-tabs { - display: flex; - flex-direction: column; - overflow: auto; -} - -.browser-tabs.hidden { - display: none; -} - -.app, .browser-tab { - display: flex; - align-items: center; - order: 1; -} - -.app-name, .browser-tab-details { - flex-grow: 1; - font-weight: bold; -} - -.app, .browser-tab { - padding: 10px 20px; - border-bottom: 1px solid #CCC; -} - -.app:hover, .browser-tab:hover { - background-color: #EFEFEF; -} - -.app-icon { - width: 32px; - height: 32px; - margin-right: 10px; -} - -.browser-tab-url-subheading { - font-size: 10px; -} - - - -/***************** NOT CONNECTED *****************/ - - - -body:not(.notconnected) > #notConnectedMessage, -body.notconnected > #content { - display: none; -} - -#notConnectedMessage { - flex-grow: 1; - flex-direction: column; - margin: 50px auto; -} - -#notConnectedMessage > span { - padding: 20px; - border: 1px solid #CCC; - border-radius: 5px; -} - -#notConnectedMessage > span:before { - content: ''; - background: url("chrome://browser/skin/devtools/error.svg") no-repeat; - background-size: 18px; - height: 24px; - width: 24px; - position: relative; - top: 10px; - display: inline-block; -} - - - -/***************** TABS *****************/ - -#tabs { - flex-grow: 1; - overflow: auto; -} - -.tabpanel:not(.selected) { - display: none; -} - -#tabs-headers { - flex-shrink: 0; - display: flex; - flex-direction: column; -} diff --git a/src/chrome/appver/27/devtools/app-manager/help.css b/src/chrome/appver/27/devtools/app-manager/help.css @@ -1,40 +0,0 @@ -/* 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 { - margin: 0; - height: 100%; -} - -body { - color: #555; - font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; - overflow: hidden; - max-width: 600px; - margin: auto; - padding: 20px 0; - background-color: #FFF; -} - -button { - border: 1px solid #CCC; - padding: 5px 15px; - cursor: pointer; - background: rgba(255,255,255,0.4); - text-transform: uppercase; - color: #3498DB; -} - -button:hover { - background-color: #3498DB; - color: #FFF; -} - -a, a:visited { - color: rgb(39,109,163); -} - -#close-button { - float: right; -} diff --git a/src/chrome/appver/27/devtools/app-manager/index.css b/src/chrome/appver/27/devtools/app-manager/index.css @@ -1,103 +0,0 @@ -/* 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/. */ - -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; -} - -#tabs { - box-shadow: inset -4px 0 0 rgba(0,0,0,0.3); - background: #252C33; -} - -#toolbox-tabs { - overflow-y: auto; -} - -.button { - width: 80px; - height: 85px; - padding-bottom: 5px; - -moz-appearance: none; - border: none; - border-bottom: 1px solid #121214; - background-color: transparent; - color: #B5B8BB; - cursor: pointer; - text-align: center; - -moz-box-align: end; - font-size: 10px; - text-shadow: 0 1px 0 #333; - color: #9FA6AD; -} - -.button:first-child { - border-top: none; -} - -.button[selected] { - box-shadow: inset -4px 0 0 rgba(0,0,0,0.3), inset 2px 0 0 #DEFFFF, inset 3px 0 0 #8DC7E8, inset 4px 0 1px #1D6496; - color: #DCE8F3; - background-color: #1A4766; - border-color: #191B1E; -} - -.button::-moz-focus-inner { - border-width: 0; -} - -.panel { - border-width: 0; -} - -.panel:not([selected="true"]) { - display: none; -} - -.button.toolbox { - background-repeat: no-repeat; - background-position: center 15px; - background-size: 40px 40px; -} - -.projects-button { - background: url('chrome://browser/skin/devtools/app-manager/index-icons.svg') no-repeat; - background-position: left -5px; -} - -.projects-button[selected] { - background-position: right -5px; -} - -.device-button { - background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg'); - background-position: left -85px, top left; - background-repeat: no-repeat, no-repeat; - background-size: 160px 240px, 2px 80px; -} - -.device-button[selected] { - background-position: right -85px, top left; -} - -.help-button { - border-bottom: 0; - background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg'); - background-position: left -165px, top left; - background-repeat: no-repeat, no-repeat; - background-size: 160px 240px, 2px 80px; -} - -.help-button[selected] { - background-position: right -165px, top left; -} - -#connection-footer { - border-width: 0; - height: 50px; - min-height: 50px; -} diff --git a/src/chrome/appver/27/devtools/app-manager/projects.css b/src/chrome/appver/27/devtools/app-manager/projects.css @@ -1,556 +0,0 @@ -/* 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/. */ - -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-size: 0.9rem; -} - -html, body { - height: 100%; -} - -template { - display: none; -} - -body { - display: flex; - color: #333; - background-color: white; - font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; - overflow: hidden; -} - -body:not(.connected) button.device-action { - display: none; -} - -strong { - color: #111; -} - - -/********* SIDEBAR ***********/ - - - -#sidebar { - display: flex; - flex-direction: column; - flex: 0 0 350px; - overflow: hidden; - z-index: 100; - background-color: #E9EAEB; - position: relative; - box-shadow: 3px 0 1.5px rgba(0,0,0,0.08); -} - -#project-list { - height: 100%; - overflow: auto; -} - -#project-list:not([projects-count="0"]) > #no-project { - display: none; -} - -#no-project { - padding: 100px 20px 0; - font-weight: bold; - color: #BBB; - font-size: 22px; -} - - -/********* PROJECT MENU ***********/ - - -.project-item { - padding: 10px 0; - background-color: #F0F1F2; - box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); - color: #666; - line-height: 120%; - cursor: pointer; - display: flex; - position: relative; -} - -.project-item:hover { - background-color: #EEE; -} - -.project-item > * { - flex-shrink: 0; -} - -.project-item.selected { - background-color: #46AFE3; -} - -.project-item.selected strong { - color: #FFF; -} - -.project-item.selected p, -.project-item.selected span { - color: #C1DCF0; -} - -.button-remove { - background-image: url("chrome://browser/skin/devtools/remove.svg"); - background-size: 20px; - width: 20px; - height: 20px; - position: absolute; - right: 5px; - bottom: 5px; - visibility: hidden; - opacity: 0.5; -} - -.project-item:hover .button-remove { - visibility: visible; -} - -.project-item-status { - width: 6px; - margin: -10px 0; - border-right: 1px solid rgba(0,0,0,0.1); - box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 0 0 rgba(0,0,0,0.2); -} - -.project-item-status[status="valid"] { - background-color: #70BF53; -} - -.project-item-status[status~="warning"] { - background-color: #F2B33F; -} - -.project-item-status[status~="error"] { - background-color: #ED4C62; -} - -.project-item-icon { - width: 32px; - height: 32px; - margin: 0 10px; -} - -.project-item-meta { - flex-grow: 1; - flex-shrink: 1 !important; -} - -.project-item-type { - font-size: 10px; - line-height: 20px; - float: right; - padding-right: 10px; - color: #7597B9; - text-transform: uppercase; -} - -.project-item-description { - color: #888; - font-size: 90%; -} - -/********* ADD PROJECT ***********/ - -#new-packaged-project { - box-shadow: 0 -1px 5px rgba(0,0,0,0.1); - background-position: calc(100% - 10px) 10px; -} - -#new-packaged-project, -#new-hosted-project { - background-color: #EEE; - border: none; - border-top: 1px solid #DDD; - padding: 10px; - font-weight: bold; -} - -#new-packaged-project:hover, -#new-hosted-project:hover { - background-color: #DDD; -} - -#new-hosted-project-wrapper { - display: flex; - align-items: center; -} - -#new-packaged-project, -#new-hosted-project-click { - background-image: url("chrome://browser/skin/devtools/plus.svg"); - background-size: 20px; - background-repeat: no-repeat; - cursor: pointer; -} - -#new-hosted-project-click { - background-position: top right; - width: 20px; - height: 20px; - margin-left: 5px; -} - -#url-input { - flex-grow: 1; - width: 90%; - box-shadow: none; - border-radius: 3px; - border: 1px solid #DDD; - padding: 4px; - margin-top: 4px; -} - - -/********* LENSE ***********/ - - -#lense { - height: 100%; - flex-grow: 1; - display: flex; - z-index: 1; - overflow: hidden; - background-color: rgb(225, 225, 225); - background-image: url("chrome://browser/skin/devtools/rocket.svg"), url("chrome://browser/skin/devtools/noise.png"); - background-repeat: no-repeat, repeat; - background-size: 35%, auto; - background-position: center center, top left; -} - -#lense > div { - display: flex; - flex-grow: 1; - flex-direction: column; -} - - -/********* PROJECT ***********/ - - -.project-details { - background-color: rgb(225, 225, 225); - padding: 10px; - line-height: 160%; - display: flex; - flex-direction: column; -} - -.project-metadata { - flex-grow: 1; -} - -.project-status { - display: flex; -} - -.project-title { - flex-direction: row; - display: flex; - align-items: flex-start; - padding-bottom: 10px; - border-bottom: 1px solid #CCC; - margin-bottom: 10px; -} - -.project-title > h1 { - flex-grow: 1; - font-size: 24px; -} - -.project-location { - color: gray; - font-size: 10px; - cursor: pointer; - font-family: monospace; -} - -.project-location:hover { - text-decoration: underline; -} - -.project-header { - display: flex; - border-bottom: 1px solid #CCC; - margin: 10px 20px 10px 20px; - padding-bottom: 10px; -} - -.project-icon { - flex-shrink: 0; - width: 64px; - height: 64px; - margin-right: 10px; -} - -.project-location { - font-size: 11px; - color: #999; -} - -.project-description { - font-style: italic; - color: #333; -} - -.project-status > p { - text-transform: uppercase; - font-size: 10px; - padding: 2px 10px; - border-radius: 2px; - margin-top: 6px; - line-height: 10px; -} - -.project-validation { - color: #FFF; - display: none; - margin-left: 10px; -} - -.project-validation.valid { - background-color: #70BF53; -} - -.project-validation.warning { - background-color: #F2B33F; -} - -.project-validation.error { - background-color: #ED4C62; -} - -[status="valid"] > .project-validation.valid, -[status~="warning"] > .project-validation.warning, -[status~="error"] > .project-validation.error { - display: inline; -} - -.project-type { - display: none; - margin-left: 10px; -} -[type="hosted"] > .project-type.hosted, -[type="packaged"] > .project-type.packaged { - display: inline; -} - -/********* PROJECT BUTTONS ***********/ - - - -.project-buttons { - display: flex; - margin-left: 20px; - color: #BBB; -} - -.project-buttons > button { - margin: 0; - font-size: 11px; - border: 1px solid #CCC; - border-left-width: 0; - padding: 5px 15px; - cursor: pointer; - background: rgba(255,255,255,0.4); - text-transform: uppercase; -} - -.project-buttons > button[disabled] { - background-color: transparent; - opacity: 0.4; - pointer-events: none; -} - -.project-buttons > button:first-child { - border-left-width: 1px; -} - -.project-button-debug { - color: #3498DB; -} - -.project-button-debug:hover { - background-color: #3498DB; - color: #FFF; -} - -.project-button-debug[disabled] { - color: #3498DB; -} - -.project-button-update { - color: #777; -} - -.project-button-update:hover { - background-color: #777; - color: #FFF; -} - -.project-button-update[disabled] { - color: #777; -} - - - -/********* ERRORS AND WARNINGS ***********/ - -.project-warnings, -.project-errors, -.project-item-warnings, -.project-item-errors { - display: none; -} - -[status~="warning"] .project-item-warnings, -[status~="error"] .project-item-errors { - display: inline-block; -} - -[status~="warning"] > .project-warnings, -[status~="error"] > .project-errors { - display: block; -} - -.project-warnings, -.project-errors { - margin: 20px 20px 0; - padding: 10px 10px; - font-family: monospace; -} - -.project-warnings { - border-left: 3px solid #ECB51E; - background-color: rgba(236, 181, 20, 0.1); -} - -.project-errors { - border-left: 3px solid #ED4C62; - background-color: rgba(237,76,98,0.1); -} - -.project-item-warnings { - background-image: url("chrome://browser/skin/devtools/warning.svg"); -} - -.project-item-errors { - background-image: url("chrome://browser/skin/devtools/error.svg"); - color: rgb(227, 79, 34); -} - -.project-item-warnings, -.project-item-errors { - background-repeat: no-repeat; - background-size: 12px; - background-position: left center; - margin-top: 6px; -} - -.project-item-warnings > span, -.project-item-errors > span { - font-size: 11px; - padding-left: 16px; - font-weight: bold; -} - - -/********* MANIFEST EDITOR ***********/ - -.manifest-editor { - display: flex; - flex-direction: column; - flex-grow: 1; - background-color: #E1E1E1; -} - -.manifest-header { - display: flex; - flex-direction: row; -} - -.manifest-header > h2 { - font-size: 18px; - margin: 1em 15px 1em 30px; - display: none; -} - -.manifest-header > button { - margin: 18px 0; - font-size: 11px; - border: 1px solid #CCC; - border-right-width: 0; - padding: 2px; - cursor: pointer; - background: rgba(255,255,255,0.4); - text-transform: uppercase; - display: none; -} - -.manifest-header > button[disabled] { - background-color: transparent; - opacity: 0.4; - pointer-events: none; -} - -.manifest-header > button:last-child { - border-right-width: 1px; -} - -[type="packaged"] > .editable { - display: block; -} - -[type="hosted"] > .viewable { - display: block; -} - -.manifest-button-save { - color: #777; -} - -.manifest-button-save:hover { - background-color: #777; - color: #FFF; -} - -.manifest-button-save[disabled] { - color: #777; -} - -.variables-view { - flex-grow: 1; - border: 0; - border-top: 5px solid #C9C9C9; -} - -/* Bug 925921: Remove when the manifest editor is always on */ - -.manifest-editor { - display: none; -} - -.project-details { - flex-grow: 1; -} - -#lense[manifest-editable] .manifest-editor { - display: flex; -} - -#lense[manifest-editable] .project-details { - flex-grow: 0; -} - -/* End blocks to remove */ diff --git a/src/chrome/appver/27/devtools/computedview.css b/src/chrome/appver/27/devtools/computedview.css @@ -1,208 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - -/* From content */ - -* { - box-sizing: border-box; -} - -:root { - height: 100%; -} - -body { - margin: 0; - display : flex; - flex-direction: column; - height: 100%; -} - -#propertyContainer { - -moz-user-select: text; - overflow: auto; - min-height: 0; - flex: 1; -} - -.row-striped { - background: var(--theme-body-background); -} - -.property-view-hidden, -.property-content-hidden { - display: none; -} - -.property-view { - clear: both; - padding: 2px 0 2px 17px; -} - -.property-view > * { - display: inline-block; - vertical-align: middle; -} - -.property-name { - /* -12px is so the expander triangle isn't pushed up above the property */ - width: calc(100% - 12px); - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - outline: 0; -} - -.property-value, .other-property-value { - background-image: url("chrome://browser/skin/devtools/arrow-e.png"); - background-repeat: no-repeat; - background-size: 5px 8px; -} - -@media (min-resolution: 2dppx) { - .property-value, .other-property-value { - background-image: url("chrome://browser/skin/devtools/arrow-e@2x.png"); - } -} - -.property-value { - width: 100%; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - background-position: 2px center; - padding-left: 10px; - outline: 0; -} - -.other-property-value { - background-position: left center; - padding-left: 8px; -} - -@media (min-width: 400px) { - .property-name { - width: 200px; - } - .property-value { - /* -212px is accounting for the 200px property-name and the 12px triangle */ - width: calc(100% - 212px); - } -} - -.property-content { - padding-left: 17px; -} - -/* From skin */ -.expander { - visibility: hidden; - margin-left: -12px!important; -} - -.expandable { - visibility: visible; -} - -.match { - visibility: hidden; -} - -.matchedselectors > p { - clear: both; - margin: 0 2px 0 0; - padding: 2px; - overflow-x: hidden; - border-style: dotted; - border-color: rgba(128,128,128,0.4); - border-width: 1px 1px 0 1px; -} - -.matchedselectors > p:last-of-type { - border-bottom-width: 1px; -} - -/* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */ -.rule-text { - direction: ltr; -} - -.matched { - text-decoration: line-through; -} - -.parentmatch { - opacity: 0.5; -} - -#noResults { - font-size: 110%; - margin: 5px; - text-align: center; -} - -.onlyuserstyles { - cursor: pointer; -} - -.legendKey { - margin: 0 5px; -} - -#root .devtools-toolbar { - width: 100%; - border-bottom-width: 0; -} - -.link { - padding: 0 3px; - cursor: pointer; - float: right; -} - -/* Take away these two :visited rules to get a core dumper */ -/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */ - -.link, -.link:visited { - color: #0091ff; -} - -.link, -.helplink, -.link:visited, -.helplink:visited { - text-decoration: none; -} - -.link:hover { - text-decoration: underline; -} - -.computedview-colorswatch { - border-radius: 50%; - width: 1em; - height: 1em; - vertical-align: text-top; - -moz-margin-end: 5px; - display: inline-block; - position: relative; -} - -.computedview-colorswatch::before { - content: ''; - background-color: #eee; - background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), - linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); - background-size: 12px 12px; - background-position: 0 0, 6px 6px; - position: absolute; - border-radius: 50%; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: -1; -} diff --git a/src/chrome/appver/27/devtools/dark-theme.css b/src/chrome/appver/27/devtools/dark-theme.css @@ -1,1352 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - -/* According to: - * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17 - */ -:root { - --theme-body-background: #14171a; - --theme-sidebar-background: #181d20; - --theme-contrast-background: #b28025; - - --theme-tab-toolbar-background: #252c33; - --theme-toolbar-background: #343c45; - --theme-selection-background: #1d4f73; - --theme-selection-color: #f5f7fa; - --theme-selection-background-semitransparent: rgba(29, 79, 115, .5); - --theme-splitter-color: black; - --theme-comment: #5c6773; - - --theme-body-color: #a9bacb; - --theme-body-color-alt: #b6babf; - --theme-content-color1: #a9bacb; - --theme-content-color2: #8fa1b2; - --theme-content-color3: #667380; - - --theme-highlight-green: #5c9966; - --theme-highlight-blue: #3689b2; - --theme-highlight-bluegrey: #5e88b0; - --theme-highlight-purple: #6270b2; - --theme-highlight-lightorange: #a18650; - --theme-highlight-orange: #b26b47; - --theme-highlight-red: #bf5656; - --theme-highlight-pink: #a673bf; -} - -.theme-body { - background: var(--theme-body-background); - color: var(--theme-body-color); -} - -.theme-sidebar { - background: var(--theme-sidebar-background); - color: var(--theme-content-color1); -} - -::-moz-selection { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.theme-bg-darker { - background-color: var(--theme-selection-background-semitransparent); -} - -.theme-selected, -.CodeMirror-hint-active { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.theme-bg-contrast, -.variable-or-property:not([overridden])[changed] { - background: var(--theme-contrast-background); -} - -.theme-link, -.cm-s-mozilla .cm-link { - color: var(--theme-highlight-blue); -} - -/* - * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion - * failures in debug builds. - */ -.theme-link:visited, -.cm-s-mozilla .cm-link:visited, -.CodeMirror-Tern-type { - color: var(--theme-highlight-blue); -} - - -.theme-comment, -.cm-s-mozilla .cm-meta, -.cm-s-mozilla .cm-hr, -.cm-s-mozilla .cm-comment, -.variable-or-property .token-undefined, -.variable-or-property .token-null, -.CodeMirror-Tern-completion-unknown:before { - color: var(--theme-comment); -} - -.theme-gutter { - background-color: #0f171f; - color: var(--theme-content-color3); - border-color: #303b47; -} - -.theme-separator { /* grey */ - border-color: #303b47; -} - -.theme-fg-color1, -.cm-s-mozilla .cm-number, -.variable-or-property .token-number, -.variable-or-property[return] > .title > .name, -.variable-or-property[scope] > .title > .name { - color: var(--theme-highlight-green); -} - -.CodeMirror-Tern-completion-number:before { - background-color: #5c9966; -} - -.theme-fg-color2, -.cm-s-mozilla .cm-attribute, -.cm-s-mozilla .cm-variable, -.cm-s-mozilla .cm-def, -.cm-s-mozilla .cm-property, -.cm-s-mozilla .cm-qualifier, -.variables-view-variable > .title > .name { - color: var(--theme-highlight-blue); -} - -.CodeMirror-Tern-completion-object:before { - background-color: #3689b2; -} - -.cm-s-mozilla .cm-unused-line { - text-decoration: line-through; - text-decoration-color: #5f88b0; -} - -.cm-s-mozilla .cm-executed-line { - background-color: #133c26; -} - -.theme-fg-color3, -.cm-s-mozilla .cm-builtin, -.cm-s-mozilla .cm-tag, -.cm-s-mozilla .cm-header, -.cm-s-mozilla .cm-bracket, -.variables-view-property > .title > .name { - color: var(--theme-highlight-pink); -} - -.CodeMirror-Tern-completion-array:before { - background-color: var(--theme-highlight-bluegrey); -} - -.theme-fg-color4 { - color: var(--theme-highlight-purple); -} - -.theme-fg-color5, -.cm-s-mozilla .cm-keyword { - color: var(--theme-highlight-lightorange); -} - -.theme-fg-color6, -.cm-s-mozilla .cm-string, -.cm-s-mozilla .cm-string-2, -.variable-or-property .token-string, -.CodeMirror-Tern-farg { - color: var(--theme-highlight-orange); -} - -.CodeMirror-Tern-completion-string:before, -.CodeMirror-Tern-completion-fn:before { - background-color: #b26b47; -} - -.theme-fg-color7, -.cm-s-mozilla .cm-atom, -.cm-s-mozilla .cm-quote, -.cm-s-mozilla .cm-error, -.variable-or-property .token-boolean, -.variable-or-property .token-domnode, -.variable-or-property[exception] > .title > .name { - color: var(--theme-highlight-red); -} - -.CodeMirror-Tern-completion-bool:before { - background-color: #bf5656; -} - -.variable-or-property .token-domnode { - font-weight: bold; -} - -.theme-toolbar, -.devtools-toolbar, -.devtools-sidebar-tabs tabs, -.devtools-sidebar-alltabs, -.CodeMirror-dialog { /* General toolbar styling */ - color: var(--theme-body-color-alt); - background-color: var(--theme-toolbar-background); - border-color: hsla(210,8%,5%,.6); -} - -.theme-fg-contrast { /* To be used for text on theme-bg-contrast */ - color: black; -} - -.ruleview-colorswatch, -.computedview-colorswatch, -.ruleview-bezierswatch { - box-shadow: 0 0 0 1px #818181; -} - -/* CodeMirror specific styles. - * Best effort to match the existing theme, some of the colors - * are duplicated here to prevent weirdness in the main theme. */ - -.CodeMirror { /* Inherit platform specific font sizing and styles */ - font-family: inherit; - font-size: inherit; - background: transparent; -} - -.CodeMirror pre, -.cm-s-mozilla .cm-variable-2, -.cm-s-mozilla .cm-variable-3, -.cm-s-mozilla .cm-operator, -.cm-s-mozilla .cm-special { - color: var(--theme-content-color1); -} - -.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor { - border-left: solid 1px #fff; -} - -.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */ - background: rgb(185, 215, 253); -} - -.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */ - background: rgb(176, 176, 176); -} - -.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */ - background: rgba(185, 215, 253, .15); -} - -div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */ - outline: solid 1px rgba(255, 255, 255, .25); - color: white; -} - -/* Highlight for a line that contains an error. */ -div.CodeMirror div.error-line { - background: rgba(255,0,0,0.2); -} - -/* Highlight for a line that represents a stack frame's location. */ -div.CodeMirror div.debug-line { - background: rgba(0,128,255,0.1); - box-shadow: - 0 1px 0 0 rgba(0,128,255,0.4), - 0 -1px 0 0 rgba(0,128,255,0.4); -} - -/* Generic highlighted text */ -div.CodeMirror span.marked-text { - background: rgba(255,255,0,0.2); - border: 1px dashed rgba(192,192,0,0.6); - -moz-margin-start: -1px; - -moz-margin-end: -1px; -} - -/* Highlight for evaluating current statement. */ -div.CodeMirror span.eval-text { - background-color: #556; -} - -.cm-s-mozilla .CodeMirror-linenumber { /* line number text */ - color: var(--theme-content-color3); -} - -.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */ - border-right-color: var(--theme-toolbar-background); - background-color: var(--theme-sidebar-background); -} - -.cm-s-markup-view pre { - line-height: 1.4em; - min-height: 1.4em; -} - -/* Twisty and checkbox controls */ -.theme-twisty, .theme-checkbox { - width: 14px; - height: 14px; - background-repeat: no-repeat; - background-image: url("chrome://browser/skin/devtools/controls.png"); - background-size: 56px 28px; -} - -.theme-twisty { - cursor: pointer; - background-position: -28px -14px; -} - -.theme-twisty:-moz-focusring { - outline-style: none; -} - -.theme-twisty[open] { - background-position: -42px -14px; -} - -.theme-twisty[invisible] { - visibility: hidden; -} - -.theme-checkbox { - display: inline-block; - border: 0; - padding: 0; - outline: none; - background-position: -28px 0; -} - -.theme-checkbox[checked] { - background-position: -42px 0; -} - -@media (min-resolution: 2dppx) { - .theme-twisty, .theme-checkbox { - background-image: url("chrome://browser/skin/devtools/controls@2x.png"); - } -} - -/* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */ - -.theme-tooltip-panel .panel-arrowcontent { - padding: 5px; - background: rgba(19, 28, 38, .9); - border-radius: 5px; - box-shadow: none; - border: 3px solid #434850; -} - -/* Overring panel arrow images to fit with our light and dark themes */ - -.theme-tooltip-panel .panel-arrow[side="top"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png"); - margin-bottom: -4px; -} - -.theme-tooltip-panel .panel-arrow[side="bottom"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png"); - margin-top: -4px; -} - -.theme-tooltip-panel .panel-arrow[side="left"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png"); - margin-right: -4px; -} - -.theme-tooltip-panel .panel-arrow[side="right"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png"); - margin-left: -4px; -} - -@media (min-resolution: 2dppx) { - .theme-tooltip-panel .panel-arrow[side="top"], - .theme-tooltip-panel .panel-arrow[side="bottom"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png"); - } - - .theme-tooltip-panel .panel-arrow[side="left"], - .theme-tooltip-panel .panel-arrow[side="right"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark@2x.png"); - } -} - -.theme-tooltip-panel .devtools-tooltip-simple-text { - color: white; - border-bottom: 1px solid #434850; -} - -.theme-tooltip-panel .devtools-tooltip-simple-text:last-child { - border-bottom: 0; -} - -.devtools-textinput, -.devtools-searchinput { - background-color: rgba(24, 29, 32, 1); - color: rgba(184, 200, 217, 1); -} - -.CodeMirror-Tern-fname { - color: #f7f7f7; -} - -.CodeMirror-hints, -.CodeMirror-Tern-tooltip { - box-shadow: 0 0 4px rgba(255, 255, 255, .3); - background-color: #0f171f; - color: var(--theme-body-color); -} - - - -/* Toolbars */ -.devtools-toolbar, -.devtools-sidebar-tabs tabs, -.devtools-sidebar-alltabs { - -moz-appearance: none; - padding: 0; - border-width: 0; - border-bottom-width: 1px; - border-style: solid; - height: 24px; - line-height: 24px; - box-sizing: border-box; -} - -.devtools-toolbar { - padding: 0 3px; -} - -.devtools-toolbar checkbox { - margin: 0 2px; - padding: 0; -} -.devtools-toolbar checkbox .checkbox-check { - margin: 0; - padding: 0; -} -.devtools-toolbar checkbox .checkbox-label-box { - border: none !important; /* overrides .checkbox-label-box from checkbox.css */ -} -.devtools-toolbar checkbox .checkbox-label-box .checkbox-label { - margin: 0 6px !important; /* overrides .checkbox-label from checkbox.css */ - padding: 0; -} - -/* Toolbar buttons */ -.devtools-menulist, -.devtools-toolbarbutton { - -moz-appearance: none; - -moz-box-align: center; - background: transparent; - min-width: 78px; - min-height: 18px; - padding: 1px; - text-shadow: none; - border: none; - border-radius: 0; - margin: 2px 3px; - color: inherit; - transition: background 0.05s ease-in-out; - color: var(--theme-content-color1); - background-color: var(--theme-toolbar-background); -} - -.devtools-menulist:-moz-focusring, -.devtools-toolbarbutton:-moz-focusring { - outline: 1px dotted hsla(210,30%,85%,0.7); - outline-offset: -4px; -} - -.devtools-toolbarbutton[standalone] { - -moz-margin-end: 5px; - border-width: 1px; - border-style: solid; -} -.devtools-toolbarbutton[label][standalone] { - min-height: 2em; -} - -.devtools-toolbarbutton:not([label]), -.devtools-toolbarbutton[text-as-image] { - min-width: 32px; -} - -#toolbox-buttons .devtools-toolbarbutton[text-as-image] { - -moz-padding-start: 5px; - -moz-padding-end: 5px; - min-width: inherit; -} - -/* Command buttons with menupopups should be styled slightly differently - - no background color and a bit more narrow */ -#toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) { - background: transparent; -} -#toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker { - padding: 0 2px; -} - -.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { - display: none; -} - -.devtools-toolbar .devtools-toolbarbutton { - border-width: 0; -} - -.devtools-toolbarbutton > .toolbarbutton-icon { - margin: 0; -} - -.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { - -moz-appearance: none; - color: inherit; - border-width: 0; - -moz-box-orient: horizontal; - padding: 0; -} - -.devtools-toolbarbutton[type=menu-button] { - padding: 0 1px; - -moz-box-align: stretch; -} - -.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon { - -moz-margin-end: 4px; -} - -.devtools-menulist > .menulist-dropmarker { - -moz-appearance: none; - display: -moz-box; - list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg"); - -moz-box-align: center; - min-width: 16px; -} - -.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, -.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { - -moz-appearance: none !important; - list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg"); - -moz-box-align: center; - padding: 0 3px; -} - -.theme-dark .devtools-menulist, -.theme-dark .devtools-toolbarbutton { - border-color: rgba(0, 0, 0, .4); /* Splitters */ -} -.theme-light .devtools-menulist, -.theme-light .devtools-toolbarbutton { - border-color: rgba(170, 170, 170, .5); /* Splitters */ -} - -/* Text-only buttons */ -.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), -.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image] { - background-color: rgba(170, 170, 170, .2); /* Splitter */ -} -.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), -.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image] { - background-color: rgba(0, 0, 0, .2); /* Splitter */ -} - -/* Button States */ -.theme-dark .devtools-toolbarbutton:not([disabled]):hover, -.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, -.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover { - background: rgba(0, 0, 0, .3); /* Splitters */ -} -.theme-light .devtools-toolbarbutton:not([disabled]):hover, -.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, -.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover { - background: rgba(170, 170, 170, .3); /* Splitters */ -} - -.theme-dark .devtools-toolbarbutton:not([disabled]):hover:active, -.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, -.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active { - background: rgba(0, 0, 0, .4); /* Splitters */ -} -.theme-light .devtools-toolbarbutton:not([disabled]):hover:active, -.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, -.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active { - background: rgba(170, 170, 170, .4); /* Splitters */ -} - -/* Menu type buttons and checked states */ -.theme-dark .devtools-toolbarbutton[checked=true], -.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { - background: rgba(29, 79, 115, .7); /* Select highlight blue */ - color: var(--theme-selection-color); -} - -.theme-light .devtools-toolbarbutton[checked=true], -.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { - background: rgba(76, 158, 217, .2); /* Select highlight blue */ -} - -.theme-dark .devtools-menulist[open=true], -.theme-dark .devtools-toolbarbutton[open=true], -.theme-dark .devtools-toolbarbutton[open=true]:hover, -.theme-dark .devtools-toolbarbutton[open=true]:hover:active, -.theme-dark .devtools-toolbarbutton[checked=true]:hover { - background: rgba(29, 79, 115, .8); /* Select highlight blue */ - color: var(--theme-selection-color); -} - -.theme-light .devtools-menulist[open=true], -.theme-light .devtools-toolbarbutton[open=true], -.theme-light .devtools-toolbarbutton[open=true]:hover, -.theme-light .devtools-toolbarbutton[open=true]:hover:active, -.theme-light .devtools-toolbarbutton[checked=true]:hover { - background: rgba(76, 158, 217, .4); /* Select highlight blue */ -} - -.devtools-option-toolbarbutton { - -moz-appearance: none; - list-style-image: url("chrome://browser/skin/devtools/tool-options.svg"); - background: none; - opacity: .8; - border: none; -} - -.devtools-option-toolbarbutton[open=true] { - opacity: 1; -} - -/* Toolbar button groups */ -.devtools-toolbarbutton-group > .devtools-toolbarbutton { - margin-left: 1px; - margin-right: 1px; - outline-offset: -3px; - box-shadow: none; -} - -.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child { - -moz-margin-end: 0; -} - -.devtools-toolbarbutton-group + .devtools-toolbarbutton { - -moz-margin-start: 3px; -} - -.devtools-separator + .devtools-toolbarbutton { - -moz-margin-start: 1px; -} - -/* HTML buttons, similar to toolbar buttons, but work in HTML documents */ - -.devtools-button { - border: 0 solid var(--theme-splitter-color); - background: var(--theme-toolbar-background); - margin: 0; - padding: 0; - min-width: 32px; - min-height: 18px; - /* The icon is absolutely positioned in the button using ::before */ - position: relative; -} - -.devtools-button[standalone] { - min-height: 32px; - border-width: 1px; -} - -/* Button States */ -.theme-dark .devtools-button:not([disabled]):hover { - background: rgba(0, 0, 0, .3); /* Splitters */ -} -.theme-light .devtools-button:not([disabled]):hover { - background: rgba(170, 170, 170, .3); /* Splitters */ -} - -.theme-dark .devtools-button:not([disabled]):hover:active { - background: rgba(0, 0, 0, .4); /* Splitters */ -} -.theme-light .devtools-button:not([disabled]):hover:active { - background: rgba(170, 170, 170, .4); /* Splitters */ -} - -/* Menu type buttons and checked states */ -.theme-dark .devtools-button[checked] { - background: rgba(29, 79, 115, .7) !important; /* Select highlight blue */ - color: var(--theme-selection-color); -} - -.theme-light .devtools-button[checked] { - background: rgba(76, 158, 217, .2) !important; /* Select highlight blue */ -} - -.devtools-button::before { - content: ""; - display: block; - width: 16px; - height: 16px; - position: absolute; - left: 50%; - top: 50%; - margin: -8px 0 0 -8px; - background-repeat: no-repeat; -} - -@media (min-resolution: 2dppx) { - .devtools-button::before { - background-size: 32px; - } -} - -/* Text input */ - -.devtools-textinput, -.devtools-searchinput { - -moz-appearance: none; - margin: 0 3px; - border: 1px solid; - border-radius: 2px; - padding: 4px 6px; - border-color: var(--theme-splitter-color); -} - -.devtools-searchinput { - margin-top: 1px; - margin-bottom: 1px; - padding: 0; - -moz-padding-start: 22px; - -moz-padding-end: 12px; - background-position: 8px center; - background-size: 11px 11px; - background-repeat: no-repeat; - font-size: inherit; -} - -.theme-dark .devtools-searchinput { - background-image: url("chrome://browser/skin/devtools/magnifying-glass.png"); -} - -.theme-light .devtools-searchinput { - background-image: url("chrome://browser/skin/devtools/magnifying-glass-light.png"); -} - -@media (min-resolution: 2dppx) { - .theme-dark .devtools-searchinput { - background-image: url("chrome://browser/skin/devtools/magnifying-glass@2x.png"); - } - - .theme-light .devtools-searchinput { - background-image: url("chrome://browser/skin/devtools/magnifying-glass-light@2x.png"); - } -} - -.devtools-searchinput:-moz-locale-dir(rtl) { - background-position: calc(100% - 8px) center; -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons { - display: none; -} - -.devtools-no-search-result { - border-color: var(--theme-highlight-red) !important; -} - -/* Close button */ - -.devtools-closebutton { - -moz-appearance: none; - border: none; - margin: 0 4px; - min-width: 16px; - width: 16px; - opacity: 0.8; -} - -.devtools-closebutton > image { - width: 16px; - height: 16px; - -moz-appearance: none; - background-size: 16px 16px; - background-image: url("chrome://browser/skin/devtools/close@2x.png"); - background-position: center center; - background-repeat: no-repeat; -} - -.devtools-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; -} - -.devtools-closebutton > .toolbarbutton-text { - display: none; -} - -.devtools-closebutton:hover { - opacity: 1; -} - -/* In-tools sidebar */ -.devtools-sidebar-tabs { - -moz-appearance: none; - margin: 0; -} - -.devtools-sidebar-tabs > tabpanels { - -moz-appearance: none; - background: transparent; - padding: 0; - border: 0; -} - -.theme-light .devtools-sidebar-tabs > tabpanels { - background: var(--theme-sidebar-background); - color: var(--theme-body-color); -} - -.devtools-sidebar-tabs tabs { - position: static; - font: inherit; - margin-bottom: 0; - overflow: hidden; -} - -.devtools-sidebar-alltabs { - margin: 0; - border-width: 0 0 1px 0; - -moz-border-start-width: 1px; - border-style: solid; -} - -.devtools-sidebar-alltabs dropmarker { - display: none; -} - -.devtools-sidebar-tabs tabs > .tabs-right, -.devtools-sidebar-tabs tabs > .tabs-left { - display: none; -} - -.devtools-sidebar-tabs tabs > tab { - -moz-appearance: none; - /* We want to match the height of a toolbar with a toolbarbutton - * First, we need to replicated the padding of toolbar (4px), - * then we need to take the border of the buttons into account (1px). - */ - padding: 0 3px; - margin: 0; - min-width: 78px; - text-align: center; - background-color: transparent; - color: inherit; - -moz-box-flex: 1; - border-width: 0; - -moz-border-start-width: 1px; - border-style: solid; - border-radius: 0; - position: static; - text-shadow: none; -} - -.devtools-sidebar-tabs tabs > tab:first-child { - -moz-border-start-width: 0; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab { - border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab:hover { - background: hsla(206,37%,4%,.2); - border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab:hover:active { - background: hsla(206,37%,4%,.4); - border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab { - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { - background: hsla(206,37%,4%,.2); - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { - background: hsla(206,37%,4%,.4); - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab[selected], -.theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active { - color: var(--theme-selection-color); - background: #1d4f73; - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; -} - -.theme-light .devtools-sidebar-tabs tabs > tab { - border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; -} - -.theme-light .devtools-sidebar-tabs tabs > tab:hover { - background: #ddd; - border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; -} - -.theme-light .devtools-sidebar-tabs tabs > tab:hover:active { - background: #ddd; - border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; -} - -.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab { - border-image: linear-gradient(#aaa, #aaa); -} - -.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { - background: #ddd; - border-image: linear-gradient(#aaa, #aaa); -} - -.theme-light .devtools-sidebar-tabs tabs > tab[selected], -.theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active { - color: var(--theme-selection-color); - background: #4c9ed9; - border-image: linear-gradient(#aaa, #aaa); -} - -/* Toolbox - moved from toolbox.css. - * Rules that apply to the global toolbox like command buttons, - * devtools tabs, docking buttons, etc. */ - -#toolbox-controls > toolbarbutton, -#toolbox-dock-buttons > toolbarbutton { - -moz-appearance: none; - border: none; - margin: 0 4px; - min-width: 16px; - width: 16px; -} - -#toolbox-controls > toolbarbutton > .toolbarbutton-text, -#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text, -.command-button > .toolbarbutton-text { - display: none; -} - -#toolbox-dock-buttons > toolbarbutton > image { - -moz-appearance: none; - width: 16px; - height: 16px; - background-size: 16px 16px; - background-position: 0 center; - background-repeat: no-repeat; -} - -#toolbox-dock-bottom > image { - background-image: url("chrome://browser/skin/devtools/dock-bottom@2x.png"); -} - -#toolbox-dock-side > image { - background-image: url("chrome://browser/skin/devtools/dock-side@2x.png"); -} - -#toolbox-dock-window > image { - background-image: url("chrome://browser/skin/devtools/undock@2x.png"); -} - -#toolbox-dock-window, -#toolbox-dock-bottom, -#toolbox-dock-side { - opacity: 0.8; -} - -#toolbox-dock-window:hover, -#toolbox-dock-bottom:hover, -#toolbox-dock-side:hover { - opacity: 1; -} - -.devtools-separator { - margin: 0 2px; - width: 2px; - background-image: linear-gradient(transparent, hsla(204,45%,98%,.1), transparent), - linear-gradient(transparent, hsla(206,37%,4%,.6), transparent), - linear-gradient(transparent, hsla(204,45%,98%,.1), transparent); - background-size: 1px 100%; - background-repeat: no-repeat; - background-position: 0, 1px, 2px; -} - -#toolbox-buttons:empty + .devtools-separator, -.devtools-separator[invisible] { - visibility: hidden; -} - -#toolbox-controls-separator { - margin: 0; -} - -/* Command buttons */ - -.command-button { - -moz-appearance: none; - border: none; - padding: 0 8px; - margin: 0; - width: 32px; - position: relative; -} - -.command-button:hover { - background-color: hsla(206,37%,4%,.2); -} -.command-button:hover:active, .command-button[checked=true]:not(:hover) { - background-color: hsla(206,37%,4%,.4); -} - -.command-button > image { - -moz-appearance: none; - width: 16px; - height: 16px; - background-size: 64px 16px; - background-position: 0 center; - background-repeat: no-repeat; -} -.command-button:hover > image { - background-position: -16px center; -} -.command-button:hover:active > image { - background-position: -32px center; -} -.command-button[checked=true] > image { - background-position: -48px center; -} -.command-button[open=true] > image { - background-position: 0 center; -} - -#command-button-paintflashing > image { - background-image: url("chrome://browser/skin/devtools/command-paintflashing.png"); -} - -#command-button-screenshot > image { - background-image: url("chrome://browser/skin/devtools/command-screenshot.png"); -} - -#command-button-responsive > image { - background-image: url("chrome://browser/skin/devtools/command-responsivemode.png"); -} - -#command-button-tilt > image { - background-image: url("chrome://browser/skin/devtools/command-tilt.png"); -} - -#command-button-scratchpad > image { - background-image: url("chrome://browser/skin/devtools/command-scratchpad.png"); - background-size: 48px 16px; -} - -#command-button-pick > image { - background-image: url("chrome://browser/skin/devtools/command-pick.png"); -} - -#command-button-frames > image { - background-image: url("chrome://browser/skin/devtools/command-frames.png"); -} - -#command-button-splitconsole > image { - background-image: url("chrome://browser/skin/devtools/command-console.png"); -} - -#command-button-eyedropper > image { - background-image: url("chrome://browser/skin/devtools/command-eyedropper.png"); -} - -@media (min-resolution: 2dppx) { - #command-button-paintflashing > image { - background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png"); - } - - #command-button-screenshot > image { - background-image: url("chrome://browser/skin/devtools/command-screenshot@2x.png"); - } - - #command-button-responsive > image { - background-image: url("chrome://browser/skin/devtools/command-responsivemode@2x.png"); - } - - #command-button-tilt > image { - background-image: url("chrome://browser/skin/devtools/command-tilt@2x.png"); - } - - #command-button-scratchpad > image { - background-image: url("chrome://browser/skin/devtools/command-scratchpad@2x.png"); - } - - #command-button-pick > image { - background-image: url("chrome://browser/skin/devtools/command-pick@2x.png"); - } - - #command-button-frames > image { - background-image: url("chrome://browser/skin/devtools/command-frames@2x.png"); - } - - #command-button-splitconsole > image { - background-image: url("chrome://browser/skin/devtools/command-console@2x.png"); - } - - #command-button-eyedropper > image { - background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png"); - } -} - -/* Tabs */ - -.devtools-tabbar { - -moz-appearance: none; - min-height: 24px; - border: 0px solid; - border-bottom-width: 1px; - padding: 0; - background: var(--theme-tab-toolbar-background); - border-bottom-color: var(--theme-splitter-color); -} - -.theme-light .devtools-tabbar { - box-shadow: 0 -2px 0 rgba(170,170,170,.1) inset; -} - -.theme-dark .devtools-tabbar { - box-shadow: 0 -2px 0 rgba(0,0,0,.1) inset; -} - -#toolbox-tabs { - margin: 0; -} - -.devtools-tab { - -moz-appearance: none; - -moz-binding: url("chrome://global/content/bindings/general.xml#control-item"); - -moz-box-align: center; - min-width: 32px; - min-height: 24px; - max-width: 110px; - margin: 0; - padding: 0; - border-style: solid; - border-width: 0; - -moz-border-start-width: 1px; - -moz-box-align: center; -} - -.theme-dark .devtools-tab { - color: var(--theme-body-color-alt); - border-color: #42484f; -} - -.theme-light .devtools-tab { - color: var(--theme-body-color); - border-color: var(--theme-splitter-color); -} - -.theme-dark .devtools-tab:hover { - background-color: hsla(206,37%,4%,.2); - color: #ced3d9; -} - -.theme-light .devtools-tab:hover { - background-color: rgba(170,170,170,.2); -} - -.theme-dark .devtools-tab:hover:active { - background-color: hsla(206,37%,4%,.4); - color: var(--theme-selection-color); -} - -.theme-light .devtools-tab:hover:active { - background-color: rgba(170,170,170,.4); -} - -.theme-dark .devtools-tab:not([selected])[highlighted] { - background-color: hsla(99,100%,14%,.2); - box-shadow: 0 2px 0 #7bc107 inset; -} - -.theme-light .devtools-tab:not([selected])[highlighted] { - background-color: rgba(44, 187, 15, .2); -} - -.devtools-tab > image { - border: none; - -moz-margin-end: 0; - -moz-margin-start: 4px; - opacity: 0.6; - max-height: 16px; - width: 16px; /* Prevents collapse during theme switching */ -} - -.devtools-tab > label { - white-space: nowrap; -} - -.devtools-tab:hover > image { - opacity: 0.8; -} - -.devtools-tab:active > image, -.devtools-tab[selected] > image { - opacity: 1; -} - -.devtools-tabbar .devtools-tab[selected], -.devtools-tabbar .devtools-tab[selected]:hover:active { - color: var(--theme-selection-color); - background-color: var(--theme-selection-background); -} - -.theme-dark .devtools-tabbar .devtools-tab[selected] { - box-shadow: 0 2px 0 #d7f1ff inset, - 0 8px 3px -5px #2b82bf inset, - 0 -2px 0 rgba(0,0,0,.2) inset; -} - -.theme-light .devtools-tabbar .devtools-tab[selected] { - box-shadow: 0 2px 0 #d7f1ff inset, - 0 8px 3px -5px #2b82bf inset, - 0 -2px 0 rgba(0,0,0,.06) inset; -} - -#toolbox-tabs .devtools-tab[selected], -#toolbox-tabs .devtools-tab[highlighted] { - border-width: 0; - -moz-padding-start: 1px; -} - -#toolbox-tabs .devtools-tab[selected]:last-child, -#toolbox-tabs .devtools-tab[highlighted]:last-child { - -moz-padding-end: 1px; -} - -#toolbox-tabs .devtools-tab[selected] + .devtools-tab, -#toolbox-tabs .devtools-tab[highlighted] + .devtools-tab { - -moz-border-start-width: 0; - -moz-padding-start: 1px; -} - -#toolbox-tabs .devtools-tab:first-child[selected] { - -moz-border-start-width: 0; -} - -#toolbox-tabs .devtools-tab:last-child { - -moz-border-end-width: 1px; -} - -.devtools-tab:not([highlighted]) > .highlighted-icon, -.devtools-tab[selected] > .highlighted-icon, -.devtools-tab:not([selected])[highlighted] > .default-icon { - visibility: collapse; -} - -/* The options tab is special - it doesn't have the same parent - as the other tabs (toolbox-option-container vs toolbox-tabs) */ -#toolbox-option-container .devtools-tab:not([selected]) { - background-color: transparent; -} -#toolbox-option-container .devtools-tab { - border-color: transparent; - border-width: 0; - -moz-padding-start: 1px; -} -#toolbox-tab-options > image { - margin: 0 8px; -} - -/* Invert the colors of certain dark theme images for displaying - * inside of the light theme. - */ -.theme-light .devtools-tab[icon-invertable] > image, -.theme-light #toolbox-dock-buttons > toolbarbutton > image, -.theme-light .command-button-invertable > image, -.theme-light .command-button-invertable:active > image, -.theme-light .devtools-closebutton > image, -.theme-light .devtools-toolbarbutton > image, -.theme-light .devtools-option-toolbarbutton > image, -.theme-light #breadcrumb-separator-normal, -.theme-light .scrollbutton-up > .toolbarbutton-icon, -.theme-light .scrollbutton-down > .toolbarbutton-icon, -.theme-light #black-boxed-message-button .button-icon, -.theme-light .notice-container button .button-icon, -.theme-light #requests-menu-perf-notice-button .button-icon, -.theme-light #requests-menu-network-summary-button .button-icon, -.theme-light .event-tooltip-debugger-icon, -.theme-light .devtools-button::before { - filter: url("chrome://browser/skin/devtools/filters.svg#invert"); -} - -/* Since selected backgrounds are blue, we want to use the normal - * (light) icons. */ -.theme-light .command-button-invertable[checked=true]:not(:active) > image, -.theme-light .devtools-tab[icon-invertable][selected] > image, -.theme-light .devtools-tab[icon-invertable][highlighted] > image, -.theme-light #record-snapshot[checked] > image, -.theme-light #profiler-start[checked] > image, -.theme-light .notice-container button[checked] .button-icon { - filter: none !important; -} - -.theme-light .command-button:hover { - background-color: inherit; -} - -.theme-light .command-button:hover:active, -.theme-light .command-button[checked=true]:not(:hover) { - background-color: inherit; -} - -.hidden-labels-box:not(.visible) > label, -.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { - display: none; -} - -.devtools-invisible-splitter { - border-color: transparent; -} - -.devtools-horizontal-splitter { - border-bottom: 1px solid var(--theme-splitter-color); -} - -.devtools-side-splitter { - -moz-border-end: 1px solid var(--theme-splitter-color); - border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */ -} - -/* Throbbers */ -.devtools-throbber::before { - content: ""; - display: inline-block; - vertical-align: bottom; - -moz-margin-end: 0.5em; - width: 1em; - height: 1em; - border: 2px solid currentColor; - border-right-color: transparent; - border-radius: 50%; - animation: 1.1s linear throbber-spin infinite; -} - -@keyframes throbber-spin { - from { - transform: none; - } - to { - transform: rotate(360deg); - } -} diff --git a/src/chrome/appver/27/devtools/debugger.css b/src/chrome/appver/27/devtools/debugger.css @@ -1,662 +0,0 @@ -/* 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/. */ - -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - -/* Sources and breakpoints pane */ - -#sources-pane[selectedIndex="0"] + #sources-and-editor-splitter { - border-color: transparent; -} - -#sources-pane > tabs { - -moz-border-end: 1px solid; -} - -#sources-pane .devtools-toolbar { - border: none; /* Remove the devtools-toolbar bottom border. */ - -moz-border-end: 1px solid; -} - -#sources-pane > tabs, -#sources-pane .devtools-toolbar { - -moz-border-end-color: var(--theme-splitter-color); -} - -/* Sources and breakpoints list */ - -.dbg-source-item { - padding: 2px 0px; -} - -.dbg-breakpoint-line { - font-weight: 600; -} - -.dbg-breakpoint-text { - -moz-padding-start: 6px; - font-style: italic; - font-size: 90%; -} - -.dbg-breakpoint-checkbox { - width: 16px; - height: 16px; - margin: 2px; -} - -/* Sources toolbar */ - -#sources-toolbar > .devtools-toolbarbutton, -#sources-controls > .devtools-toolbarbutton { - min-width: 32px; -} - -#black-box { - list-style-image: url("chrome://browser/skin/devtools/debugger-blackbox.png"); -} - -@media (min-resolution: 2dppx) { - #black-box { - list-style-image: url("chrome://browser/skin/devtools/debugger-blackbox@2x.png"); - } -} - -#pretty-print { - list-style-image: url("chrome://browser/skin/devtools/debugger-prettyprint.png"); -} - -@media (min-resolution: 2dppx) { - #pretty-print { - list-style-image: url("chrome://browser/skin/devtools/debugger-prettyprint@2x.png"); - } -} - -#toggle-breakpoints { - list-style-image: url("chrome://browser/skin/devtools/debugger-toggleBreakpoints.png"); -} - -@media (min-resolution: 2dppx) { - #toggle-breakpoints { - list-style-image: url("chrome://browser/skin/devtools/debugger-toggleBreakpoints@2x.png"); - } -} - -#sources-toolbar .devtools-toolbarbutton:not([label]) { - -moz-image-region: rect(0px,16px,16px,0px); -} - -#sources-toolbar .devtools-toolbarbutton:not([label])[checked] { - -moz-image-region: rect(0px,32px,16px,16px); -} - -@media (min-resolution: 2dppx) { - #sources-toolbar .devtools-toolbarbutton:not([label]) { - -moz-image-region: rect(0px,32px,32px,0px); - } - - #sources-toolbar .devtools-toolbarbutton:not([label])[checked] { - -moz-image-region: rect(0px,64px,32px,32px); - } -} - -#sources .black-boxed { - color: rgba(128,128,128,0.4); -} - -#sources .selected .black-boxed { - color: rgba(255,255,255,0.4); -} - -#sources .black-boxed ~ .dbg-breakpoint { - display: none; -} - -/* Debugger unblackbox button */ - -#black-boxed-message-button > .button-box > .button-icon { - width: 16px; - height: 16px; - background-image: url("chrome://browser/skin/devtools/debugger-blackbox.png"); - background-position: 0 0; - background-size: 32px 16px; - background-repeat: no-repeat; - -moz-margin-end: 5px; -} - -@media (min-resolution: 2dppx) { - #black-boxed-message-button > .button-box > .button-icon { - background-image: url("chrome://browser/skin/devtools/debugger-blackbox@2x.png"); - } -} - -/* Black box message and source progress meter */ - -#black-boxed-message, -#source-progress-container { - /* Prevent the container deck from aquiring the size from this message. */ - min-width: 1px; - min-height: 1px; -} - -#source-progress { - min-height: 2em; - min-width: 40em; -} - -#black-boxed-message-label, -#black-boxed-message-button { - text-align: center; - font-size: 120%; -} - -#black-boxed-message-button { - margin-top: 1em; - padding: .25em; -} - -/* Breadcrumbs stack frames view */ - -.dbg-stackframe-details { - -moz-padding-start: 4px; -} - -/* Classic stack frames view */ - -.dbg-classic-stackframe { - display: block; -} - -.dbg-classic-stackframe-title { - font-weight: 600; -} - -.dbg-classic-stackframe-details:-moz-locale-dir(ltr) { - float: right; -} - -.dbg-classic-stackframe-details:-moz-locale-dir(rtl) { - float: left; -} - -.dbg-classic-stackframe-details-url { - max-width: 90%; - text-align: end; -} - -.dbg-classic-stackframe-details-url { - color: var(--theme-content-color1); -} - -.dbg-classic-stackframe-details-sep { - color: var(--theme-body-color-alt) -} - -.dbg-classic-stackframe-details-line { - color: var(--theme-highlight-bluegrey); -} - -#callstack-list .selected label { - /* Text inside a selected item should not be custom colored. */ - color: inherit !important; -} - -/* Tracer */ - -#trace { - list-style-image: url("chrome://browser/skin/devtools/tracer-icon.png"); - -moz-image-region: rect(0px,16px,16px,0px); -} - -#trace[checked] { - -moz-image-region: rect(0px,32px,16px,16px); -} - -@media (min-resolution: 2dppx) { - #trace { - list-style-image: url("chrome://browser/skin/devtools/tracer-icon@2x.png"); - -moz-image-region: rect(0px,32px,32px,0px); - } - - #trace[checked] { - -moz-image-region: rect(0px,64px,32px,32px); - } -} - -#clear-tracer { - /* Make this button as narrow as the text inside it. */ - min-width: 1px; -} - -.trace-name { - -moz-padding-start: 4px; -} - -/* Tracer dark theme */ - -.theme-dark .trace-item { - color: var(--theme-selection-color); -} - -.theme-dark .trace-item.black-boxed { - color: rgba(128,128,128,0.4); -} - -.theme-dark .trace-item.selected-matching { - background-color: rgba(29,79,115,.4); /* Select highlight blue at 40% alpha */ -} - -.theme-dark .selected > .trace-item { - background-color: rgba(29,79,115,.6); /* Select highlight blue at 60% alpha */ -} - -.trace-call { - color: var(--theme-highlight-blue); -} - -.trace-return, -.trace-yield { - color: var(--theme-highlight-green); -} - -.trace-throw { - color: var(--theme-highlight-red); -} - -.trace-param { - color: var(--theme-content-color1); -} - -.theme-dark .trace-syntax { - color: var(--theme-content-color2); -} - -/* Tracer light theme */ -.theme-light .trace-item { - color: var(--theme-content-color1); -} - -.theme-light .trace-item.black-boxed { - color: rgba(128,128,128,0.4); -} - -.theme-light .trace-item.selected-matching { - background-color: rgba(76,158,217,.4); /* Select highlight blue at 40% alpha */ -} - -.theme-light .selected > .trace-item { - background-color: rgba(76,158,217,.6); /* Select highlight blue at 60% alpha */ -} - -#tracer-traces .selected label { - /* Text inside a selected item should not be custom colored. */ - color: inherit !important; -} - -/* Watch expressions view */ - -#expressions { - min-height: 10px; - max-height: 125px; -} - -.dbg-expression { - height: 20px; -} - -.dbg-expression-arrow { - background-image: url("chrome://browser/skin/devtools/commandline-icon.png"); - background-position: -16px 0; - background-repeat: no-repeat; - background-size: 32px 16px; - width: 16px; - height: 16px; - margin: 2px; -} - -@media (min-resolution: 2dppx) { - .dbg-expression-arrow { - background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png"); - } -} - -.dbg-expression-input { - color: inherit; -} - -.dbg-expression-button { - -moz-appearance: none; - border: none; - background: none; - text-decoration: underline; - cursor: pointer; -} - -.dbg-expression-button { - color: var(--theme-highlight-blue); -} - -/* Event listeners view */ - -.dbg-event-listener-type { - font-weight: 600; -} - -.dbg-event-listener-location { - color: var(--theme-content-color1); -} - -.dbg-event-listener-separator { - color: var(--theme-body-color-alt); -} - -.dbg-event-listener-targets { - color: var(--theme-highlight-bluegrey); -} - -.theme-dark #event-listeners .selected { - /* Selected items shouldn't be displayed differently. */ - background: none; - color: #fff; -} - -.theme-light #event-listeners .selected { - /* Selected items shouldn't be displayed differently. */ - background: none; - color: #000; -} - -/* Searchbox and the search operations help panel */ - -#searchbox { - min-width: 220px; - -moz-margin-start: 1px; -} - -#filter-label { - -moz-margin-start: 2px; -} - -#searchbox-panel-operators { - margin-top: 5px; - margin-bottom: 8px; - -moz-margin-start: 2px; -} - -.searchbox-panel-operator-button { - min-width: 26px; - margin-top: 0; - margin-bottom: 0; - -moz-margin-start: 2px; - -moz-margin-end: 6px; - text-align: center; -} - -.searchbox-panel-operator-label { - padding-bottom: 2px; -} - -/* Searchbox results panel */ - -#results-panel { - border: none; -} - -.results-panel-item { - padding: 6px 8px; - border-top: 1px solid rgba(128,128,128,0.2); -} - -.results-panel-item:first-of-type { - border-top: none; -} - -.results-panel-item-label { - font-weight: 600; -} - -.results-panel-item-label-before { - -moz-padding-end: 6px; -} - -.theme-dark .results-panel-item-label { - color: var(--theme-selection-color); -} - -.theme-light .results-panel-item-label { - color: var(--theme-body-color); -} - -.results-panel-item-label-before { - color: var(--theme-highlight-bluegrey); -} - -.results-panel-item-label-below { - color: var(--theme-content-color3); -} - -#results-panel .selected label { - /* Text inside a selected item should not be custom colored. */ - color: inherit !important; -} - -/* Sources search view */ - -#globalsearch { - min-height: 10px; - max-height: 50vh; -} - -.dbg-results-header { - -moz-padding-start: 6px; -} - -.dbg-results-header-location { - font-weight: 600; -} - -.dbg-results-header-match-count { - -moz-padding-start: 6px; -} - -.dbg-results-line-number { - min-width: 3em; - -moz-border-end: 1px solid rgba(128,128,128,0.2); - -moz-padding-end: 4px; - text-align: end; -} - -.dbg-results-line-contents { - -moz-padding-start: 4px; -} - -.dbg-results-line-contents-string[match=true] { - background-color: rgba(255,255,0,0.2); - border: 1px solid rgba(128,128,128,0.7); - border-radius: 4px; - margin-top: -1px !important; - margin-bottom: -1px !important; - cursor: pointer; -} - -.dbg-results-line-contents-string[match=true][focusing] { - transition: transform 0.3s ease-in-out; -} - -.dbg-results-line-contents-string[match=true][focused] { - transition-duration: 0.1s; - transform: scale(1.75, 1.75); -} - -.dbg-source-results:not(.selected):hover { - background-color: var(--theme-sidebar-background); -} - -.dbg-results-header { - background-color: var(--theme-tab-toolbar-background); -} - -.theme-dark .dbg-results-header { - color: var(--theme-content-color1); -} - -.theme-light .dbg-results-header { - color: var(--theme-content-color3); -} - -.theme-dark .dbg-search-result:hover { - background-color: rgba(29,79,115,.2); /* Select highlight blue at 40% alpha */ -} - -.theme-light .dbg-search-result:hover { - background-color: rgba(76,158,217,.2); /* Select highlight blue at 40% alpha */ -} - -.dbg-results-header-match-count { - color: var(--theme-content-color3); -} - -.dbg-results-line-number { - background-color: var(--theme-tab-toolbar-background); - color: var(--theme-body-color-alt); -} - -.dbg-results-line-contents-string { - color: var(--theme-body-color-alt); -} - -.theme-dark .dbg-results-line-contents-string[match=true] { - color: var(--theme-selection-color); -} - -.theme-light .dbg-results-line-contents-string[match=true] { - color: var(--theme-body-color); -} - -/* Toolbar controls */ - -#debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon, -#sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon { - width: 16px; - height: 16px; -} - -#resume { - list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png"); - -moz-image-region: rect(0px,16px,16px,0px); -} - -#resume[checked] { - list-style-image: url("chrome://browser/skin/devtools/debugger-play.png"); -} - -@media (min-resolution: 2dppx) { - #resume { - list-style-image: url("chrome://browser/skin/devtools/debugger-pause@2x.png"); - -moz-image-region: rect(0px,32px,32px,0px); - } - - #resume[checked] { - list-style-image: url("chrome://browser/skin/devtools/debugger-play@2x.png"); - -moz-image-region: rect(0px,64px,32px,32px); - } -} - -#resume ~ toolbarbutton { - transition: opacity 0.15s ease-in-out; -} - -#resume:not([checked]) ~ toolbarbutton { - opacity: 0.5; -} - -#step-over { - list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png"); -} - -#step-in { - list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png"); -} - -#step-out { - list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png"); -} - -@media (min-resolution: 2dppx) { - #step-over { - list-style-image: url("chrome://browser/skin/devtools/debugger-step-over@2x.png"); - } - - #step-in { - list-style-image: url("chrome://browser/skin/devtools/debugger-step-in@2x.png"); - } - - #step-out { - list-style-image: url("chrome://browser/skin/devtools/debugger-step-out@2x.png"); - } -} - -#instruments-pane-toggle { - background: none; - box-shadow: none; - border: none; - list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png"); - -moz-image-region: rect(0px,16px,16px,0px); -} - -#instruments-pane-toggle[pane-collapsed] { - list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png"); -} - -#instruments-pane-toggle:hover { - -moz-image-region: rect(0px,32px,16px,16px); -} - -@media (min-resolution: 2dppx) { - #instruments-pane-toggle { - list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png"); - -moz-image-region: rect(0px,32px,32px,0px); - } - - #instruments-pane-toggle[pane-collapsed] { - list-style-image: url("chrome://browser/skin/devtools/debugger-expand@2x.png"); - } - - #instruments-pane-toggle:hover { - -moz-image-region: rect(0px,64px,32px,32px); - } -} - -/* Horizontal vs. vertical layout */ - -#vertical-layout-panes-container { - min-height: 35vh; - max-height: 80vh; -} - -#body[layout=vertical] #sources-pane > tabs { - -moz-border-end: none; -} - -#body[layout=vertical] #instruments-pane { - margin: 0 !important; - /* To prevent all the margin hacks to hide the sidebar. */ -} - -#body[layout=vertical] .side-menu-widget-container, -#body[layout=vertical] .side-menu-widget-empty-text { - box-shadow: none !important; -} - -#body[layout=vertical] .side-menu-widget-item-arrow { - background-image: none !important; -} - -#body[layout=vertical] .side-menu-widget-group, -#body[layout=vertical] .side-menu-widget-item { - -moz-margin-end: 0; -} diff --git a/src/chrome/appver/27/devtools/light-theme.css b/src/chrome/appver/27/devtools/light-theme.css @@ -1,1350 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - -/* According to: - * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17 - */ -:root { - --theme-body-background: #fcfcfc; - --theme-sidebar-background: #f7f7f7; - --theme-contrast-background: #e6b064; - - --theme-tab-toolbar-background: #ebeced; - --theme-toolbar-background: #f0f1f2; - --theme-selection-background: #4c9ed9; - --theme-selection-color: #f5f7fa; - --theme-selection-background-semitransparent: rgba(76, 158, 217, .23); - --theme-splitter-color: #aaaaaa; - --theme-comment: hsl(90,2%,46%); - - --theme-body-color: #18191a; - --theme-body-color-alt: #585959; - --theme-content-color1: #292e33; - --theme-content-color2: #8fa1b2; - --theme-content-color3: #667380; - - --theme-highlight-green: hsl(72,100%,27%); - --theme-highlight-blue: hsl(208,56%,40%); - --theme-highlight-bluegrey: hsl(208,81%,21%); - --theme-highlight-purple: #5b5fff; - --theme-highlight-lightorange: #a18650; - --theme-highlight-orange: hsl(24,85%,39%); - --theme-highlight-red: #bf5656; - --theme-highlight-pink: #b82ee5; -} - -.theme-body { - background: var(--theme-body-background); - color: var(--theme-body-color); -} - -.theme-sidebar { - background: var(--theme-sidebar-background); - color: var(--theme-body-color); -} - -::-moz-selection { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.theme-bg-darker { - background: var(--theme-selection-background-semitransparent); -} - -.theme-selected, -.CodeMirror-hint-active { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.theme-bg-contrast, -.variable-or-property:not([overridden])[changed] { - background: var(--theme-contrast-background); -} - -.theme-link, -.cm-s-mozilla .cm-link, -.CodeMirror-Tern-type { - color: var(--theme-highlight-blue); -} - -/* - * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion - * failures in debug builds. - */ -.theme-link:visited, -.cm-s-mozilla .cm-link:visited { - color: var(--theme-highlight-blue); -} - -.theme-comment, -.cm-s-mozilla .cm-meta, -.cm-s-mozilla .cm-hr, -.cm-s-mozilla .cm-comment, -.variable-or-property .token-undefined, -.variable-or-property .token-null, -.CodeMirror-Tern-completion-unknown:before { - color: var(--theme-comment); -} - -.theme-gutter { - background-color: hsl(0,0%,90%); - color: var(--theme-content-color3); - border-color: hsl(0,0%,65%); -} - -.theme-separator { /* grey */ - border-color: #cddae5; -} - -.cm-s-mozilla .cm-unused-line { - text-decoration: line-through; - text-decoration-color: var(--theme-highlight-bluegrey); -} - -.cm-s-mozilla .cm-executed-line { - background-color: #fcfffc; -} - -.theme-fg-color1, -.cm-s-mozilla .cm-number, -.variable-or-property .token-number, -.variable-or-property[return] > .title > .name, -.variable-or-property[scope] > .title > .name { - color: var(--theme-highlight-green); -} - -.CodeMirror-Tern-completion-number:before { - background-color: hsl(72,100%,27%); -} - -.theme-fg-color2, -.cm-s-mozilla .cm-attribute, -.cm-s-mozilla .cm-builtin, -.cm-s-mozilla .cm-def, -.cm-s-mozilla .cm-property, -.cm-s-mozilla .cm-qualifier, -.variables-view-variable > .title > .name { - color: var(--theme-highlight-blue); -} - -.CodeMirror-Tern-completion-object:before { - background-color: hsl(208,56%,40%); -} - -.theme-fg-color3, -.cm-s-mozilla .cm-variable, -.cm-s-mozilla .cm-tag, -.cm-s-mozilla .cm-header, -.cm-s-mozilla .cm-bracket, -.variables-view-property > .title > .name { - color: var(--theme-highlight-bluegrey); -} - -.CodeMirror-Tern-completion-array:before { - background-color: var(--theme-highlight-bluegrey); -} - -.theme-fg-color4 { - color: var(--theme-highlight-orange); -} - -.theme-fg-color5, -.cm-s-mozilla .cm-keyword { - color: var(--theme-highlight-lightorange); -} - -.theme-fg-color6, -.cm-s-mozilla .cm-string, -.cm-s-mozilla .cm-string-2, -.variable-or-property .token-string, -.CodeMirror-Tern-farg { - color: var(--theme-highlight-orange); -} - -.CodeMirror-Tern-completion-string:before, -.CodeMirror-Tern-completion-fn:before { - background-color: hsl(24,85%,39%); -} - -.theme-fg-color7, -.cm-s-mozilla .cm-atom, -.cm-s-mozilla .cm-quote, -.cm-s-mozilla .cm-error, -.variable-or-property .token-boolean, -.variable-or-property .token-domnode, -.variable-or-property[exception] > .title > .name { - color: var(--theme-highlight-red); -} - -.CodeMirror-Tern-completion-bool:before { - background-color: #bf5656; -} - -.variable-or-property .token-domnode { - font-weight: bold; -} - -.theme-fg-contrast { /* To be used for text on theme-bg-contrast */ - color: black; -} - -.theme-toolbar, -.devtools-toolbar, -.devtools-sidebar-tabs tabs, -.devtools-sidebar-alltabs, -.CodeMirror-dialog { /* General toolbar styling */ - color: var(--theme-body-color-alt); - background-color: var(--theme-toolbar-background); - border-color: var(--theme-splitter-color); -} - -.ruleview-colorswatch, -.computedview-colorswatch, -.ruleview-bezierswatch { - box-shadow: 0 0 0 1px #c4c4c4; -} - -/* CodeMirror specific styles. - * Best effort to match the existing theme, some of the colors - * are duplicated here to prevent weirdness in the main theme. */ - -.CodeMirror { /* Inherit platform specific font sizing and styles */ - font-family: inherit; - font-size: inherit; - background: transparent; -} - -.CodeMirror pre, -.cm-s-mozilla .cm-variable-2, -.cm-s-mozilla .cm-variable-3, -.cm-s-mozilla .cm-operator, -.cm-s-mozilla .cm-special { - color: var(--theme-body-color); -} - -.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor { - border-left: solid 1px black; -} - -.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */ - background: rgb(185, 215, 253); -} - -.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */ - background: rgb(176, 176, 176); -} - -.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */ - background: rgba(185, 215, 253, .35); -} - -div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */ - outline: solid 1px rgba(0, 0, 0, .25); - color: black; -} - -/* Highlight for a line that contains an error. */ -div.CodeMirror div.error-line { - background: rgba(255,0,0,0.2); -} - -/* Highlight for a line that represents a stack frame's location. */ -div.CodeMirror div.debug-line { - background: rgba(0,128,255,0.1); - box-shadow: - 0 1px 0 0 rgba(0,128,255,0.4), - 0 -1px 0 0 rgba(0,128,255,0.4); -} - -/* Generic highlighted text */ -div.CodeMirror span.marked-text { - background: rgba(255,255,0,0.2); - border: 1px dashed rgba(192,192,0,0.6); - -moz-margin-start: -1px; - -moz-margin-end: -1px; -} - -/* Highlight for evaluating current statement. */ -div.CodeMirror span.eval-text { - background-color: #ccd; -} - -.cm-s-mozilla .CodeMirror-linenumber { /* line number text */ - color: var(--theme-content-color3); -} - -.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */ - border-right-color: var(--theme-splitter-color); - background-color: var(--theme-sidebar-background); -} - -.cm-s-markup-view pre { - line-height: 1.4em; - min-height: 1.4em; -} - -/* Twisty and checkbox controls */ - -.theme-twisty, .theme-checkbox { - width: 14px; - height: 14px; - background-repeat: no-repeat; - background-image: url("chrome://browser/skin/devtools/controls.png"); - background-size: 56px 28px; -} - -.theme-twisty { - cursor: pointer; - background-position: 0 -14px; -} - -.theme-twisty:-moz-focusring { - outline-style: none; -} - -.theme-twisty[open] { - background-position: -14px -14px; -} - -.theme-twisty[invisible] { - visibility: hidden; -} - -/* Use white twisty when next to a selected item in markup view */ -.theme-selected ~ .theme-twisty { - background-position: -28px -14px; -} - -.theme-selected ~ .theme-twisty[open] { - background-position: -42px -14px; -} - -.theme-checkbox { - display: inline-block; - border: 0; - padding: 0; - outline: none; - background-position: 0 0; -} - -.theme-checkbox[checked] { - background-position: -14px 0; -} - -@media (min-resolution: 2dppx) { - .theme-twisty, .theme-checkbox { - background-image: url("chrome://browser/skin/devtools/controls@2x.png"); - } -} - -/* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */ - -.theme-tooltip-panel .panel-arrowcontent { - padding: 4px; - background: rgba(255, 255, 255, .9); - border-radius: 5px; - box-shadow: none; - border: 3px solid #d9e1e8; -} - -/* Overring panel arrow images to fit with our light and dark themes */ - -.theme-tooltip-panel .panel-arrow[side="top"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light.png"); - margin-bottom: -4px; -} - -.theme-tooltip-panel .panel-arrow[side="bottom"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light.png"); - margin-top: -4px; -} - -.theme-tooltip-panel .panel-arrow[side="left"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light.png"); - margin-right: -4px; -} - -.theme-tooltip-panel .panel-arrow[side="right"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light.png"); - margin-left: -4px; -} - -@media (min-resolution: 2dppx) { - .theme-tooltip-panel .panel-arrow[side="top"], - .theme-tooltip-panel .panel-arrow[side="bottom"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light@2x.png"); - } - - .theme-tooltip-panel .panel-arrow[side="left"], - .theme-tooltip-panel .panel-arrow[side="right"] { - list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light@2x.png"); - } -} - -.theme-tooltip-panel .devtools-tooltip-simple-text { - color: black; - border-bottom: 1px solid #d9e1e8; -} - -.theme-tooltip-panel .devtools-tooltip-simple-text:last-child { - border-bottom: 0; -} - -.CodeMirror-hints, -.CodeMirror-Tern-tooltip { - box-shadow: 0 0 4px rgba(128, 128, 128, .5); - background-color: var(--theme-sidebar-background); -} - - - -/* Toolbars */ -.devtools-toolbar, -.devtools-sidebar-tabs tabs, -.devtools-sidebar-alltabs { - -moz-appearance: none; - padding: 0; - border-width: 0; - border-bottom-width: 1px; - border-style: solid; - height: 24px; - line-height: 24px; - box-sizing: border-box; -} - -.devtools-toolbar { - padding: 0 3px; -} - -.devtools-toolbar checkbox { - margin: 0 2px; - padding: 0; -} -.devtools-toolbar checkbox .checkbox-check { - margin: 0; - padding: 0; -} -.devtools-toolbar checkbox .checkbox-label-box { - border: none !important; /* overrides .checkbox-label-box from checkbox.css */ -} -.devtools-toolbar checkbox .checkbox-label-box .checkbox-label { - margin: 0 6px !important; /* overrides .checkbox-label from checkbox.css */ - padding: 0; -} - -/* Toolbar buttons */ -.devtools-menulist, -.devtools-toolbarbutton { - -moz-appearance: none; - -moz-box-align: center; - background: transparent; - min-width: 78px; - min-height: 18px; - padding: 1px; - text-shadow: none; - border: none; - border-radius: 0; - margin: 2px 3px; - color: inherit; - transition: background 0.05s ease-in-out; - color: var(--theme-content-color1); - background-color: var(--theme-toolbar-background); -} - -.devtools-menulist:-moz-focusring, -.devtools-toolbarbutton:-moz-focusring { - outline: 1px dotted hsla(210,30%,85%,0.7); - outline-offset: -4px; -} - -.devtools-toolbarbutton[standalone] { - -moz-margin-end: 5px; - border-width: 1px; - border-style: solid; -} -.devtools-toolbarbutton[label][standalone] { - min-height: 2em; -} - -.devtools-toolbarbutton:not([label]), -.devtools-toolbarbutton[text-as-image] { - min-width: 32px; -} - -#toolbox-buttons .devtools-toolbarbutton[text-as-image] { - -moz-padding-start: 5px; - -moz-padding-end: 5px; - min-width: inherit; -} - -/* Command buttons with menupopups should be styled slightly differently - - no background color and a bit more narrow */ -#toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) { - background: transparent; -} -#toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker { - padding: 0 2px; -} - -.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { - display: none; -} - -.devtools-toolbar .devtools-toolbarbutton { - border-width: 0; -} - -.devtools-toolbarbutton > .toolbarbutton-icon { - margin: 0; -} - -.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { - -moz-appearance: none; - color: inherit; - border-width: 0; - -moz-box-orient: horizontal; - padding: 0; -} - -.devtools-toolbarbutton[type=menu-button] { - padding: 0 1px; - -moz-box-align: stretch; -} - -.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon { - -moz-margin-end: 4px; -} - -.devtools-menulist > .menulist-dropmarker { - -moz-appearance: none; - display: -moz-box; - list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg"); - -moz-box-align: center; - min-width: 16px; -} - -.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, -.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker { - -moz-appearance: none !important; - list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg"); - -moz-box-align: center; - padding: 0 3px; -} - -.theme-dark .devtools-menulist, -.theme-dark .devtools-toolbarbutton { - border-color: rgba(0, 0, 0, .4); /* Splitters */ -} -.theme-light .devtools-menulist, -.theme-light .devtools-toolbarbutton { - border-color: rgba(170, 170, 170, .5); /* Splitters */ -} - -/* Text-only buttons */ -.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), -.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image] { - background-color: rgba(170, 170, 170, .2); /* Splitter */ -} -.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), -.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image] { - background-color: rgba(0, 0, 0, .2); /* Splitter */ -} - -/* Button States */ -.theme-dark .devtools-toolbarbutton:not([disabled]):hover, -.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, -.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover { - background: rgba(0, 0, 0, .3); /* Splitters */ -} -.theme-light .devtools-toolbarbutton:not([disabled]):hover, -.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, -.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover { - background: rgba(170, 170, 170, .3); /* Splitters */ -} - -.theme-dark .devtools-toolbarbutton:not([disabled]):hover:active, -.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, -.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active { - background: rgba(0, 0, 0, .4); /* Splitters */ -} -.theme-light .devtools-toolbarbutton:not([disabled]):hover:active, -.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, -.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active { - background: rgba(170, 170, 170, .4); /* Splitters */ -} - -/* Menu type buttons and checked states */ -.theme-dark .devtools-toolbarbutton[checked=true], -.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { - background: rgba(29, 79, 115, .7); /* Select highlight blue */ - color: var(--theme-selection-color); -} - -.theme-light .devtools-toolbarbutton[checked=true], -.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { - background: rgba(76, 158, 217, .2); /* Select highlight blue */ -} - -.theme-dark .devtools-menulist[open=true], -.theme-dark .devtools-toolbarbutton[open=true], -.theme-dark .devtools-toolbarbutton[open=true]:hover, -.theme-dark .devtools-toolbarbutton[open=true]:hover:active, -.theme-dark .devtools-toolbarbutton[checked=true]:hover { - background: rgba(29, 79, 115, .8); /* Select highlight blue */ - color: var(--theme-selection-color); -} - -.theme-light .devtools-menulist[open=true], -.theme-light .devtools-toolbarbutton[open=true], -.theme-light .devtools-toolbarbutton[open=true]:hover, -.theme-light .devtools-toolbarbutton[open=true]:hover:active, -.theme-light .devtools-toolbarbutton[checked=true]:hover { - background: rgba(76, 158, 217, .4); /* Select highlight blue */ -} - -.devtools-option-toolbarbutton { - -moz-appearance: none; - list-style-image: url("chrome://browser/skin/devtools/tool-options.svg"); - background: none; - opacity: .8; - border: none; -} - -.devtools-option-toolbarbutton[open=true] { - opacity: 1; -} - -/* Toolbar button groups */ -.devtools-toolbarbutton-group > .devtools-toolbarbutton { - margin-left: 1px; - margin-right: 1px; - outline-offset: -3px; - box-shadow: none; -} - -.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child { - -moz-margin-end: 0; -} - -.devtools-toolbarbutton-group + .devtools-toolbarbutton { - -moz-margin-start: 3px; -} - -.devtools-separator + .devtools-toolbarbutton { - -moz-margin-start: 1px; -} - -/* HTML buttons, similar to toolbar buttons, but work in HTML documents */ - -.devtools-button { - border: 0 solid var(--theme-splitter-color); - background: var(--theme-toolbar-background); - margin: 0; - padding: 0; - min-width: 32px; - min-height: 18px; - /* The icon is absolutely positioned in the button using ::before */ - position: relative; -} - -.devtools-button[standalone] { - min-height: 32px; - border-width: 1px; -} - -/* Button States */ -.theme-dark .devtools-button:not([disabled]):hover { - background: rgba(0, 0, 0, .3); /* Splitters */ -} -.theme-light .devtools-button:not([disabled]):hover { - background: rgba(170, 170, 170, .3); /* Splitters */ -} - -.theme-dark .devtools-button:not([disabled]):hover:active { - background: rgba(0, 0, 0, .4); /* Splitters */ -} -.theme-light .devtools-button:not([disabled]):hover:active { - background: rgba(170, 170, 170, .4); /* Splitters */ -} - -/* Menu type buttons and checked states */ -.theme-dark .devtools-button[checked] { - background: rgba(29, 79, 115, .7) !important; /* Select highlight blue */ - color: var(--theme-selection-color); -} - -.theme-light .devtools-button[checked] { - background: rgba(76, 158, 217, .2) !important; /* Select highlight blue */ -} - -.devtools-button::before { - content: ""; - display: block; - width: 16px; - height: 16px; - position: absolute; - left: 50%; - top: 50%; - margin: -8px 0 0 -8px; - background-repeat: no-repeat; -} - -@media (min-resolution: 2dppx) { - .devtools-button::before { - background-size: 32px; - } -} - -/* Text input */ - -.devtools-textinput, -.devtools-searchinput { - -moz-appearance: none; - margin: 0 3px; - border: 1px solid; - border-radius: 2px; - padding: 4px 6px; - border-color: var(--theme-splitter-color); -} - -.devtools-searchinput { - margin-top: 1px; - margin-bottom: 1px; - padding: 0; - -moz-padding-start: 22px; - -moz-padding-end: 12px; - background-position: 8px center; - background-size: 11px 11px; - background-repeat: no-repeat; - font-size: inherit; -} - -.theme-dark .devtools-searchinput { - background-image: url(magnifying-glass.png); -} - -.theme-light .devtools-searchinput { - background-image: url(magnifying-glass-light.png); -} - -@media (min-resolution: 2dppx) { - .theme-dark .devtools-searchinput { - background-image: url(magnifying-glass@2x.png); - } - - .theme-light .devtools-searchinput { - background-image: url(magnifying-glass-light@2x.png); - } -} - -.devtools-searchinput:-moz-locale-dir(rtl) { - background-position: calc(100% - 8px) center; -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons { - display: none; -} - -.devtools-no-search-result { - border-color: var(--theme-highlight-red) !important; -} - -/* Close button */ - -.devtools-closebutton { - -moz-appearance: none; - border: none; - margin: 0 4px; - min-width: 16px; - width: 16px; - opacity: 0.8; -} - -.devtools-closebutton > image { - width: 16px; - height: 16px; - -moz-appearance: none; - background-size: 16px 16px; - background-image: url("chrome://browser/skin/devtools/close@2x.png"); - background-position: center center; - background-repeat: no-repeat; -} - -.devtools-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; -} - -.devtools-closebutton > .toolbarbutton-text { - display: none; -} - -.devtools-closebutton:hover { - opacity: 1; -} - -/* In-tools sidebar */ -.devtools-sidebar-tabs { - -moz-appearance: none; - margin: 0; -} - -.devtools-sidebar-tabs > tabpanels { - -moz-appearance: none; - background: transparent; - padding: 0; - border: 0; -} - -.theme-light .devtools-sidebar-tabs > tabpanels { - background: var(--theme-sidebar-background); - color: var(--theme-body-color); -} - -.devtools-sidebar-tabs tabs { - position: static; - font: inherit; - margin-bottom: 0; - overflow: hidden; -} - -.devtools-sidebar-alltabs { - margin: 0; - border-width: 0 0 1px 0; - -moz-border-start-width: 1px; - border-style: solid; -} - -.devtools-sidebar-alltabs dropmarker { - display: none; -} - -.devtools-sidebar-tabs tabs > .tabs-right, -.devtools-sidebar-tabs tabs > .tabs-left { - display: none; -} - -.devtools-sidebar-tabs tabs > tab { - -moz-appearance: none; - /* We want to match the height of a toolbar with a toolbarbutton - * First, we need to replicated the padding of toolbar (4px), - * then we need to take the border of the buttons into account (1px). - */ - padding: 0 3px; - margin: 0; - min-width: 78px; - text-align: center; - background-color: transparent; - color: inherit; - -moz-box-flex: 1; - border-width: 0; - -moz-border-start-width: 1px; - border-style: solid; - border-radius: 0; - position: static; - text-shadow: none; -} - -.devtools-sidebar-tabs tabs > tab:first-child { - -moz-border-start-width: 0; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab { - border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab:hover { - background: hsla(206,37%,4%,.2); - border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab:hover:active { - background: hsla(206,37%,4%,.4); - border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab { - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { - background: hsla(206,37%,4%,.2); - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { - background: hsla(206,37%,4%,.4); - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; -} - -.theme-dark .devtools-sidebar-tabs tabs > tab[selected], -.theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active { - color: var(--theme-selection-color); - background: #1d4f73; - border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; -} - -.theme-light .devtools-sidebar-tabs tabs > tab { - border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; -} - -.theme-light .devtools-sidebar-tabs tabs > tab:hover { - background: #ddd; - border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; -} - -.theme-light .devtools-sidebar-tabs tabs > tab:hover:active { - background: #ddd; - border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; -} - -.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab { - border-image: linear-gradient(#aaa, #aaa); -} - -.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { - background: #ddd; - border-image: linear-gradient(#aaa, #aaa); -} - -.theme-light .devtools-sidebar-tabs tabs > tab[selected], -.theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active { - color: var(--theme-selection-color); - background: #4c9ed9; - border-image: linear-gradient(#aaa, #aaa); -} - -/* Toolbox - moved from toolbox.css. - * Rules that apply to the global toolbox like command buttons, - * devtools tabs, docking buttons, etc. */ - -#toolbox-controls > toolbarbutton, -#toolbox-dock-buttons > toolbarbutton { - -moz-appearance: none; - border: none; - margin: 0 4px; - min-width: 16px; - width: 16px; -} - -#toolbox-controls > toolbarbutton > .toolbarbutton-text, -#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text, -.command-button > .toolbarbutton-text { - display: none; -} - -#toolbox-dock-buttons > toolbarbutton > image { - -moz-appearance: none; - width: 16px; - height: 16px; - background-size: 16px 16px; - background-position: 0 center; - background-repeat: no-repeat; -} - -#toolbox-dock-bottom > image { - background-image: url("chrome://browser/skin/devtools/dock-bottom@2x.png"); -} - -#toolbox-dock-side > image { - background-image: url("chrome://browser/skin/devtools/dock-side@2x.png"); -} - -#toolbox-dock-window > image { - background-image: url("chrome://browser/skin/devtools/undock@2x.png"); -} - -#toolbox-dock-window, -#toolbox-dock-bottom, -#toolbox-dock-side { - opacity: 0.8; -} - -#toolbox-dock-window:hover, -#toolbox-dock-bottom:hover, -#toolbox-dock-side:hover { - opacity: 1; -} - -.devtools-separator { - margin: 0 2px; - width: 2px; - background-image: linear-gradient(transparent, hsla(204,45%,98%,.1), transparent), - linear-gradient(transparent, hsla(206,37%,4%,.6), transparent), - linear-gradient(transparent, hsla(204,45%,98%,.1), transparent); - background-size: 1px 100%; - background-repeat: no-repeat; - background-position: 0, 1px, 2px; -} - -#toolbox-buttons:empty + .devtools-separator, -.devtools-separator[invisible] { - visibility: hidden; -} - -#toolbox-controls-separator { - margin: 0; -} - -/* Command buttons */ - -.command-button { - -moz-appearance: none; - border: none; - padding: 0 8px; - margin: 0; - width: 32px; - position: relative; -} - -.command-button:hover { - background-color: hsla(206,37%,4%,.2); -} -.command-button:hover:active, .command-button[checked=true]:not(:hover) { - background-color: hsla(206,37%,4%,.4); -} - -.command-button > image { - -moz-appearance: none; - width: 16px; - height: 16px; - background-size: 64px 16px; - background-position: 0 center; - background-repeat: no-repeat; -} -.command-button:hover > image { - background-position: -16px center; -} -.command-button:hover:active > image { - background-position: -32px center; -} -.command-button[checked=true] > image { - background-position: -48px center; -} -.command-button[open=true] > image { - background-position: 0 center; -} - -#command-button-paintflashing > image { - background-image: url("chrome://browser/skin/devtools/command-paintflashing.png"); -} - -#command-button-screenshot > image { - background-image: url("chrome://browser/skin/devtools/command-screenshot.png"); -} - -#command-button-responsive > image { - background-image: url("chrome://browser/skin/devtools/command-responsivemode.png"); -} - -#command-button-tilt > image { - background-image: url("chrome://browser/skin/devtools/command-tilt.png"); -} - -#command-button-scratchpad > image { - background-image: url("chrome://browser/skin/devtools/command-scratchpad.png"); - background-size: 48px 16px; -} - -#command-button-pick > image { - background-image: url("chrome://browser/skin/devtools/command-pick.png"); -} - -#command-button-frames > image { - background-image: url("chrome://browser/skin/devtools/command-frames.png"); -} - -#command-button-splitconsole > image { - background-image: url("chrome://browser/skin/devtools/command-console.png"); -} - -#command-button-eyedropper > image { - background-image: url("chrome://browser/skin/devtools/command-eyedropper.png"); -} - -@media (min-resolution: 2dppx) { - #command-button-paintflashing > image { - background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png"); - } - - #command-button-screenshot > image { - background-image: url("chrome://browser/skin/devtools/command-screenshot@2x.png"); - } - - #command-button-responsive > image { - background-image: url("chrome://browser/skin/devtools/command-responsivemode@2x.png"); - } - - #command-button-tilt > image { - background-image: url("chrome://browser/skin/devtools/command-tilt@2x.png"); - } - - #command-button-scratchpad > image { - background-image: url("chrome://browser/skin/devtools/command-scratchpad@2x.png"); - } - - #command-button-pick > image { - background-image: url("chrome://browser/skin/devtools/command-pick@2x.png"); - } - - #command-button-frames > image { - background-image: url("chrome://browser/skin/devtools/command-frames@2x.png"); - } - - #command-button-splitconsole > image { - background-image: url("chrome://browser/skin/devtools/command-console@2x.png"); - } - - #command-button-eyedropper > image { - background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png"); - } -} - -/* Tabs */ - -.devtools-tabbar { - -moz-appearance: none; - min-height: 24px; - border: 0px solid; - border-bottom-width: 1px; - padding: 0; - background: var(--theme-tab-toolbar-background); - border-bottom-color: var(--theme-splitter-color); -} - -.theme-light .devtools-tabbar { - box-shadow: 0 -2px 0 rgba(170,170,170,.1) inset; -} - -.theme-dark .devtools-tabbar { - box-shadow: 0 -2px 0 rgba(0,0,0,.1) inset; -} - -#toolbox-tabs { - margin: 0; -} - -.devtools-tab { - -moz-appearance: none; - -moz-binding: url("chrome://global/content/bindings/general.xml#control-item"); - -moz-box-align: center; - min-width: 32px; - min-height: 24px; - max-width: 110px; - margin: 0; - padding: 0; - border-style: solid; - border-width: 0; - -moz-border-start-width: 1px; - -moz-box-align: center; -} - -.theme-dark .devtools-tab { - color: var(--theme-body-color-alt); - border-color: #42484f; -} - -.theme-light .devtools-tab { - color: var(--theme-body-color); - border-color: var(--theme-splitter-color); -} - -.theme-dark .devtools-tab:hover { - background-color: hsla(206,37%,4%,.2); - color: #ced3d9; -} - -.theme-light .devtools-tab:hover { - background-color: rgba(170,170,170,.2); -} - -.theme-dark .devtools-tab:hover:active { - background-color: hsla(206,37%,4%,.4); - color: var(--theme-selection-color); -} - -.theme-light .devtools-tab:hover:active { - background-color: rgba(170,170,170,.4); -} - -.theme-dark .devtools-tab:not([selected])[highlighted] { - background-color: hsla(99,100%,14%,.2); - box-shadow: 0 2px 0 #7bc107 inset; -} - -.theme-light .devtools-tab:not([selected])[highlighted] { - background-color: rgba(44, 187, 15, .2); -} - -.devtools-tab > image { - border: none; - -moz-margin-end: 0; - -moz-margin-start: 4px; - opacity: 0.6; - max-height: 16px; - width: 16px; /* Prevents collapse during theme switching */ -} - -.devtools-tab > label { - white-space: nowrap; -} - -.devtools-tab:hover > image { - opacity: 0.8; -} - -.devtools-tab:active > image, -.devtools-tab[selected] > image { - opacity: 1; -} - -.devtools-tabbar .devtools-tab[selected], -.devtools-tabbar .devtools-tab[selected]:hover:active { - color: var(--theme-selection-color); - background-color: var(--theme-selection-background); -} - -.theme-dark .devtools-tabbar .devtools-tab[selected] { - box-shadow: 0 2px 0 #d7f1ff inset, - 0 8px 3px -5px #2b82bf inset, - 0 -2px 0 rgba(0,0,0,.2) inset; -} - -.theme-light .devtools-tabbar .devtools-tab[selected] { - box-shadow: 0 2px 0 #d7f1ff inset, - 0 8px 3px -5px #2b82bf inset, - 0 -2px 0 rgba(0,0,0,.06) inset; -} - -#toolbox-tabs .devtools-tab[selected], -#toolbox-tabs .devtools-tab[highlighted] { - border-width: 0; - -moz-padding-start: 1px; -} - -#toolbox-tabs .devtools-tab[selected]:last-child, -#toolbox-tabs .devtools-tab[highlighted]:last-child { - -moz-padding-end: 1px; -} - -#toolbox-tabs .devtools-tab[selected] + .devtools-tab, -#toolbox-tabs .devtools-tab[highlighted] + .devtools-tab { - -moz-border-start-width: 0; - -moz-padding-start: 1px; -} - -#toolbox-tabs .devtools-tab:first-child[selected] { - -moz-border-start-width: 0; -} - -#toolbox-tabs .devtools-tab:last-child { - -moz-border-end-width: 1px; -} - -.devtools-tab:not([highlighted]) > .highlighted-icon, -.devtools-tab[selected] > .highlighted-icon, -.devtools-tab:not([selected])[highlighted] > .default-icon { - visibility: collapse; -} - -/* The options tab is special - it doesn't have the same parent - as the other tabs (toolbox-option-container vs toolbox-tabs) */ -#toolbox-option-container .devtools-tab:not([selected]) { - background-color: transparent; -} -#toolbox-option-container .devtools-tab { - border-color: transparent; - border-width: 0; - -moz-padding-start: 1px; -} -#toolbox-tab-options > image { - margin: 0 8px; -} - -/* Invert the colors of certain dark theme images for displaying - * inside of the light theme. - */ -.theme-light .devtools-tab[icon-invertable] > image, -.theme-light #toolbox-dock-buttons > toolbarbutton > image, -.theme-light .command-button-invertable > image, -.theme-light .command-button-invertable:active > image, -.theme-light .devtools-closebutton > image, -.theme-light .devtools-toolbarbutton > image, -.theme-light .devtools-option-toolbarbutton > image, -.theme-light #breadcrumb-separator-normal, -.theme-light .scrollbutton-up > .toolbarbutton-icon, -.theme-light .scrollbutton-down > .toolbarbutton-icon, -.theme-light #black-boxed-message-button .button-icon, -.theme-light .notice-container button .button-icon, -.theme-light #requests-menu-perf-notice-button .button-icon, -.theme-light #requests-menu-network-summary-button .button-icon, -.theme-light .event-tooltip-debugger-icon, -.theme-light .devtools-button::before { - filter: url("chrome://browser/skin/devtools/filters.svg#invert"); -} - -/* Since selected backgrounds are blue, we want to use the normal - * (light) icons. */ -.theme-light .command-button-invertable[checked=true]:not(:active) > image, -.theme-light .devtools-tab[icon-invertable][selected] > image, -.theme-light .devtools-tab[icon-invertable][highlighted] > image, -.theme-light #record-snapshot[checked] > image, -.theme-light #profiler-start[checked] > image, -.theme-light .notice-container button[checked] .button-icon { - filter: none !important; -} - -.theme-light .command-button:hover { - background-color: inherit; -} - -.theme-light .command-button:hover:active, -.theme-light .command-button[checked=true]:not(:hover) { - background-color: inherit; -} - -.hidden-labels-box:not(.visible) > label, -.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { - display: none; -} - -.devtools-invisible-splitter { - border-color: transparent; -} - -.devtools-horizontal-splitter { - border-bottom: 1px solid var(--theme-splitter-color); -} - -.devtools-side-splitter { - -moz-border-end: 1px solid var(--theme-splitter-color); - border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */ -} - -/* Throbbers */ -.devtools-throbber::before { - content: ""; - display: inline-block; - vertical-align: bottom; - -moz-margin-end: 0.5em; - width: 1em; - height: 1em; - border: 2px solid currentColor; - border-right-color: transparent; - border-radius: 50%; - animation: 1.1s linear throbber-spin infinite; -} - -@keyframes throbber-spin { - from { - transform: none; - } - to { - transform: rotate(360deg); - } -} diff --git a/src/chrome/appver/27/devtools/netmonitor.css b/src/chrome/appver/27/devtools/netmonitor.css @@ -1,881 +0,0 @@ -/* 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/. */ - -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - -#requests-menu-empty-notice { - margin: 0; - padding: 12px; - font-size: 120%; -} - -#notice-perf-message { - margin-top: 2px; -} - -#requests-menu-perf-notice-button { - min-width: 30px; - min-height: 26px; - margin: 0; - list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.svg"); -} - -#requests-menu-perf-notice-button .button-text { - display: none; -} - -#requests-menu-reload-notice-button { - min-height: 26px; - margin: 0; -} - - -/* Network requests table */ - -#requests-menu-toolbar { - padding: 0; -} - -.requests-menu-header:first-child, -.requests-menu-subitem:first-child { - -moz-padding-start: 6px; -} - -.requests-menu-subitem { - padding: 3px; -} - -.theme-dark .requests-menu-header:not(:last-child), -.theme-dark .requests-menu-subitem:not(:last-child) { - -moz-border-end: 1px solid rgba(0,0,0,0.2); - box-shadow: 1px 0 0 rgba(128,128,128,0.15); -} - -.theme-dark .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), -.theme-dark .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { - box-shadow: -1px 0 0 rgba(128,128,128,0.15); -} - -.theme-light .requests-menu-header:not(:last-child), -.theme-light .requests-menu-subitem:not(:last-child) { - -moz-border-end: 1px solid rgba(128,128,128,0.25); - box-shadow: 1px 0 0 transparent; -} - -.theme-light .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), -.theme-light .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { - box-shadow: -1px 0 0 transparent; -} - -.requests-menu-header-button { - -moz-appearance: none; - background: none; - min-width: 1px; - min-height: 24px; - margin: 0; - border: none; - padding: 0; - color: inherit; - font-weight: inherit !important; - transition: background-color 0.1s ease-in-out; -} - -.requests-menu-header-button:hover { - background: rgba(0,0,0,0.10); -} - -.requests-menu-header-button:hover:active { - background: rgba(0,0,0,0.25); -} - -.requests-menu-header-button:not(:active)[sorted] { - background: rgba(0,0,0,0.15); -} - -.requests-menu-header-button:not(:active)[sorted=ascending] { - background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); - background-size: 100% 1px; - background-repeat: no-repeat; -} - -.requests-menu-header-button:not(:active)[sorted=descending] { - background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); - background-size: 100% 1px; - background-repeat: no-repeat; - background-position: bottom; -} - -/* Network requests table: specific column dimensions */ - -.requests-menu-status-and-method { - width: 12em; -} - -.requests-menu-status { - width: 20px; - height: 10px; -} - -.requests-menu-method { - text-align: center; - font-weight: 600; -} - -.requests-menu-icon-and-file { - width: 20vw; - min-width: 4em; -} - -.requests-menu-icon { - background: #fff; - width: calc(1em + 4px); - height: calc(1em + 4px); - margin: -4px 0px; - -moz-margin-end: 4px; -} - -.theme-dark .requests-menu-icon { - outline: 1px solid rgba(0,0,0,0.2); -} - -.theme-light .requests-menu-icon { - outline: 1px solid rgba(128,128,128,0.25); -} - -.requests-menu-file { - text-align: start; -} - -.requests-menu-security-and-domain { - width: 14vw; - min-width: 10em; -} - -.requests-security-state-icon { - -moz-margin-end: 4px; - -moz-image-region:rect(0px, 16px, 16px, 0px); -} - -.requests-security-state-icon:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -.requests-security-state-icon:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} - -.security-state-insecure { - list-style-image: url(chrome://browser/skin/identity-icons-generic.png); -} - -.security-state-secure { - cursor: pointer; - list-style-image: url(chrome://browser/skin/identity-icons-https.png); -} - -.security-state-weak { - cursor: pointer; - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); -} - -.security-state-broken { - cursor: pointer; - list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); -} - -.requests-menu-type { - text-align: center; - width: 4em; -} - -.requests-menu-size { - text-align: center; - width: 8em; -} - -.requests-menu-transferred { - text-align: center; - width: 8em; -} - -/* Network requests table: status codes */ - -box.requests-menu-status { - background: #fff; - width: 10px; - -moz-margin-start: 5px; - -moz-margin-end: 5px; - border-radius: 10px; - transition: box-shadow 0.5s ease-in-out; -} - -label.requests-menu-status-code { - -moz-margin-start: 3px !important; - width: 3em; - -moz-margin-end: -3em !important; -} - -.theme-dark box.requests-menu-status:not([code]) { - background-color: rgba(95, 115, 135, 1); /* dark grey */ -} - -.theme-light box.requests-menu-status:not([code]) { - background-color: rgba(143, 161, 178, 1); /* grey */ -} - -.theme-dark box.requests-menu-status[code^="1"] { - background-color: rgba(70, 175, 227, 1); /* light blue */ -} - -.theme-light box.requests-menu-status[code^="1"] { - background-color: rgba(0, 136, 204, 1); /* light blue */ -} - -.theme-dark box.requests-menu-status[code^="2"] { - background-color: rgba(112, 191, 83, 1); /* green */ -} - -.theme-light box.requests-menu-status[code^="2"] { - background-color: rgba(44, 187, 15, 1); /* green */ -} - -/* 3xx are triangles */ -.theme-dark box.requests-menu-status[code^="3"] { - background-color: transparent; - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 10px solid rgba(217, 155, 40, 1); /* light orange */ - border-radius: 0; -} - -.theme-light box.requests-menu-status[code^="3"] { - background-color: transparent; - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 10px solid rgba(217, 126, 0, 1); /* light orange */ - border-radius: 0; -} - -/* 4xx and 5xx are squares - error codes */ -.theme-dark box.requests-menu-status[code^="4"] { - background-color: rgba(235, 83, 104, 1); /* red */ - border-radius: 0; /* squares */ -} - -.theme-light box.requests-menu-status[code^="4"] { - background-color: rgba(237, 38, 85, 1); /* red */ - border-radius: 0; /* squares */ -} - -.theme-dark box.requests-menu-status[code^="5"] { - background-color: rgba(223, 128, 255, 1); /* pink? */ - border-radius: 0; - transform: rotate(45deg); -} - -.theme-light box.requests-menu-status[code^="5"] { - background-color: rgba(184, 46, 229, 1); /* pink! */ - border-radius: 0; - transform: rotate(45deg); -} - -/* Network requests table: waterfall header */ - -#requests-menu-waterfall-label { - -moz-padding-start: 8px; - -moz-padding-end: 8px; -} - -.requests-menu-timings-division { - width: 100px; - padding-top: 2px; - -moz-padding-start: 4px; - font-size: 75%; - pointer-events: none; -} - -.requests-menu-timings-division:not(:first-child) { - -moz-border-start: 1px dotted; - -moz-margin-start: -100px !important; /* Don't affect layout. */ -} - -.requests-menu-timings-division:-moz-locale-dir(ltr) { - transform-origin: left center; -} - -.requests-menu-timings-division:-moz-locale-dir(rtl) { - transform-origin: right center; -} - -.theme-dark .requests-menu-timings-division[division-scale=millisecond] { - -moz-border-start-color: var(--theme-selection-color) !important; -} - -.theme-light .requests-menu-timings-division[division-scale=millisecond] { - -moz-border-start-color: var(--theme-body-color-alt) !important; -} - -.theme-dark .requests-menu-timings-division[division-scale=second] { - -moz-border-start-color: var(--theme-selection-color) !important; - font-weight: 600; -} - -.theme-light .requests-menu-timings-division[division-scale=second] { - -moz-border-start-color: var(--theme-body-color-alt) !important; - font-weight: 600; -} - -.theme-dark .requests-menu-timings-division[division-scale=minute] { - -moz-border-start-color: var(--theme-selection-color) !important; - font-weight: 600; -} - -.theme-light .requests-menu-timings-division[division-scale=minute] { - -moz-border-start-color: var(--theme-body-color-alt) !important; - font-weight: 600; -} - -/* Network requests table: waterfall items */ - -.requests-menu-subitem.requests-menu-waterfall { - -moz-padding-start: 0px; - -moz-padding-end: 4px; - /* Background created on a <canvas> in js. */ - /* @see browser/devtools/netmonitor/netmonitor-view.js */ - background-image: -moz-element(#waterfall-background); - background-repeat: repeat-y; - background-position: -1px center; -} - -.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) { - background-position: right center; -} - -.requests-menu-timings:-moz-locale-dir(ltr) { - transform-origin: left center; -} - -.requests-menu-timings:-moz-locale-dir(rtl) { - transform-origin: right center; -} - -.requests-menu-timings-total:-moz-locale-dir(ltr) { - transform-origin: left center; -} - -.requests-menu-timings-total:-moz-locale-dir(rtl) { - transform-origin: right center; -} - -.requests-menu-timings-total { - -moz-padding-start: 4px; - font-size: 85%; - font-weight: 600; -} - -.requests-menu-timings-box { - height: 9px; -} - -.requests-menu-timings-box.blocked { - background-color: rgba(235, 83, 104, 0.8); /* red */ -} - -.requests-menu-timings-box.dns { - background-color: rgba(223, 128, 255, 0.8); /* pink */ -} - -.requests-menu-timings-box.connect { - background-color: rgba(217, 102, 41, 0.8); /* orange */ -} - -/* Use custom colors for dark and light theme on remaining timing types. */ -.theme-dark .requests-menu-timings-box.send { - background-color: rgba(70, 175, 227, 0.8); /* light blue */ -} - -.theme-light .requests-menu-timings-box.send { - background-color: rgba(0, 136, 204, 0.8); /* blue */ -} - -.theme-dark .requests-menu-timings-box.wait { - background-color: rgba(94, 136, 176, 0.8); /* blue grey */ -} - -.theme-light .requests-menu-timings-box.wait { - background-color: rgba(95, 136, 176, 0.8); /* blue grey */ -} - -.theme-dark .requests-menu-timings-box.receive { - background-color: rgba(112, 191, 83, 0.8); /* green */ -} - -.theme-light .requests-menu-timings-box.receive { - background-color: rgba(44, 187, 15, 0.8); /* green */ -} - -/* SideMenuWidget */ - -.side-menu-widget-item-contents { - padding: 0px; -} - -.theme-dark .side-menu-widget-item:not(.selected)[odd] { - background: rgba(255,255,255,0.05); -} - -.theme-light .side-menu-widget-item:not(.selected)[odd] { - background: rgba(128,128,128,0.05); -} - -/* Network request details */ - -#details-pane-toggle { - background: none; - box-shadow: none; - border-color: transparent; - list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png"); - -moz-image-region: rect(0px,16px,16px,0px); -} - -#details-pane-toggle > .toolbarbutton-icon { - width: 16px; - height: 16px; -} - -#details-pane-toggle[pane-collapsed] { - list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png"); -} - -#details-pane-toggle:active { - -moz-image-region: rect(0px,32px,16px,16px); -} - -@media (min-resolution: 2dppx) { - #details-pane-toggle { - list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png"); - -moz-image-region: rect(0px,32px,32px,0px); - } - - #details-pane-toggle[pane-collapsed] { - list-style-image: url("chrome://browser/skin/devtools/debugger-expand@2x.png"); - } - - #details-pane-toggle:active { - -moz-image-region: rect(0px,64px,32px,32px); - } -} - -/* Network request details tabpanels */ - -.theme-dark .tabpanel-content { - background-color: var(--theme-toolbar-background); - color: var(--theme-selection-color); -} - -/* Summary tabpanel */ - -.tabpanel-summary-container { - padding: 1px; -} - -.tabpanel-summary-label { - -moz-padding-start: 4px; - -moz-padding-end: 3px; - font-weight: 600; -} - -.tabpanel-summary-value { - color: inherit; - -moz-padding-start: 3px; -} - -/* Headers tabpanel */ - -#headers-summary-status, -#headers-summary-version { - padding-bottom: 2px; -} - -#headers-summary-size { - padding-top: 2px; -} - -#headers-summary-resend { - margin-top: -10px; - -moz-margin-end: 6px; -} - -#toggle-raw-headers { - margin-top: -10px; - -moz-margin-end: 6px; -} - -.raw-response-textarea { - height: 50vh; -} - -/* Response tabpanel */ - -#response-content-info-header { - margin: 0; - padding: 3px 8px; - background-color: var(--theme-highlight-red); - color: var(--theme-selection-color); -} - -#response-content-image-box { - padding-top: 10px; - padding-bottom: 10px; -} - -#response-content-image { - background: #fff; - border: 1px dashed GrayText; - margin-bottom: 10px; -} - -/* Preview tabpanel */ - -#preview-tabpanel { - background: #fff; -} - -#response-preview { - display: -moz-box; - -moz-box-flex: 1; -} - -/* Timings tabpanel */ - -#timings-tabpanel .tabpanel-summary-label { - width: 10em; -} - -#timings-tabpanel .requests-menu-timings-box { - transition: transform 0.2s ease-out; - border: none; - min-width: 1px; -} - -#timings-tabpanel .requests-menu-timings-total { - transition: transform 0.2s ease-out; -} - -/* Security tabpanel */ -.security-info-section { - -moz-padding-start: 1em; -} - -#security-tabpanel { - overflow: auto; -} - -.security-warning-icon { - background-image: url("chrome://browser/skin/devtools/alerticon-warning.png"); - background-size: 13px 12px; - -moz-margin-start: 5px; - vertical-align: top; - width: 13px; - height: 12px; -} - -@media (min-resolution: 2dppx) { - .security-warning-icon { - background-image: url("chrome://browser/skin/devtools/alerticon-warning@2x.png"); - } -} - -/* Custom request form */ - -#custom-pane { - padding: 0.6em 0.5em; -} - -.custom-header { - font-size: 1.1em; -} - -.custom-section { - margin-top: 0.5em; -} - -#custom-method-value { - width: 4.5em; -} - -/* Footer */ - -.theme-dark #requests-menu-footer { - border-top: 1px solid rgba(0,0,0,0.2); - box-shadow: 0 1px 0 rgba(128,128,128,0.15) inset; - background-color: var(--theme-toolbar-background); -} - -.theme-light #requests-menu-footer { - border-top: 1px solid rgba(128,128,128,0.25); - box-shadow: 0 1px 0 transparent inset; - background-color: var(--theme-toolbar-background); -} - -.requests-menu-footer-button, -.requests-menu-footer-label { - min-width: 1em; - margin: 0; - border: none; - padding: 2px 1vw; -} - -.theme-dark .requests-menu-footer-button, -.theme-dark .requests-menu-footer-label { - color: var(--theme-selection-color); -} - -.theme-light .requests-menu-footer-button, -.theme-light .requests-menu-footer-label { - color: var(--theme-body-color); -} - -.requests-menu-footer-spacer { - min-width: 2px; -} - -.theme-dark .requests-menu-footer-spacer:not(:first-child), -.theme-dark .requests-menu-footer-button:not(:first-child) { - -moz-border-start: 1px solid rgba(128,128,128,0.15); - box-shadow: -1px 0 0 rgba(0,0,0,0.2); -} - -.theme-light .requests-menu-footer-spacer:not(:first-child), -.theme-light .requests-menu-footer-button:not(:first-child) { - -moz-border-start: 1px solid transparent; - box-shadow: -1px 0 0 rgba(128,128,128,0.25); -} - -.requests-menu-footer-button { - -moz-appearance: none; - background: rgba(0,0,0,0.025); -} - -.requests-menu-footer-button:hover { - background: rgba(0,0,0,0.10); -} - -.theme-dark .requests-menu-footer-button:hover:active { - background-color: rgba(29,79,115,0.4); /* Select Highlight Blue at 40% opacity */ -} - -.theme-light .requests-menu-footer-button:hover:active { - background-color: rgba(76,158,217,0.4); /* Select Highlight Blue at 40% opacity */ -} - -.theme-dark .requests-menu-footer-button:not(:active)[checked] { - background-color: rgba(29,79,115,1); /* Select Highlight Blue */ - color: rgba(245,247,250,1); /* Light foreground text */ -} - -.theme-light .requests-menu-footer-button:not(:active)[checked] { - background-color: rgba(76,158,217,1); /* Select Highlight Blue */ - color: rgba(245,247,250,1); /* Light foreground text */ -} - -.requests-menu-footer-label { - padding-top: 3px; - font-weight: 600; -} - -/* Performance analysis buttons */ - -#requests-menu-network-summary-button { - background: none; - box-shadow: none; - border-color: transparent; - list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.svg"); - -moz-padding-end: 0; - cursor: pointer; -} - -#requests-menu-network-summary-label { - -moz-padding-start: 0; - cursor: pointer; -} - -#requests-menu-network-summary-label:hover { - text-decoration: underline; -} - -/* Performance analysis view */ - -#network-statistics-toolbar { - border: none; - margin: 0; - padding: 0; -} - -#network-statistics-back-button { - min-width: 4em; - min-height: 100vh; - margin: 0; - padding: 0; - border-radius: 0; - border-top: none; - border-bottom: none; - -moz-border-start: none; -} - -#network-statistics-view-splitter { - border-color: rgba(0,0,0,0.2); - cursor: default; - pointer-events: none; -} - -#network-statistics-charts { - min-height: 1px; -} - -#network-statistics-charts { - background-color: var(--theme-toolbar-background); -} - -#network-statistics-charts .pie-chart-container { - -moz-margin-start: 3vw; - -moz-margin-end: 1vw; -} - -#network-statistics-charts .table-chart-container { - -moz-margin-start: 1vw; - -moz-margin-end: 3vw; -} - -.chart-colored-blob[name=html] { - fill: var(--theme-highlight-bluegrey); - background: var(--theme-highlight-bluegrey); -} - -.chart-colored-blob[name=css] { - fill: var(--theme-highlight-blue); - background: var(--theme-highlight-blue); -} - -.chart-colored-blob[name=js] { - fill: var(--theme-highlight-lightorange); - background: var(--theme-highlight-lightorange); -} - -.chart-colored-blob[name=xhr] { - fill: var(--theme-highlight-orange); - background: var(--theme-highlight-orange); -} - -.chart-colored-blob[name=fonts] { - fill: var(--theme-highlight-purple); - background: var(--theme-highlight-purple); -} - -.chart-colored-blob[name=images] { - fill: var(--theme-highlight-pink); - background: var(--theme-highlight-pink); -} - -.chart-colored-blob[name=media] { - fill: var(--theme-highlight-green); - background: var(--theme-highlight-green); -} - -.chart-colored-blob[name=flash] { - fill: var(--theme-highlight-red); - background: var(--theme-highlight-red); -} - -.table-chart-row-label[name=cached] { - display: none; -} - -.table-chart-row-label[name=count] { - width: 3em; - text-align: end; -} - -.table-chart-row-label[name=label] { - width: 7em; -} - -.table-chart-row-label[name=size] { - width: 7em; -} - -.table-chart-row-label[name=time] { - width: 7em; -} - -/* Responsive sidebar */ -@media (max-width: 700px) { - #requests-menu-toolbar { - height: 22px; - } - - .requests-menu-header-button { - min-height: 20px; - } - - #details-pane { - margin: 0 !important; - /* To prevent all the margin hacks to hide the sidebar. */ - } - - .requests-menu-status-and-method { - width: 16vw; - } - - .requests-menu-icon-and-file { - width: 30vw; - } - - .requests-menu-security-and-domain { - width: 30vw; - } - - .requests-menu-type { - width: 8vw; - } - - .requests-menu-size { - width: 16vw; - border-width: 0 !important; - box-shadow: none !important; - /* The "Timeline" header is not visible anymore, and thus the - right border and box-shadow of "Size" column should be hidden. */ - } -} - -.requests-menu-header-button > .button-box { - padding: 0; -} - -.requests-menu-timings-division { - padding-top: 1px; - font-size: 90%; -} - -.requests-menu-footer-button, -.requests-menu-footer-label { - padding-top: 0px; - padding-bottom: 0px; -} - -/* Responsive sidebar */ -@media (max-width: 700px) { - .requests-menu-footer-button, - .requests-menu-footer-label { - padding-top: 0px; - padding-bottom: 0px; - } -} diff --git a/src/chrome/appver/27/devtools/profiler.css b/src/chrome/appver/27/devtools/profiler.css @@ -1,398 +0,0 @@ -/* 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/. */ - -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - -/* CSS Variables specific to this panel that aren't defined by the themes */ -.theme-dark { - --cell-border-color: rgba(255,255,255,0.15); - --focus-cell-border-color: rgba(0,0,0,0.3); - --row-alt-background-color: rgba(29,79,115,0.15); - --row-hover-background-color: rgba(29,79,115,0.25); - --tab-hover-background-color: rgba(0,0,0,0.3); -} - -.theme-light { - --cell-border-color: rgba(0,0,0,0.15); - --focus-cell-border-color: rgba(255,255,255,0.5); - --row-alt-background-color: rgba(76,158,217,0.1); - --row-hover-background-color: rgba(76,158,217,0.2); - --tab-hover-background-color: rgba(255,255,255,0.8); -} - -/* Reload and waiting notices */ - -.notice-container { - margin-top: -50vh; - font-size: 120%; - background-color: var(--theme-toolbar-background); - color: var(--theme-body-color-alt); -} - -#empty-notice button, -#recording-notice button { - min-width: 30px; - min-height: 28px; - margin: 0; - list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.svg"); -} - -#empty-notice button[checked], -#recording-notice button[checked] { - list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch-checked.svg"); -} - -#empty-notice button .button-text, -#recording-notice button .button-text { - display: none; -} - -.theme-dark #loading-notice { - font-size: 250%; - color: rgba(255,255,255,0.2); -} - -.theme-light #loading-notice { - font-size: 250%; - color: rgba(0,0,0,0.2); -} - -/* Recordings pane */ - -#recordings-pane > tabs, -#recordings-pane .devtools-toolbar { - -moz-border-end-width: 1px; -} - -#recordings-pane > tabs, -#recordings-pane .devtools-toolbar { - -moz-border-end-color: var(--theme-splitter-color); -} - -#record-button { - list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.svg"); -} - -#record-button[checked] { - list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch-checked.svg"); -} - -#record-button[locked] { - pointer-events: none; -} - -/* Recording items */ - -.recording-item { - padding: 4px; -} - -.recording-item-title { - font-size: 110%; -} - -.recording-item-footer { - padding-top: 4px; - font-size: 90%; -} - -.recording-item-save { - text-decoration: underline; - cursor: pointer; -} - -.recording-item-duration, -.recording-item-save { - color: var(--theme-body-color-alt); -} - -#recordings-list .selected label { - /* Text inside a selected item should not be custom colored. */ - color: inherit !important; -} - -/* Profile pane */ - -#profile-content tabs { - -moz-box-align: stretch; - height: 24px; - font: inherit; -} - -#profile-content tab { - -moz-box-flex: 0; - background-color: transparent; - border: none; - border-radius: 0; - padding: 0; - text-shadow: none; - transition-duration: 0.25s; - transition-timing-function: ease-in-out; - transition-property: opacity, transform; -} - -#profile-content tab { - color: var(--theme-body-color); -} - -#profile-content tab:not([selected]) { - cursor: pointer; -} - -#profile-content tab[covered] { - opacity: 0; - transform: translateY(100%); -} - -#profile-content tab { - -moz-appearance: none; - -moz-border-end: 1px solid var(--theme-splitter-color); -} - -#profile-content tab:hover { - background-color: var(--tab-hover-background-color); -} - -#profile-content tab[selected] { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -#profile-content tabpanel { - -moz-box-orient: vertical; - transform: translateZ(1px); /* Make sure the tabpanel appears above the tab */ -} - -#profile-newtab-button { - -moz-appearance: none; - background-color: transparent; - background-position: 4px 2px; - background-size: 54px 20px; - min-width: 26px; - margin: 0; - border: none; - cursor: pointer; -} - -.theme-dark #profile-newtab-button { - background-color: rgba(112,191,83,0.2); -} - -.theme-light #profile-newtab-button { - background-color: rgba(44,187,15,0.2); -} - -.theme-dark #profile-newtab-button { - background-image: url("chrome://browser/skin/devtools/newtab-inverted.png"); -} - -.theme-light #profile-newtab-button { - background-image: url("chrome://browser/skin/devtools/newtab.png"); -} - -@media (min-resolution: 2dppx) { - .theme-dark #profile-newtab-button { - background-image: url("chrome://browser/skin/devtools/newtab-inverted@2x.png"); - } - - .theme-light #profile-newtab-button { - background-image: url("chrome://browser/skin/devtools/newtab@2x.png"); - } -} - -#profile-newtab-button:hover { - background-position: 40px 2px; -} - -#profile-newtab-button:hover:active { - background-position: 22px 2px; -} - -/* Profile call tree */ - -.call-tree-headers-container { - border-top: 1px solid var(--theme-splitter-color); -} - -.call-tree-cells-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); - overflow: auto; -} - -.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="allocations"], -.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="self-allocations"], -.call-tree-cells-container[categories-hidden] .call-tree-category { - display: none; -} - -.call-tree-header[type="duration"], -.call-tree-cell[type="duration"], -.call-tree-header[type="self-duration"], -.call-tree-cell[type="self-duration"] { - width: 9em; -} - -.call-tree-header[type="percentage"], -.call-tree-cell[type="percentage"], -.call-tree-header[type="self-percentage"], -.call-tree-cell[type="self-percentage"] { - width: 6em; -} - -.call-tree-header[type="samples"], -.call-tree-cell[type="samples"] { - width: 5em; -} - -.call-tree-header[type="function"], -.call-tree-cell[type="function"] { - -moz-box-flex: 1; -} - -.call-tree-header, -.call-tree-cell { - -moz-box-align: center; - overflow: hidden; - padding: 1px 4px; - color: var(--theme-body-color); -} - -.call-tree-header:not(:last-child), -.call-tree-cell:not(:last-child) { - -moz-border-end-width: 1px; - -moz-border-end-style: solid; -} - -.call-tree-header, -.call-tree-cell { - -moz-border-end-color: var(--cell-border-color); -} - -.call-tree-header:not(:last-child) { - text-align: center; -} - -.call-tree-cell:not(:last-child) { - text-align: end; -} - -.call-tree-header { - background-color: var(--theme-tab-toolbar-background); -} - -.call-tree-item:last-child:not(:focus) { - border-bottom: 1px solid var(--cell-border-color); -} - -.call-tree-item:nth-child(2n) { - background-color: var(--row-alt-background-color); -} - -.call-tree-item:hover { - background-color: var(--row-hover-background-color); -} - -.call-tree-item:focus { - background-color: var(--theme-selection-background); -} - -.call-tree-item:focus label { - color: var(--theme-selection-color) !important; -} - -.call-tree-item:focus .call-tree-cell { - -moz-border-end-color: var(--focus-cell-border-color); -} - -.call-tree-item:not([origin="content"]) .call-tree-name, -.call-tree-item:not([origin="content"]) .call-tree-url, -.call-tree-item:not([origin="content"]) .call-tree-line, -.call-tree-item:not([origin="content"]) .call-tree-column { - /* Style chrome and non-JS nodes differently. */ - opacity: 0.6; -} - -.call-tree-url { - -moz-margin-start: 4px !important; - cursor: pointer; -} - -.call-tree-url:hover { - text-decoration: underline; -} - -.call-tree-url { - color: var(--theme-highlight-blue); -} - -.call-tree-line { - color: var(--theme-highlight-orange); -} - -.call-tree-column { - color: var(--theme-highlight-orange); - opacity: 0.6; -} - -.call-tree-host { - -moz-margin-start: 8px !important; - font-size: 90%; - color: var(--theme-content-color2); -} - -.call-tree-name[value=""], -.call-tree-url[value=""], -.call-tree-line[value=""], -.call-tree-column[value=""], -.call-tree-host[value=""] { - display: none; -} - -.call-tree-zoom { - -moz-appearance: none; - background-color: transparent; - background-position: center; - background-repeat: no-repeat; - background-size: 11px; - min-width: 11px; - -moz-margin-start: 8px !important; - cursor: zoom-in; - opacity: 0; -} - -.theme-dark .call-tree-zoom { - background-image: url("chrome://browser/skin/devtools/magnifying-glass.png"); -} - -.theme-light .call-tree-zoom { - background-image: url("chrome://browser/skin/devtools/magnifying-glass-light.png"); -} - -@media (min-resolution: 2dppx) { - .theme-dark .call-tree-zoom { - background-image: url("chrome://browser/skin/devtools/magnifying-glass@2x.png"); - } - - .theme-light .call-tree-zoom { - background-image: url("chrome://browser/skin/devtools/magnifying-glass-light@2x.png"); - } -} - -.call-tree-item:hover .call-tree-zoom { - transition: opacity 0.3s ease-in; - opacity: 1; -} - -.call-tree-item:hover .call-tree-zoom:hover { - opacity: 0; -} - -.call-tree-category { - transform: scale(0.75); - transform-origin: center right; -} diff --git a/src/chrome/appver/27/devtools/ruleview.css b/src/chrome/appver/27/devtools/ruleview.css @@ -1,232 +0,0 @@ -/* 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/. */ - -.ruleview { - height: 100%; -} - -.ruleview-rule-source { - -moz-padding-start: 5px; - text-align: end; - float: right; - -moz-user-select: none; -} - -.ruleview-rule-source, -.ruleview-rule-source > label { - cursor: pointer; -} - -.ruleview-rule-source[unselectable], -.ruleview-rule-source[unselectable] > label { - cursor: default; -} - -.ruleview-rule-source:not([unselectable]):hover { - text-decoration: underline; -} - -.ruleview-header { - border-top-width: 1px; - border-bottom-width: 1px; - border-top-style: solid; - border-bottom-style: solid; - padding: 1px 4px; - -moz-user-select: none; - word-wrap: break-word; - margin-top: 4px; -} - -.ruleview-rule-pseudo-element { - padding-left:20px; - border-left: solid 10px; -} - -.ruleview-rule, -#noResults { - padding: 2px 4px; -} - -/* User agent styles are not editable, display them differently */ -.ruleview-rule[uneditable=true] { - background: var(--theme-tab-toolbar-background); -} - -.ruleview-rule[uneditable=true] :focus { - outline: none; -} - -.ruleview-rule[uneditable=true] .theme-link { - color: var(--theme-highlight-bluegrey); -} - -.ruleview-rule[uneditable=true] .ruleview-enableproperty { - visibility: hidden; -} - -.ruleview-rule[uneditable=true] .ruleview-colorswatch, -.ruleview-rule[uneditable=true] .ruleview-bezierswatch { - cursor: default; -} - - -.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname, -.ruleview-rule[uneditable=true] .ruleview-propertycontainer > .ruleview-propertyvalue { - border-bottom-color: transparent; -} - -#noResults { - font: message-box; - color: GrayText; -} - -.ruleview-rule + .ruleview-rule { - border-top-width: 1px; - border-top-style: dotted; -} - -.ruleview-warning { - background-image: url("chrome://browser/skin/devtools/alerticon-warning.png"); - background-size: 13px 12px; - -moz-margin-start: 5px; - display: inline-block; - vertical-align: top; - width: 13px; - height: 12px; -} - - -@media (min-resolution: 2dppx) { - .ruleview-warning { - background-image: url("chrome://browser/skin/devtools/alerticon-warning@2x.png"); - } -} - -.ruleview-ruleopen { - -moz-padding-end: 5px; -} - -.ruleview-ruleclose { - cursor: text; - padding-right: 20px; -} - -.ruleview-propertylist { - list-style: none; - padding: 0; - margin: 0; -} - -.ruleview-rule:not(:hover) .ruleview-enableproperty { - visibility: hidden; -} - -.ruleview-expander { - display: inline-block; -} - -.ruleview-newproperty { - /* (enable checkbox width: 12px) + (expander width: 15px) */ - -moz-margin-start: 27px; -} - -.ruleview-namecontainer, -.ruleview-propertycontainer, -.ruleview-propertyname, -.ruleview-propertyvalue { - text-decoration: inherit; -} - -.ruleview-computedlist { - list-style: none; - padding: 0; -} - -.ruleview-computed { - -moz-margin-start: 35px; -} - -.ruleview-colorswatch, -.ruleview-bezierswatch { - cursor: pointer; - border-radius: 50%; - width: 1em; - height: 1em; - vertical-align: text-top; - -moz-margin-end: 5px; - display: inline-block; - position: relative; -} - -.ruleview-colorswatch::before { - content: ''; - background-color: #eee; - background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), - linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); - background-size: 12px 12px; - background-position: 0 0, 6px 6px; - position: absolute; - border-radius: 50%; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: -1; -} - -.ruleview-bezierswatch { - background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png"); - background-size: 1em; -} - -@media (min-resolution: 2dppx) { - .ruleview-bezierswatch { - background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png"); - background-size: 1em; - } -} - -.ruleview-overridden { - text-decoration: line-through; -} - -.theme-light .ruleview-overridden { - text-decoration-color: var(--theme-content-color3); -} - -.styleinspector-propertyeditor { - border: 1px solid #CCC; - padding: 0; -} - -.ruleview-property { - border-left: 3px solid transparent; - clear: right; -} - -.ruleview-property > * { - vertical-align: middle; -} - -.ruleview-property[dirty] { - border-left-color: var(--theme-highlight-green); -} - -.ruleview-namecontainer > .ruleview-propertyname, -.ruleview-propertycontainer > .ruleview-propertyvalue { - border-bottom: 1px dashed transparent; -} - -.ruleview-namecontainer:hover > .ruleview-propertyname, -.ruleview-propertycontainer:hover > .ruleview-propertyvalue { - border-bottom-color: hsl(0,0%,50%); -} - -.ruleview-selector { - word-wrap: break-word; -} - -.ruleview-selector-separator, .ruleview-selector-unmatched { - color: #888; -} diff --git a/src/chrome/appver/27/devtools/scratchpad.css b/src/chrome/appver/27/devtools/scratchpad.css @@ -1,13 +0,0 @@ -/* 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/. */ - - -#scratchpad-sidebar > tabs { - height: 0; - border: none; -} - -#sp-toolbar { - border: none; -} diff --git a/src/chrome/appver/27/devtools/shadereditor.css b/src/chrome/appver/27/devtools/shadereditor.css @@ -1,123 +0,0 @@ -/* 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/. */ - -/* 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/. */ - -/* Reload and waiting notices */ - -.notice-container { - margin-top: -50vh; - background-color: var(--theme-toolbar-background); - color: var(--theme-body-color-alt); -} - -#reload-notice { - font-size: 120%; -} - -#waiting-notice { - font-size: 110%; -} - -/* Shaders pane */ - -#shaders-pane { - min-width: 150px; -} - -#shaders-pane + .devtools-side-splitter { - border-color: transparent; -} - -.program-item { - padding: 2px 0px; -} - -.side-menu-widget-item-checkbox { - -moz-appearance: none; - opacity: 0; - transition: opacity .15s ease-out 0s; -} - -/* Only show the checkbox when the source is hovered over, is selected, or if it - * is not checked. */ -.side-menu-widget-item:hover > .side-menu-widget-item-checkbox, -.side-menu-widget-item.selected > .side-menu-widget-item-checkbox, -.side-menu-widget-item-checkbox:not([checked]) { - opacity: 1; - transition: opacity .15s ease-out 0s; -} - -.side-menu-widget-item-checkbox .checkbox-check { - -moz-appearance: none; - background-image: url("chrome://browser/skin/devtools/itemToggle.png"); - background-color: transparent; - background-repeat: no-repeat; - background-clip: content-box; - background-size: 32px 16px; - background-position: -16px 0; - width: 16px; - height: 16px; - border: 0; -} - -@media (min-resolution: 2dppx) { - .side-menu-widget-item-checkbox .checkbox-check { - background-image: url("chrome://browser/skin/devtools/itemToggle@2x.png"); - } -} - -.side-menu-widget-item-checkbox[checked] .checkbox-check { - background-position: 0 0; -} - -/* Invert all toggle icons but the one in the active row for light theme */ -.theme-light .side-menu-widget-item:not(.selected) .checkbox-check { - filter: url("chrome://browser/skin/devtools/filters.svg#invert"); -} - -/* Shader source editors */ - -.editor-label { - padding: 1px 12px; - border-top: 1px solid; -} - -.editor-label { - background: var(--theme-toolbar-background); - border-color: var(--theme-splitter-color); - color: var(--theme-body-color-alt); -} - -.editor-label[selected] { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -/* Responsive sidebar */ - -@media (max-width: 700px) { - #shaders-pane { - max-height: 60vh; - } - - #editors-splitter { - border-color: transparent; - } - - .side-menu-widget-container { - box-shadow: none !important; - } - - .side-menu-widget-item-arrow { - background-image: none !important; - } - - .editor-label { - -moz-box-ordinal-group: 0; - border-bottom: 1px solid; - } -} diff --git a/src/chrome/appver/27/devtools/splitview.css b/src/chrome/appver/27/devtools/splitview.css @@ -1,152 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - - -.splitview-nav-container .devtools-throbber { - display: none; - text-align: center; -} - -.loading .splitview-nav-container .devtools-throbber { - display: block; -} - -.theme-dark .splitview-nav-container { - background-color: var(--theme-toolbar-background); -} - -.splitview-nav { - -moz-appearance: none; - list-style-image: none; - list-style: none; - padding: 0; - margin: 0; -} - -.theme-dark .splitview-nav { - box-shadow: inset -1px 0 0 #000; -} - -.theme-dark .splitview-nav:-moz-locale-dir(rtl) { - box-shadow: inset 1px 0 0 #000; -} - -.theme-light .splitview-nav { - box-shadow: inset -1px 0 0 #aaa; -} - -.theme-light .splitview-nav:-moz-locale-dir(rtl) { - box-shadow: inset 1px 0 0 #aaa; -} - -.splitview-nav > li { - /* To compensate for the top and bottom borders */ - margin-top: -1px; - margin-bottom: -1px; - -moz-padding-end: 8px; - -moz-box-align: center; - outline: 0; - vertical-align: bottom; -} - -.theme-dark .splitview-nav > li { - border-top: 1px solid rgba(0,0,0,0.2); - border-bottom: 1px solid rgba(128,128,128,0.15); -} - -.theme-dark .splitview-nav > li:last-of-type { - box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); -} - -.theme-light .splitview-nav > li { - border-top: 1px solid rgba(128,128,128,0.15); - border-bottom: 1px solid transparent; -} - -.theme-light .splitview-nav > li:last-of-type { - box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15); -} - -.placeholder { - -moz-box-flex: 1; - text-align: center; -} - -.splitview-nav > li.splitview-active { - background-repeat: no-repeat, no-repeat, repeat-x; - background-position: center right, center right, top left; - background-size: auto, 1px, auto; -} - -.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) { - background-repeat: no-repeat, no-repeat, repeat-x; - background-position: center left, center left, top right; -} - -.theme-dark .splitview-nav > li.splitview-active { - background-image: url("chrome://browser/skin/devtools/itemArrow-dark-ltr.svg"), - linear-gradient(#000, #000), - linear-gradient(#1d4f73, #1d4f73); -} - -.theme-dark .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) { - background-image: url("chrome://browser/skin/devtools/itemArrow-dark-rtl.svg"), - linear-gradient(#000, #000), - linear-gradient(#1d4f73, #1d4f73); -} - -.theme-light .splitview-nav > li.splitview-active { - background-image: url("chrome://browser/skin/devtools/itemArrow-ltr.svg"), - linear-gradient(#aaa, #aaa), - linear-gradient(#4c9ed9, #4c9ed9); -} - -.theme-light .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) { - background-image: url("chrome://browser/skin/devtools/itemArrow-rtl.svg"), - linear-gradient(#aaa, #aaa), - linear-gradient(#4c9ed9, #4c9ed9); -} - -/* Toolbars */ - -.splitview-main > .devtools-toolbar { - background-origin: border-box; - background-clip: border-box; -} - -.theme-dark .splitview-main > toolbar, -.theme-dark .loading .splitview-nav-container { - -moz-border-end: 1px solid #000; -} - -.theme-light .splitview-main > toolbar, -.theme-light .loading .splitview-nav-container { - -moz-border-end: 1px solid #aaa; -} - -.splitview-main > .devtools-toolbarbutton { - font-size: 11px; - padding: 0 8px; - width: auto; - min-width: 48px; - min-height: 0; -} - - -/* Resizers */ - -.splitview-portrait-resizer { - -moz-appearance: none; - background: linear-gradient(black 1px, rgba(255,255,255,0.2) 1px), - linear-gradient(hsl(210,11%,36%), hsl(210,11%,18%)); - height: 12px; - background-size: 10px 2px, 100% 12px; - background-clip: content-box, border-box; - background-repeat: repeat-y, no-repeat; - background-position: center center; - padding: 2px 0; - border-top: 1px solid hsla(210,8%,5%,.5); - border-bottom: 1px solid hsla(210,8%,5%,.5); -} diff --git a/src/chrome/appver/27/devtools/styleeditor.css b/src/chrome/appver/27/devtools/styleeditor.css @@ -1,305 +0,0 @@ -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - -.stylesheet-title, -.stylesheet-name { - text-decoration: none; -} - -.stylesheet-name { - font-size: 13px; -} - -.theme-dark .stylesheet-title, -.theme-dark .stylesheet-name { - color: var(--theme-selection-color); -} - -.theme-dark .stylesheet-rule-count, -.theme-dark .stylesheet-linked-file, -.theme-dark .stylesheet-saveButton { - color: var(--theme-body-color-alt); -} - -.theme-light .stylesheet-title, -.theme-light .stylesheet-name { - color: var(--theme-body-color-alt); -} - -.theme-light .stylesheet-rule-count, -.theme-light .stylesheet-linked-file, -.theme-light .stylesheet-saveButton { - color: var(--theme-body-color); -} - -.stylesheet-saveButton { - text-decoration: underline; - cursor: pointer; -} - -.splitview-active .stylesheet-title, -.splitview-active .stylesheet-name, -.theme-light .splitview-active .stylesheet-rule-count, -.theme-light .splitview-active .stylesheet-linked-file, -.theme-light .splitview-active .stylesheet-saveButton { - color: var(--theme-selection-color); -} - -.splitview-nav:focus { - outline: 0; /* focus ring is on the stylesheet name */ -} - -.splitview-nav > li.unsaved > hgroup .stylesheet-name { - font-style: italic; -} - -.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before, -.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after { - font-style: italic; -} - -.splitview-nav.empty > p { - padding: 0 10px; -} - -.stylesheet-sidebar { - max-width: 400px; - min-width: 100px; -} - -.theme-light .stylesheet-sidebar { - border-color: #aaa; /* Splitters */ -} - -.theme-dark .stylesheet-sidebar { - border-color: #000; /* Splitters */ -} - -.theme-light .media-rule-label { - border-bottom-color: #cddae5; /* Grey */ -} - -.theme-dark .media-rule-label { - border-bottom-color: #303b47; /* Grey */ -} - -.media-rule-label { - padding: 4px; - cursor: pointer; - border-bottom: 1px solid; -} - -.media-rule-line { - -moz-padding-start: 4px; -} - -.theme-light .media-condition-unmatched { - color: grey; -} - -.theme-dark .media-condition-unmatched { - color: #606C75; -} - -.stylesheet-enabled { - padding: 8px 0; - margin: 0 8px; - background-image: url("chrome://browser/skin/devtools/itemToggle.png"); - background-repeat: no-repeat; - background-clip: content-box; - background-position: 0 8px; - background-size: 48px 24px; - width: 24px; - height: 40px; -} - -@media (min-resolution: 2dppx) { - .stylesheet-enabled { - background-image: url("chrome://browser/skin/devtools/itemToggle@2x.png"); - } -} - -.disabled > .stylesheet-enabled { - background-position: -24px 8px; -} - -/* Invert all toggle icons but the one in the active row for light theme */ -.theme-light .splitview-nav > li:not(.splitview-active) .stylesheet-enabled { - filter: url("chrome://browser/skin/devtools/filters.svg#invert"); -} - -.splitview-nav > li > .stylesheet-enabled:focus, -.splitview-nav > li:hover > .stylesheet-enabled { - outline: 0; -} - -.stylesheet-linked-file:not(:empty){ - -moz-margin-end: 0.4em; -} - -.stylesheet-linked-file:not(:empty):before { - -moz-margin-start: 0.4em; -} - -li.linked-file-error .stylesheet-linked-file:after { - font-size: 110%; -} - -.stylesheet-more > h3 { - font-size: 11px; - -moz-margin-end: 2px; -} - -.devtools-searchinput { - max-width: 25ex; - font-size: 11px; -} - -.placeholder a { - text-decoration: underline; -} - -h1, -h2, -h3 { - font-size: inherit; - font-weight: normal; - margin: 0; - padding: 0; -} - -@media (max-width: 700px) { - .stylesheet-sidebar { - width: 150px; - } -} - -/* portrait mode */ -@media (max-width: 550px) { - .splitview-nav { - box-shadow: none; - } - - .splitview-nav > li.splitview-active { - background-size: 0 0, 0 0, auto; - } - - .stylesheet-enabled { - padding: 0; - background-position: 0 0; - height: 24px; - } - - .disabled > .stylesheet-enabled { - background-position: -24px 0; - } - - .splitview-nav > li > hgroup.stylesheet-info { - -moz-box-align: baseline; - } - - .stylesheet-sidebar { - width: 180px; - } -} - -.csscoverage-report { - background-color: var(--theme-toolbar-background); -} - -.csscoverage-report-container { - height: 100vh; - padding: 0 30px; -} - -.csscoverage-report-content { - margin: 20px auto; - -moz-column-width: 300px; - font-size: 13px; -} - -.csscoverage-report h1 { - font-size: 120%; -} - -.csscoverage-report h2 { - font-size: 110%; -} - -.csscoverage-report h1, -.csscoverage-report h2, -.csscoverage-report h3 { - font-weight: bold; - margin: 10px 0; -} - -.csscoverage-list:after { - content: ', '; -} - -.csscoverage-list:last-child:after { - display: none; -} - -.csscoverage-report textarea { - width: 100%; - height: 100px; -} - -.csscoverage-report a { - cursor: pointer; - text-decoration: underline; -} - -.csscoverage-report > .csscoverage-toolbar { - border: none; - margin: 0; - padding: 0; -} - -.csscoverage-report > .csscoverage-toolbarbutton { - min-width: 4em; - min-height: 100vh; - margin: 0; - padding: 0; - border-radius: 0; - border-top: none; - border-bottom: none; - -moz-border-start: none; -} - -.chart-colored-blob[name="Used Preload"] { - fill: var(--theme-highlight-pink); - background: var(--theme-highlight-pink);; -} - -.chart-colored-blob[name=Used] { - fill: var(--theme-highlight-green); - background: var(--theme-highlight-green); -} - -.chart-colored-blob[name=Unused] { - fill: var(--theme-highlight-lightorange); - background: var(--theme-highlight-lightorange); -} - -/* Undo 'largest' customization */ -.theme-dark .pie-chart-slice[largest] { - stroke-width: 1px; - stroke: rgba(0,0,0,0.2); -} - -.theme-light .pie-chart-slice[largest] { - stroke-width: 1px; - stroke: rgba(255,255,255,0.8); -} - -.csscoverage-report .pie-chart-slice { - cursor: default; -} - -.csscoverage-report-chart { - margin: 0 50px; -} diff --git a/src/chrome/appver/27/devtools/toolbox.css b/src/chrome/appver/27/devtools/toolbox.css @@ -1,278 +0,0 @@ -/* 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/. */ - -#toolbox-controls { - margin: 0 4px; -} - -#toolbox-controls > toolbarbutton, -#toolbox-dock-buttons > toolbarbutton { - margin: 0 4px; - min-width: 16px; - width: 16px; -} - -#toolbox-dock-bottom { - list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png"); -} - -#toolbox-dock-side { - list-style-image: url("chrome://browser/skin/devtools/dock-side.png"); -} - -#toolbox-dock-window { - list-style-image: url("chrome://browser/skin/devtools/undock.png"); -} - -#toolbox-dock-window, -#toolbox-dock-bottom, -#toolbox-dock-side { - opacity: 0.6; -} - -#toolbox-dock-window:hover, -#toolbox-dock-bottom:hover, -#toolbox-dock-side:hover { - opacity: 1; -} - -/* Command buttons */ - -.command-button { - padding: 0 8px; - margin: 0; - border-width: 0; - width: 16px; -} - -.command-button:hover { - background-color: hsla(206,37%,4%,.2); -} -.command-button:hover:active, .command-button[checked=true]:not(:hover) { - background-color: hsla(206,37%,4%,.4); -} - -#command-button-paintflashing { - list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#command-button-paintflashing:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} -#command-button-paintflashing:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} -#command-button-paintflashing[checked=true] { - -moz-image-region: rect(0px, 64px, 16px, 48px); -} - -#command-button-responsive { - list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#command-button-responsive:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} -#command-button-responsive:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} -#command-button-responsive[checked=true] { - -moz-image-region: rect(0px, 64px, 16px, 48px); -} - -#command-button-tilt { - list-style-image: url("chrome://browser/skin/devtools/command-tilt.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#command-button-tilt:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -#command-button-tilt:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} - -#command-button-tilt[checked=true] { - -moz-image-region: rect(0px, 64px, 16px, 48px); -} - -#command-button-scratchpad { - list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} - -#command-button-scratchpad:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -#command-button-scratchpad:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} - -/* Tabs */ - -.devtools-tabbar { - -moz-appearance: none; - background-image: url("background-noise-toolbar.png"), - linear-gradient(#303840, #2d3640); - border-color: #060a0d; - border-style: solid; - border-width: 1px 0; - box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, - 0 -1px 0 hsla(206,37%,4%,.1) inset; - min-height: 32px; - padding: 0; -} - -#toolbox-tabs { - margin: 0; - border-left: 1px solid hsla(206,37%,4%,.45); -} - -.devtools-tab { - -moz-appearance: none; - min-width: 32px; - min-height: 32px; - max-width: 110px; - color: #b6babf; - margin: 0; - padding: 0; - background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)); - background-size: 1px 100%; - background-repeat: no-repeat; - background-position: left, right; - border-right: 1px solid hsla(206,37%,4%,.45); -} - -.devtools-tab > image { - -moz-margin-end: 0; - -moz-margin-start: 4px; - opacity: 0.6; -} - -#toolbox-tab-options > image { - margin: 0 8px; -} - -.devtools-tab > label { - white-space: nowrap; -} - -.devtools-tab:hover > image { - opacity: 0.8; -} - -.devtools-tab:active > image, -.devtools-tab[selected=true] > image { - opacity: 1; -} - -.devtools-tab:hover { - background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(206,37%,4%,.1), hsla(206,37%,4%,.2)); - background-size: 1px 100%, - 1px 100%, - 100%; - background-repeat: no-repeat, - no-repeat, - repeat-x; - background-position: left, right; - color: #ced3d9; -} -.devtools-tab:hover:active { - background-color: hsla(206,37%,4%,.2); - color: #f5f7fa; -} - -.devtools-tab[selected=true] { - color: #f5f7fa; - background-image: radial-gradient(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)), - radial-gradient(farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)), - linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3)); - background-size: 100% 1px, - 100% 5px, - 1px 100%, - 1px 100%, - 100%; - background-repeat: no-repeat, - no-repeat, - no-repeat, - no-repeat, - repeat-x; - background-position: top right, top left, left, right; - box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset; -} - -.devtools-tab:not([selected=true]).highlighted { - color: #f5f7fa; - background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%), - radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)), - linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2)); - background-size: 100% 1px, - 100% 5px, - 1px 100%, - 1px 100%, - 100%; - background-repeat: no-repeat, - no-repeat, - no-repeat, - no-repeat, - repeat-x; - background-position: top right, top left, left, right; -} - -.devtools-tab:not(.highlighted) > .highlighted-icon, -.devtools-tab[selected=true] > .highlighted-icon, -.devtools-tab:not([selected=true]).highlighted > .default-icon { - visibility: collapse; -} - -#options-panel { - background-image: url("chrome://browser/skin/newtab/noise.png"); -} - -.options-vertical-pane { - margin: 5px; - width: calc(50% - 30px); - min-width: 400px; - -moz-padding-start: 5px; -} - -.options-vertical-pane > label { - padding: 2px 0; - font-size: 1.4rem; -} - -.options-groupbox { - -moz-margin-start: 15px; - padding: 2px; -} - -.options-groupbox > * { - padding: 2px; -} - -.options-citation-label { - font-size: 1rem !important; - /* !important is required otherwise font-size will still be 1.4rem */ - font-style: italic; - padding: 4px 0 0; /* To align it with the checkbox */ - color: #444; -} - -.options-citation-label + label { - padding: 3px 0 0 !important; /* To align it with the checkbox */ - font-style: italic; -} - -.hidden-labels-box:not(.visible) > label, -.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { - display: none; -} diff --git a/src/chrome/appver/27/devtools/webconsole.css b/src/chrome/appver/27/devtools/webconsole.css @@ -1,594 +0,0 @@ -/* 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/. */ - -/* 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/. */ - -/* General output styles */ - -a { - -moz-user-focus: normal; - -moz-user-input: enabled; - cursor: pointer; - text-decoration: underline; -} - -/* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited - * assertion when loading HTML page with links in XUL iframe */ -*:visited { } - -.message { - display: flex; - flex: none; - padding: 0 7px; - width: 100%; - box-sizing: border-box; -} - -.message > .timestamp { - flex: none; - color: GrayText; - margin: 4px 6px 0 0; -} - -.message > .indent { - flex: none; -} - -.message > .icon { - flex: none; - margin: 3px 6px 0 0; - padding: 0 4px; - height: 1em; - align-self: flex-start; -} - -.message > .icon::before { - content: ""; - background-image: url(chrome://browser/skin/devtools/webconsole.png); - background-position: 8px 8px; - background-repeat: no-repeat; - background-size: 48px 40px; - width: 8px; - height: 8px; - display: inline-block; -} - -@media (min-resolution: 2dppx) { - .message > .icon::before { - background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); - } -} - -.message > .message-body-wrapper { - flex: 1 1 100%; - margin: 3px; -} - -.message-body-wrapper .table-widget-body { - overflow: visible; -} - -/* The red bubble that shows the number of times a message is repeated */ -.message-repeats { - -moz-user-select: none; - flex: none; - margin: 2px 6px; - padding: 0 6px; - height: 1.25em; - color: white; - background-color: red; - border-radius: 40px; - font: message-box; - font-size: 0.9em; - font-weight: 600; -} - -.message-repeats[value="1"] { - display: none; -} - -.message-location { - display: flex; - flex: none; - align-self: flex-start; - justify-content: flex-end; - width: 10em; - margin-top: 3px; - color: -moz-nativehyperlinktext; - text-decoration: none; - white-space: nowrap; -} - -.message-location:hover, -.message-location:focus { - text-decoration: underline; -} - -.message-location > .filename { - text-overflow: ellipsis; - text-align: end; - overflow: hidden; -} - -.message-location > .line-number { - flex: none; -} - -.message-flex-body { - display: flex; -} - -.message-body > * { - white-space: pre-wrap; - word-wrap: break-word; -} - -.message-flex-body > .message-body { - display: block; - flex: 1 1 auto; - vertical-align: middle; -} - -.message-flex-body > .message-location { - margin-top: 0; -} - -.jsterm-input-container { - border-top-width: 1px; - border-top-style: solid; -} - -#output-wrapper { - direction: ltr; - overflow: auto; -} - -#output-container { - -moz-user-select: text; - -moz-box-flex: 1; - display: flex; - flex-direction: column; - align-items: flex-start; -} - -#output-container.hideTimestamps > .message { - -moz-padding-start: 0; - -moz-margin-start: 7px; - width: calc(100% - 7px); -} - -#output-container.hideTimestamps > .message > .timestamp { - display: none; -} - -#output-container.hideTimestamps > .message > .indent { - background-color: var(--theme-body-background); -} - -.filtered-by-type, -.filtered-by-string { - display: none; -} - -.hidden-message { - display: block; - visibility: hidden; - height: 0; - overflow: hidden; -} - -/* WebConsole colored drops */ - -.webconsole-filter-button { - -moz-user-focus: normal; -} - -.webconsole-filter-button > .toolbarbutton-menubutton-button:before { - content: ""; - display: inline-block; - height: 8px; - width: 8px; - border-radius: 50%; - margin-left: 5px; - border-width: 1px; - border-style: solid; -} - -/* Network styles */ -.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#444444, #000000); - border-color: #777; -} - -.message:hover { - background-color: var(--theme-selection-background-semitransparent) !important; -} - -.theme-light .message[severity=error] { - background-color: rgba(255, 150, 150, 0.3); -} - -.theme-dark .message[severity=error] { - background-color: rgba(235, 83, 104, 0.17); -} - -.console-string { - color: var(--theme-highlight-lightorange); -} - -.theme-selected .console-string, -.theme-selected .cm-number, -.theme-selected .cm-variable, -.theme-selected .kind-ArrayLike { - color: #f5f7fa !important; /* Selection Text Color */ -} - -.message[category=network] > .indent { - -moz-border-end: solid #000 6px; -} - -.message[category=network][severity=error] > .icon::before { - background-position: -8px 0; -} - -.message[category=network] > .message-body { - display: flex; -} - -.message[category=network] .method { - flex: none; -} - -.message[category=network]:not(.navigation-marker) .url { - flex: 1 1 auto; - /* Make sure the URL is very small initially, let flex change width as needed. */ - width: 100px; - min-width: 5em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.message[category=network] .status { - flex: none; - -moz-margin-start: 6px; -} - -.message[category=network].mixed-content .url { - color: #FF0000; -} - -.message .learn-more-link { - color: -moz-nativehyperlinktext; - margin: 0 6px; -} - -.message[category=network] .xhr { - background-color: var(--theme-body-color-alt); - color: var(--theme-body-background); - border-radius: 3px; - font-weight: bold; - font-size: 10px; - padding: 2px; - line-height: 10px; - -moz-margin-end: 1ex; -} - -/* CSS styles */ -.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#2DC3F3, #00B6F0); - border-color: #1BA2CC; -} - -.message[category=cssparser] > .indent { - -moz-border-end: solid #00b6f0 6px; -} - -.message[category=cssparser][severity=error] > .icon::before { - background-position: -8px -8px; -} - -.message[category=cssparser][severity=warn] > .icon::before { - background-position: -16px -8px; -} - -/* JS styles */ -.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#FCB142, #FB9500); - border-color: #E98A00; -} - -.message[category=exception] > .indent { - -moz-border-end: solid #fb9500 6px; -} - -.message[category=exception][severity=error] > .icon::before { - background-position: -8px -16px; -} - -.message[category=exception][severity=warn] > .icon::before { - background-position: -16px -16px; -} - -/* Web Developer styles */ -.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#B9B9B9, #AAAAAA); - border-color: #929292; -} - -.message[category=console] > .indent { - -moz-border-end: solid #cbcbcb 6px; -} - -.message[category=console][severity=error] > .icon::before, -.message[category=output][severity=error] > .icon::before { - background-position: -8px -24px; -} - -.message[category=console][severity=warn] > .icon::before { - background-position: -16px -24px; -} - -.message[category=console][severity=info] > .icon::before { - background-position: -24px -24px; -} - -/* Input and output styles */ -.message[category=input] > .indent, -.message[category=output] > .indent { - -moz-border-end: solid #808080 6px; -} - -.message[category=input] > .icon::before { - background-position: -32px -24px; -} - -.message[category=output] > .icon::before { - background-position: -40px -24px; -} - -/* JSTerm Styles */ -.jsterm-input-node, -.jsterm-complete-node { - border: none; - padding: 0 0 0 16px; - -moz-appearance: none; - background-color: transparent; -} - -.jsterm-input-node { - background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16); - background-repeat: no-repeat; - background-size: 16px 16px; -} - -@media (min-resolution: 2dppx) { - .jsterm-input-node { - background-image: -moz-image-rect(url('chrome://browser/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32); - } -} - -:-moz-any(.jsterm-input-node, - .jsterm-complete-node) > .textbox-input-box > .textbox-textarea { - overflow-x: hidden; -} - -.inlined-variables-view .message-body { - display: flex; - flex-direction: column; -} -.inlined-variables-view iframe { - display: block; - flex: 1; - margin-top: 5px; - margin-bottom: 15px; - -moz-margin-end: 15px; - border: 1px solid rgba(128, 128, 128, .5); - border-radius: 3px; -} - -#webconsole-sidebar > tabs { - height: 0; - border: none; -} - -.devtools-side-splitter ~ #webconsole-sidebar[hidden] { - display: none; -} - -/* Security styles */ - -.message[category=security] > .indent { - -moz-border-end: solid red 6px; -} - -.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#FF3030, #FF7D7D); - border-color: #D12C2C; -} - -.message[category=security][severity=error] > .icon::before { - background-position: -8px -32px; -} - -.message[category=security][severity=warn] > .icon::before { - background-position: -16px -32px; -} - -.navigation-marker { - color: #aaa; - background: linear-gradient(#aaa, #aaa) no-repeat left 50%; - background-size: 100% 2px; - margin-top: 6px; - margin-bottom: 6px; - font-size: 0.9em; -} - -.navigation-marker .url { - -moz-padding-end: 9px; - text-decoration: none; -} - -.stacktrace { - display: none; - list-style: none; - padding: 0 1em 0 1.5em; - margin: 5px 0 0 0; - max-height: 10em; - overflow-y: auto; - border: 1px solid rgb(200,200,200); - border-radius: 3px; -} - -.consoletable { - margin: 5px 0 0 0; -} - -.theme-light .message[severity=error] .stacktrace { - background-color: rgba(255, 255, 255, 0.5); -} - -.theme-dark .message[severity=error] .stacktrace { - background-color: rgba(0, 0, 0, 0.5); -} - -.message[open] .stacktrace { - display: block; -} - -.message .theme-twisty { - display: inline-block; - vertical-align: middle; - margin: 0 3px 0 0; -} - -.stacktrace li { - display: flex; - margin: 0; -} - -.stacktrace .function { - display: block; - flex: 1 1 auto; -} - -.cm-s-mozilla a[class] { - font-style: italic; - text-decoration: none; -} - -.cm-s-mozilla a[class]:hover, -.cm-s-mozilla a[class]:focus { - text-decoration: underline; -} - -/* Open DOMNode in inspector button */ -.open-inspector { - background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0; - padding-left: 16px; - margin-left: 5px; - cursor: pointer; -} - -.elementNode:hover .open-inspector, -.open-inspector:hover { - background-position: -32px 0; -} - -.open-inspector:active { - background-position: -16px 0; -} - -.jsterm-input-container { - background-color: var(--theme-tab-toolbar-background); - border-color: var(--theme-body-background); -} - -.jsterm-input-node { - color: var(--theme-content-color1); -} - -.jsterm-complete-node { - color: var(--theme-comment); -} - -.navigation-marker .url { - background: var(--theme-body-background); -} - -.theme-dark .inlined-variables-view iframe { - border-color: #333; -} - -.theme-dark .stacktrace { - border-color: #333; -} - -.theme-light .jsterm-input-container { - /* For light theme use a white background for the input - it looks better - than off-white */ - background-color: #fff; - border-color: ThreeDShadow; -} -.theme-light .navigation-marker .url { - background: #fff; -} - -.theme-light .inlined-variables-view iframe { - border-color: #ccc; -} - -.theme-light .stacktrace { - border-color: #ccc; -} - -@media (max-width: 500px) { - .message > .timestamp { - display: none; - } - .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text { - display: none; - } - .hud-console-filter-toolbar .webconsole-filter-button { - min-width: 40px; - } - .hud-console-filter-toolbar .webconsole-clear-console-button { - min-width: 25px; - } - .webconsole-filter-button > .toolbarbutton-menubutton-button:before { - width: 12px; - height: 12px; - margin-left: 1px; - } - .toolbarbutton-menubutton-dropmarker { - margin: 0px; - } -} - -@media (max-width: 300px) { - .hud-console-filter-toolbar { - -moz-box-orient: vertical; - } - .toolbarbutton-text { - display: -moz-box; - } - .devtools-toolbarbutton { - margin-top: 3px; - } - .hud-console-filter-toolbar .hud-filter-box, - .hud-console-filter-toolbar .devtools-toolbarbutton { - margin-top: 5px; - } -} - -/* - * This hardcoded width likely due to a toolkit Windows specific bug. - * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7 - */ - -.hud-filter-box { - width: 200px; -} diff --git a/src/chrome/appver/27/devtools/widgets.css b/src/chrome/appver/27/devtools/widgets.css @@ -1,1597 +0,0 @@ -/* 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/. */ - -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - - -/* Generic pane helpers */ - -.generic-toggled-side-pane { - -moz-margin-start: 0 !important; - /* Unfortunately, transitions don't work properly with locale-aware properties, - so both the left and right margins are set via js, while the start margin - is always overridden here. */ -} - -.generic-toggled-side-pane[animated] { - transition: margin 0.25s ease-in-out; -} - -/* Responsive container */ - -.devtools-responsive-container { - -moz-box-orient: horizontal; -} - -.devtools-main-content { - min-width: 50px; -} - -.devtools-main-content, -.devtools-sidebar-tabs { - /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */ - position: relative; -} - -@media (max-width: 700px) { - .devtools-responsive-container { - -moz-box-orient: vertical; - } - - .devtools-responsive-container > .devtools-side-splitter { - /* This is a normally vertical splitter, but we have turned it horizontal - due to the smaller resolution */ - min-height: 3px; - height: 3px; - margin-top: -3px; - - /* Reset the vertical splitter styles */ - border-width: 0; - border-bottom-width: 1px; - border-bottom-style: solid; - -moz-margin-start: 0; - width: auto; - min-width: 0; - - /* In some edge case the cursor is not changed to n-resize */ - cursor: n-resize; - } - - .devtools-responsive-container > .devtools-sidebar-tabs { - min-height: 35vh; - max-height: 75vh; - } -} - -/* BreacrumbsWidget */ - -.breadcrumbs-widget-container { - -moz-margin-end: 3px; - max-height: 24px; /* Set max-height for proper sizing on linux */ - height: 24px; /* Set height to prevent starting small waiting for content */ -} - -.scrollbutton-up, -.scrollbutton-down { - -moz-appearance: none; - background: transparent; - box-shadow: none; - border: none; - list-style-image: none; - margin: 0; - padding: 0; -} - -.scrollbutton-up > .toolbarbutton-icon, -.scrollbutton-down > .toolbarbutton-icon { - -moz-appearance: none; - width: 7px; - height: 16px; - background-size: 14px 16px; - background-position: 0 center; - background-repeat: no-repeat; - background-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png"); - list-style-image: none; - margin: 0 8px; - padding: 0; -} - -@media (min-resolution: 2dppx) { - .scrollbutton-up > .toolbarbutton-icon, - .scrollbutton-down > .toolbarbutton-icon { - background-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton@2x.png"); - } -} - -.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon, -.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon { - background-position: -7px center; -} - -.scrollbutton-up[disabled] > .toolbarbutton-icon, -.scrollbutton-down[disabled] > .toolbarbutton-icon { - opacity: 0.5; -} - -/* Draw shadows to indicate there is more content 'behind' scrollbuttons. */ -.scrollbutton-up:-moz-locale-dir(ltr), -.scrollbutton-down:-moz-locale-dir(rtl) { - border-right: solid 1px rgba(255, 255, 255, .1); - border-left: solid 1px transparent; - box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background); -} - -.scrollbutton-down:-moz-locale-dir(ltr), -.scrollbutton-up:-moz-locale-dir(rtl) { - border-right: solid 1px transparent; - border-left: solid 1px rgba(255, 255, 255, .1); - box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background); -} - -.scrollbutton-up[disabled], -.scrollbutton-down[disabled] { - box-shadow: none; - border-color: transparent; -} - -.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl), -.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) { - transform: scaleX(-1); -} - -/* The breadcrumb separator elements are used as background images with - * -moz-element, so we position them offscreen since we don't care about - * seeing the original elements. - */ -.breadcrumb-separator-container { - position: fixed; - top: -1000px; - left: -1000px; -} - -#breadcrumb-separator-before, -#breadcrumb-separator-after, -#breadcrumb-separator-normal { - width: 12px; - height: 24px; - overflow: hidden; -} - -#breadcrumb-separator-before, -#breadcrumb-separator-after:after { - background: var(--theme-selection-background); -} - -#breadcrumb-separator-after, -#breadcrumb-separator-before:after { - background: var(--theme-toolbar-background); -} - -/* This chevron arrow cannot be replicated easily in CSS, so we are using - * a background image for it (still keeping it in a separate element so - * we can handle RTL support with a CSS transform). - */ -#breadcrumb-separator-normal { - background: url("chrome://browser/skin/devtools/breadcrumbs-divider@2x.png") no-repeat center right; - background-size: 12px 24px; -} - -/* Fake a triangle by rotating a rectangle inside the elements */ -#breadcrumb-separator-before:after, -#breadcrumb-separator-after:after { - content: ""; - display: block; - width: 25px; - height: 24px; - transform: translateX(-18px) rotate(45deg); - -moz-box-sizing: border-box; -} - -.breadcrumbs-widget-item { - background-color: transparent; - -moz-appearance: none; - min-height: 24px; - min-width: 65px; - margin: 0; - padding: 0 8px 0 20px; - border: none; - outline: none; - color: hsl(210,30%,85%); -} - -.breadcrumbs-widget-item > .button-box { - border: none; - padding-top: 0; - padding-bottom: 0; -} - -.breadcrumbs-widget-item:not([checked]) { - background: -moz-element(#breadcrumb-separator-normal) no-repeat center left; -} - -.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item { - background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0; -} - -.breadcrumbs-widget-item[checked] { - background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0; -} - -.breadcrumbs-widget-item[checked] { - background-color: var(--theme-selection-background); -} - -.breadcrumbs-widget-item:first-child { - background-image: none; -} - -/* RTL support: move the images that were on the left to the right, - * and move images that were on the right to the left. - */ -.breadcrumbs-widget-item:-moz-locale-dir(rtl) { - padding: 0 20px 0 8px; -} - -.breadcrumbs-widget-item:-moz-locale-dir(rtl), -.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) { - background-position: center right; -} - -#breadcrumb-separator-before:-moz-locale-dir(rtl), -#breadcrumb-separator-after:-moz-locale-dir(rtl), -#breadcrumb-separator-normal:-moz-locale-dir(rtl) { - transform: scaleX(-1); -} - -#breadcrumb-separator-before:-moz-locale-dir(rtl):after, -#breadcrumb-separator-after:-moz-locale-dir(rtl):after { - transform: translateX(-5px) rotate(45deg); -} - -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id, -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag, -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes, -.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes { - color: var(--theme-selection-color); -} - -.theme-dark .breadcrumbs-widget-item { - color: var(--theme-selection-color); -} - -.theme-light .breadcrumbs-widget-item { - color: var(--theme-body-color); -} - -.breadcrumbs-widget-item-id { - color: var(--theme-body-color-alt); -} - -.breadcrumbs-widget-item-classes { - color: var(--theme-content-color1); -} - -.breadcrumbs-widget-item-pseudo-classes { - color: var(--theme-highlight-lightorange); -} - -.theme-dark .breadcrumbs-widget-item:not([checked]):hover label { - color: white; -} - -.theme-light .breadcrumbs-widget-item:not([checked]):hover label { - color: black; -} - -/* SimpleListWidget */ - -.simple-list-widget-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - -.simple-list-widget-item.selected { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.theme-dark .simple-list-widget-item:not(.selected):hover { - background-color: rgba(255,255,255,.05); -} - -.theme-light .simple-list-widget-item:not(.selected):hover { - background-color: rgba(0,0,0,.05); -} - -.simple-list-widget-empty-text, -.simple-list-widget-perma-text { - padding: 4px 8px; -} - -.simple-list-widget-empty-text, -.simple-list-widget-perma-text { - color: var(--theme-body-color-alt); -} - -/* FastListWidget */ - -.fast-list-widget-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - -.fast-list-widget-empty-text { - padding: 4px 8px; -} - -.fast-list-widget-empty-text { - color: var(--theme-body-color-alt); -} - -/* SideMenuWidget */ - -.side-menu-widget-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - -/* SideMenuWidget container */ - -.theme-dark .side-menu-widget-container:-moz-locale-dir(ltr), -.theme-dark .side-menu-widget-empty-text:-moz-locale-dir(ltr) { - box-shadow: inset -1px 0 0 #000; -} - -.theme-dark .side-menu-widget-container:-moz-locale-dir(rtl), -.theme-dark .side-menu-widget-empty-text:-moz-locale-dir(rtl) { - box-shadow: inset 1px 0 0 #000; -} - -.side-menu-widget-container:-moz-locale-dir(ltr), -.side-menu-widget-empty-text:-moz-locale-dir(ltr) { - box-shadow: inset -1px 0 0 #aaa; -} - -.side-menu-widget-container:-moz-locale-dir(rtl), -.side-menu-widget-empty-text:-moz-locale-dir(rtl) { - box-shadow: inset 1px 0 0 #aaa; -} - -.side-menu-widget-group { - /* To allow visibility of the dark margin shadow. */ - -moz-margin-end: 1px; -} - -.side-menu-widget-container[with-arrows=true] .side-menu-widget-item { - /* To compensate for the arrow image's dark margin. */ - -moz-margin-end: -1px; -} - -/* SideMenuWidget groups */ - -.side-menu-widget-group-title { - padding: 4px; - background-color: var(--theme-tab-toolbar-background); -} - -.theme-dark .side-menu-widget-group-title { - color: var(--theme-content-color1); -} - -.theme-light .side-menu-widget-group-title { - color: var(--theme-content-color3); -} - -/* SideMenuWidget items */ - -.side-menu-widget-item { - /* To compensate for the top and bottom borders */ - margin-top: -1px; - margin-bottom: -1px; - background-clip: padding-box; -} - -.theme-dark .side-menu-widget-item { - border-top: 1px solid rgba(0,0,0,0.2); - border-bottom: 1px solid rgba(128,128,128,0.15); - color: var(--theme-selection-color); -} - -.theme-dark .side-menu-widget-item:last-of-type { - box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); -} - -.theme-light .side-menu-widget-item { - border-top: 1px solid rgba(128,128,128,0.15); - border-bottom: 1px solid transparent; - color: var(--theme-body-color); -} - -.theme-light .side-menu-widget-item:last-of-type { - box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15); -} - -.side-menu-widget-item.selected { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.side-menu-widget-item-arrow { - -moz-margin-start: -7px; - width: 7px; /* The image's width is 7 pixels */ - /* Cover the border of the side-menu-widget-item */ - margin-top: -1px; - margin-bottom: -1px; -} - -.side-menu-widget-item.selected > .side-menu-widget-item-arrow { - background-size: auto, 1px 100%; - background-repeat: no-repeat; -} - -.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { - background-position: center right, top right; -} - -.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { - background-position: center left, top left; -} - -.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { - background-image: url("chrome://browser/skin/devtools/itemArrow-dark-ltr.svg"), linear-gradient(to right, #000, #000); -} - -.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { - background-image: url("chrome://browser/skin/devtools/itemArrow-dark-rtl.svg"), linear-gradient(to right, #000, #000); -} - -.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { - background-image: url("chrome://browser/skin/devtools/itemArrow-ltr.svg"), linear-gradient(to right, #aaa, #aaa); -} - -.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { - background-image: url("chrome://browser/skin/devtools/itemArrow-rtl.svg"), linear-gradient(to right, #aaa, #aaa); -} - -/* SideMenuWidget items contents */ - -.side-menu-widget-item-contents { - padding: 4px; - /* To avoid having content overlapping the arrow image. */ - -moz-padding-end: 8px; -} - -.side-menu-widget-item-other { - /* To avoid having content overlapping the arrow image. */ - -moz-padding-end: 8px; - /* To compensate for the .side-menu-widget-item-contents padding. */ - -moz-margin-start: -4px; - -moz-margin-end: -8px; -} - -.side-menu-widget-item-other:first-of-type { - margin-top: 4px; -} - -.side-menu-widget-item-other:last-of-type { - margin-bottom: -4px; -} - -.theme-dark .side-menu-widget-item-other { - background-color: rgba(0,0,0,.1); -} - -.theme-light .side-menu-widget-item-other { - background-color: rgba(128,128,128,.1); -} - -.theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other { - background-color: rgba(0,0,0,.2); /* Darken the selection by 20% */ - color: var(--theme-selection-color); -} - -.theme-light .side-menu-widget-item.selected .side-menu-widget-item-other { - background-color: rgba(255,255,255,.8); /* Lighten the selection by 20% */ - color: var(--theme-body-color); -} - -.side-menu-widget-item.selected .side-menu-widget-item-other.selected { - background-color: transparent; - color: var(--theme-selection-color); -} - -/* SideMenuWidget checkboxes */ - -.side-menu-widget-group-checkbox { - margin: 0; - -moz-margin-end: 4px; -} - -.side-menu-widget-item-checkbox { - margin: 0; - -moz-margin-start: 4px; -} - -/* SideMenuWidget misc */ - -.theme-dark .side-menu-widget-container, -.theme-dark .side-menu-widget-empty-text { - background-color: var(--theme-toolbar-background); -} - -.side-menu-widget-empty-text { - padding: 4px 8px; -} - -/* VariablesView */ - -.variables-view-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - -.variables-view-empty-notice { - padding: 2px; -} - -.variables-view-empty-notice { - color: var(--theme-body-color-alt); -} - -.variables-view-scope:focus > .title, -.variable-or-property:focus > .title { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.variables-view-scope > .title { - border-top-width: 1px; - border-top-style: solid; - margin-top: -1px; -} - -/* Generic variables traits */ - -.variables-view-variable:not(:last-child) { - border-bottom: 1px solid rgba(128, 128, 128, .15); -} - -.variables-view-variable > .title > .name { - font-weight: 600; -} - -/* Generic variables *and* properties traits */ - -.variable-or-property:focus > .title > label { - color: inherit !important; -} - -.variables-view-container .theme-twisty { - margin: 2px; -} - -.variable-or-property > .title > .theme-twisty { - -moz-margin-start: 5px; -} - -.variable-or-property:not([untitled]) > .variables-view-element-details { - -moz-margin-start: 7px; -} - -/* Traits applied when variables or properties are changed or overridden */ - -.variable-or-property:not([overridden]) { - transition: background 1s ease-in-out; -} - -.variable-or-property:not([overridden])[changed] { - transition-duration: .4s; -} - -.variable-or-property[overridden] { - background: rgba(128,128,128,0.05); -} - -.variable-or-property[overridden] .title > label { - /* Cross out the title for this variable and all child properties. */ - font-style: italic; - text-decoration: line-through; - border-bottom: none !important; - color: rgba(128,128,128,0.9); - opacity: 0.7; -} - -/* Traits applied when variables or properties are editable */ - -.variable-or-property[editable] > .title > .value { - cursor: text; -} - -.variable-or-property[overridden] .title > .value { - /* Disallow editing this variable and all child properties. */ - pointer-events: none; -} - -/* Custom configurable/enumerable/writable or frozen/sealed/extensible - * variables and properties */ - -.variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name { - opacity: 0.6; -} - -.variable-or-property-non-writable-icon { - background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat; - background-size: cover; - width: 16px; - height: 16px; -} - -@media (min-resolution: 2dppx) { - .variable-or-property-non-writable-icon { - background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png"); - } -} - -.variable-or-property-frozen-label, -.variable-or-property-sealed-label, -.variable-or-property-non-extensible-label { - height: 16px; - -moz-padding-end: 4px; -} - -.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label, -.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label, -.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label { - color: #666; -} - -/* Aligned values */ - -.variables-view-container[aligned-values] .title > .separator { - -moz-box-flex: 1; -} - -.variables-view-container[aligned-values] .title > .value { - -moz-box-flex: 0; - width: 70vw; -} - -.variables-view-container[aligned-values] .title > .element-value-input { - width: calc(70vw - 10px); -} - -/* Actions first */ - -.variables-view-open-inspector { - -moz-box-ordinal-group: 1; -} - -.variables-view-edit, -.variables-view-add-property { - -moz-box-ordinal-group: 2; -} - -.variable-or-property-frozen-label, -.variable-or-property-sealed-label, -.variable-or-property-non-extensible-label, -.variable-or-property-non-writable-icon { - -moz-box-ordinal-group: 3; -} - -.variables-view-delete { - -moz-box-ordinal-group: 4; -} - -.variables-view-container[actions-first] .variables-view-delete, -.variables-view-container[actions-first] .variables-view-add-property, -.variables-view-container[actions-first] .variables-view-open-inspector { - -moz-box-ordinal-group: 0; -} - -.variables-view-container[actions-first] [invisible] { - visibility: hidden; -} - -/* Variables and properties tooltips */ - -.variable-or-property > tooltip > label { - margin: 0 2px 0 2px; -} - -.variable-or-property[non-enumerable] > tooltip > label.enumerable, -.variable-or-property[non-configurable] > tooltip > label.configurable, -.variable-or-property[non-writable] > tooltip > label.writable, -.variable-or-property[non-extensible] > tooltip > label.extensible { - color: #800; - text-decoration: line-through; -} - -.variable-or-property[overridden] > tooltip > label.overridden { - -moz-padding-start: 4px; - -moz-border-start: 1px dotted #000; -} - -.variable-or-property[safe-getter] > tooltip > label.WebIDL { - -moz-padding-start: 4px; - -moz-border-start: 1px dotted #000; - color: #080; -} - -/* Variables and properties editing */ - -.variables-view-delete { - background: url("chrome://browser/skin/devtools/vview-delete.png"); - background-size: cover; - width: 16px; - height: 16px; -} - -@media (min-resolution: 2dppx) { - .variables-view-delete { - background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png"); - } -} - -.variables-view-delete:hover { - background-position: 16px; -} - -.variables-view-delete:active { - background-position: 32px; -} - -.variable-or-property:focus > .title > .variables-view-delete { - background-position: 0px; -} - -.variables-view-edit { - background: url("chrome://browser/skin/devtools/vview-edit.png"); - background-size: cover; - width: 16px; - height: 16px; - cursor: pointer; -} - -@media (min-resolution: 2dppx) { - .variables-view-edit { - background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png"); - } -} - -.variables-view-edit:hover { - background-position: 16px; -} - -.variables-view-edit:active { - background-position: 32px; -} - -.variable-or-property:focus > .title > .variables-view-edit { - background-position: 0px; -} - -.variables-view-open-inspector { - background: url("chrome://browser/skin/devtools/vview-open-inspector.png"); - background-size: cover; - width: 16px; - height: 16px; - cursor: pointer; -} - -@media (min-resolution: 2dppx) { - .variables-view-open-inspector { - background-image: url("chrome://browser/skin/devtools/vview-open-inspector@2x.png"); - } -} - -.variables-view-open-inspector:hover { - background-position: 16px; -} - -.variables-view-open-inspector:active { - background-position: 32px; -} - -.variable-or-property:focus > .title > .variables-view-open-inspector { - background-position: 0px; -} - -/* Variables and properties input boxes */ - -.variable-or-property > .title > .separator + .element-value-input { - -moz-margin-start: -2px !important; - -moz-margin-end: 2px !important; -} - -.variable-or-property > .title > .separator[hidden=true] + .element-value-input { - -moz-margin-start: 4px !important; - -moz-margin-end: 2px !important; -} - -.element-name-input { - -moz-margin-start: -2px !important; - -moz-margin-end: 2px !important; - font-weight: 600; -} - -.element-value-input, -.element-name-input { - border: 1px solid rgba(128, 128, 128, .5) !important; - border-radius: 0; - color: inherit; -} - -/* Variables and properties searching */ - -.variable-or-property[unmatched] { - border: none; - margin: 0; -} - -/* Canvas graphs */ - -.graph-widget-container { - position: relative; -} - -.graph-widget-canvas { - width: 100%; - height: 100%; -} - -.graph-widget-canvas[input=hovering-background] { - cursor: text; -} - -.graph-widget-canvas[input=hovering-region] { - cursor: pointer; -} - -.graph-widget-canvas[input=hovering-selection-start-boundary], -.graph-widget-canvas[input=hovering-selection-end-boundary], -.graph-widget-canvas[input=adjusting-selection-boundary] { - cursor: col-resize; -} - -.graph-widget-canvas[input=hovering-selection-contents] { - cursor: grab; -} - -.graph-widget-canvas[input=dragging-selection-contents] { - cursor: grabbing; -} - -/* Line graph widget */ - -.line-graph-widget-gutter { - position: absolute; - background: rgba(255,255,255,0.75); - width: 10px; - height: 100%; - top: 0; - left: 0; - border-right: 1px solid rgba(255,255,255,0.25); - pointer-events: none; -} - -.line-graph-widget-gutter-line { - position: absolute; - width: 100%; - border-top: 1px solid; -} - -.line-graph-widget-gutter-line[type=maximum] { - border-color: #2cbb0f; -} - -.line-graph-widget-gutter-line[type=minimum] { - border-color: #ed2655; -} - -.line-graph-widget-gutter-line[type=average] { - border-color: #d97e00; -} - -.line-graph-widget-tooltip { - position: absolute; - background: rgba(255,255,255,0.75); - border-radius: 2px; - line-height: 15px; - -moz-padding-start: 6px; - -moz-padding-end: 6px; - transform: translateY(-50%); - font-size: 80%; - z-index: 1; - pointer-events: none; -} - -.line-graph-widget-tooltip[with-arrows=true]::before { - content: ""; - position: absolute; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - top: calc(50% - 3px); -} - -.line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { - -moz-border-end: 3px solid rgba(255,255,255,0.75); - left: -3px; -} - -.line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { - -moz-border-start: 3px solid rgba(255,255,255,0.75); - right: -3px; -} - -.line-graph-widget-tooltip[type=maximum] { - left: 14px; -} - -.line-graph-widget-tooltip[type=minimum] { - left: 14px; -} - -.line-graph-widget-tooltip[type=average] { - right: 4px; -} - -.line-graph-widget-tooltip > [text=info] { - color: #18191a; -} - -.line-graph-widget-tooltip > [text=value] { - -moz-margin-start: 3px; -} - -.line-graph-widget-tooltip > [text=metric] { - -moz-margin-start: 1px; - color: #667380; -} - -.line-graph-widget-tooltip > [text=value], -.line-graph-widget-tooltip > [text=metric] { - text-shadow: 1px 0px rgba(255,255,255,0.6), - -1px 0px rgba(255,255,255,0.6), - 0px -1px rgba(255,255,255,0.6), - 0px 1px rgba(255,255,255,0.6); -} - -.line-graph-widget-tooltip[type=maximum] > [text=value] { - color: #2cbb0f; -} - -.line-graph-widget-tooltip[type=minimum] > [text=value] { - color: #ed2655; -} - -.line-graph-widget-tooltip[type=average] > [text=value] { - color: #d97e00; -} - -/* Bar graph widget */ - -.bar-graph-widget-canvas { - background: #f7f7f7; -} - -.bar-graph-widget-legend { - position: absolute; - top: 4px; - left: 8px; - color: #292e33; - font-size: 80%; - pointer-events: none; -} - -.bar-graph-widget-legend-item { - float: left; - -moz-margin-end: 8px; -} - -.bar-graph-widget-legend-item > [view="color"], -.bar-graph-widget-legend-item > [view="label"] { - vertical-align: middle; -} - -.bar-graph-widget-legend-item > [view="color"] { - display: inline-block; - width: 8px; - height: 8px; - border: 1px solid #fff; - border-radius: 1px; - -moz-margin-end: 4px; - pointer-events: all; - cursor: pointer; -} - -.bar-graph-widget-legend-item > [view="label"] { - text-shadow: 1px 0px rgba(255,255,255,0.8), - -1px 0px rgba(255,255,255,0.8), - 0px -1px rgba(255,255,255,0.8), - 0px 1px rgba(255,255,255,0.8); -} - -/* Charts */ - -.generic-chart-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); -} - -.theme-dark .generic-chart-container { - color: var(--theme-selection-color); -} - -.theme-light .generic-chart-container { - color: var(--theme-body-color-alt); -} - -.chart-colored-blob { - fill: var(--theme-content-color2); - background: var(--theme-content-color2); -} - -/* Charts: Pie */ - -.pie-chart-slice { - stroke-width: 1px; - cursor: pointer; -} - -.theme-dark .pie-chart-slice { - stroke: rgba(0,0,0,0.2); -} - -.theme-light .pie-chart-slice { - stroke: rgba(255,255,255,0.8); -} - -.theme-dark .pie-chart-slice[largest] { - stroke-width: 2px; - stroke: #fff; -} - -.theme-light .pie-chart-slice[largest] { - stroke: #000; -} - -.pie-chart-label { - text-anchor: middle; - dominant-baseline: middle; - pointer-events: none; -} - -.theme-dark .pie-chart-label { - fill: #000; -} - -.theme-light .pie-chart-label { - fill: #fff; -} - -.pie-chart-container[slices="1"] > .pie-chart-slice { - stroke-width: 0px; -} - -.pie-chart-slice, -.pie-chart-label { - transition: all 0.1s ease-out; -} - -.pie-chart-slice:not(:hover):not([focused]), -.pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label { - transform: none !important; -} - -/* Charts: Table */ - -.table-chart-title { - padding-bottom: 10px; - font-size: 120%; - font-weight: 600; -} - -.table-chart-row { - margin-top: 1px; - cursor: pointer; -} - -.table-chart-grid:hover > .table-chart-row { - transition: opacity 0.1s ease-in-out; -} - -.table-chart-grid:not(:hover) > .table-chart-row { - transition: opacity 0.2s ease-in-out; -} - -.generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover), -.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) { - opacity: 0.4; -} - -.table-chart-row-box { - width: 8px; - height: 1.5em; - -moz-margin-end: 10px; -} - -.table-chart-row-label { - width: 8em; - -moz-padding-end: 6px; - cursor: inherit; -} - -.table-chart-totals { - margin-top: 8px; - padding-top: 6px; -} - -.table-chart-totals { - border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */ -} - -.table-chart-summary-label { - font-weight: 600; - padding: 1px 0px; -} - -.theme-dark .table-chart-summary-label { - color: var(--theme-selection-color); -} - -.theme-light .table-chart-summary-label { - color: var(--theme-body-color); -} - -/* Table Widget */ - -/* Table body */ - -.table-widget-body > .devtools-side-splitter { - border: none; -} - -.table-widget-body { - overflow: auto; -} - -.theme-light .table-widget-body { - background: var(--theme-sidebar-background); -} - -.theme-dark .table-widget-body, -.theme-dark .table-widget-empty-text { - background-color: var(--theme-toolbar-background); -} - -.theme-dark .table-widget-body:-moz-locale-dir(ltr) { - box-shadow: inset -1px 0 0 #000; -} - -.theme-dark .table-widget-body:-moz-locale-dir(rtl) { - box-shadow: inset 1px 0 0 #000; -} - -.table-widget-body:-moz-locale-dir(ltr) { - box-shadow: inset -1px 0 0 #aaa; -} - -.table-widget-body:-moz-locale-dir(rtl) { - box-shadow: inset 1px 0 0 #aaa; -} - -/* Column Headers */ - -.theme-dark .table-widget-column-header, -.theme-dark .table-widget-cell { - -moz-border-end: 1px solid rgba(0,0,0,0.2); - box-shadow: inset 1px 0 0 rgba(128,128,128,0.15); -} - -.theme-light .table-widget-column-header, -.theme-light .table-widget-cell { - -moz-border-end: 1px solid rgba(128,128,128,0.25); - box-shadow: inset 1px 0 0 transparent; -} - -/* Table widget column header colors are taken from netmonitor.inc.css to match - the look of both the tables. This needs to be updated along with netmonitor - header colors in bug 951714 */ - -.table-widget-column-header { - background: rgba(0,0,0,0); - position: sticky; - top: 0; - min-height: 32px; - width: 100%; - border: none; - padding: 8px 0 0 !important; - color: inherit; - text-align: center; - font-weight: inherit !important; - transition: background-color 0.1s ease-in-out; -} - -.table-widget-column-header:hover { - background: rgba(0,0,0,0.10); -} - -.table-widget-column-header:hover:active { - background: rgba(0,0,0,0.25); -} - -.table-widget-column-header:not(:active)[sorted] { - background: rgba(0,0,0,0.15); -} - -.table-widget-column-header:not(:active)[sorted=ascending] { - background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); - background-size: 100% 1px; - background-repeat: no-repeat; -} - -.table-widget-column-header:not(:active)[sorted=descending] { - background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); - background-size: 100% 1px; - background-repeat: no-repeat; - background-position: bottom; -} - -/* Cells */ - -.table-widget-cell { - width: 100%; - margin: -1px 0 !important; - padding: 3px 4px; - background-clip: padding-box; - min-width: 100px; - -moz-user-focus: normal; -} - -.theme-dark .table-widget-cell { - border-top: 1px solid rgba(0,0,0,0.2); - border-bottom: 1px solid rgba(128,128,128,0.15); - color: var(--theme-selection-color); -} - -.theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), -.theme-dark .table-widget-cell:not(.theme-selected)[odd] { - background: rgba(255,255,255,0.05); -} - -.theme-dark .table-widget-cell:last-of-type { - box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); -} - -.theme-light .table-widget-cell { - border-top: 1px solid rgba(128,128,128,0.15); - border-bottom: 1px solid transparent; -} - -.theme-light .table-widget-cell:not(.theme-selected) { - color: var(--theme-body-color); -} - -.theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), -.theme-light .table-widget-cell:not(.theme-selected)[odd] { - background: rgba(128,128,128,0.05); -} - -.theme-light .table-widget-cell:last-of-type { - box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15); -} - -.table-widget-cell.flash-out { - animation: flash-out 0.5s ease-in; -} - -@keyframes flash-out { - to { - background: var(--theme-contrast-background); - } -} - -/* Empty text and initial text */ - -.table-widget-empty-text { - display: none; - text-align: center; - font-size: large; - margin-top: -20px !important; -} - -.theme-light .table-widget-empty-text { - background: #F7F7F7; /* Background-Sidebar */ -} - -.table-widget-body:empty + .table-widget-empty-text:not([value=""]), -.table-widget-body[empty] + .table-widget-empty-text:not([value=""]) { - display: block; -} - -/* Tree Widget */ - -.tree-widget-container { - padding: 0; - margin: 0; - width: 100%; - height: 100%; - list-style: none; - overflow: hidden; - -moz-margin-end: 40px; -} - -.tree-widget-container:-moz-focusring, -.tree-widget-container *:-moz-focusring { - outline-style: none; -} - -.tree-widget-empty-text { - padding: 10px 20px; - font-size: medium; - background: transparent; - pointer-events: none; -} - -/* Tree Item */ - -.tree-widget-container .tree-widget-item { - padding: 2px 0px 4px; - /* OSX has line-height 14px by default, which causes weird alignment issues - * because of 20px high icons. thus making line-height consistent with that of - * windows. - */ - line-height: 17px !important; - display: inline-block; - width: 100%; - word-break: keep-all; /* To prevent long urls like http://foo.com/bar from - breaking in multiple lines */ -} - -.tree-widget-container .tree-widget-children { - margin: 0; - padding: 0; - list-style: none; -} - -.tree-widget-item[level="1"] { - font-weight: 800; -} - -/* Twisties */ -.tree-widget-item:before { - content: ""; - width: 14px; - height: 14px; - float: left; - margin: 3px 2px -3px; - background-repeat: no-repeat; - background-image: url("chrome://browser/skin/devtools/controls.png"); - background-size: 56px 28px; - cursor: pointer; - background-position: -28px -14px; -} - -.tree-widget-item:-moz-locale-dir(rtl):before { - float: right; - transform: scaleX(-1); -} - -.theme-light .tree-widget-item:before { - background-position: 0 -14px; -} - -.tree-widget-item[empty]:before { - background: transparent; -} - -.tree-widget-item[expanded]:before { - background-position: -42px -14px; -} - -.theme-light .tree-widget-item[expanded]:before { - background-position: -14px -14px; -} - -.tree-widget-item + ul { - overflow: hidden; - animation: collapse-tree-item 0.2s; - max-height: 0; -} - -.tree-widget-item[expanded] + ul { - animation: expand-tree-item 0.3s; - max-height: unset; -} - -@keyframes collapse-tree-item { - from { - max-height: 300px; - } - to { - max-height: 0; - } -} - -@keyframes expand-tree-item { - from { - max-height: 0; - } - to { - max-height: 500px; - } -} - -@media (min-resolution: 2dppx) { - .tree-widget-item:before { - background-image: url("chrome://browser/skin/devtools/controls@2x.png"); - } -} - -/* Indentation of child items in the tree */ - -/* For level > 6 */ -.tree-widget-item[level] + ul > li > .tree-widget-item { - -moz-padding-start: 98px; -} - -/* First level */ -.tree-widget-item[level="1"] + ul > li > .tree-widget-item { - -moz-padding-start: 14px; -} - -/* Second level */ -.tree-widget-item[level="2"] + ul > li > .tree-widget-item { - -moz-padding-start: 28px; -} - -/* Third level */ -.tree-widget-item[level="3"] + ul > li > .tree-widget-item { - -moz-padding-start: 42px; -} - -/* Fourth level */ -.tree-widget-item[level="4"] + ul > li > .tree-widget-item { - -moz-padding-start: 56px; -} - -/* Fifth level */ -.tree-widget-item[level="5"] + ul > li > .tree-widget-item { - -moz-padding-start: 70px; -} - -/* Sixth level */ -.tree-widget-item[level="6"] + ul > li > .tree-widget-item { - -moz-padding-start: 84px; -} - -/* Custom icons for certain tree items indicating the type of the item */ - -.tree-widget-item[type]:after { - content: ""; - float: left; - width: 16px; - height: 17px; - -moz-margin-end: 4px; - background-repeat: no-repeat; - background-size: 20px auto; - filter: url("chrome://browser/skin/devtools/filters.svg#invert"); - background-position: 0 0; - background-size: auto 20px; -} - -.tree-widget-item:-moz-locale-dir(rtl):after { - float: right; -} - -.theme-dark .tree-widget-item[type]:after { - filter: url("chrome://browser/skin/devtools/filters.svg#invert-white"); -} - -.tree-widget-item[type="dir"]:after { - background-image: url(chrome://browser/skin/devtools/filetype-dir-close.svg); - background-position: 2px 0; - background-size: auto 16px; - width: 20px; -} - -.tree-widget-item[type="dir"][expanded]:not([empty]):after { - background-image: url(chrome://browser/skin/devtools/filetype-dir-open.svg); -} - -.tree-widget-item[type="url"]:after { - background-image: url(chrome://browser/skin/devtools/filetype-globe.svg); - background-size: auto 18px; - width: 18px; -} - -/* 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/. */ - -/* Manifest Editor overrides */ - -.variables-view-container.manifest-editor { - background-color: #F5F5F5; - padding: 20px 2px; -} - -.manifest-editor .variable-or-property:focus > .title { - background-color: #EDEDED; - color: #000; - border-radius: 4px; -} - -.manifest-editor .variables-view-property > .title > .name { - color: #27406A; -} - -.manifest-editor .variable-or-property > .title > label, -.manifest-editor textbox { - font-family: monospace; -} - -.manifest-editor .variable-or-property > .title > .token-string { - color: #54BC6A; - font-weight: bold; -} - -.manifest-editor .variable-or-property > .title > .token-boolean, -.manifest-editor .variable-or-property > .title > .token-number { - color: #009BD4; - font-weight: bold; -} - -.manifest-editor .variable-or-property > .title > .token-undefined { - color: #bbb; -} - -.manifest-editor .variable-or-property > .title > .token-null { - color: #999; -} - -.manifest-editor .variable-or-property > .title > .token-other { - color: #333; -} - -.manifest-editor .variables-view-variable { - border-bottom: none; -} - -.manifest-editor .variables-view-delete, -.manifest-editor .variables-view-delete:hover, -.manifest-editor .variables-view-delete:active, -.manifest-editor .variable-or-property:focus .variables-view-delete, -.manifest-editor .variables-view-add-property, -.manifest-editor .variables-view-add-property:hover, -.manifest-editor .variables-view-add-property:active, -.manifest-editor .variable-or-property:focus .variables-view-add-property { - list-style-image: none; - -moz-image-region: initial; -} - -.manifest-editor .variables-view-delete::before, -.manifest-editor .variables-view-add-property::before { - width: 11px; - height: 11px; - content: ""; - display: inline-block; - background-size: 11px auto; -} - -.manifest-editor .variables-view-delete::before { - background-image: url("chrome://browser/skin/devtools/app-manager/remove.svg"); -} - -.manifest-editor .variables-view-add-property::before { - background-image: url("chrome://browser/skin/devtools/app-manager/add.svg"); - -moz-margin-end: 2px; -} - -.breadcrumbs-widget-item:-moz-focusring > .button-box { - border-width: 0; -} -\ No newline at end of file diff --git a/src/chrome/appver/27/downloads.css b/src/chrome/appver/27/downloads.css @@ -1,13 +0,0 @@ -#downloadsPanel[hasdownloads] > #emptyDownloads { - display: none; -} - -#emptyDownloads { - padding: 10px 20px; - max-width: 40ch; -} - -#downloadsFooter { - background: rgb(75,75,75); - border-top: 1px solid rgb(75,75,75); -} -\ No newline at end of file diff --git a/src/chrome/browser/browser.css b/src/chrome/browser/browser.css @@ -1,6 +1,5 @@ @import url("chrome://ostarget/skin/browser.css"); @import url("chrome://global/skin/"); -@import url("chrome://appver/skin/browser.css"); @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); @@ -2268,11 +2267,10 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { font-size: 120%; } - /* Responsive Mode */ .browserContainer[responsivemode] { - background: #222 url("chrome://browser/skin/devtools/responsive-background.png"); + background-color: #222; padding: 0 20px 20px 20px; } @@ -2308,6 +2306,26 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { 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; } @@ -2356,7 +2374,7 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { -moz-appearance: none; display: -moz-box; background-color: transparent; - list-style-image: url("chrome://browser/skin/devtools/dropmarker.png"); + list-style-image: url("chrome://global/skin/devtools/dropmarker.svg"); -moz-box-align: center; border-width: 0; min-width: 16px; @@ -2382,7 +2400,7 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { .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://browser/skin/devtools/dropmarker.png"); + list-style-image: url("chrome://global/skin/devtools/dropmarker.svg"); -moz-box-align: center; padding: 0 3px; } @@ -2393,15 +2411,25 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { } .devtools-responsiveui-close { - list-style-image: url("chrome://browser/skin/devtools/close.png"); + list-style-image: url("chrome://global/skin/devtools/close.png"); } .devtools-responsiveui-rotate { - list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png"); + 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://browser/skin/devtools/responsiveui-touch.png"); + list-style-image: url("chrome://global/skin/devtools/responsiveui-touch.png"); -moz-image-region: rect(0px,16px,16px,0px); } @@ -2409,8 +2437,25 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { -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://browser/skin/devtools/responsiveui-screenshot.png"); + 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 { @@ -2418,7 +2463,8 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { height: 24px; cursor: ew-resize; transform: translate(12px, -12px); - background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png"); + background-size: cover; + background-image: url("chrome://global/skin/devtools/responsive-vertical-resizer.png"); } .devtools-responsiveui-resizebarH { @@ -2426,7 +2472,8 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { height: 7px; cursor: ns-resize; transform: translate(-12px, 12px); - background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png"); + background-size: cover; + background-image: url("chrome://global/skin/devtools/responsive-horizontal-resizer.png"); } .devtools-responsiveui-resizehandle { @@ -2434,115 +2481,294 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { height: 16px; cursor: se-resize; transform: translate(12px, 12px); - background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png"); + 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; } -/* Highlighter */ +/* 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; -.highlighter-outline { - box-shadow: 0 0 0 1px black; - outline: 1px dashed white; - outline-offset: -1px; + 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%); } -.highlighter-outline[locked] { - box-shadow: 0 0 0 1px rgba(0,0,0,0.3); - outline-color: rgba(255,255,255,0.7); +.devtools-responsiveui-home-button { + width: 40px; + height: 30px; + list-style-image: url("chrome://global/skin/devtools/responsiveui-home.png"); } -/* Highlighter - Node Infobar */ +.devtools-responsiveui-sleep-button { + -moz-appearance: none; + /* compensate browserStack top padding */ + margin-top: -67px; + margin-right: 10px; -.highlighter-nodeinfobar { - color: hsl(216,33%,97%); - border-radius: 3px; - background: hsl(214,13%,24%) no-repeat padding-box; + 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%); } -/* Highlighter - Node Infobar - text */ +.devtools-responsiveui-sleep-button:hover:active { + background-image: linear-gradient(to top, #aaa 11%, #ddd 56%); +} -.highlighter-nodeinfobar-text { - /* 100% - size of the buttons and margins */ - max-width: calc(100% - 2 * (26px + 6px)); - padding-bottom: 1px; +.devtools-responsiveui-volume-buttons { + margin-left: -29px; } -html|*.highlighter-nodeinfobar-tagname { - color: hsl(285,100%,75%); +.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%); } -html|*.highlighter-nodeinfobar-id { - color: hsl(103,46%,54%); +.devtools-responsiveui-volume-up-button:hover:active, +.devtools-responsiveui-volume-down-button:hover:active { + background-image: linear-gradient(to right, #aaa 11%, #ddd 56%); } -html|*.highlighter-nodeinfobar-classes, -html|*.highlighter-nodeinfobar-pseudo-classes { - color: hsl(200,74%,57%); +.devtools-responsiveui-volume-up-button { + border-top-left-radius: 12px; } -/* Highlighter - Node Infobar - buttons */ +.devtools-responsiveui-volume-down-button { + border-bottom-left-radius: 12px; +} -.highlighter-nodeinfobar-button { +@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; - border-width: 0; padding: 0; - width: 26px; - min-height: 26px; - background-color: transparent; + 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; } -.highlighter-nodeinfobar-inspectbutton { - -moz-border-end: 1px solid #5a6169; - -moz-margin-end: 12px; - list-style-image: url("chrome://browser/skin/devtools/inspect-button.png"); - -moz-image-region: rect(0px 16px 16px 0px); +#developer-toolbar > toolbarbutton { + -moz-appearance: none; + border: none; + background: transparent; + margin: 0; + padding: 0 10px; + width: 32px; } -.highlighter-nodeinfobar-inspectbutton:active:hover, -.highlighter-nodeinfobar-container:not([locked]) > .highlighter-nodeinfobar > .highlighter-nodeinfobar-inspectbutton { - -moz-image-region: rect(0px 32px 16px 16px); +.developer-toolbar-button > image { + margin: auto 10px; } -.highlighter-nodeinfobar-menu { - -moz-border-start: 1px solid #5a6169; - -moz-margin-start: 12px; +.developer-toolbar-button > .toolbarbutton-icon, +#developer-toolbar-closebutton > .toolbarbutton-icon { + width: 16px; + height: 16px; } -.highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker { - -moz-appearance: none !important; - list-style-image: url("chrome://browser/skin/devtools/dropmarker.png"); - -moz-box-align: center; - -moz-margin-start: -1px; +#developer-toolbar-toolbox-button { + list-style-image: url("chrome://global/skin/devtools/toggle-tools.png"); + -moz-image-region: rect(0px, 16px, 16px, 0px); } -/* Highlighter - Node Infobar - box & arrow */ +#developer-toolbar-toolbox-button > label { + display: none; +} -.highlighter-nodeinfobar-arrow { - width: 14px; - height: 14px; - -moz-margin-start: calc(50% - 7px); - transform: rotate(-45deg); - background-clip: padding-box; - background-repeat: no-repeat; +#developer-toolbar-toolbox-button:hover { + -moz-image-region: rect(0px, 32px, 16px, 16px); } -.highlighter-nodeinfobar-arrow-top { - margin-bottom: -8px; - margin-top: 8px; - background-image: linear-gradient(to top right, transparent 50%, hsl(210,2%,22%) 50%); +#developer-toolbar-toolbox-button:hover:active { + -moz-image-region: rect(0px, 48px, 16px, 32px); } -.highlighter-nodeinfobar-arrow-bottom { - margin-top: -8px; - margin-bottom: 8px; - background-image: linear-gradient(to bottom left, transparent 50%, hsl(210,2%,22%) 50%); +#developer-toolbar-toolbox-button[checked=true] { + -moz-image-region: rect(0px, 64px, 16px, 48px); } -.highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar { - margin: 7px 0; +@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%); @@ -2591,6 +2817,10 @@ html|*.highlighter-nodeinfobar-pseudo-classes { padding: 0px; } +.click-to-play-plugins-notification-content { + width: 28em; +} + .click-to-play-plugins-notification-center-box { border: 1px solid ThreeDShadow; margin: 10px; @@ -2637,20 +2867,15 @@ html|*.highlighter-nodeinfobar-pseudo-classes { margin: 0; } -.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; -} +/* Error counter */ -notification.pluginVulnerable .messageImage { - list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png"); +#developer-toolbar-toolbox-button[error-count]:before { + color: #FDF3DE; + min-width: 16px; + text-shadow: none; + background-image: linear-gradient(#B4211B, #8A1915); + border-radius: 1px; + -moz-margin-end: 5px; } /* This Source Code Form is subject to the terms of the Mozilla Public @@ -2814,17 +3039,6 @@ toolbar[mode="full"] > #downloads-button[indicator] > .toolbarbutton-text { text-align: center; } -/* 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; - -moz-margin-end: 5px; -} - /* Social toolbar item */ #social-provider-button { diff --git a/src/chrome/browser/devtools/animationinspector.css b/src/chrome/browser/devtools/animationinspector.css @@ -1,213 +0,0 @@ -html { - height: 100%; -} - -body { - margin: 0; - padding: 0; - display : flex; - flex-direction: column; - height: 100%; - overflow: hidden; - color: var(--theme-content-color3); -} - -/* The top toolbar, containing the toggle-all button */ - -#toolbar { - border-bottom: 1px solid var(--theme-splitter-color); - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-end; - height: 20px; -} - -#toolbar .label { - padding: 1px 4px; -} - -#toggle-all { - border-width: 0px 1px; - min-height: 20px; -} - -/* The error message, shown when an invalid/unanimated element is selected */ - -#error-message { - padding-top: 10%; - text-align: center; - flex: 1; - overflow: auto; - - /* The error message is hidden by default */ - display: none; -} - -/* The animation players container */ - -#players { - flex: 1; - overflow: auto; -} - -/* Element picker and toggle-all buttons */ - -#element-picker, -#toggle-all { - position: relative; -} - -#element-picker::before, -#toggle-all::before { - content: ""; - display: block; - width: 16px; - height: 16px; - position: absolute; - left: 50%; - top: 50%; - margin: -8px 0 0 -8px; - background-image: url("chrome://browser/skin/devtools/command-pick.png"); -} - -#toggle-all::before { - background-image: url("debugger-pause.png"); -} - -#element-picker[checked]::before { - background-position: -48px 0; - filter: none; /* Icon is blue when checked, don't invert for light theme */ -} - -#toggle-all.paused::before { - background-image: url("debugger-play.png"); -} - -@media (min-resolution: 2dppx) { - #element-picker::before { - background-image: url("chrome://browser/skin/devtools/command-pick@2x.png"); - background-size: 64px; - } - - #toggle-all::before { - background-image: url("debugger-pause@2x.png"); - } - - #toggle-all.paused::before { - background-image: url("debugger-play@2x.png"); - } -} - -/* Disabled playerWidget when the animation has ended */ - -.finished { - pointer-events: none; - opacity: .5; -} - -/* Animation title gutter, contains the name, duration, iteration */ - -.animation-title { - background-color: var(--theme-toolbar-background); - border-bottom: 1px solid var(--theme-splitter-color); - padding: 1px 4px; - word-wrap: break-word; - overflow: auto; -} - -.animation-title .meta-data { - float: right; -} - -.animation-title strong { - margin: 0 .5em; -} - -/* Timeline wiget */ - -.timeline { - height: 20px; - width: 100%; - display: flex; - flex-direction: row; - border-bottom: 1px solid var(--theme-splitter-color); -} - -.timeline .playback-controls { - width: 50px; - display: flex; - flex-direction: row; -} - -/* Playback control buttons */ - -.timeline .playback-controls button { - flex-grow: 1; - border-width: 0 1px 0 0; -} - -/* Play/pause button */ - -.timeline .toggle::before { - background-image: url(debugger-pause.png); -} - -.paused .timeline .toggle::before, -.finished .timeline .toggle::before { - background-image: url(debugger-play.png); -} - -@media (min-resolution: 2dppx) { - .timeline .toggle::before { - background-image: url(debugger-pause@2x.png); - } - - .paused .timeline .toggle::before, - .finished .timeline .toggle::before { - background-image: url(debugger-play@2x.png); - } -} - -/* Slider (input type range) container */ - -.timeline .sliders-container { - flex-grow: 1; - height: 100%; - position: relative; - border-width: 1px 0; -} - -.timeline .sliders-container .current-time { - position: absolute; - padding: 0; - margin: 0; - left: 0; - width: 100%; - height: 100%; -} - -.timeline .sliders-container .current-time::-moz-range-thumb { - height: 100%; - width: 4px; - border-radius: 0; - border: none; - background: var(--theme-highlight-blue); -} - -.timeline .sliders-container .current-time::-moz-range-track { - width: 100%; - height: 50px; - background: transparent; -} - -/* Current time label */ - -.timeline .time-display { - display: flex; - align-items: center; - justify-content: center; - width: 50px; - border-left: 1px solid var(--theme-splitter-color); - background: var(--theme-toolbar-background); -} diff --git a/src/chrome/browser/devtools/app-manager/connection-footer.css b/src/chrome/browser/devtools/app-manager/connection-footer.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/app-manager/connection-footer.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/app-manager/device.css b/src/chrome/browser/devtools/app-manager/device.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/app-manager/device.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/app-manager/error.svg b/src/chrome/browser/devtools/app-manager/error.svg @@ -1,14 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> - -<!-- 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/. --> - -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64"> - <path fill="#E25026" d="M32,4.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5S47.74,4.894,32,4.894 - z M46.903,48.674c-1.817,1.817-4.691,1.76-6.449,0.002l-8.327-8.327l-8.151,8.151c-1.877,1.877-4.87,1.814-6.685,0 - c-1.877-1.877-1.879-4.811-0.002-6.687l8.151-8.151l-8.327-8.327c-1.76-1.76-1.817-4.634,0-6.451c1.76-1.76,4.691-1.76,6.451,0 - l8.327,8.327l8.151-8.151c1.877-1.877,4.811-1.874,6.687,0.002c1.814,1.814,1.877,4.808,0,6.685l-8.151,8.151l8.327,8.327 - C48.662,43.982,48.662,46.914,46.903,48.674z"/> -</svg> diff --git a/src/chrome/browser/devtools/app-manager/help.css b/src/chrome/browser/devtools/app-manager/help.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/app-manager/help.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/app-manager/index-icons.svg b/src/chrome/browser/devtools/app-manager/index-icons.svg @@ -1,81 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" - width="160px" height="240px" viewBox="0 0 160 240" enable-background="new 0 0 160 240" xml:space="preserve"> -<rect y="40" display="none" fill="#22272D" width="84" height="160"/> -<rect x="80.75" y="40" display="none" fill="#194866" width="84" height="160"/> -<path fill="#414042" d="M40,21.149c-2.044,0.001-6.042,6.745-7.404,13.436L28,39.181v12l3.204,0l4.467-4.466 - c0.457,0.478,0.96,0.88,1.5,1.199h5.652c0.543-0.318,1.05-0.719,1.507-1.199l4.466,4.466l3.204,0v-12l-4.597-4.596 - C46.042,27.895,42.044,21.149,40,21.149z M40.005,28.185c0.712,0,1.965,2,2.746,4.392c-0.846-0.157-1.747-0.244-2.686-0.244 - c-0.987,0-1.933,0.099-2.815,0.271C38.03,30.199,39.289,28.185,40.005,28.185z"/> -<path fill="#414042" d="M41.436,50.98c0,1.41-1.094,2.553-1.459,2.553c-0.364,0-1.459-1.144-1.459-2.553 - c0-0.546,0.099-1.051,0.266-1.466h-1.69c-0.198,0.731-0.31,1.549-0.31,2.412c0,3.108,2.411,5.627,3.215,5.627 - s3.216-2.519,3.215-5.626c0-0.864-0.112-1.681-0.31-2.413l-1.734,0C41.337,49.929,41.436,50.434,41.436,50.98z"/> -<g> - <g> - <path fill="#B2B5B9" d="M40,21.149c-2.044,0.001-6.042,6.745-7.404,13.436L28,39.181v12l3.204,0l4.467-4.466 - c0.457,0.478,0.96,0.88,1.5,1.199h5.652c0.543-0.318,1.05-0.719,1.507-1.199l4.466,4.466l3.204,0v-12l-4.597-4.596 - C46.042,27.895,42.044,21.149,40,21.149z M40.005,28.185c0.712,0,1.965,2,2.746,4.392c-0.846-0.157-1.747-0.244-2.686-0.244 - c-0.987,0-1.933,0.099-2.815,0.271C38.03,30.199,39.289,28.185,40.005,28.185z"/> - <path fill="#B2B5B9" d="M41.436,50.98c0,1.41-1.094,2.553-1.459,2.553c-0.364,0-1.459-1.144-1.459-2.553 - c0-0.546,0.099-1.051,0.266-1.466h-1.69c-0.198,0.731-0.31,1.549-0.31,2.412c0,3.108,2.411,5.627,3.215,5.627 - s3.216-2.519,3.215-5.626c0-0.864-0.112-1.681-0.31-2.413l-1.734,0C41.337,49.929,41.436,50.434,41.436,50.98z"/> - </g> -</g> -<g> - <path fill="#DCE8F3" d="M120,21.149c-2.044,0.001-6.042,6.745-7.404,13.436L108,39.181v12l3.204,0l4.467-4.466 - c0.457,0.478,0.96,0.88,1.5,1.199h5.652c0.543-0.318,1.05-0.719,1.507-1.199l4.467,4.466l3.204,0v-12l-4.597-4.596 - C126.042,27.895,122.044,21.149,120,21.149z M120.005,28.185c0.712,0,1.965,2,2.746,4.392c-0.846-0.157-1.747-0.244-2.686-0.244 - c-0.987,0-1.933,0.099-2.815,0.271C118.03,30.199,119.289,28.185,120.005,28.185z"/> - <path fill="#DCE8F3" d="M121.436,50.98c0,1.41-1.094,2.553-1.459,2.553c-0.364,0-1.459-1.144-1.459-2.553 - c0-0.546,0.099-1.051,0.266-1.466h-1.69c-0.198,0.731-0.31,1.549-0.31,2.412c0,3.108,2.411,5.627,3.215,5.627 - s3.216-2.519,3.215-5.626c0-0.864-0.112-1.681-0.31-2.413l-1.734,0C121.337,49.929,121.436,50.434,121.436,50.98z"/> -</g> -<g> - <g> - <path fill="#B2B5B9" d="M52.5,136.017c0,2.279-1.888,4.167-4.167,4.167H31.667c-2.279,0-4.167-1.888-4.167-4.167v-33.333 - c0-2.279,1.888-4.167,4.167-4.167h16.667c2.279,0,4.167,1.888,4.167,4.167V136.017z M49.375,107.892 - c0-0.554-0.488-1.042-1.042-1.042H31.667c-0.553,0-1.042,0.488-1.042,1.042v22.917c0,0.554,0.488,1.042,1.042,1.042h16.667 - c0.553,0,1.042-0.488,1.042-1.042V107.892z M42.604,102.684h-5.208c-0.293,0-0.521,0.228-0.521,0.521 - c0,0.293,0.228,0.521,0.521,0.521h5.208c0.293,0,0.521-0.228,0.521-0.521C43.125,102.912,42.897,102.684,42.604,102.684z - M40,133.413c-1.432,0-2.604,1.171-2.604,2.604c0,1.433,1.172,2.604,2.604,2.604s2.604-1.171,2.604-2.604 - C42.604,134.585,41.432,133.413,40,133.413z"/> - </g> -</g> -<g> - <path fill="#DCE8F3" d="M132.5,136.017c0,2.279-1.888,4.167-4.167,4.167h-16.667c-2.279,0-4.167-1.888-4.167-4.167v-33.333 - c0-2.279,1.888-4.167,4.167-4.167h16.667c2.279,0,4.167,1.888,4.167,4.167V136.017z M129.375,107.892 - c0-0.554-0.488-1.042-1.042-1.042h-16.667c-0.553,0-1.042,0.488-1.042,1.042v22.917c0,0.554,0.488,1.042,1.042,1.042h16.667 - c0.553,0,1.042-0.488,1.042-1.042V107.892z M122.604,102.684h-5.208c-0.293,0-0.521,0.228-0.521,0.521 - c0,0.293,0.228,0.521,0.521,0.521h5.208c0.293,0,0.521-0.228,0.521-0.521C123.125,102.912,122.897,102.684,122.604,102.684z - M120,133.413c-1.432,0-2.604,1.171-2.604,2.604c0,1.433,1.172,2.604,2.604,2.604s2.604-1.171,2.604-2.604 - C122.604,134.585,121.432,133.413,120,133.413z"/> -</g> -<g> - <path fill="#B2B5B9" d="M40,185.388c8.121,0,14.729,6.607,14.729,14.729S48.121,214.845,40,214.845s-14.729-6.607-14.729-14.729 - S31.879,185.388,40,185.388 M40,182.75c-9.591,0-17.367,7.775-17.367,17.367c0,9.591,7.775,17.367,17.367,17.367 - s17.367-7.775,17.367-17.367C57.367,190.525,49.591,182.75,40,182.75L40,182.75z"/> - <g> - <path fill="#B2B5B9" d="M39.565,204.504c-0.688,0-1.196-0.508-1.286-1.195l-0.299-2.57c-0.12-0.808,0.359-1.405,1.166-1.495 - c2.81-0.269,4.364-1.345,4.364-3.229v-0.06c0-1.674-1.285-2.84-3.438-2.84c-1.584,0-2.87,0.568-4.065,1.645 - c-0.299,0.239-0.688,0.418-1.106,0.418c-0.926,0-1.674-0.747-1.674-1.644c0-0.448,0.18-0.927,0.598-1.285 - c1.584-1.495,3.587-2.481,6.337-2.481c4.185,0,7.024,2.331,7.024,6.068v0.06c0,3.767-2.72,5.47-6.038,6.038l-0.12,1.375 - c-0.12,0.657-0.598,1.195-1.285,1.195H39.565z M39.565,206.687c1.226,0,2.122,0.896,2.122,2.062v0.299 - c0,1.166-0.896,2.062-2.122,2.062s-2.123-0.896-2.123-2.062v-0.299C37.442,207.583,38.339,206.687,39.565,206.687z"/> - </g> -</g> -<g> - <path fill="#DCE8F3" d="M120,185.388c8.121,0,14.729,6.607,14.729,14.729s-6.607,14.729-14.729,14.729s-14.729-6.607-14.729-14.729 - S111.879,185.388,120,185.388 M120,182.75c-9.591,0-17.367,7.775-17.367,17.367c0,9.591,7.775,17.367,17.367,17.367 - s17.367-7.775,17.367-17.367C137.367,190.525,129.591,182.75,120,182.75L120,182.75z"/> - <g> - <path fill="#DCE8F3" d="M119.564,204.504c-0.688,0-1.195-0.508-1.285-1.195l-0.299-2.57c-0.12-0.808,0.358-1.405,1.166-1.495 - c2.81-0.269,4.363-1.345,4.363-3.229v-0.06c0-1.674-1.285-2.84-3.438-2.84c-1.584,0-2.869,0.568-4.064,1.645 - c-0.3,0.239-0.688,0.418-1.106,0.418c-0.927,0-1.674-0.747-1.674-1.644c0-0.448,0.18-0.927,0.598-1.285 - c1.584-1.495,3.587-2.481,6.337-2.481c4.186,0,7.024,2.331,7.024,6.068v0.06c0,3.767-2.72,5.47-6.038,6.038l-0.119,1.375 - c-0.12,0.657-0.598,1.195-1.285,1.195H119.564z M119.564,206.687c1.226,0,2.122,0.896,2.122,2.062v0.299 - c0,1.166-0.896,2.062-2.122,2.062s-2.122-0.896-2.122-2.062v-0.299C117.442,207.583,118.339,206.687,119.564,206.687z"/> - </g> -</g> -</svg> diff --git a/src/chrome/browser/devtools/app-manager/index.css b/src/chrome/browser/devtools/app-manager/index.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/app-manager/index.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/app-manager/plus.svg b/src/chrome/browser/devtools/app-manager/plus.svg @@ -1,13 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> - -<!-- 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/. --> - -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64"> - <path fill="#ABABAB" d="M32.336,3.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5 - S48.076,3.894,32.336,3.894z M44.86,36.966h-7.823v7.62c0,2.582-2.12,4.702-4.702,4.702c-2.584,0-4.704-2.12-4.704-4.702v-7.62 - h-7.817c-2.52,0-4.572-2.056-4.572-4.572s2.053-4.572,4.572-4.572h7.817v-7.62c0-2.582,2.12-4.702,4.704-4.702 - c2.582,0,4.702,2.12,4.702,4.702v7.62h7.823c2.514,0,4.57,2.056,4.57,4.572S47.374,36.966,44.86,36.966z"/> -</svg> diff --git a/src/chrome/browser/devtools/app-manager/projects.css b/src/chrome/browser/devtools/app-manager/projects.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/app-manager/projects.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/app-manager/rocket.svg b/src/chrome/browser/devtools/app-manager/rocket.svg @@ -1,31 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> - -<!-- 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" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> - <g opacity="0.1"> - <g> - <path fill="#FFFFFF" d="M12,2.3c-1.127,0-3.333,3.721-4.084,7.411l-2.535,2.535v6.619l1.767,0l2.464-2.464 - c0.252,0.264,0.529,0.486,0.827,0.662h3.118c0.299-0.175,0.579-0.397,0.831-0.662l2.464,2.464l1.767,0v-6.619l-2.535-2.535 - C15.333,6.021,13.127,2.3,12,2.3z M12.003,6.181c0.393,0,1.084,1.103,1.515,2.423c-0.466-0.087-0.963-0.135-1.481-0.135 - c-0.545,0-1.066,0.054-1.553,0.15C10.914,7.292,11.608,6.181,12.003,6.181z"/> - <path fill="#FFFFFF" d="M12.792,18.755c0,0.778-0.603,1.408-0.805,1.408c-0.201,0-0.805-0.631-0.805-1.408 - c0-0.301,0.055-0.579,0.147-0.809h-0.932c-0.109,0.403-0.171,0.854-0.171,1.33c0,1.714,1.33,3.104,1.774,3.104 - s1.774-1.389,1.774-3.103c0-0.477-0.062-0.927-0.171-1.331l-0.957,0C12.738,18.175,12.792,18.453,12.792,18.755z"/> - </g> - <g> - <g> - <path fill="#414042" d="M12,2c-1.127,0-3.333,3.721-4.084,7.411l-2.535,2.535v6.619l1.767,0l2.464-2.464 - c0.252,0.264,0.529,0.486,0.827,0.662h3.118c0.299-0.175,0.579-0.397,0.831-0.662l2.464,2.464l1.767,0v-6.619l-2.535-2.535 - C15.333,5.721,13.127,2,12,2z M12.003,5.881c0.393,0,1.084,1.103,1.515,2.423c-0.466-0.087-0.963-0.135-1.481-0.135 - c-0.545,0-1.066,0.054-1.553,0.15C10.914,6.992,11.608,5.881,12.003,5.881z"/> - <path fill="#414042" d="M12.792,18.455c0,0.778-0.603,1.408-0.805,1.408c-0.201,0-0.805-0.631-0.805-1.408 - c0-0.301,0.055-0.579,0.147-0.809h-0.932c-0.109,0.403-0.171,0.854-0.171,1.33c0,1.714,1.33,3.104,1.774,3.104 - s1.774-1.389,1.774-3.103c0-0.477-0.062-0.927-0.171-1.331l-0.957,0C12.738,17.875,12.792,18.153,12.792,18.455z"/> - </g> - </g> - </g> -</svg> diff --git a/src/chrome/browser/devtools/app-manager/warning.svg b/src/chrome/browser/devtools/app-manager/warning.svg @@ -1,14 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> - -<!-- 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" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64"> - <path fill="#ECB51F" d="M61.689,51.121L36.437,7.384c-2.441-4.227-6.434-4.227-8.875,0L2.311,51.121 - c-2.441,4.227-0.444,7.686,4.437,7.686h50.504C62.133,58.807,64.13,55.349,61.689,51.121z M35.968,47.68 - c0,2.191-1.688,3.877-3.968,3.877s-3.968-1.686-3.968-3.877v-0.093c0-2.187,1.688-3.873,3.968-3.873s3.968,1.686,3.968,3.873V47.68z - M36.059,21.548l-1.961,17.146c-0.137,1.233-0.958,2.009-2.098,2.009s-1.961-0.776-2.098-2.009l-1.961-17.146 - c-0.137-1.322,0.592-2.325,1.825-2.325h4.469C35.466,19.223,36.196,20.226,36.059,21.548z"/> -</svg> diff --git a/src/chrome/browser/devtools/arrow-e.png b/src/chrome/browser/devtools/arrow-e.png Binary files differ. diff --git a/src/chrome/browser/devtools/background-noise-toolbar.png b/src/chrome/browser/devtools/background-noise-toolbar.png Binary files differ. diff --git a/src/chrome/browser/devtools/blackBoxMessageEye.png b/src/chrome/browser/devtools/blackBoxMessageEye.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs-scrollbutton.png b/src/chrome/browser/devtools/breadcrumbs-scrollbutton.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/ltr-end-pressed.png b/src/chrome/browser/devtools/breadcrumbs/ltr-end-pressed.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/ltr-end-selected-pressed.png b/src/chrome/browser/devtools/breadcrumbs/ltr-end-selected-pressed.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/ltr-end-selected.png b/src/chrome/browser/devtools/breadcrumbs/ltr-end-selected.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/ltr-end.png b/src/chrome/browser/devtools/breadcrumbs/ltr-end.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/ltr-middle-pressed.png b/src/chrome/browser/devtools/breadcrumbs/ltr-middle-pressed.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/ltr-middle-selected-pressed.png b/src/chrome/browser/devtools/breadcrumbs/ltr-middle-selected-pressed.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/ltr-middle-selected.png b/src/chrome/browser/devtools/breadcrumbs/ltr-middle-selected.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/ltr-middle.png b/src/chrome/browser/devtools/breadcrumbs/ltr-middle.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/ltr-start-pressed.png b/src/chrome/browser/devtools/breadcrumbs/ltr-start-pressed.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/ltr-start-selected-pressed.png b/src/chrome/browser/devtools/breadcrumbs/ltr-start-selected-pressed.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/ltr-start-selected.png b/src/chrome/browser/devtools/breadcrumbs/ltr-start-selected.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/ltr-start.png b/src/chrome/browser/devtools/breadcrumbs/ltr-start.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/rtl-end-pressed.png b/src/chrome/browser/devtools/breadcrumbs/rtl-end-pressed.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/rtl-end-selected-pressed.png b/src/chrome/browser/devtools/breadcrumbs/rtl-end-selected-pressed.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/rtl-end-selected.png b/src/chrome/browser/devtools/breadcrumbs/rtl-end-selected.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/rtl-end.png b/src/chrome/browser/devtools/breadcrumbs/rtl-end.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/rtl-middle-pressed.png b/src/chrome/browser/devtools/breadcrumbs/rtl-middle-pressed.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/rtl-middle-selected-pressed.png b/src/chrome/browser/devtools/breadcrumbs/rtl-middle-selected-pressed.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/rtl-middle-selected.png b/src/chrome/browser/devtools/breadcrumbs/rtl-middle-selected.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/rtl-middle.png b/src/chrome/browser/devtools/breadcrumbs/rtl-middle.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/rtl-start-pressed.png b/src/chrome/browser/devtools/breadcrumbs/rtl-start-pressed.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png b/src/chrome/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/rtl-start-selected.png b/src/chrome/browser/devtools/breadcrumbs/rtl-start-selected.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs/rtl-start.png b/src/chrome/browser/devtools/breadcrumbs/rtl-start.png Binary files differ. diff --git a/src/chrome/browser/devtools/canvasdebugger.css b/src/chrome/browser/devtools/canvasdebugger.css @@ -1,458 +0,0 @@ -/* 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/. */ - -/* 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/. */ - - -/* Reload and waiting notices */ - -.notice-container { - margin-top: -50vh; - font-size: 120%; - background-color: var(--theme-toolbar-background); - color: var(--theme-body-color-alt); -} - -#empty-notice > button { - min-width: 30px; - min-height: 28px; - margin: 0; - list-style-image: url(profiler-stopwatch.svg); -} - -#empty-notice > button .button-text { - display: none; -} - -.theme-dark #import-notice { - font-size: 250%; - color: rgba(255,255,255,0.2); -} - -.theme-light #import-notice { - font-size: 250%; - color: rgba(0,0,0,0.2); -} - -/* Snapshots pane */ - -#snapshots-pane > tabs { - -moz-border-end: 1px solid; -} - -#snapshots-pane .devtools-toolbar { - -moz-border-end: 1px solid; -} - -.theme-dark #snapshots-pane > tabs, -.theme-dark #snapshots-pane .devtools-toolbar { - -moz-border-end-color: black; /* Match the splitter color. */ -} - -.theme-light #snapshots-pane > tabs, -.theme-light #snapshots-pane .devtools-toolbar { - -moz-border-end-color: #aaa; /* Match the splitter color. */ -} - -#record-snapshot { - list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.svg"); -} - -#record-snapshot[checked] { - list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch-checked.svg"); -} - -/* Snapshots items */ - -.snapshot-item-thumbnail { - image-rendering: -moz-crisp-edges; - background-image: linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)), linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)); - background-size: 12px 12px, 12px 12px; - background-position: 0px 0px, 6px 6px; - background-repeat: repeat, repeat; -} - -.snapshot-item-thumbnail[flipped=true] { - transform: scaleY(-1); -} - -.theme-dark .snapshot-item-thumbnail { - background-color: #000; -} - -.theme-light .snapshot-item-thumbnail { - background-color: #fff; -} - -.snapshot-item-details { - -moz-padding-start: 6px; -} - -.snapshot-item-calls { - padding-top: 4px; - font-size: 80%; -} - -.snapshot-item-save { - padding-bottom: 2px; - font-size: 90%; -} - -.snapshot-item-calls, -.snapshot-item-save { - color: var(--theme-body-color-alt); -} - -.snapshot-item-save { - text-decoration: underline; - cursor: pointer; -} - -.snapshot-item-save[disabled=true] { - text-decoration: none; - pointer-events: none; -} - -.snapshot-item-footer.devtools-throbber::before { - margin-top: -2px; -} - -#snapshots-list .selected label { - /* Text inside a selected item should not be custom colored. */ - color: inherit !important; -} - -/* Debugging pane controls */ - -#debugging-controls .devtools-toolbarbutton > .toolbarbutton-icon { - width: 16px; - height: 16px; -} - -#resume { - list-style-image: url(debugger-play.png); - -moz-image-region: rect(0px,32px,16px,16px); -} - -#step-over { - list-style-image: url(debugger-step-over.png); -} - -#step-in { - list-style-image: url(debugger-step-in.png); -} - -#step-out { - list-style-image: url(debugger-step-out.png); -} - -@media (min-resolution: 2dppx) { - #resume { - list-style-image: url(debugger-play@2x.png); - -moz-image-region: rect(0px,64px,32px,32px); - } - - #step-over { - list-style-image: url(debugger-step-over@2x.png); - } - - #step-in { - list-style-image: url(debugger-step-in@2x.png); - } - - #step-out { - list-style-image: url(debugger-step-out@2x.png); - } -} - -#debugging-controls > toolbarbutton { - transition: opacity 0.15s ease-in-out; -} - -#debugging-controls > toolbarbutton[disabled=true] { - opacity: 0.5; -} - -#calls-slider { - -moz-padding-end: 24px; -} - -#calls-slider .scale-slider { - margin: 0; -} - -#debugging-toolbar-sizer-button { - /* This button's only purpose in life is to make the - container .devtools-toolbar have the right height. */ - visibility: hidden; - min-width: 1px; -} - -/* Calls list pane */ - -#calls-list .side-menu-widget-container { - background: transparent; -} - -#calls-list .side-menu-widget-item { - padding: 0; -} - -/* Calls list items */ - -.theme-dark #calls-list .side-menu-widget-item { - border-color: #111; - border-bottom-color: transparent; -} - -.theme-light #calls-list .side-menu-widget-item { - border-color: #eee; - border-bottom-color: transparent; -} - -.theme-dark .call-item-view:hover { - background-color: rgba(255,255,255,.025); -} - -.theme-light .call-item-view:hover { - background-color: rgba(0,0,0,.025); -} - -.theme-dark .call-item-view[draw-call] { - background-color: rgba(112,191,83,0.15); -} - -.theme-light .call-item-view[draw-call] { - background-color: rgba(44,187,15,0.1); -} - -.theme-dark .call-item-view[interesting-call] { - background-color: rgba(223,128,255,0.15); -} - -.theme-light .call-item-view[interesting-call] { - background-color: rgba(184,46,229,0.1); -} - -.call-item-gutter { - width: calc(3em + 22px); - -moz-padding-start: 22px; - -moz-padding-end: 4px; - padding-top: 2px; - padding-bottom: 2px; - -moz-border-end: 1px solid; - -moz-margin-end: 6px; -} - -.selected .call-item-gutter { - background-image: url("editor-debug-location.png"); - background-repeat: no-repeat; - background-position: 6px center; - background-size: 12px; -} - -@media (min-resolution: 2dppx) { - .selected .call-item-gutter { - background-image: url("editor-debug-location@2x.png"); - } -} - -.call-item-gutter { - background-color: var(--theme-sidebar-background); - color: var(--theme-content-color3); - border-color: var(--theme-splitter-color); -} - -.call-item-index { - text-align: end; -} - -.call-item-context { - color: var(--theme-highlight-orange); -} - -.call-item-name { - color: var(--theme-highlight-blue); -} - -.call-item-location { - -moz-padding-start: 2px; - -moz-padding-end: 6px; - text-align: end; - cursor: pointer; - color: var(--theme-highlight-bluegrey); -} - -.call-item-location:hover { - color: var(--theme-highlight-blue); -} - -.call-item-view:hover .call-item-location, -.call-item-view[expanded] .call-item-location { - text-decoration: underline; -} - -.theme-dark .call-item-location { - border-color: #111; -} - -.theme-light .call-item-location { - border-color: #eee; -} - -.call-item-stack { - -moz-padding-start: calc(3em + 22px); - padding-bottom: 10px; -} - -.theme-dark .call-item-stack { - background: rgba(0,0,0,0.9); -} - -.theme-light .call-item-stack { - background: rgba(255,255,255,0.9); -} - -.call-item-stack-fn { - padding-top: 2px; - padding-bottom: 2px; -} - -.call-item-stack-fn-location { - -moz-padding-start: 2px; - -moz-padding-end: 6px; - text-align: end; - cursor: pointer; - text-decoration: underline; -} - -.call-item-stack-fn-name { - color: var(--theme-content-color3); -} - -.call-item-stack-fn-location { - color: var(--theme-highlight-bluegrey); -} - -.call-item-stack-fn-location:hover { - color: var(--theme-highlight-blue); -} - -#calls-list .selected .call-item-contents > label:not(.call-item-gutter) { - /* Text inside a selected item should not be custom colored. */ - color: inherit !important; -} - -/* Rendering preview */ - -#screenshot-container { - background-image: linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)), linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)); - background-size: 30px 30px, 30px 30px; - background-position: 0px 0px, 15px 15px; - background-repeat: repeat, repeat; -} - -.theme-dark #screenshot-container { - background-color: #000; -} - -.theme-light #screenshot-container { - background-color: #fff; -} - -@media (min-width: 701px) { - #screenshot-container { - width: 30vw; - max-width: 50vw; - min-width: 100px; - } -} - -@media (max-width: 700px) { - #screenshot-container { - height: 40vh; - max-height: 70vh; - min-height: 100px; - } -} - -#screenshot-image { - background-image: -moz-element(#screenshot-rendering); - background-size: contain; - background-position: center, center; - background-repeat: no-repeat; -} - -#screenshot-image[flipped=true] { - transform: scaleY(-1); -} - -#screenshot-dimensions { - padding-top: 4px; - padding-bottom: 4px; - text-align: center; -} - -.theme-dark #screenshot-dimensions { - background-color: rgba(0,0,0,0.4); -} - -.theme-light #screenshot-dimensions { - background-color: rgba(255,255,255,0.8); -} - -/* Snapshot filmstrip */ - -#snapshot-filmstrip { - overflow: hidden; -} - -.theme-dark #snapshot-filmstrip { - border-top: 1px solid #000; - color: var(--theme-selection-color); -} - -.theme-light #snapshot-filmstrip { - border-top: 1px solid #aaa; - color: var(--theme-body-color-alt); -} - -.filmstrip-thumbnail { - image-rendering: -moz-crisp-edges; - background-image: linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)), linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)); - background-size: 12px 12px, 12px 12px; - background-position: 0px -1px, 6px 5px; - background-repeat: repeat, repeat; - background-origin: content-box; - cursor: pointer; - padding-top: 1px; - padding-bottom: 1px; - transition: opacity 0.1s ease-in-out; -} - -.filmstrip-thumbnail[flipped=true] { - transform: scaleY(-1); -} - -.theme-dark .filmstrip-thumbnail { - background-color: #000; -} - -.theme-light .filmstrip-thumbnail { - background-color: #fff; -} - -.filmstrip-thumbnail { - -moz-border-end: 1px solid var(--theme-splitter-color) -} - -#snapshot-filmstrip > .filmstrip-thumbnail:hover, -#snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] { - border: 1px solid var(--theme-highlight-blue); - margin: 0 0 0 -1px; - padding: 0; - opacity: 0.66; -} diff --git a/src/chrome/browser/devtools/checkbox-dark.png b/src/chrome/browser/devtools/checkbox-dark.png Binary files differ. diff --git a/src/chrome/browser/devtools/checkbox-light.png b/src/chrome/browser/devtools/checkbox-light.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-paintflashing.png b/src/chrome/browser/devtools/command-paintflashing.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-responsivemode.png b/src/chrome/browser/devtools/command-responsivemode.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-scratchpad.png b/src/chrome/browser/devtools/command-scratchpad.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-tilt.png b/src/chrome/browser/devtools/command-tilt.png Binary files differ. diff --git a/src/chrome/browser/devtools/commandline-icon.png b/src/chrome/browser/devtools/commandline-icon.png Binary files differ. diff --git a/src/chrome/browser/devtools/commandline.css b/src/chrome/browser/devtools/commandline.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/commandline.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/common.css b/src/chrome/browser/devtools/common.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/common.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/computedview.css b/src/chrome/browser/devtools/computedview.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/computedview.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/controls.png b/src/chrome/browser/devtools/controls.png Binary files differ. diff --git a/src/chrome/browser/devtools/dark-theme.css b/src/chrome/browser/devtools/dark-theme.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/dark-theme.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/debugger-blackbox.png b/src/chrome/browser/devtools/debugger-blackbox.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-collapse.png b/src/chrome/browser/devtools/debugger-collapse.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-expand.png b/src/chrome/browser/devtools/debugger-expand.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-pause.png b/src/chrome/browser/devtools/debugger-pause.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-play.png b/src/chrome/browser/devtools/debugger-play.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-step-in.png b/src/chrome/browser/devtools/debugger-step-in.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-step-out.png b/src/chrome/browser/devtools/debugger-step-out.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-step-over.png b/src/chrome/browser/devtools/debugger-step-over.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger.css b/src/chrome/browser/devtools/debugger.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/debugger.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/dock-bottom.png b/src/chrome/browser/devtools/dock-bottom.png Binary files differ. diff --git a/src/chrome/browser/devtools/dock-side.png b/src/chrome/browser/devtools/dock-side.png Binary files differ. diff --git a/src/chrome/browser/devtools/dropmarker.png b/src/chrome/browser/devtools/dropmarker.png Binary files differ. diff --git a/src/chrome/browser/devtools/font-inspector.css b/src/chrome/browser/devtools/font-inspector.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/font-inspector.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/inspect-button.png b/src/chrome/browser/devtools/inspect-button.png Binary files differ. diff --git a/src/chrome/browser/devtools/inspector.css b/src/chrome/browser/devtools/inspector.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/inspector.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/itemArrow-ltr.png b/src/chrome/browser/devtools/itemArrow-ltr.png Binary files differ. diff --git a/src/chrome/browser/devtools/itemArrow-rtl.png b/src/chrome/browser/devtools/itemArrow-rtl.png Binary files differ. diff --git a/src/chrome/browser/devtools/itemToggle.png b/src/chrome/browser/devtools/itemToggle.png Binary files differ. diff --git a/src/chrome/browser/devtools/layout-background-grid.png b/src/chrome/browser/devtools/layout-background-grid.png Binary files differ. diff --git a/src/chrome/browser/devtools/layoutview.css b/src/chrome/browser/devtools/layoutview.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/layoutview.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/light-theme.css b/src/chrome/browser/devtools/light-theme.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/light-theme.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/magnifying-glass.png b/src/chrome/browser/devtools/magnifying-glass.png Binary files differ. diff --git a/src/chrome/browser/devtools/markup-view.css b/src/chrome/browser/devtools/markup-view.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/markup-view.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/netmonitor.css b/src/chrome/browser/devtools/netmonitor.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/netmonitor.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/option-icon.png b/src/chrome/browser/devtools/option-icon.png Binary files differ. diff --git a/src/chrome/browser/devtools/orion-breakpoint.png b/src/chrome/browser/devtools/orion-breakpoint.png Binary files differ. diff --git a/src/chrome/browser/devtools/orion-container.css b/src/chrome/browser/devtools/orion-container.css @@ -1,39 +0,0 @@ -/* 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/. */ - -.viewTooltip { - display: none; /* TODO: add tooltips support, see bug 721752 */ - font-family: monospace; - font-size: 13px; - background-color: InfoBackground; - color: InfoText; - padding: 2px; - border-radius: 4px; - border: 1px solid black; - z-index: 100; - position: fixed; - overflow: hidden; - white-space: pre; -} - -.viewTooltip em { - font-style: normal; - font-weight: bold; -} - -.annotationHTML { - cursor: pointer; - width: 16px; - height: 16px; - display: inline-block; - vertical-align: middle; - background-position: center; - background-repeat: no-repeat; -} -.annotationHTML.task { - background-image: url("chrome://browser/skin/devtools/orion-task.png"); -} -.annotationHTML.breakpoint { - background-image: url("chrome://browser/skin/devtools/orion-breakpoint.png"); -} diff --git a/src/chrome/browser/devtools/orion-debug-location.png b/src/chrome/browser/devtools/orion-debug-location.png Binary files differ. diff --git a/src/chrome/browser/devtools/orion-error.png b/src/chrome/browser/devtools/orion-error.png Binary files differ. diff --git a/src/chrome/browser/devtools/orion-task.png b/src/chrome/browser/devtools/orion-task.png Binary files differ. diff --git a/src/chrome/browser/devtools/orion.css b/src/chrome/browser/devtools/orion.css @@ -1,199 +0,0 @@ -/* 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/. */ - -.viewContainer { - background: hsl(0,0%,89%); /* This will be seen as the continuation of the ruler */ - font-family: monospace; - font-size: inherit; /* inherit browser's default monospace font size */ -} - -.view { - color: black; /* Default text color */ - background: white; /* Background of the editor */ - padding-left: 4px; -} - -.readonly > .view { - background: #fdfefd; /* super light green */ -} - -.ruler { - background: hsl(0,0%,89%); - color: hsl(0,0%,55%); -} -.ruler.annotations { - width: 16px; - padding-left: 4px; -} -.ruler.lines { - border-right: 1px solid #b4c4d3; - min-width: 1.4em; - padding-left: 4px; - padding-right: 4px; - text-align: end; -} - -.ruler.linesWithAnnotations { - min-width: 0; - padding-left: 0; -} - -.ruler.overview { - border-left: 1px solid #b4c4d3; - width: 14px; - text-align: start; -} - -/* Styles for the annotation ruler (first line) */ -.annotationHTML { - cursor: pointer; - width: 16px; - height: 16px; - display: inline-block; - vertical-align: middle; - background-position: center; - background-repeat: no-repeat; -} -.annotation.task .annotationHTML { - background-image: url("chrome://browser/skin/devtools/orion-task.png"); -} -.annotation.breakpoint .annotationHTML { - background-image: url("chrome://browser/skin/devtools/orion-breakpoint.png"); -} -.annotation.debugLocation .annotationHTML { - background-image: url("chrome://browser/skin/devtools/orion-debug-location.png"); -} -.annotation.breakpoint.debugLocation .annotationHTML, -.annotation.task.debugLocation .annotationHTML { - background-position: center, center; - background-repeat: no-repeat, no-repeat; - background-size: 75%, 100%; -} -.annotation.breakpoint.debugLocation .annotationHTML { - background-image: url("chrome://browser/skin/devtools/orion-debug-location.png"), - url("chrome://browser/skin/devtools/orion-breakpoint.png"); -} - -.annotation.task.debugLocation .annotationHTML { - background-image: url("chrome://browser/skin/devtools/orion-debug-location.png"), - url("chrome://browser/skin/devtools/orion-task.png"); -} - -/* Styles for the overview ruler */ -.annotationOverview { - cursor: pointer; - border-radius: 2px; - left: 2px; - width: 8px; -} -.annotationOverview.task { - background-color: lightgreen; - border: 1px solid green; -} -.annotationOverview.breakpoint { - background-color: lightblue; - border: 1px solid blue; -} -.annotationOverview.debugLocation { - background-color: white; - border: 1px solid green; -} -.annotationOverview.currentBracket { - background-color: lightgray; - border: 1px solid red; -} -.annotationOverview.matchingBracket { - background-color: lightgray; - border: 1px solid red; -} - -/* Styles for text range */ -.annotationRange { - background-repeat: repeat-x; - background-position: left bottom; -} -.annotationRange.task { - outline: 1px dashed rgba(0, 255, 0, 0.5); -} -.annotationRange.matchingBracket { - outline: 1px solid grey; -} - -.token_singleline_comment, -.token_multiline_comment, -.token_doc_comment { - color: hsl(90,2%,50%); /* grey */ -} - -.token_doc_html_markup { - color: #dd0058; /* purple */ -} - -.token_doc_tag { - color: #dd0058; /* purple */ -} - -.token_task_tag { /* "TODO" */ - color: black; - background: yellow; -} - -.token_string { - color: hsl(72,100%,27%); /* green */ - font-style: italic; -} - -.token_keyword { - color: hsl(276,44%,45%); /* purple */ -} - -.token_space { - /* images/white_space.png */ - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAABnRSTlMA/wAAAACkwsAdAAAAIUlEQVR4nGP4z8CAC+GUIEXuABhgkTuABEiRw2cmae4EAH05X7xDolNRAAAAAElFTkSuQmCC"); - background-repeat: no-repeat; - background-position: center center; -} - -.token_tab { - /* images/white_tab.png */ - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAJCAIAAACJ2loDAAAABnRSTlMA/wD/AP83WBt9AAAAMklEQVR4nGP4TwRgoK6i52c3bz5w6zMSA6tJn28d2Lx589nnCAYu63AaSLxJRLoJPwAAeNk0aG4opfMAAAAASUVORK5CYII="); - background-repeat: no-repeat; - background-position: left center; -} - -.line_caret, -.annotationLine.currentLine { /* Current line */ - background: hsl(208, 93%, 94%); -} - -.readonly .line_caret, -.readonly .annotationLine.currentLine { - background: hsl(208, 80%, 90%); -} - -/* Styling for html syntax highlighting */ -.entity-name-tag { - color: hsl(208,48%,40%); /* blue */ -} - -.entity-other-attribute-name { - color: hsl(208,48%,40%); /* blue */ -} - -.punctuation-definition-comment { - color: hsl(90,2%,50%); /* grey */ -} - -.comment { - color: hsl(90,2%,50%); /* grey */ -} - -.string-quoted { - color: hsl(24,85%,39%); /* orange */ -} - -.invalid { - color: red; - font-weight: bold; -} diff --git a/src/chrome/browser/devtools/profiler-stopwatch.png b/src/chrome/browser/devtools/profiler-stopwatch.png Binary files differ. diff --git a/src/chrome/browser/devtools/profiler.css b/src/chrome/browser/devtools/profiler.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/profiler.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/responsive-background.png b/src/chrome/browser/devtools/responsive-background.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsive-horizontal-resizer.png b/src/chrome/browser/devtools/responsive-horizontal-resizer.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsive-se-resizer.png b/src/chrome/browser/devtools/responsive-se-resizer.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsive-vertical-resizer.png b/src/chrome/browser/devtools/responsive-vertical-resizer.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsiveui-rotate.png b/src/chrome/browser/devtools/responsiveui-rotate.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsiveui-screenshot.png b/src/chrome/browser/devtools/responsiveui-screenshot.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsiveui-touch.png b/src/chrome/browser/devtools/responsiveui-touch.png Binary files differ. diff --git a/src/chrome/browser/devtools/ruleview.css b/src/chrome/browser/devtools/ruleview.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/ruleview.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/scratchpad.css b/src/chrome/browser/devtools/scratchpad.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/scratchpad.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/shadereditor.css b/src/chrome/browser/devtools/shadereditor.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/shadereditor.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/splitview.css b/src/chrome/browser/devtools/splitview.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/splitview.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/storage.css b/src/chrome/browser/devtools/storage.css @@ -1,48 +0,0 @@ -/* 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/. */ - -/* Storage Host Tree */ - -#storage-tree { - min-width: 220px; - max-width: 500px; - overflow: auto; -} - -.theme-dark #storage-tree { - background: #343c45; /* Toolbars */ -} - -#storage-tree .tree-widget-item[type="store"]:after { - background-image: url(chrome://browser/skin/devtools/filetype-store.svg); - background-size: 18px 18px; - background-position: -1px 0; -} - -/* Columns with date should have a min width so that date is visible */ -#expires, #lastAccessed, #creationTime { - min-width: 150px; -} - -/* Variables View Sidebar */ - -#storage-sidebar { - max-width: 500px; - min-width: 250px; -} - -/* Responsive sidebar */ -@media (max-width: 700px) { - #storage-tree { - max-width: 100%; - } - - #storage-table #path { - display: none; - } - - #storage-table .table-widget-cell { - min-width: 100px; - } -} diff --git a/src/chrome/browser/devtools/styleeditor.css b/src/chrome/browser/devtools/styleeditor.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/styleeditor.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/toggle-tools.png b/src/chrome/browser/devtools/toggle-tools.png Binary files differ. diff --git a/src/chrome/browser/devtools/tool-debugger-paused.png b/src/chrome/browser/devtools/tool-debugger-paused.png Binary files differ. diff --git a/src/chrome/browser/devtools/tool-debugger.png b/src/chrome/browser/devtools/tool-debugger.png Binary files differ. diff --git a/src/chrome/browser/devtools/tool-inspector.png b/src/chrome/browser/devtools/tool-inspector.png Binary files differ. diff --git a/src/chrome/browser/devtools/tool-network.png b/src/chrome/browser/devtools/tool-network.png Binary files differ. diff --git a/src/chrome/browser/devtools/tool-options.png b/src/chrome/browser/devtools/tool-options.png Binary files differ. diff --git a/src/chrome/browser/devtools/tool-profiler.png b/src/chrome/browser/devtools/tool-profiler.png Binary files differ. diff --git a/src/chrome/browser/devtools/tool-scratchpad.png b/src/chrome/browser/devtools/tool-scratchpad.png Binary files differ. diff --git a/src/chrome/browser/devtools/tool-styleeditor.png b/src/chrome/browser/devtools/tool-styleeditor.png Binary files differ. diff --git a/src/chrome/browser/devtools/tool-webconsole.png b/src/chrome/browser/devtools/tool-webconsole.png Binary files differ. diff --git a/src/chrome/browser/devtools/toolbox.css b/src/chrome/browser/devtools/toolbox.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/toolbox.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/undock.png b/src/chrome/browser/devtools/undock.png Binary files differ. diff --git a/src/chrome/browser/devtools/vview-delete.png b/src/chrome/browser/devtools/vview-delete.png Binary files differ. diff --git a/src/chrome/browser/devtools/vview-edit.png b/src/chrome/browser/devtools/vview-edit.png Binary files differ. diff --git a/src/chrome/browser/devtools/webaudioeditor.css b/src/chrome/browser/devtools/webaudioeditor.css @@ -1,257 +0,0 @@ -/* 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/. */ - -/* 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/. */ - -/* Reload and waiting notices */ -.notice-container { - margin-top: -50vh; - background-color: var(--theme-toolbar-background); - color: var(--theme-body-color-alt); -} - -#reload-notice { - font-size: 120%; -} - -#waiting-notice { - font-size: 110%; -} - -/* Context Graph */ -svg { - overflow: hidden; - -moz-box-flex: 1; -} - -/* Edges in graph */ -.edgePath path { - stroke-width: 1px; - fill: none; -} - -.theme-dark .edgePath path { - stroke: #b6babf; /* Grey foreground text */ -} -.theme-light .edgePath path { - stroke: #aaaaaa; /* Splitters */ -} - -/* AudioParam connection edges */ -g.edgePath.param-connection { - stroke-dasharray: 5,5; -} - -.theme-dark .edgePath.param-connection path { - stroke: #b6babf; /* Grey foreground text */ -} -.theme-light .edgePath.param-connection path { - stroke: #aaaaaa; /* Splitters */ -} - -/* Labels in AudioParam connection should have background that match - * the main background so there's whitespace around the label, on top of the - * dotted lines. */ -.theme-dark g.edgeLabel rect { - fill: #14171a; -} -.theme-light g.edgeLabel rect { - fill: #fcfcfc; /* Background - Editor */ -} -.theme-dark g.edgeLabel tspan { - fill: var(--theme-body-color-alt); -} -.theme-light g.edgeLabel tspan { - fill: #585959; /* Grey foreground text */ -} - -/* Audio Nodes */ -.nodes rect { - stroke-width: 1px; - cursor: pointer; -} - -.nodes rect { - stroke: var(--theme-tab-toolbar-background); -} -.theme-light rect { - fill: var(--theme-tab-toolbar-background); -} -.theme-dark rect { - fill: var(--theme-toolbar-background); -} - -/** - * Bypassed Nodes - */ - -.theme-light .nodes g.bypassed rect { - fill: url(chrome://browser/skin/devtools/filters.svg#bypass-light); -} -.theme-dark .nodes g.bypassed rect { - fill: url(chrome://browser/skin/devtools/filters.svg#bypass-dark); -} -.nodes g.bypassed.selected rect { - stroke: var(--theme-selection-background); -} - -/* -.nodes g.bypassed text { - opacity: 0.8; -} -*/ - -/** - * Selected Nodes - */ -.nodes g.selected rect { - fill: var(--theme-selection-background); -} - -/* Don't style bypassed nodes text different because it'd be illegible in light-theme */ -.theme-light g.selected:not(.bypassed) text { - fill: var(--theme-toolbar-background); -} - - -/* Text in nodes and edges */ -text { - cursor: default; /* override the "text" cursor */ - font-weight: 300; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serf; - font-size: 14px; -} - -text { - fill: var(--theme-body-color-alt); -} - - -.nodes text { - cursor: pointer; -} - -/** - * Inspector Styles - */ - -/* hide the variables view scope title as its redundant, - * because there's only one scope displayed. */ -.variables-view-scope > .title { - display: none; -} - -#web-audio-inspector-title { - margin: 6px; -} - -.web-audio-inspector .error { - background-image: url(alerticon-warning.png); - background-size: 13px 12px; - -moz-appearance: none; - opacity: 0; - transition: opacity .5s ease-out 0s; -} - -#inspector-pane-toggle { - background: none; - box-shadow: none; - border: none; - list-style-image: url(debugger-collapse.png); - -moz-image-region: rect(0px,16px,16px,0px); -} - -#inspector-pane-toggle > .toolbarbutton-icon { - width: 16px; - height: 16px; -} - -#inspector-pane-toggle[pane-collapsed] { - list-style-image: url(debugger-expand.png); -} - -#inspector-pane-toggle:active { - -moz-image-region: rect(0px,32px,16px,16px); -} - -/** - * Automation Styles - */ - -#automation-param-toolbar .automation-param-button[selected] { - color: var(--theme-selection-color); - background-color: var(--theme-selection-background); -} - -#automation-graph { - overflow: hidden; - -moz-box-flex: 1; -} - -@media (min-resolution: 2dppx) { - #inspector-pane-toggle { - list-style-image: url(debugger-collapse@2x.png); - -moz-image-region: rect(0px,32px,32px,0px); - } - - #inspector-pane-toggle[pane-collapsed] { - list-style-image: url(debugger-expand@2x.png); - } - - #inspector-pane-toggle:active { - -moz-image-region: rect(0px,64px,32px,32px); - } - - .web-audio-inspector .error { - background-image: url(alerticon-warning@2x.png); - } -} - -/** - * Inspector toolbar - */ - -#audio-node-toolbar .bypass { - list-style-image: url(power.svg); -} - -#audio-node-toolbar toolbarbutton[disabled] { - opacity: 0.5; - background-color: transparent; -} - -.theme-dark #audio-node-toolbar toolbarbutton[checked] { - background-color: #1d4f73; /* Select Highlight Blue */ -} -.theme-light #audio-node-toolbar toolbarbutton[checked] { - background-color: #4c9ed9; /* Select Highlight Blue */ -} - -/* don't invert checked buttons so we can have white icons on light theme */ -#audio-node-toolbar toolbarbutton[checked] > .toolbarbutton-icon { - filter: none; -} - - -/** - * Responsive Styles - * `.devtools-responsive-container` takes care of most of - * the changing of host types. - */ -@media (max-width: 700px) { - /** - * Override the inspector toggle so it's always open - * in the portrait view, with the toggle button hidden. - */ - #inspector-pane-toggle { - display: none; - } - - #web-audio-inspector { - margin-left: 0px !important; - margin-right: 0px !important; - } -} diff --git a/src/chrome/browser/devtools/webconsole.css b/src/chrome/browser/devtools/webconsole.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/webconsole.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/webconsole_networkpanel.css b/src/chrome/browser/devtools/webconsole_networkpanel.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/webconsole_networkpanel.css"); -\ No newline at end of file diff --git a/src/chrome/browser/devtools/widgets.css b/src/chrome/browser/devtools/widgets.css @@ -1 +0,0 @@ -@import url("chrome://appver/skin/devtools/widgets.css"); -\ No newline at end of file diff --git a/src/chrome/browser/downloads/downloads.css b/src/chrome/browser/downloads/downloads.css @@ -2,8 +2,6 @@ * 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/. */ -@import url("chrome://appver/skin/downloads.css"); - /*** Panel and outer controls ***/ #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { @@ -14,6 +12,20 @@ display: none; } +#downloadsPanel[hasdownloads] > #emptyDownloads { + display: none; +} + +#emptyDownloads { + padding: 10px 20px; + max-width: 40ch; +} + +#downloadsFooter { + background: rgb(75,75,75); + border-top: 1px solid rgb(75,75,75); +} + #downloadsHistory { background: transparent; color: #fff; diff --git a/src/chrome/browser/devtools/alerticon-warning.png b/src/chrome/global/devtools/alerticon-warning.png Binary files differ. diff --git a/src/chrome/browser/devtools/alerticon-warning@2x.png b/src/chrome/global/devtools/alerticon-warning@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/animationinspector.css b/src/chrome/global/devtools/animationinspector.css @@ -0,0 +1,213 @@ +html { + height: 100%; +} + +body { + margin: 0; + padding: 0; + display : flex; + flex-direction: column; + height: 100%; + overflow: hidden; + color: var(--theme-content-color3); +} + +/* The top toolbar, containing the toggle-all button */ + +#toolbar { + border-bottom: 1px solid var(--theme-splitter-color); + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + height: 20px; +} + +#toolbar .label { + padding: 1px 4px; +} + +#toggle-all { + border-width: 0px 1px; + min-height: 20px; +} + +/* The error message, shown when an invalid/unanimated element is selected */ + +#error-message { + padding-top: 10%; + text-align: center; + flex: 1; + overflow: auto; + + /* The error message is hidden by default */ + display: none; +} + +/* The animation players container */ + +#players { + flex: 1; + overflow: auto; +} + +/* Element picker and toggle-all buttons */ + +#element-picker, +#toggle-all { + position: relative; +} + +#element-picker::before, +#toggle-all::before { + content: ""; + display: block; + width: 16px; + height: 16px; + position: absolute; + left: 50%; + top: 50%; + margin: -8px 0 0 -8px; + background-image: url("chrome://global/skin/devtools/command-pick.png"); +} + +#toggle-all::before { + background-image: url("debugger-pause.png"); +} + +#element-picker[checked]::before { + background-position: -48px 0; + filter: none; /* Icon is blue when checked, don't invert for light theme */ +} + +#toggle-all.paused::before { + background-image: url("debugger-play.png"); +} + +@media (min-resolution: 2dppx) { + #element-picker::before { + background-image: url("chrome://global/skin/devtools/command-pick@2x.png"); + background-size: 64px; + } + + #toggle-all::before { + background-image: url("debugger-pause@2x.png"); + } + + #toggle-all.paused::before { + background-image: url("debugger-play@2x.png"); + } +} + +/* Disabled playerWidget when the animation has ended */ + +.finished { + pointer-events: none; + opacity: .5; +} + +/* Animation title gutter, contains the name, duration, iteration */ + +.animation-title { + background-color: var(--theme-toolbar-background); + border-bottom: 1px solid var(--theme-splitter-color); + padding: 1px 4px; + word-wrap: break-word; + overflow: auto; +} + +.animation-title .meta-data { + float: right; +} + +.animation-title strong { + margin: 0 .5em; +} + +/* Timeline wiget */ + +.timeline { + height: 20px; + width: 100%; + display: flex; + flex-direction: row; + border-bottom: 1px solid var(--theme-splitter-color); +} + +.timeline .playback-controls { + width: 50px; + display: flex; + flex-direction: row; +} + +/* Playback control buttons */ + +.timeline .playback-controls button { + flex-grow: 1; + border-width: 0 1px 0 0; +} + +/* Play/pause button */ + +.timeline .toggle::before { + background-image: url(debugger-pause.png); +} + +.paused .timeline .toggle::before, +.finished .timeline .toggle::before { + background-image: url(debugger-play.png); +} + +@media (min-resolution: 2dppx) { + .timeline .toggle::before { + background-image: url(debugger-pause@2x.png); + } + + .paused .timeline .toggle::before, + .finished .timeline .toggle::before { + background-image: url(debugger-play@2x.png); + } +} + +/* Slider (input type range) container */ + +.timeline .sliders-container { + flex-grow: 1; + height: 100%; + position: relative; + border-width: 1px 0; +} + +.timeline .sliders-container .current-time { + position: absolute; + padding: 0; + margin: 0; + left: 0; + width: 100%; + height: 100%; +} + +.timeline .sliders-container .current-time::-moz-range-thumb { + height: 100%; + width: 4px; + border-radius: 0; + border: none; + background: var(--theme-highlight-blue); +} + +.timeline .sliders-container .current-time::-moz-range-track { + width: 100%; + height: 50px; + background: transparent; +} + +/* Current time label */ + +.timeline .time-display { + display: flex; + align-items: center; + justify-content: center; + width: 50px; + border-left: 1px solid var(--theme-splitter-color); + background: var(--theme-toolbar-background); +} diff --git a/src/chrome/browser/devtools/app-manager/add.svg b/src/chrome/global/devtools/app-manager/add.svg diff --git a/src/chrome/appver/27/devtools/app-manager/connection-footer.css b/src/chrome/global/devtools/app-manager/connection-footer.css diff --git a/src/chrome/browser/devtools/app-manager/default-app-icon.png b/src/chrome/global/devtools/app-manager/default-app-icon.png Binary files differ. diff --git a/src/chrome/global/devtools/app-manager/device.css b/src/chrome/global/devtools/app-manager/device.css @@ -0,0 +1,410 @@ +/* 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/. */ + +/***************** GENERAL *****************/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body { + height: 100%; +} + +body { + font-size: 0.9rem; + color: #333; + background-color: rgb(225, 225, 225); + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; + display: flex; + flex-direction: column; +} + +template { + display: none; +} + +h1 { + font-size: 20px; +} + +#content { + display: flex; + flex-direction: row; + height: 100%; + overflow: hidden; +} + +#detail { + background-image: url('noise.png'); + display: flex; + flex-grow: 1; + z-index: 1; + overflow: hidden; +} + +#meta { + background-size: 100%; + padding-top: 50px; +} + +#connection-footer { + border-width: 0; + height: 50px; + min-height: 50px; +} + + +#root-actor-debug { + background: white; +} + +/***************** APP BUTTONS *****************/ + + + +.app-buttons { + display: block; + margin-left: 20px; + color: #BBB; +} + +button { + margin: 0; + font-size: 11px; + border: 1px solid #CCC; + padding: 5px 15px; + cursor: pointer; + background: rgba(255,255,255,0.4); + text-transform: uppercase; + border-radius: 3px; + border-width: 1px; +} + +.app-buttons > button { + display: none; +} + +.app-buttons > button[disabled] { + background-color: transparent; + opacity: 0.4; + pointer-events: none; +} + +.app[running="false"] > .app-buttons > .button-start, +.app[running="true"] > .app-buttons > .button-stop, +.app[running="true"] > .app-buttons > .button-debug { + display: inline-block; +} + +.button-debug { + color: #3498DB; +} + +.button-debug:hover { + background-color: #3498DB; + color: #FFF; +} + +.button-debug[disabled] { + color: #3498DB; +} + +.button-start { + color: #18BC9C +} + +.button-start:hover { + background-color: #18BC9C; + color: #FFF; +} + +.button-start[disabled] { + color: #18BC9C +} + +.button-stop { + color: #E74C3C; +} + +.button-stop:hover { + background-color: #E74C3C; + color: #FFF; +} + +.button-stop[disabled] { + color: #E74C3C; +} + + + +/***************** PERMISSIONS *****************/ + + + + +.permission-table { + display: flex; + flex-direction: column; + height: 100%; +} + +.permission-table-body { + overflow: auto; + display: flex; + flex-grow: 1; + flex-direction: column; +} + +.permission-table-header, +.permission-table-footer { + display: flex; + background: #FFF; + border-top: 1px solid #CCC; + z-index: 2; + flex-shrink: 0; +} + +.permission-table-header > div, +.permission-table-footer > div { + z-index: 2; + flex-grow: 1; + background: linear-gradient(to bottom, #49535C, #394148); + box-shadow: 0px 1px 3px rgba(12, 20, 30, 0.5), inset 0 1px 0px rgba(255,255,255,0.1); + color: #9FA6AD; + text-shadow: 0px 1px 1px rgba(0,0,0,0.6); + border: 0; + margin: auto 0; + padding: 5px; + text-align: center; + background: transparent; + box-shadow: none; + text-shadow: none; +} + +.permission-table-header > div { + flex-basis: 20%; +} + +.permission-table-header > div:first-child { + text-align: start; + padding-left: 10px; + flex-basis: 30%; +} + +.permission-table-header { + border: 0; + border-bottom: 1px solid #CCC; + box-shadow: 0 1px 4px rgba(0,0,0,0.3); +} + +.permission-table-footer { + box-shadow: 0 -1px 4px rgba(0,0,0,0.3); +} + +.permission { + display: flex; + flex-grow: 1; +} + +.permission:nth-child(odd) { + background: #E4E4E4; +} + +.permission:hover { + background: #EEE; +} + +.permission > div { + flex-grow: 1; + flex-basis: 20%; + text-align: center; + padding: 3px; + border-right: 1px solid #CCC; + border-bottom: 1px solid #CCC; +} + +.permission > div:first-child { + text-align: start; + padding: 3px 10px; + flex-basis: 30%; + font-weight: bold; +} + +.permission > div[permission="1"]:before, .allow-label:after { + color: #98CF39; + content: ' \2713'; +} + +.permission > div[permission="2"]:before, .deny-label:after { + color: #CC4908; + content: ' \2715'; +} + +.permission > div[permission="3"]:before, .prompt-label:after { + color: #009EED; + content: ' !'; +} + + + + +/***************** SIDEBAR *****************/ + + + + +#sidebar { + background: #EEE; + position: relative; + box-shadow: 0 1px 6px rgba(0,0,0,0.3); + display: flex; + flex-direction: column; + flex: 0 0 350px; + overflow: hidden; + z-index: 100; +} + +.sidebar-item { + background-color: #F6F6F6; + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); + color: #666; + line-height: 120%; + cursor: pointer; + display: flex; + padding: 15px 10px; + display: block; + text-align: start; + flex-grow: 1; +} + +.sidebar-item > * { + flex-shrink: 0; +} + +.sidebar-item:hover { + background-color: #EEE; +} + +.sidebar-item.selected { + background-color: #46AFE3; + color: #FFF; +} + +.help { + float: right; + padding: 0 5px; +} + +/***************** HEADER *****************/ + +header { + padding-top: 140px; + background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7)); + color: #FFF; + text-shadow: 0 1px 2px rgba(0,0,0,0.8); + padding: 10px; +} + + + +/***************** APPS & BROWSER TABS *****************/ + + + + +.apps, .browser-tabs { + display: flex; + flex-direction: column; + overflow: auto; +} + +.browser-tabs.hidden { + display: none; +} + +.app, .browser-tab { + display: flex; + align-items: center; + order: 1; +} + +.app-name, .browser-tab-details { + flex-grow: 1; + font-weight: bold; +} + +.app, .browser-tab { + padding: 10px 20px; + border-bottom: 1px solid #CCC; +} + +.app:hover, .browser-tab:hover { + background-color: #EFEFEF; +} + +.app-icon { + width: 32px; + height: 32px; + margin-right: 10px; +} + +.browser-tab-url-subheading { + font-size: 10px; +} + + + +/***************** NOT CONNECTED *****************/ + + + +body:not(.notconnected) > #notConnectedMessage, +body.notconnected > #content { + display: none; +} + +#notConnectedMessage { + flex-grow: 1; + flex-direction: column; + margin: 50px auto; +} + +#notConnectedMessage > span { + padding: 20px; + border: 1px solid #CCC; + border-radius: 5px; +} + +#notConnectedMessage > span:before { + content: ''; + background: url('error.svg') no-repeat; + background-size: 18px; + height: 24px; + width: 24px; + position: relative; + top: 10px; + display: inline-block; +} + + + +/***************** TABS *****************/ + +#tabs { + flex-grow: 1; + overflow: auto; +} + +.tabpanel:not(.selected) { + display: none; +} + +#tabs-headers { + flex-shrink: 0; + display: flex; + flex-direction: column; +} diff --git a/src/chrome/global/devtools/app-manager/error.svg b/src/chrome/global/devtools/app-manager/error.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> + +<!-- 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" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64"> + <path fill="#E25026" d="M32,4.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5S47.74,4.894,32,4.894 + z M46.903,48.674c-1.817,1.817-4.691,1.76-6.449,0.002l-8.327-8.327l-8.151,8.151c-1.877,1.877-4.87,1.814-6.685,0 + c-1.877-1.877-1.879-4.811-0.002-6.687l8.151-8.151l-8.327-8.327c-1.76-1.76-1.817-4.634,0-6.451c1.76-1.76,4.691-1.76,6.451,0 + l8.327,8.327l8.151-8.151c1.877-1.877,4.811-1.874,6.687,0.002c1.814,1.814,1.877,4.808,0,6.685l-8.151,8.151l8.327,8.327 + C48.662,43.982,48.662,46.914,46.903,48.674z"/> +</svg> diff --git a/src/chrome/appver/26/devtools/app-manager/help.css b/src/chrome/global/devtools/app-manager/help.css diff --git a/src/chrome/global/devtools/app-manager/index-icons.svg b/src/chrome/global/devtools/app-manager/index-icons.svg @@ -0,0 +1,80 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="160px" height="240px" viewBox="0 0 160 240" enable-background="new 0 0 160 240" xml:space="preserve"> +<rect y="40" display="none" fill="#22272D" width="84" height="160"/> +<rect x="80.75" y="40" display="none" fill="#194866" width="84" height="160"/> +<path fill="#414042" d="M40,21.149c-2.044,0.001-6.042,6.745-7.404,13.436L28,39.181v12l3.204,0l4.467-4.466 + c0.457,0.478,0.96,0.88,1.5,1.199h5.652c0.543-0.318,1.05-0.719,1.507-1.199l4.466,4.466l3.204,0v-12l-4.597-4.596 + C46.042,27.895,42.044,21.149,40,21.149z M40.005,28.185c0.712,0,1.965,2,2.746,4.392c-0.846-0.157-1.747-0.244-2.686-0.244 + c-0.987,0-1.933,0.099-2.815,0.271C38.03,30.199,39.289,28.185,40.005,28.185z"/> +<path fill="#414042" d="M41.436,50.98c0,1.41-1.094,2.553-1.459,2.553c-0.364,0-1.459-1.144-1.459-2.553 + c0-0.546,0.099-1.051,0.266-1.466h-1.69c-0.198,0.731-0.31,1.549-0.31,2.412c0,3.108,2.411,5.627,3.215,5.627 + s3.216-2.519,3.215-5.626c0-0.864-0.112-1.681-0.31-2.413l-1.734,0C41.337,49.929,41.436,50.434,41.436,50.98z"/> +<g> + <g> + <path fill="#B2B5B9" d="M40,21.149c-2.044,0.001-6.042,6.745-7.404,13.436L28,39.181v12l3.204,0l4.467-4.466 + c0.457,0.478,0.96,0.88,1.5,1.199h5.652c0.543-0.318,1.05-0.719,1.507-1.199l4.466,4.466l3.204,0v-12l-4.597-4.596 + C46.042,27.895,42.044,21.149,40,21.149z M40.005,28.185c0.712,0,1.965,2,2.746,4.392c-0.846-0.157-1.747-0.244-2.686-0.244 + c-0.987,0-1.933,0.099-2.815,0.271C38.03,30.199,39.289,28.185,40.005,28.185z"/> + <path fill="#B2B5B9" d="M41.436,50.98c0,1.41-1.094,2.553-1.459,2.553c-0.364,0-1.459-1.144-1.459-2.553 + c0-0.546,0.099-1.051,0.266-1.466h-1.69c-0.198,0.731-0.31,1.549-0.31,2.412c0,3.108,2.411,5.627,3.215,5.627 + s3.216-2.519,3.215-5.626c0-0.864-0.112-1.681-0.31-2.413l-1.734,0C41.337,49.929,41.436,50.434,41.436,50.98z"/> + </g> +</g> +<g> + <path fill="#DCE8F3" d="M120,21.149c-2.044,0.001-6.042,6.745-7.404,13.436L108,39.181v12l3.204,0l4.467-4.466 + c0.457,0.478,0.96,0.88,1.5,1.199h5.652c0.543-0.318,1.05-0.719,1.507-1.199l4.467,4.466l3.204,0v-12l-4.597-4.596 + C126.042,27.895,122.044,21.149,120,21.149z M120.005,28.185c0.712,0,1.965,2,2.746,4.392c-0.846-0.157-1.747-0.244-2.686-0.244 + c-0.987,0-1.933,0.099-2.815,0.271C118.03,30.199,119.289,28.185,120.005,28.185z"/> + <path fill="#DCE8F3" d="M121.436,50.98c0,1.41-1.094,2.553-1.459,2.553c-0.364,0-1.459-1.144-1.459-2.553 + c0-0.546,0.099-1.051,0.266-1.466h-1.69c-0.198,0.731-0.31,1.549-0.31,2.412c0,3.108,2.411,5.627,3.215,5.627 + s3.216-2.519,3.215-5.626c0-0.864-0.112-1.681-0.31-2.413l-1.734,0C121.337,49.929,121.436,50.434,121.436,50.98z"/> +</g> +<g> + <g> + <path fill="#B2B5B9" d="M52.5,136.017c0,2.279-1.888,4.167-4.167,4.167H31.667c-2.279,0-4.167-1.888-4.167-4.167v-33.333 + c0-2.279,1.888-4.167,4.167-4.167h16.667c2.279,0,4.167,1.888,4.167,4.167V136.017z M49.375,107.892 + c0-0.554-0.488-1.042-1.042-1.042H31.667c-0.553,0-1.042,0.488-1.042,1.042v22.917c0,0.554,0.488,1.042,1.042,1.042h16.667 + c0.553,0,1.042-0.488,1.042-1.042V107.892z M42.604,102.684h-5.208c-0.293,0-0.521,0.228-0.521,0.521 + c0,0.293,0.228,0.521,0.521,0.521h5.208c0.293,0,0.521-0.228,0.521-0.521C43.125,102.912,42.897,102.684,42.604,102.684z + M40,133.413c-1.432,0-2.604,1.171-2.604,2.604c0,1.433,1.172,2.604,2.604,2.604s2.604-1.171,2.604-2.604 + C42.604,134.585,41.432,133.413,40,133.413z"/> + </g> +</g> +<g> + <path fill="#DCE8F3" d="M132.5,136.017c0,2.279-1.888,4.167-4.167,4.167h-16.667c-2.279,0-4.167-1.888-4.167-4.167v-33.333 + c0-2.279,1.888-4.167,4.167-4.167h16.667c2.279,0,4.167,1.888,4.167,4.167V136.017z M129.375,107.892 + c0-0.554-0.488-1.042-1.042-1.042h-16.667c-0.553,0-1.042,0.488-1.042,1.042v22.917c0,0.554,0.488,1.042,1.042,1.042h16.667 + c0.553,0,1.042-0.488,1.042-1.042V107.892z M122.604,102.684h-5.208c-0.293,0-0.521,0.228-0.521,0.521 + c0,0.293,0.228,0.521,0.521,0.521h5.208c0.293,0,0.521-0.228,0.521-0.521C123.125,102.912,122.897,102.684,122.604,102.684z + M120,133.413c-1.432,0-2.604,1.171-2.604,2.604c0,1.433,1.172,2.604,2.604,2.604s2.604-1.171,2.604-2.604 + C122.604,134.585,121.432,133.413,120,133.413z"/> +</g> +<g> + <path fill="#B2B5B9" d="M40,185.388c8.121,0,14.729,6.607,14.729,14.729S48.121,214.845,40,214.845s-14.729-6.607-14.729-14.729 + S31.879,185.388,40,185.388 M40,182.75c-9.591,0-17.367,7.775-17.367,17.367c0,9.591,7.775,17.367,17.367,17.367 + s17.367-7.775,17.367-17.367C57.367,190.525,49.591,182.75,40,182.75L40,182.75z"/> + <g> + <path fill="#B2B5B9" d="M39.565,204.504c-0.688,0-1.196-0.508-1.286-1.195l-0.299-2.57c-0.12-0.808,0.359-1.405,1.166-1.495 + c2.81-0.269,4.364-1.345,4.364-3.229v-0.06c0-1.674-1.285-2.84-3.438-2.84c-1.584,0-2.87,0.568-4.065,1.645 + c-0.299,0.239-0.688,0.418-1.106,0.418c-0.926,0-1.674-0.747-1.674-1.644c0-0.448,0.18-0.927,0.598-1.285 + c1.584-1.495,3.587-2.481,6.337-2.481c4.185,0,7.024,2.331,7.024,6.068v0.06c0,3.767-2.72,5.47-6.038,6.038l-0.12,1.375 + c-0.12,0.657-0.598,1.195-1.285,1.195H39.565z M39.565,206.687c1.226,0,2.122,0.896,2.122,2.062v0.299 + c0,1.166-0.896,2.062-2.122,2.062s-2.123-0.896-2.123-2.062v-0.299C37.442,207.583,38.339,206.687,39.565,206.687z"/> + </g> +</g> +<g> + <path fill="#DCE8F3" d="M120,185.388c8.121,0,14.729,6.607,14.729,14.729s-6.607,14.729-14.729,14.729s-14.729-6.607-14.729-14.729 + S111.879,185.388,120,185.388 M120,182.75c-9.591,0-17.367,7.775-17.367,17.367c0,9.591,7.775,17.367,17.367,17.367 + s17.367-7.775,17.367-17.367C137.367,190.525,129.591,182.75,120,182.75L120,182.75z"/> + <g> + <path fill="#DCE8F3" d="M119.564,204.504c-0.688,0-1.195-0.508-1.285-1.195l-0.299-2.57c-0.12-0.808,0.358-1.405,1.166-1.495 + c2.81-0.269,4.363-1.345,4.363-3.229v-0.06c0-1.674-1.285-2.84-3.438-2.84c-1.584,0-2.869,0.568-4.064,1.645 + c-0.3,0.239-0.688,0.418-1.106,0.418c-0.927,0-1.674-0.747-1.674-1.644c0-0.448,0.18-0.927,0.598-1.285 + c1.584-1.495,3.587-2.481,6.337-2.481c4.186,0,7.024,2.331,7.024,6.068v0.06c0,3.767-2.72,5.47-6.038,6.038l-0.119,1.375 + c-0.12,0.657-0.598,1.195-1.285,1.195H119.564z M119.564,206.687c1.226,0,2.122,0.896,2.122,2.062v0.299 + c0,1.166-0.896,2.062-2.122,2.062s-2.122-0.896-2.122-2.062v-0.299C117.442,207.583,118.339,206.687,119.564,206.687z"/> + </g> +</g> +</svg> diff --git a/src/chrome/global/devtools/app-manager/index.css b/src/chrome/global/devtools/app-manager/index.css @@ -0,0 +1,103 @@ +/* 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/. */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; +} + +#tabs { + box-shadow: inset -4px 0 0 rgba(0,0,0,0.3); + background: #252C33; +} + +#toolbox-tabs { + overflow-y: auto; +} + +.button { + width: 80px; + height: 85px; + padding-bottom: 5px; + -moz-appearance: none; + border: none; + border-bottom: 1px solid #121214; + background-color: transparent; + color: #B5B8BB; + cursor: pointer; + text-align: center; + -moz-box-align: end; + font-size: 10px; + text-shadow: 0 1px 0 #333; + color: #9FA6AD; +} + +.button:first-child { + border-top: none; +} + +.button[selected] { + box-shadow: inset -4px 0 0 rgba(0,0,0,0.3), inset 2px 0 0 #DEFFFF, inset 3px 0 0 #8DC7E8, inset 4px 0 1px #1D6496; + color: #DCE8F3; + background-color: #1A4766; + border-color: #191B1E; +} + +.button::-moz-focus-inner { + border-width: 0; +} + +.panel { + border-width: 0; +} + +.panel:not([selected="true"]) { + display: none; +} + +.button.toolbox { + background-repeat: no-repeat; + background-position: center 15px; + background-size: 40px 40px; +} + +.projects-button { + background: url('chrome://global/skin/devtools/app-manager/index-icons.svg') no-repeat; + background-position: left -5px; +} + +.projects-button[selected] { + background-position: right -5px; +} + +.device-button { + background-image: url('chrome://global/skin/devtools/app-manager/index-icons.svg'); + background-position: left -85px, top left; + background-repeat: no-repeat, no-repeat; + background-size: 160px 240px, 2px 80px; +} + +.device-button[selected] { + background-position: right -85px, top left; +} + +.help-button { + border-bottom: 0; + background-image: url('chrome://global/skin/devtools/app-manager/index-icons.svg'); + background-position: left -165px, top left; + background-repeat: no-repeat, no-repeat; + background-size: 160px 240px, 2px 80px; +} + +.help-button[selected] { + background-position: right -165px, top left; +} + +#connection-footer { + border-width: 0; + height: 50px; + min-height: 50px; +} diff --git a/src/chrome/browser/devtools/app-manager/noise.png b/src/chrome/global/devtools/app-manager/noise.png Binary files differ. diff --git a/src/chrome/global/devtools/app-manager/plus.svg b/src/chrome/global/devtools/app-manager/plus.svg @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="utf-8"?> + +<!-- 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" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64"> + <path fill="#ABABAB" d="M32.336,3.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5 + S48.076,3.894,32.336,3.894z M44.86,36.966h-7.823v7.62c0,2.582-2.12,4.702-4.702,4.702c-2.584,0-4.704-2.12-4.704-4.702v-7.62 + h-7.817c-2.52,0-4.572-2.056-4.572-4.572s2.053-4.572,4.572-4.572h7.817v-7.62c0-2.582,2.12-4.702,4.704-4.702 + c2.582,0,4.702,2.12,4.702,4.702v7.62h7.823c2.514,0,4.57,2.056,4.57,4.572S47.374,36.966,44.86,36.966z"/> +</svg> diff --git a/src/chrome/global/devtools/app-manager/projects.css b/src/chrome/global/devtools/app-manager/projects.css @@ -0,0 +1,556 @@ +/* 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/. */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-size: 0.9rem; +} + +html, body { + height: 100%; +} + +template { + display: none; +} + +body { + display: flex; + color: #333; + background-color: white; + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif; + overflow: hidden; +} + +body:not(.connected) button.device-action { + display: none; +} + +strong { + color: #111; +} + + +/********* SIDEBAR ***********/ + + + +#sidebar { + display: flex; + flex-direction: column; + flex: 0 0 350px; + overflow: hidden; + z-index: 100; + background-color: #E9EAEB; + position: relative; + box-shadow: 3px 0 1.5px rgba(0,0,0,0.08); +} + +#project-list { + height: 100%; + overflow: auto; +} + +#project-list:not([projects-count="0"]) > #no-project { + display: none; +} + +#no-project { + padding: 100px 20px 0; + font-weight: bold; + color: #BBB; + font-size: 22px; +} + + +/********* PROJECT MENU ***********/ + + +.project-item { + padding: 10px 0; + background-color: #F0F1F2; + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1); + color: #666; + line-height: 120%; + cursor: pointer; + display: flex; + position: relative; +} + +.project-item:hover { + background-color: #EEE; +} + +.project-item > * { + flex-shrink: 0; +} + +.project-item.selected { + background-color: #46AFE3; +} + +.project-item.selected strong { + color: #FFF; +} + +.project-item.selected p, +.project-item.selected span { + color: #C1DCF0; +} + +.button-remove { + background-image: url('remove.svg'); + background-size: 20px; + width: 20px; + height: 20px; + position: absolute; + right: 5px; + bottom: 5px; + visibility: hidden; + opacity: 0.5; +} + +.project-item:hover .button-remove { + visibility: visible; +} + +.project-item-status { + width: 6px; + margin: -10px 0; + border-right: 1px solid rgba(0,0,0,0.1); + box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 0 0 rgba(0,0,0,0.2); +} + +.project-item-status[status="valid"] { + background-color: #70BF53; +} + +.project-item-status[status~="warning"] { + background-color: #F2B33F; +} + +.project-item-status[status~="error"] { + background-color: #ED4C62; +} + +.project-item-icon { + width: 32px; + height: 32px; + margin: 0 10px; +} + +.project-item-meta { + flex-grow: 1; + flex-shrink: 1 !important; +} + +.project-item-type { + font-size: 10px; + line-height: 20px; + float: right; + padding-right: 10px; + color: #7597B9; + text-transform: uppercase; +} + +.project-item-description { + color: #888; + font-size: 90%; +} + +/********* ADD PROJECT ***********/ + +#new-packaged-project { + box-shadow: 0 -1px 5px rgba(0,0,0,0.1); + background-position: calc(100% - 10px) 10px; +} + +#new-packaged-project, +#new-hosted-project { + background-color: #EEE; + border: none; + border-top: 1px solid #DDD; + padding: 10px; + font-weight: bold; +} + +#new-packaged-project:hover, +#new-hosted-project:hover { + background-color: #DDD; +} + +#new-hosted-project-wrapper { + display: flex; + align-items: center; +} + +#new-packaged-project, +#new-hosted-project-click { + background-image: url('plus.svg'); + background-size: 20px; + background-repeat: no-repeat; + cursor: pointer; +} + +#new-hosted-project-click { + background-position: top right; + width: 20px; + height: 20px; + margin-left: 5px; +} + +#url-input { + flex-grow: 1; + width: 90%; + box-shadow: none; + border-radius: 3px; + border: 1px solid #DDD; + padding: 4px; + margin-top: 4px; +} + + +/********* LENSE ***********/ + + +#lense { + height: 100%; + flex-grow: 1; + display: flex; + z-index: 1; + overflow: hidden; + background-color: rgb(225, 225, 225); + background-image: url('rocket.svg'), url('noise.png'); + background-repeat: no-repeat, repeat; + background-size: 35%, auto; + background-position: center center, top left; +} + +#lense > div { + display: flex; + flex-grow: 1; + flex-direction: column; +} + + +/********* PROJECT ***********/ + + +.project-details { + background-color: rgb(225, 225, 225); + padding: 10px; + line-height: 160%; + display: flex; + flex-direction: column; +} + +.project-metadata { + flex-grow: 1; +} + +.project-status { + display: flex; +} + +.project-title { + flex-direction: row; + display: flex; + align-items: flex-start; + padding-bottom: 10px; + border-bottom: 1px solid #CCC; + margin-bottom: 10px; +} + +.project-title > h1 { + flex-grow: 1; + font-size: 24px; +} + +.project-location { + color: gray; + font-size: 10px; + cursor: pointer; + font-family: monospace; +} + +.project-location:hover { + text-decoration: underline; +} + +.project-header { + display: flex; + border-bottom: 1px solid #CCC; + margin: 10px 20px 10px 20px; + padding-bottom: 10px; +} + +.project-icon { + flex-shrink: 0; + width: 64px; + height: 64px; + margin-right: 10px; +} + +.project-location { + font-size: 11px; + color: #999; +} + +.project-description { + font-style: italic; + color: #333; +} + +.project-status > p { + text-transform: uppercase; + font-size: 10px; + padding: 2px 10px; + border-radius: 2px; + margin-top: 6px; + line-height: 10px; +} + +.project-validation { + color: #FFF; + display: none; + margin-left: 10px; +} + +.project-validation.valid { + background-color: #70BF53; +} + +.project-validation.warning { + background-color: #F2B33F; +} + +.project-validation.error { + background-color: #ED4C62; +} + +[status="valid"] > .project-validation.valid, +[status~="warning"] > .project-validation.warning, +[status~="error"] > .project-validation.error { + display: inline; +} + +.project-type { + display: none; + margin-left: 10px; +} +[type="hosted"] > .project-type.hosted, +[type="packaged"] > .project-type.packaged { + display: inline; +} + +/********* PROJECT BUTTONS ***********/ + + + +.project-buttons { + display: flex; + margin-left: 20px; + color: #BBB; +} + +.project-buttons > button { + margin: 0; + font-size: 11px; + border: 1px solid #CCC; + border-left-width: 0; + padding: 5px 15px; + cursor: pointer; + background: rgba(255,255,255,0.4); + text-transform: uppercase; +} + +.project-buttons > button[disabled] { + background-color: transparent; + opacity: 0.4; + pointer-events: none; +} + +.project-buttons > button:first-child { + border-left-width: 1px; +} + +.project-button-debug { + color: #3498DB; +} + +.project-button-debug:hover { + background-color: #3498DB; + color: #FFF; +} + +.project-button-debug[disabled] { + color: #3498DB; +} + +.project-button-update { + color: #777; +} + +.project-button-update:hover { + background-color: #777; + color: #FFF; +} + +.project-button-update[disabled] { + color: #777; +} + + + +/********* ERRORS AND WARNINGS ***********/ + +.project-warnings, +.project-errors, +.project-item-warnings, +.project-item-errors { + display: none; +} + +[status~="warning"] .project-item-warnings, +[status~="error"] .project-item-errors { + display: inline-block; +} + +[status~="warning"] > .project-warnings, +[status~="error"] > .project-errors { + display: block; +} + +.project-warnings, +.project-errors { + margin: 20px 20px 0; + padding: 10px 10px; + font-family: monospace; +} + +.project-warnings { + border-left: 3px solid #ECB51E; + background-color: rgba(236, 181, 20, 0.1); +} + +.project-errors { + border-left: 3px solid #ED4C62; + background-color: rgba(237,76,98,0.1); +} + +.project-item-warnings { + background-image: url('warning.svg'); +} + +.project-item-errors { + background-image: url('error.svg'); + color: rgb(227, 79, 34); +} + +.project-item-warnings, +.project-item-errors { + background-repeat: no-repeat; + background-size: 12px; + background-position: left center; + margin-top: 6px; +} + +.project-item-warnings > span, +.project-item-errors > span { + font-size: 11px; + padding-left: 16px; + font-weight: bold; +} + + +/********* MANIFEST EDITOR ***********/ + +.manifest-editor { + display: flex; + flex-direction: column; + flex-grow: 1; + background-color: #E1E1E1; +} + +.manifest-header { + display: flex; + flex-direction: row; +} + +.manifest-header > h2 { + font-size: 18px; + margin: 1em 15px 1em 30px; + display: none; +} + +.manifest-header > button { + margin: 18px 0; + font-size: 11px; + border: 1px solid #CCC; + border-right-width: 0; + padding: 2px; + cursor: pointer; + background: rgba(255,255,255,0.4); + text-transform: uppercase; + display: none; +} + +.manifest-header > button[disabled] { + background-color: transparent; + opacity: 0.4; + pointer-events: none; +} + +.manifest-header > button:last-child { + border-right-width: 1px; +} + +[type="packaged"] > .editable { + display: block; +} + +[type="hosted"] > .viewable { + display: block; +} + +.manifest-button-save { + color: #777; +} + +.manifest-button-save:hover { + background-color: #777; + color: #FFF; +} + +.manifest-button-save[disabled] { + color: #777; +} + +.variables-view { + flex-grow: 1; + border: 0; + border-top: 5px solid #C9C9C9; +} + +/* Bug 925921: Remove when the manifest editor is always on */ + +.manifest-editor { + display: none; +} + +.project-details { + flex-grow: 1; +} + +#lense[manifest-editable] .manifest-editor { + display: flex; +} + +#lense[manifest-editable] .project-details { + flex-grow: 0; +} + +/* End blocks to remove */ diff --git a/src/chrome/browser/devtools/app-manager/remove.svg b/src/chrome/global/devtools/app-manager/remove.svg diff --git a/src/chrome/global/devtools/app-manager/rocket.svg b/src/chrome/global/devtools/app-manager/rocket.svg @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="utf-8"?> + +<!-- 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" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> + <g opacity="0.1"> + <g> + <path fill="#FFFFFF" d="M12,2.3c-1.127,0-3.333,3.721-4.084,7.411l-2.535,2.535v6.619l1.767,0l2.464-2.464 + c0.252,0.264,0.529,0.486,0.827,0.662h3.118c0.299-0.175,0.579-0.397,0.831-0.662l2.464,2.464l1.767,0v-6.619l-2.535-2.535 + C15.333,6.021,13.127,2.3,12,2.3z M12.003,6.181c0.393,0,1.084,1.103,1.515,2.423c-0.466-0.087-0.963-0.135-1.481-0.135 + c-0.545,0-1.066,0.054-1.553,0.15C10.914,7.292,11.608,6.181,12.003,6.181z"/> + <path fill="#FFFFFF" d="M12.792,18.755c0,0.778-0.603,1.408-0.805,1.408c-0.201,0-0.805-0.631-0.805-1.408 + c0-0.301,0.055-0.579,0.147-0.809h-0.932c-0.109,0.403-0.171,0.854-0.171,1.33c0,1.714,1.33,3.104,1.774,3.104 + s1.774-1.389,1.774-3.103c0-0.477-0.062-0.927-0.171-1.331l-0.957,0C12.738,18.175,12.792,18.453,12.792,18.755z"/> + </g> + <g> + <g> + <path fill="#414042" d="M12,2c-1.127,0-3.333,3.721-4.084,7.411l-2.535,2.535v6.619l1.767,0l2.464-2.464 + c0.252,0.264,0.529,0.486,0.827,0.662h3.118c0.299-0.175,0.579-0.397,0.831-0.662l2.464,2.464l1.767,0v-6.619l-2.535-2.535 + C15.333,5.721,13.127,2,12,2z M12.003,5.881c0.393,0,1.084,1.103,1.515,2.423c-0.466-0.087-0.963-0.135-1.481-0.135 + c-0.545,0-1.066,0.054-1.553,0.15C10.914,6.992,11.608,5.881,12.003,5.881z"/> + <path fill="#414042" d="M12.792,18.455c0,0.778-0.603,1.408-0.805,1.408c-0.201,0-0.805-0.631-0.805-1.408 + c0-0.301,0.055-0.579,0.147-0.809h-0.932c-0.109,0.403-0.171,0.854-0.171,1.33c0,1.714,1.33,3.104,1.774,3.104 + s1.774-1.389,1.774-3.103c0-0.477-0.062-0.927-0.171-1.331l-0.957,0C12.738,17.875,12.792,18.153,12.792,18.455z"/> + </g> + </g> + </g> +</svg> diff --git a/src/chrome/global/devtools/app-manager/warning.svg b/src/chrome/global/devtools/app-manager/warning.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="utf-8"?> + +<!-- 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" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64"> + <path fill="#ECB51F" d="M61.689,51.121L36.437,7.384c-2.441-4.227-6.434-4.227-8.875,0L2.311,51.121 + c-2.441,4.227-0.444,7.686,4.437,7.686h50.504C62.133,58.807,64.13,55.349,61.689,51.121z M35.968,47.68 + c0,2.191-1.688,3.877-3.968,3.877s-3.968-1.686-3.968-3.877v-0.093c0-2.187,1.688-3.873,3.968-3.873s3.968,1.686,3.968,3.873V47.68z + M36.059,21.548l-1.961,17.146c-0.137,1.233-0.958,2.009-2.098,2.009s-1.961-0.776-2.098-2.009l-1.961-17.146 + c-0.137-1.322,0.592-2.325,1.825-2.325h4.469C35.466,19.223,36.196,20.226,36.059,21.548z"/> +</svg> diff --git a/src/chrome/global/devtools/arrow-e.png b/src/chrome/global/devtools/arrow-e.png Binary files differ. diff --git a/src/chrome/browser/devtools/arrow-e@2x.png b/src/chrome/global/devtools/arrow-e@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs-divider@2x.png b/src/chrome/global/devtools/breadcrumbs-divider@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/breadcrumbs-scrollbutton.png b/src/chrome/global/devtools/breadcrumbs-scrollbutton.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs-scrollbutton@2x.png b/src/chrome/global/devtools/breadcrumbs-scrollbutton@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/canvasdebugger.css b/src/chrome/global/devtools/canvasdebugger.css @@ -0,0 +1,458 @@ +/* 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/. */ + +/* 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/. */ + + +/* Reload and waiting notices */ + +.notice-container { + margin-top: -50vh; + font-size: 120%; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color-alt); +} + +#empty-notice > button { + min-width: 30px; + min-height: 28px; + margin: 0; + list-style-image: url(profiler-stopwatch.svg); +} + +#empty-notice > button .button-text { + display: none; +} + +.theme-dark #import-notice { + font-size: 250%; + color: rgba(255,255,255,0.2); +} + +.theme-light #import-notice { + font-size: 250%; + color: rgba(0,0,0,0.2); +} + +/* Snapshots pane */ + +#snapshots-pane > tabs { + -moz-border-end: 1px solid; +} + +#snapshots-pane .devtools-toolbar { + -moz-border-end: 1px solid; +} + +.theme-dark #snapshots-pane > tabs, +.theme-dark #snapshots-pane .devtools-toolbar { + -moz-border-end-color: black; /* Match the splitter color. */ +} + +.theme-light #snapshots-pane > tabs, +.theme-light #snapshots-pane .devtools-toolbar { + -moz-border-end-color: #aaa; /* Match the splitter color. */ +} + +#record-snapshot { + list-style-image: url("chrome://global/skin/devtools/profiler-stopwatch.svg"); +} + +#record-snapshot[checked] { + list-style-image: url("chrome://global/skin/devtools/profiler-stopwatch-checked.svg"); +} + +/* Snapshots items */ + +.snapshot-item-thumbnail { + image-rendering: -moz-crisp-edges; + background-image: linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)), linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)); + background-size: 12px 12px, 12px 12px; + background-position: 0px 0px, 6px 6px; + background-repeat: repeat, repeat; +} + +.snapshot-item-thumbnail[flipped=true] { + transform: scaleY(-1); +} + +.theme-dark .snapshot-item-thumbnail { + background-color: #000; +} + +.theme-light .snapshot-item-thumbnail { + background-color: #fff; +} + +.snapshot-item-details { + -moz-padding-start: 6px; +} + +.snapshot-item-calls { + padding-top: 4px; + font-size: 80%; +} + +.snapshot-item-save { + padding-bottom: 2px; + font-size: 90%; +} + +.snapshot-item-calls, +.snapshot-item-save { + color: var(--theme-body-color-alt); +} + +.snapshot-item-save { + text-decoration: underline; + cursor: pointer; +} + +.snapshot-item-save[disabled=true] { + text-decoration: none; + pointer-events: none; +} + +.snapshot-item-footer.devtools-throbber::before { + margin-top: -2px; +} + +#snapshots-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/* Debugging pane controls */ + +#debugging-controls .devtools-toolbarbutton > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#resume { + list-style-image: url(debugger-play.png); + -moz-image-region: rect(0px,32px,16px,16px); +} + +#step-over { + list-style-image: url(debugger-step-over.png); +} + +#step-in { + list-style-image: url(debugger-step-in.png); +} + +#step-out { + list-style-image: url(debugger-step-out.png); +} + +@media (min-resolution: 2dppx) { + #resume { + list-style-image: url(debugger-play@2x.png); + -moz-image-region: rect(0px,64px,32px,32px); + } + + #step-over { + list-style-image: url(debugger-step-over@2x.png); + } + + #step-in { + list-style-image: url(debugger-step-in@2x.png); + } + + #step-out { + list-style-image: url(debugger-step-out@2x.png); + } +} + +#debugging-controls > toolbarbutton { + transition: opacity 0.15s ease-in-out; +} + +#debugging-controls > toolbarbutton[disabled=true] { + opacity: 0.5; +} + +#calls-slider { + -moz-padding-end: 24px; +} + +#calls-slider .scale-slider { + margin: 0; +} + +#debugging-toolbar-sizer-button { + /* This button's only purpose in life is to make the + container .devtools-toolbar have the right height. */ + visibility: hidden; + min-width: 1px; +} + +/* Calls list pane */ + +#calls-list .side-menu-widget-container { + background: transparent; +} + +#calls-list .side-menu-widget-item { + padding: 0; +} + +/* Calls list items */ + +.theme-dark #calls-list .side-menu-widget-item { + border-color: #111; + border-bottom-color: transparent; +} + +.theme-light #calls-list .side-menu-widget-item { + border-color: #eee; + border-bottom-color: transparent; +} + +.theme-dark .call-item-view:hover { + background-color: rgba(255,255,255,.025); +} + +.theme-light .call-item-view:hover { + background-color: rgba(0,0,0,.025); +} + +.theme-dark .call-item-view[draw-call] { + background-color: rgba(112,191,83,0.15); +} + +.theme-light .call-item-view[draw-call] { + background-color: rgba(44,187,15,0.1); +} + +.theme-dark .call-item-view[interesting-call] { + background-color: rgba(223,128,255,0.15); +} + +.theme-light .call-item-view[interesting-call] { + background-color: rgba(184,46,229,0.1); +} + +.call-item-gutter { + width: calc(3em + 22px); + -moz-padding-start: 22px; + -moz-padding-end: 4px; + padding-top: 2px; + padding-bottom: 2px; + -moz-border-end: 1px solid; + -moz-margin-end: 6px; +} + +.selected .call-item-gutter { + background-image: url("editor-debug-location.png"); + background-repeat: no-repeat; + background-position: 6px center; + background-size: 12px; +} + +@media (min-resolution: 2dppx) { + .selected .call-item-gutter { + background-image: url("editor-debug-location@2x.png"); + } +} + +.call-item-gutter { + background-color: var(--theme-sidebar-background); + color: var(--theme-content-color3); + border-color: var(--theme-splitter-color); +} + +.call-item-index { + text-align: end; +} + +.call-item-context { + color: var(--theme-highlight-orange); +} + +.call-item-name { + color: var(--theme-highlight-blue); +} + +.call-item-location { + -moz-padding-start: 2px; + -moz-padding-end: 6px; + text-align: end; + cursor: pointer; + color: var(--theme-highlight-bluegrey); +} + +.call-item-location:hover { + color: var(--theme-highlight-blue); +} + +.call-item-view:hover .call-item-location, +.call-item-view[expanded] .call-item-location { + text-decoration: underline; +} + +.theme-dark .call-item-location { + border-color: #111; +} + +.theme-light .call-item-location { + border-color: #eee; +} + +.call-item-stack { + -moz-padding-start: calc(3em + 22px); + padding-bottom: 10px; +} + +.theme-dark .call-item-stack { + background: rgba(0,0,0,0.9); +} + +.theme-light .call-item-stack { + background: rgba(255,255,255,0.9); +} + +.call-item-stack-fn { + padding-top: 2px; + padding-bottom: 2px; +} + +.call-item-stack-fn-location { + -moz-padding-start: 2px; + -moz-padding-end: 6px; + text-align: end; + cursor: pointer; + text-decoration: underline; +} + +.call-item-stack-fn-name { + color: var(--theme-content-color3); +} + +.call-item-stack-fn-location { + color: var(--theme-highlight-bluegrey); +} + +.call-item-stack-fn-location:hover { + color: var(--theme-highlight-blue); +} + +#calls-list .selected .call-item-contents > label:not(.call-item-gutter) { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/* Rendering preview */ + +#screenshot-container { + background-image: linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)), linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)); + background-size: 30px 30px, 30px 30px; + background-position: 0px 0px, 15px 15px; + background-repeat: repeat, repeat; +} + +.theme-dark #screenshot-container { + background-color: #000; +} + +.theme-light #screenshot-container { + background-color: #fff; +} + +@media (min-width: 701px) { + #screenshot-container { + width: 30vw; + max-width: 50vw; + min-width: 100px; + } +} + +@media (max-width: 700px) { + #screenshot-container { + height: 40vh; + max-height: 70vh; + min-height: 100px; + } +} + +#screenshot-image { + background-image: -moz-element(#screenshot-rendering); + background-size: contain; + background-position: center, center; + background-repeat: no-repeat; +} + +#screenshot-image[flipped=true] { + transform: scaleY(-1); +} + +#screenshot-dimensions { + padding-top: 4px; + padding-bottom: 4px; + text-align: center; +} + +.theme-dark #screenshot-dimensions { + background-color: rgba(0,0,0,0.4); +} + +.theme-light #screenshot-dimensions { + background-color: rgba(255,255,255,0.8); +} + +/* Snapshot filmstrip */ + +#snapshot-filmstrip { + overflow: hidden; +} + +.theme-dark #snapshot-filmstrip { + border-top: 1px solid #000; + color: var(--theme-selection-color); +} + +.theme-light #snapshot-filmstrip { + border-top: 1px solid #aaa; + color: var(--theme-body-color-alt); +} + +.filmstrip-thumbnail { + image-rendering: -moz-crisp-edges; + background-image: linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)), linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)); + background-size: 12px 12px, 12px 12px; + background-position: 0px -1px, 6px 5px; + background-repeat: repeat, repeat; + background-origin: content-box; + cursor: pointer; + padding-top: 1px; + padding-bottom: 1px; + transition: opacity 0.1s ease-in-out; +} + +.filmstrip-thumbnail[flipped=true] { + transform: scaleY(-1); +} + +.theme-dark .filmstrip-thumbnail { + background-color: #000; +} + +.theme-light .filmstrip-thumbnail { + background-color: #fff; +} + +.filmstrip-thumbnail { + -moz-border-end: 1px solid var(--theme-splitter-color) +} + +#snapshot-filmstrip > .filmstrip-thumbnail:hover, +#snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] { + border: 1px solid var(--theme-highlight-blue); + margin: 0 0 0 -1px; + padding: 0; + opacity: 0.66; +} diff --git a/src/chrome/browser/devtools/close.png b/src/chrome/global/devtools/close.png Binary files differ. diff --git a/src/chrome/browser/devtools/close@2x.png b/src/chrome/global/devtools/close@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-console.png b/src/chrome/global/devtools/command-console.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-console@2x.png b/src/chrome/global/devtools/command-console@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-eyedropper.png b/src/chrome/global/devtools/command-eyedropper.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-eyedropper@2x.png b/src/chrome/global/devtools/command-eyedropper@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-frames.png b/src/chrome/global/devtools/command-frames.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-frames@2x.png b/src/chrome/global/devtools/command-frames@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/command-paintflashing.png b/src/chrome/global/devtools/command-paintflashing.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-paintflashing@2x.png b/src/chrome/global/devtools/command-paintflashing@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-pick.png b/src/chrome/global/devtools/command-pick.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-pick@2x.png b/src/chrome/global/devtools/command-pick@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/command-responsivemode.png b/src/chrome/global/devtools/command-responsivemode.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-responsivemode@2x.png b/src/chrome/global/devtools/command-responsivemode@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/command-scratchpad.png b/src/chrome/global/devtools/command-scratchpad.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-scratchpad@2x.png b/src/chrome/global/devtools/command-scratchpad@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-screenshot.png b/src/chrome/global/devtools/command-screenshot.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-screenshot@2x.png b/src/chrome/global/devtools/command-screenshot@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/command-tilt.png b/src/chrome/global/devtools/command-tilt.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-tilt@2x.png b/src/chrome/global/devtools/command-tilt@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/commandline-icon.png b/src/chrome/global/devtools/commandline-icon.png Binary files differ. diff --git a/src/chrome/browser/devtools/commandline-icon@2x.png b/src/chrome/global/devtools/commandline-icon@2x.png Binary files differ. diff --git a/src/chrome/appver/27/devtools/commandline.css b/src/chrome/global/devtools/commandline.css diff --git a/src/chrome/appver/27/devtools/common.css b/src/chrome/global/devtools/common.css diff --git a/src/chrome/global/devtools/computedview.css b/src/chrome/global/devtools/computedview.css @@ -0,0 +1,208 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +/* From content */ + +* { + box-sizing: border-box; +} + +:root { + height: 100%; +} + +body { + margin: 0; + display : flex; + flex-direction: column; + height: 100%; +} + +#propertyContainer { + -moz-user-select: text; + overflow: auto; + min-height: 0; + flex: 1; +} + +.row-striped { + background: var(--theme-body-background); +} + +.property-view-hidden, +.property-content-hidden { + display: none; +} + +.property-view { + clear: both; + padding: 2px 0 2px 17px; +} + +.property-view > * { + display: inline-block; + vertical-align: middle; +} + +.property-name { + /* -12px is so the expander triangle isn't pushed up above the property */ + width: calc(100% - 12px); + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + outline: 0; +} + +.property-value, .other-property-value { + background-image: url(arrow-e.png); + background-repeat: no-repeat; + background-size: 5px 8px; +} + +@media (min-resolution: 2dppx) { + .property-value, .other-property-value { + background-image: url(arrow-e@2x.png); + } +} + +.property-value { + width: 100%; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background-position: 2px center; + padding-left: 10px; + outline: 0; +} + +.other-property-value { + background-position: left center; + padding-left: 8px; +} + +@media (min-width: 400px) { + .property-name { + width: 200px; + } + .property-value { + /* -212px is accounting for the 200px property-name and the 12px triangle */ + width: calc(100% - 212px); + } +} + +.property-content { + padding-left: 17px; +} + +/* From skin */ +.expander { + visibility: hidden; + margin-left: -12px!important; +} + +.expandable { + visibility: visible; +} + +.match { + visibility: hidden; +} + +.matchedselectors > p { + clear: both; + margin: 0 2px 0 0; + padding: 2px; + overflow-x: hidden; + border-style: dotted; + border-color: rgba(128,128,128,0.4); + border-width: 1px 1px 0 1px; +} + +.matchedselectors > p:last-of-type { + border-bottom-width: 1px; +} + +/* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */ +.rule-text { + direction: ltr; +} + +.matched { + text-decoration: line-through; +} + +.parentmatch { + opacity: 0.5; +} + +#noResults { + font-size: 110%; + margin: 5px; + text-align: center; +} + +.onlyuserstyles { + cursor: pointer; +} + +.legendKey { + margin: 0 5px; +} + +#root .devtools-toolbar { + width: 100%; + border-bottom-width: 0; +} + +.link { + padding: 0 3px; + cursor: pointer; + float: right; +} + +/* Take away these two :visited rules to get a core dumper */ +/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */ + +.link, +.link:visited { + color: #0091ff; +} + +.link, +.helplink, +.link:visited, +.helplink:visited { + text-decoration: none; +} + +.link:hover { + text-decoration: underline; +} + +.computedview-colorswatch { + border-radius: 50%; + width: 1em; + height: 1em; + vertical-align: text-top; + -moz-margin-end: 5px; + display: inline-block; + position: relative; +} + +.computedview-colorswatch::before { + content: ''; + background-color: #eee; + background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), + linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); + background-size: 12px 12px; + background-position: 0 0, 6px 6px; + position: absolute; + border-radius: 50%; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; +} diff --git a/src/chrome/global/devtools/controls.png b/src/chrome/global/devtools/controls.png Binary files differ. diff --git a/src/chrome/browser/devtools/controls@2x.png b/src/chrome/global/devtools/controls@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/cubic-bezier-swatch.png b/src/chrome/global/devtools/cubic-bezier-swatch.png Binary files differ. diff --git a/src/chrome/browser/devtools/cubic-bezier-swatch@2x.png b/src/chrome/global/devtools/cubic-bezier-swatch@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/dark-theme.css b/src/chrome/global/devtools/dark-theme.css @@ -0,0 +1,1352 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +/* According to: + * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17 + */ +:root { + --theme-body-background: #14171a; + --theme-sidebar-background: #181d20; + --theme-contrast-background: #b28025; + + --theme-tab-toolbar-background: #252c33; + --theme-toolbar-background: #343c45; + --theme-selection-background: #1d4f73; + --theme-selection-color: #f5f7fa; + --theme-selection-background-semitransparent: rgba(29, 79, 115, .5); + --theme-splitter-color: black; + --theme-comment: #5c6773; + + --theme-body-color: #a9bacb; + --theme-body-color-alt: #b6babf; + --theme-content-color1: #a9bacb; + --theme-content-color2: #8fa1b2; + --theme-content-color3: #667380; + + --theme-highlight-green: #5c9966; + --theme-highlight-blue: #3689b2; + --theme-highlight-bluegrey: #5e88b0; + --theme-highlight-purple: #6270b2; + --theme-highlight-lightorange: #a18650; + --theme-highlight-orange: #b26b47; + --theme-highlight-red: #bf5656; + --theme-highlight-pink: #a673bf; +} + +.theme-body { + background: var(--theme-body-background); + color: var(--theme-body-color); +} + +.theme-sidebar { + background: var(--theme-sidebar-background); + color: var(--theme-content-color1); +} + +::-moz-selection { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.theme-bg-darker { + background-color: var(--theme-selection-background-semitransparent); +} + +.theme-selected, +.CodeMirror-hint-active { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.theme-bg-contrast, +.variable-or-property:not([overridden])[changed] { + background: var(--theme-contrast-background); +} + +.theme-link, +.cm-s-mozilla .cm-link { + color: var(--theme-highlight-blue); +} + +/* + * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion + * failures in debug builds. + */ +.theme-link:visited, +.cm-s-mozilla .cm-link:visited, +.CodeMirror-Tern-type { + color: var(--theme-highlight-blue); +} + + +.theme-comment, +.cm-s-mozilla .cm-meta, +.cm-s-mozilla .cm-hr, +.cm-s-mozilla .cm-comment, +.variable-or-property .token-undefined, +.variable-or-property .token-null, +.CodeMirror-Tern-completion-unknown:before { + color: var(--theme-comment); +} + +.theme-gutter { + background-color: #0f171f; + color: var(--theme-content-color3); + border-color: #303b47; +} + +.theme-separator { /* grey */ + border-color: #303b47; +} + +.theme-fg-color1, +.cm-s-mozilla .cm-number, +.variable-or-property .token-number, +.variable-or-property[return] > .title > .name, +.variable-or-property[scope] > .title > .name { + color: var(--theme-highlight-green); +} + +.CodeMirror-Tern-completion-number:before { + background-color: #5c9966; +} + +.theme-fg-color2, +.cm-s-mozilla .cm-attribute, +.cm-s-mozilla .cm-variable, +.cm-s-mozilla .cm-def, +.cm-s-mozilla .cm-property, +.cm-s-mozilla .cm-qualifier, +.variables-view-variable > .title > .name { + color: var(--theme-highlight-blue); +} + +.CodeMirror-Tern-completion-object:before { + background-color: #3689b2; +} + +.cm-s-mozilla .cm-unused-line { + text-decoration: line-through; + text-decoration-color: #5f88b0; +} + +.cm-s-mozilla .cm-executed-line { + background-color: #133c26; +} + +.theme-fg-color3, +.cm-s-mozilla .cm-builtin, +.cm-s-mozilla .cm-tag, +.cm-s-mozilla .cm-header, +.cm-s-mozilla .cm-bracket, +.variables-view-property > .title > .name { + color: var(--theme-highlight-pink); +} + +.CodeMirror-Tern-completion-array:before { + background-color: var(--theme-highlight-bluegrey); +} + +.theme-fg-color4 { + color: var(--theme-highlight-purple); +} + +.theme-fg-color5, +.cm-s-mozilla .cm-keyword { + color: var(--theme-highlight-lightorange); +} + +.theme-fg-color6, +.cm-s-mozilla .cm-string, +.cm-s-mozilla .cm-string-2, +.variable-or-property .token-string, +.CodeMirror-Tern-farg { + color: var(--theme-highlight-orange); +} + +.CodeMirror-Tern-completion-string:before, +.CodeMirror-Tern-completion-fn:before { + background-color: #b26b47; +} + +.theme-fg-color7, +.cm-s-mozilla .cm-atom, +.cm-s-mozilla .cm-quote, +.cm-s-mozilla .cm-error, +.variable-or-property .token-boolean, +.variable-or-property .token-domnode, +.variable-or-property[exception] > .title > .name { + color: var(--theme-highlight-red); +} + +.CodeMirror-Tern-completion-bool:before { + background-color: #bf5656; +} + +.variable-or-property .token-domnode { + font-weight: bold; +} + +.theme-toolbar, +.devtools-toolbar, +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs, +.CodeMirror-dialog { /* General toolbar styling */ + color: var(--theme-body-color-alt); + background-color: var(--theme-toolbar-background); + border-color: hsla(210,8%,5%,.6); +} + +.theme-fg-contrast { /* To be used for text on theme-bg-contrast */ + color: black; +} + +.ruleview-colorswatch, +.computedview-colorswatch, +.ruleview-bezierswatch { + box-shadow: 0 0 0 1px #818181; +} + +/* CodeMirror specific styles. + * Best effort to match the existing theme, some of the colors + * are duplicated here to prevent weirdness in the main theme. */ + +.CodeMirror { /* Inherit platform specific font sizing and styles */ + font-family: inherit; + font-size: inherit; + background: transparent; +} + +.CodeMirror pre, +.cm-s-mozilla .cm-variable-2, +.cm-s-mozilla .cm-variable-3, +.cm-s-mozilla .cm-operator, +.cm-s-mozilla .cm-special { + color: var(--theme-content-color1); +} + +.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor { + border-left: solid 1px #fff; +} + +.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */ + background: rgb(185, 215, 253); +} + +.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */ + background: rgb(176, 176, 176); +} + +.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */ + background: rgba(185, 215, 253, .15); +} + +div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */ + outline: solid 1px rgba(255, 255, 255, .25); + color: white; +} + +/* Highlight for a line that contains an error. */ +div.CodeMirror div.error-line { + background: rgba(255,0,0,0.2); +} + +/* Highlight for a line that represents a stack frame's location. */ +div.CodeMirror div.debug-line { + background: rgba(0,128,255,0.1); + box-shadow: + 0 1px 0 0 rgba(0,128,255,0.4), + 0 -1px 0 0 rgba(0,128,255,0.4); +} + +/* Generic highlighted text */ +div.CodeMirror span.marked-text { + background: rgba(255,255,0,0.2); + border: 1px dashed rgba(192,192,0,0.6); + -moz-margin-start: -1px; + -moz-margin-end: -1px; +} + +/* Highlight for evaluating current statement. */ +div.CodeMirror span.eval-text { + background-color: #556; +} + +.cm-s-mozilla .CodeMirror-linenumber { /* line number text */ + color: var(--theme-content-color3); +} + +.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */ + border-right-color: var(--theme-toolbar-background); + background-color: var(--theme-sidebar-background); +} + +.cm-s-markup-view pre { + line-height: 1.4em; + min-height: 1.4em; +} + +/* Twisty and checkbox controls */ +.theme-twisty, .theme-checkbox { + width: 14px; + height: 14px; + background-repeat: no-repeat; + background-image: url("chrome://global/skin/devtools/controls.png"); + background-size: 56px 28px; +} + +.theme-twisty { + cursor: pointer; + background-position: -28px -14px; +} + +.theme-twisty:-moz-focusring { + outline-style: none; +} + +.theme-twisty[open] { + background-position: -42px -14px; +} + +.theme-twisty[invisible] { + visibility: hidden; +} + +.theme-checkbox { + display: inline-block; + border: 0; + padding: 0; + outline: none; + background-position: -28px 0; +} + +.theme-checkbox[checked] { + background-position: -42px 0; +} + +@media (min-resolution: 2dppx) { + .theme-twisty, .theme-checkbox { + background-image: url("chrome://global/skin/devtools/controls@2x.png"); + } +} + +/* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */ + +.theme-tooltip-panel .panel-arrowcontent { + padding: 5px; + background: rgba(19, 28, 38, .9); + border-radius: 5px; + box-shadow: none; + border: 3px solid #434850; +} + +/* Overring panel arrow images to fit with our light and dark themes */ + +.theme-tooltip-panel .panel-arrow[side="top"] { + list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-vertical-dark.png"); + margin-bottom: -4px; +} + +.theme-tooltip-panel .panel-arrow[side="bottom"] { + list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-vertical-dark.png"); + margin-top: -4px; +} + +.theme-tooltip-panel .panel-arrow[side="left"] { + list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-horizontal-dark.png"); + margin-right: -4px; +} + +.theme-tooltip-panel .panel-arrow[side="right"] { + list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-horizontal-dark.png"); + margin-left: -4px; +} + +@media (min-resolution: 2dppx) { + .theme-tooltip-panel .panel-arrow[side="top"], + .theme-tooltip-panel .panel-arrow[side="bottom"] { + list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-vertical-dark@2x.png"); + } + + .theme-tooltip-panel .panel-arrow[side="left"], + .theme-tooltip-panel .panel-arrow[side="right"] { + list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-horizontal-dark@2x.png"); + } +} + +.theme-tooltip-panel .devtools-tooltip-simple-text { + color: white; + border-bottom: 1px solid #434850; +} + +.theme-tooltip-panel .devtools-tooltip-simple-text:last-child { + border-bottom: 0; +} + +.devtools-textinput, +.devtools-searchinput { + background-color: rgba(24, 29, 32, 1); + color: rgba(184, 200, 217, 1); +} + +.CodeMirror-Tern-fname { + color: #f7f7f7; +} + +.CodeMirror-hints, +.CodeMirror-Tern-tooltip { + box-shadow: 0 0 4px rgba(255, 255, 255, .3); + background-color: #0f171f; + color: var(--theme-body-color); +} + + + +/* Toolbars */ +.devtools-toolbar, +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs { + -moz-appearance: none; + padding: 0; + border-width: 0; + border-bottom-width: 1px; + border-style: solid; + height: 24px; + line-height: 24px; + box-sizing: border-box; +} + +.devtools-toolbar { + padding: 0 3px; +} + +.devtools-toolbar checkbox { + margin: 0 2px; + padding: 0; +} +.devtools-toolbar checkbox .checkbox-check { + margin: 0; + padding: 0; +} +.devtools-toolbar checkbox .checkbox-label-box { + border: none !important; /* overrides .checkbox-label-box from checkbox.css */ +} +.devtools-toolbar checkbox .checkbox-label-box .checkbox-label { + margin: 0 6px !important; /* overrides .checkbox-label from checkbox.css */ + padding: 0; +} + +/* Toolbar buttons */ +.devtools-menulist, +.devtools-toolbarbutton { + -moz-appearance: none; + -moz-box-align: center; + background: transparent; + min-width: 78px; + min-height: 18px; + padding: 1px; + text-shadow: none; + border: none; + border-radius: 0; + margin: 2px 3px; + color: inherit; + transition: background 0.05s ease-in-out; + color: var(--theme-content-color1); + background-color: var(--theme-toolbar-background); +} + +.devtools-menulist:-moz-focusring, +.devtools-toolbarbutton:-moz-focusring { + outline: 1px dotted hsla(210,30%,85%,0.7); + outline-offset: -4px; +} + +.devtools-toolbarbutton[standalone] { + -moz-margin-end: 5px; + border-width: 1px; + border-style: solid; +} +.devtools-toolbarbutton[label][standalone] { + min-height: 2em; +} + +.devtools-toolbarbutton:not([label]), +.devtools-toolbarbutton[text-as-image] { + min-width: 32px; +} + +#toolbox-buttons .devtools-toolbarbutton[text-as-image] { + -moz-padding-start: 5px; + -moz-padding-end: 5px; + min-width: inherit; +} + +/* Command buttons with menupopups should be styled slightly differently - + no background color and a bit more narrow */ +#toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) { + background: transparent; +} +#toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker { + padding: 0 2px; +} + +.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { + display: none; +} + +.devtools-toolbar .devtools-toolbarbutton { + border-width: 0; +} + +.devtools-toolbarbutton > .toolbarbutton-icon { + margin: 0; +} + +.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { + -moz-appearance: none; + color: inherit; + border-width: 0; + -moz-box-orient: horizontal; + padding: 0; +} + +.devtools-toolbarbutton[type=menu-button] { + padding: 0 1px; + -moz-box-align: stretch; +} + +.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon { + -moz-margin-end: 4px; +} + +.devtools-menulist > .menulist-dropmarker { + -moz-appearance: none; + display: -moz-box; + list-style-image: url("chrome://global/skin/devtools/dropmarker.svg"); + -moz-box-align: center; + min-width: 16px; +} + +.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, +.devtools-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; +} + +.theme-dark .devtools-menulist, +.theme-dark .devtools-toolbarbutton { + border-color: rgba(0, 0, 0, .4); /* Splitters */ +} +.theme-light .devtools-menulist, +.theme-light .devtools-toolbarbutton { + border-color: rgba(170, 170, 170, .5); /* Splitters */ +} + +/* Text-only buttons */ +.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), +.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image] { + background-color: rgba(170, 170, 170, .2); /* Splitter */ +} +.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), +.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image] { + background-color: rgba(0, 0, 0, .2); /* Splitter */ +} + +/* Button States */ +.theme-dark .devtools-toolbarbutton:not([disabled]):hover, +.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, +.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover { + background: rgba(0, 0, 0, .3); /* Splitters */ +} +.theme-light .devtools-toolbarbutton:not([disabled]):hover, +.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, +.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover { + background: rgba(170, 170, 170, .3); /* Splitters */ +} + +.theme-dark .devtools-toolbarbutton:not([disabled]):hover:active, +.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, +.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active { + background: rgba(0, 0, 0, .4); /* Splitters */ +} +.theme-light .devtools-toolbarbutton:not([disabled]):hover:active, +.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, +.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active { + background: rgba(170, 170, 170, .4); /* Splitters */ +} + +/* Menu type buttons and checked states */ +.theme-dark .devtools-toolbarbutton[checked=true], +.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { + background: rgba(29, 79, 115, .7); /* Select highlight blue */ + color: var(--theme-selection-color); +} + +.theme-light .devtools-toolbarbutton[checked=true], +.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { + background: rgba(76, 158, 217, .2); /* Select highlight blue */ +} + +.theme-dark .devtools-menulist[open=true], +.theme-dark .devtools-toolbarbutton[open=true], +.theme-dark .devtools-toolbarbutton[open=true]:hover, +.theme-dark .devtools-toolbarbutton[open=true]:hover:active, +.theme-dark .devtools-toolbarbutton[checked=true]:hover { + background: rgba(29, 79, 115, .8); /* Select highlight blue */ + color: var(--theme-selection-color); +} + +.theme-light .devtools-menulist[open=true], +.theme-light .devtools-toolbarbutton[open=true], +.theme-light .devtools-toolbarbutton[open=true]:hover, +.theme-light .devtools-toolbarbutton[open=true]:hover:active, +.theme-light .devtools-toolbarbutton[checked=true]:hover { + background: rgba(76, 158, 217, .4); /* Select highlight blue */ +} + +.devtools-option-toolbarbutton { + -moz-appearance: none; + list-style-image: url("chrome://global/skin/devtools/tool-options.svg"); + background: none; + opacity: .8; + border: none; +} + +.devtools-option-toolbarbutton[open=true] { + opacity: 1; +} + +/* Toolbar button groups */ +.devtools-toolbarbutton-group > .devtools-toolbarbutton { + margin-left: 1px; + margin-right: 1px; + outline-offset: -3px; + box-shadow: none; +} + +.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child { + -moz-margin-end: 0; +} + +.devtools-toolbarbutton-group + .devtools-toolbarbutton { + -moz-margin-start: 3px; +} + +.devtools-separator + .devtools-toolbarbutton { + -moz-margin-start: 1px; +} + +/* HTML buttons, similar to toolbar buttons, but work in HTML documents */ + +.devtools-button { + border: 0 solid var(--theme-splitter-color); + background: var(--theme-toolbar-background); + margin: 0; + padding: 0; + min-width: 32px; + min-height: 18px; + /* The icon is absolutely positioned in the button using ::before */ + position: relative; +} + +.devtools-button[standalone] { + min-height: 32px; + border-width: 1px; +} + +/* Button States */ +.theme-dark .devtools-button:not([disabled]):hover { + background: rgba(0, 0, 0, .3); /* Splitters */ +} +.theme-light .devtools-button:not([disabled]):hover { + background: rgba(170, 170, 170, .3); /* Splitters */ +} + +.theme-dark .devtools-button:not([disabled]):hover:active { + background: rgba(0, 0, 0, .4); /* Splitters */ +} +.theme-light .devtools-button:not([disabled]):hover:active { + background: rgba(170, 170, 170, .4); /* Splitters */ +} + +/* Menu type buttons and checked states */ +.theme-dark .devtools-button[checked] { + background: rgba(29, 79, 115, .7) !important; /* Select highlight blue */ + color: var(--theme-selection-color); +} + +.theme-light .devtools-button[checked] { + background: rgba(76, 158, 217, .2) !important; /* Select highlight blue */ +} + +.devtools-button::before { + content: ""; + display: block; + width: 16px; + height: 16px; + position: absolute; + left: 50%; + top: 50%; + margin: -8px 0 0 -8px; + background-repeat: no-repeat; +} + +@media (min-resolution: 2dppx) { + .devtools-button::before { + background-size: 32px; + } +} + +/* Text input */ + +.devtools-textinput, +.devtools-searchinput { + -moz-appearance: none; + margin: 0 3px; + border: 1px solid; + border-radius: 2px; + padding: 4px 6px; + border-color: var(--theme-splitter-color); +} + +.devtools-searchinput { + margin-top: 1px; + margin-bottom: 1px; + padding: 0; + -moz-padding-start: 22px; + -moz-padding-end: 12px; + background-position: 8px center; + background-size: 11px 11px; + background-repeat: no-repeat; + font-size: inherit; +} + +.theme-dark .devtools-searchinput { + background-image: url(magnifying-glass.png); +} + +.theme-light .devtools-searchinput { + background-image: url(magnifying-glass-light.png); +} + +@media (min-resolution: 2dppx) { + .theme-dark .devtools-searchinput { + background-image: url(magnifying-glass@2x.png); + } + + .theme-light .devtools-searchinput { + background-image: url(magnifying-glass-light@2x.png); + } +} + +.devtools-searchinput:-moz-locale-dir(rtl) { + background-position: calc(100% - 8px) center; +} + +.devtools-searchinput > .textbox-input-box > .textbox-search-icons { + display: none; +} + +.devtools-no-search-result { + border-color: var(--theme-highlight-red) !important; +} + +/* Close button */ + +.devtools-closebutton { + -moz-appearance: none; + border: none; + margin: 0 4px; + min-width: 16px; + width: 16px; + opacity: 0.8; +} + +.devtools-closebutton > image { + width: 16px; + height: 16px; + -moz-appearance: none; + background-size: 16px 16px; + background-image: url("chrome://global/skin/devtools/close@2x.png"); + background-position: center center; + background-repeat: no-repeat; +} + +.devtools-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; +} + +.devtools-closebutton > .toolbarbutton-text { + display: none; +} + +.devtools-closebutton:hover { + opacity: 1; +} + +/* In-tools sidebar */ +.devtools-sidebar-tabs { + -moz-appearance: none; + margin: 0; +} + +.devtools-sidebar-tabs > tabpanels { + -moz-appearance: none; + background: transparent; + padding: 0; + border: 0; +} + +.theme-light .devtools-sidebar-tabs > tabpanels { + background: var(--theme-sidebar-background); + color: var(--theme-body-color); +} + +.devtools-sidebar-tabs tabs { + position: static; + font: inherit; + margin-bottom: 0; + overflow: hidden; +} + +.devtools-sidebar-alltabs { + margin: 0; + border-width: 0 0 1px 0; + -moz-border-start-width: 1px; + border-style: solid; +} + +.devtools-sidebar-alltabs dropmarker { + display: none; +} + +.devtools-sidebar-tabs tabs > .tabs-right, +.devtools-sidebar-tabs tabs > .tabs-left { + display: none; +} + +.devtools-sidebar-tabs tabs > tab { + -moz-appearance: none; + /* We want to match the height of a toolbar with a toolbarbutton + * First, we need to replicated the padding of toolbar (4px), + * then we need to take the border of the buttons into account (1px). + */ + padding: 0 3px; + margin: 0; + min-width: 78px; + text-align: center; + background-color: transparent; + color: inherit; + -moz-box-flex: 1; + border-width: 0; + -moz-border-start-width: 1px; + border-style: solid; + border-radius: 0; + position: static; + text-shadow: none; +} + +.devtools-sidebar-tabs tabs > tab:first-child { + -moz-border-start-width: 0; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab:hover { + background: hsla(206,37%,4%,.2); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab:hover:active { + background: hsla(206,37%,4%,.4); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { + background: hsla(206,37%,4%,.2); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { + background: hsla(206,37%,4%,.4); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected], +.theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active { + color: var(--theme-selection-color); + background: #1d4f73; + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab:hover { + background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab:hover:active { + background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#aaa, #aaa); +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { + background: #ddd; + border-image: linear-gradient(#aaa, #aaa); +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected], +.theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active { + color: var(--theme-selection-color); + background: #4c9ed9; + border-image: linear-gradient(#aaa, #aaa); +} + +/* Toolbox - moved from toolbox.css. + * Rules that apply to the global toolbox like command buttons, + * devtools tabs, docking buttons, etc. */ + +#toolbox-controls > toolbarbutton, +#toolbox-dock-buttons > toolbarbutton { + -moz-appearance: none; + border: none; + margin: 0 4px; + min-width: 16px; + width: 16px; +} + +#toolbox-controls > toolbarbutton > .toolbarbutton-text, +#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text, +.command-button > .toolbarbutton-text { + display: none; +} + +#toolbox-dock-buttons > toolbarbutton > image { + -moz-appearance: none; + width: 16px; + height: 16px; + background-size: 16px 16px; + background-position: 0 center; + background-repeat: no-repeat; +} + +#toolbox-dock-bottom > image { + background-image: url("chrome://global/skin/devtools/dock-bottom@2x.png"); +} + +#toolbox-dock-side > image { + background-image: url("chrome://global/skin/devtools/dock-side@2x.png"); +} + +#toolbox-dock-window > image { + background-image: url("chrome://global/skin/devtools/undock@2x.png"); +} + +#toolbox-dock-window, +#toolbox-dock-bottom, +#toolbox-dock-side { + opacity: 0.8; +} + +#toolbox-dock-window:hover, +#toolbox-dock-bottom:hover, +#toolbox-dock-side:hover { + opacity: 1; +} + +.devtools-separator { + margin: 0 2px; + width: 2px; + background-image: linear-gradient(transparent, hsla(204,45%,98%,.1), transparent), + linear-gradient(transparent, hsla(206,37%,4%,.6), transparent), + linear-gradient(transparent, hsla(204,45%,98%,.1), transparent); + background-size: 1px 100%; + background-repeat: no-repeat; + background-position: 0, 1px, 2px; +} + +#toolbox-buttons:empty + .devtools-separator, +.devtools-separator[invisible] { + visibility: hidden; +} + +#toolbox-controls-separator { + margin: 0; +} + +/* Command buttons */ + +.command-button { + -moz-appearance: none; + border: none; + padding: 0 8px; + margin: 0; + width: 32px; + position: relative; +} + +.command-button:hover { + background-color: hsla(206,37%,4%,.2); +} +.command-button:hover:active, .command-button[checked=true]:not(:hover) { + background-color: hsla(206,37%,4%,.4); +} + +.command-button > image { + -moz-appearance: none; + width: 16px; + height: 16px; + background-size: 64px 16px; + background-position: 0 center; + background-repeat: no-repeat; +} +.command-button:hover > image { + background-position: -16px center; +} +.command-button:hover:active > image { + background-position: -32px center; +} +.command-button[checked=true] > image { + background-position: -48px center; +} +.command-button[open=true] > image { + background-position: 0 center; +} + +#command-button-paintflashing > image { + background-image: url("chrome://global/skin/devtools/command-paintflashing.png"); +} + +#command-button-screenshot > image { + background-image: url("chrome://global/skin/devtools/command-screenshot.png"); +} + +#command-button-responsive > image { + background-image: url("chrome://global/skin/devtools/command-responsivemode.png"); +} + +#command-button-tilt > image { + background-image: url("chrome://global/skin/devtools/command-tilt.png"); +} + +#command-button-scratchpad > image { + background-image: url("chrome://global/skin/devtools/command-scratchpad.png"); + background-size: 48px 16px; +} + +#command-button-pick > image { + background-image: url("chrome://global/skin/devtools/command-pick.png"); +} + +#command-button-frames > image { + background-image: url("chrome://global/skin/devtools/command-frames.png"); +} + +#command-button-splitconsole > image { + background-image: url("chrome://global/skin/devtools/command-console.png"); +} + +#command-button-eyedropper > image { + background-image: url("chrome://global/skin/devtools/command-eyedropper.png"); +} + +@media (min-resolution: 2dppx) { + #command-button-paintflashing > image { + background-image: url("chrome://global/skin/devtools/command-paintflashing@2x.png"); + } + + #command-button-screenshot > image { + background-image: url("chrome://global/skin/devtools/command-screenshot@2x.png"); + } + + #command-button-responsive > image { + background-image: url("chrome://global/skin/devtools/command-responsivemode@2x.png"); + } + + #command-button-tilt > image { + background-image: url("chrome://global/skin/devtools/command-tilt@2x.png"); + } + + #command-button-scratchpad > image { + background-image: url("chrome://global/skin/devtools/command-scratchpad@2x.png"); + } + + #command-button-pick > image { + background-image: url("chrome://global/skin/devtools/command-pick@2x.png"); + } + + #command-button-frames > image { + background-image: url("chrome://global/skin/devtools/command-frames@2x.png"); + } + + #command-button-splitconsole > image { + background-image: url("chrome://global/skin/devtools/command-console@2x.png"); + } + + #command-button-eyedropper > image { + background-image: url("chrome://global/skin/devtools/command-eyedropper@2x.png"); + } +} + +/* Tabs */ + +.devtools-tabbar { + -moz-appearance: none; + min-height: 24px; + border: 0px solid; + border-bottom-width: 1px; + padding: 0; + background: var(--theme-tab-toolbar-background); + border-bottom-color: var(--theme-splitter-color); +} + +.theme-light .devtools-tabbar { + box-shadow: 0 -2px 0 rgba(170,170,170,.1) inset; +} + +.theme-dark .devtools-tabbar { + box-shadow: 0 -2px 0 rgba(0,0,0,.1) inset; +} + +#toolbox-tabs { + margin: 0; +} + +.devtools-tab { + -moz-appearance: none; + -moz-binding: url("chrome://global/content/bindings/general.xml#control-item"); + -moz-box-align: center; + min-width: 32px; + min-height: 24px; + max-width: 110px; + margin: 0; + padding: 0; + border-style: solid; + border-width: 0; + -moz-border-start-width: 1px; + -moz-box-align: center; +} + +.theme-dark .devtools-tab { + color: var(--theme-body-color-alt); + border-color: #42484f; +} + +.theme-light .devtools-tab { + color: var(--theme-body-color); + border-color: var(--theme-splitter-color); +} + +.theme-dark .devtools-tab:hover { + background-color: hsla(206,37%,4%,.2); + color: #ced3d9; +} + +.theme-light .devtools-tab:hover { + background-color: rgba(170,170,170,.2); +} + +.theme-dark .devtools-tab:hover:active { + background-color: hsla(206,37%,4%,.4); + color: var(--theme-selection-color); +} + +.theme-light .devtools-tab:hover:active { + background-color: rgba(170,170,170,.4); +} + +.theme-dark .devtools-tab:not([selected])[highlighted] { + background-color: hsla(99,100%,14%,.2); + box-shadow: 0 2px 0 #7bc107 inset; +} + +.theme-light .devtools-tab:not([selected])[highlighted] { + background-color: rgba(44, 187, 15, .2); +} + +.devtools-tab > image { + border: none; + -moz-margin-end: 0; + -moz-margin-start: 4px; + opacity: 0.6; + max-height: 16px; + width: 16px; /* Prevents collapse during theme switching */ +} + +.devtools-tab > label { + white-space: nowrap; +} + +.devtools-tab:hover > image { + opacity: 0.8; +} + +.devtools-tab:active > image, +.devtools-tab[selected] > image { + opacity: 1; +} + +.devtools-tabbar .devtools-tab[selected], +.devtools-tabbar .devtools-tab[selected]:hover:active { + color: var(--theme-selection-color); + background-color: var(--theme-selection-background); +} + +.theme-dark .devtools-tabbar .devtools-tab[selected] { + box-shadow: 0 2px 0 #d7f1ff inset, + 0 8px 3px -5px #2b82bf inset, + 0 -2px 0 rgba(0,0,0,.2) inset; +} + +.theme-light .devtools-tabbar .devtools-tab[selected] { + box-shadow: 0 2px 0 #d7f1ff inset, + 0 8px 3px -5px #2b82bf inset, + 0 -2px 0 rgba(0,0,0,.06) inset; +} + +#toolbox-tabs .devtools-tab[selected], +#toolbox-tabs .devtools-tab[highlighted] { + border-width: 0; + -moz-padding-start: 1px; +} + +#toolbox-tabs .devtools-tab[selected]:last-child, +#toolbox-tabs .devtools-tab[highlighted]:last-child { + -moz-padding-end: 1px; +} + +#toolbox-tabs .devtools-tab[selected] + .devtools-tab, +#toolbox-tabs .devtools-tab[highlighted] + .devtools-tab { + -moz-border-start-width: 0; + -moz-padding-start: 1px; +} + +#toolbox-tabs .devtools-tab:first-child[selected] { + -moz-border-start-width: 0; +} + +#toolbox-tabs .devtools-tab:last-child { + -moz-border-end-width: 1px; +} + +.devtools-tab:not([highlighted]) > .highlighted-icon, +.devtools-tab[selected] > .highlighted-icon, +.devtools-tab:not([selected])[highlighted] > .default-icon { + visibility: collapse; +} + +/* The options tab is special - it doesn't have the same parent + as the other tabs (toolbox-option-container vs toolbox-tabs) */ +#toolbox-option-container .devtools-tab:not([selected]) { + background-color: transparent; +} +#toolbox-option-container .devtools-tab { + border-color: transparent; + border-width: 0; + -moz-padding-start: 1px; +} +#toolbox-tab-options > image { + margin: 0 8px; +} + +/* Invert the colors of certain dark theme images for displaying + * inside of the light theme. + */ +.theme-light .devtools-tab[icon-invertable] > image, +.theme-light #toolbox-dock-buttons > toolbarbutton > image, +.theme-light .command-button-invertable > image, +.theme-light .command-button-invertable:active > image, +.theme-light .devtools-closebutton > image, +.theme-light .devtools-toolbarbutton > image, +.theme-light .devtools-option-toolbarbutton > image, +.theme-light #breadcrumb-separator-normal, +.theme-light .scrollbutton-up > .toolbarbutton-icon, +.theme-light .scrollbutton-down > .toolbarbutton-icon, +.theme-light #black-boxed-message-button .button-icon, +.theme-light .notice-container button .button-icon, +.theme-light #requests-menu-perf-notice-button .button-icon, +.theme-light #requests-menu-network-summary-button .button-icon, +.theme-light .event-tooltip-debugger-icon, +.theme-light .devtools-button::before { + filter: url(filters.svg#invert); +} + +/* Since selected backgrounds are blue, we want to use the normal + * (light) icons. */ +.theme-light .command-button-invertable[checked=true]:not(:active) > image, +.theme-light .devtools-tab[icon-invertable][selected] > image, +.theme-light .devtools-tab[icon-invertable][highlighted] > image, +.theme-light #record-snapshot[checked] > image, +.theme-light #profiler-start[checked] > image, +.theme-light .notice-container button[checked] .button-icon { + filter: none !important; +} + +.theme-light .command-button:hover { + background-color: inherit; +} + +.theme-light .command-button:hover:active, +.theme-light .command-button[checked=true]:not(:hover) { + background-color: inherit; +} + +.hidden-labels-box:not(.visible) > label, +.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { + display: none; +} + +.devtools-invisible-splitter { + border-color: transparent; +} + +.devtools-horizontal-splitter { + border-bottom: 1px solid var(--theme-splitter-color); +} + +.devtools-side-splitter { + -moz-border-end: 1px solid var(--theme-splitter-color); + border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */ +} + +/* Throbbers */ +.devtools-throbber::before { + content: ""; + display: inline-block; + vertical-align: bottom; + -moz-margin-end: 0.5em; + width: 1em; + height: 1em; + border: 2px solid currentColor; + border-right-color: transparent; + border-radius: 50%; + animation: 1.1s linear throbber-spin infinite; +} + +@keyframes throbber-spin { + from { + transform: none; + } + to { + transform: rotate(360deg); + } +} diff --git a/src/chrome/global/devtools/debugger-blackbox.png b/src/chrome/global/devtools/debugger-blackbox.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-blackbox@2x.png b/src/chrome/global/devtools/debugger-blackbox@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/debugger-collapse.png b/src/chrome/global/devtools/debugger-collapse.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-collapse@2x.png b/src/chrome/global/devtools/debugger-collapse@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/debugger-expand.png b/src/chrome/global/devtools/debugger-expand.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-expand@2x.png b/src/chrome/global/devtools/debugger-expand@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/debugger-pause.png b/src/chrome/global/devtools/debugger-pause.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-pause@2x.png b/src/chrome/global/devtools/debugger-pause@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/debugger-play.png b/src/chrome/global/devtools/debugger-play.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-play@2x.png b/src/chrome/global/devtools/debugger-play@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-prettyprint.png b/src/chrome/global/devtools/debugger-prettyprint.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-prettyprint@2x.png b/src/chrome/global/devtools/debugger-prettyprint@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/debugger-step-in.png b/src/chrome/global/devtools/debugger-step-in.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-step-in@2x.png b/src/chrome/global/devtools/debugger-step-in@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/debugger-step-out.png b/src/chrome/global/devtools/debugger-step-out.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-step-out@2x.png b/src/chrome/global/devtools/debugger-step-out@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/debugger-step-over.png b/src/chrome/global/devtools/debugger-step-over.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-step-over@2x.png b/src/chrome/global/devtools/debugger-step-over@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-toggleBreakpoints.png b/src/chrome/global/devtools/debugger-toggleBreakpoints.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-toggleBreakpoints@2x.png b/src/chrome/global/devtools/debugger-toggleBreakpoints@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/debugger.css b/src/chrome/global/devtools/debugger.css @@ -0,0 +1,662 @@ +/* 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/. */ + +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +/* Sources and breakpoints pane */ + +#sources-pane[selectedIndex="0"] + #sources-and-editor-splitter { + border-color: transparent; +} + +#sources-pane > tabs { + -moz-border-end: 1px solid; +} + +#sources-pane .devtools-toolbar { + border: none; /* Remove the devtools-toolbar bottom border. */ + -moz-border-end: 1px solid; +} + +#sources-pane > tabs, +#sources-pane .devtools-toolbar { + -moz-border-end-color: var(--theme-splitter-color); +} + +/* Sources and breakpoints list */ + +.dbg-source-item { + padding: 2px 0px; +} + +.dbg-breakpoint-line { + font-weight: 600; +} + +.dbg-breakpoint-text { + -moz-padding-start: 6px; + font-style: italic; + font-size: 90%; +} + +.dbg-breakpoint-checkbox { + width: 16px; + height: 16px; + margin: 2px; +} + +/* Sources toolbar */ + +#sources-toolbar > .devtools-toolbarbutton, +#sources-controls > .devtools-toolbarbutton { + min-width: 32px; +} + +#black-box { + list-style-image: url(debugger-blackbox.png); +} + +@media (min-resolution: 2dppx) { + #black-box { + list-style-image: url(debugger-blackbox@2x.png); + } +} + +#pretty-print { + list-style-image: url(debugger-prettyprint.png); +} + +@media (min-resolution: 2dppx) { + #pretty-print { + list-style-image: url(debugger-prettyprint@2x.png); + } +} + +#toggle-breakpoints { + list-style-image: url(debugger-toggleBreakpoints.png); +} + +@media (min-resolution: 2dppx) { + #toggle-breakpoints { + list-style-image: url(debugger-toggleBreakpoints@2x.png); + } +} + +#sources-toolbar .devtools-toolbarbutton:not([label]) { + -moz-image-region: rect(0px,16px,16px,0px); +} + +#sources-toolbar .devtools-toolbarbutton:not([label])[checked] { + -moz-image-region: rect(0px,32px,16px,16px); +} + +@media (min-resolution: 2dppx) { + #sources-toolbar .devtools-toolbarbutton:not([label]) { + -moz-image-region: rect(0px,32px,32px,0px); + } + + #sources-toolbar .devtools-toolbarbutton:not([label])[checked] { + -moz-image-region: rect(0px,64px,32px,32px); + } +} + +#sources .black-boxed { + color: rgba(128,128,128,0.4); +} + +#sources .selected .black-boxed { + color: rgba(255,255,255,0.4); +} + +#sources .black-boxed ~ .dbg-breakpoint { + display: none; +} + +/* Debugger unblackbox button */ + +#black-boxed-message-button > .button-box > .button-icon { + width: 16px; + height: 16px; + background-image: url(debugger-blackbox.png); + background-position: 0 0; + background-size: 32px 16px; + background-repeat: no-repeat; + -moz-margin-end: 5px; +} + +@media (min-resolution: 2dppx) { + #black-boxed-message-button > .button-box > .button-icon { + background-image: url(debugger-blackbox@2x.png); + } +} + +/* Black box message and source progress meter */ + +#black-boxed-message, +#source-progress-container { + /* Prevent the container deck from aquiring the size from this message. */ + min-width: 1px; + min-height: 1px; +} + +#source-progress { + min-height: 2em; + min-width: 40em; +} + +#black-boxed-message-label, +#black-boxed-message-button { + text-align: center; + font-size: 120%; +} + +#black-boxed-message-button { + margin-top: 1em; + padding: .25em; +} + +/* Breadcrumbs stack frames view */ + +.dbg-stackframe-details { + -moz-padding-start: 4px; +} + +/* Classic stack frames view */ + +.dbg-classic-stackframe { + display: block; +} + +.dbg-classic-stackframe-title { + font-weight: 600; +} + +.dbg-classic-stackframe-details:-moz-locale-dir(ltr) { + float: right; +} + +.dbg-classic-stackframe-details:-moz-locale-dir(rtl) { + float: left; +} + +.dbg-classic-stackframe-details-url { + max-width: 90%; + text-align: end; +} + +.dbg-classic-stackframe-details-url { + color: var(--theme-content-color1); +} + +.dbg-classic-stackframe-details-sep { + color: var(--theme-body-color-alt) +} + +.dbg-classic-stackframe-details-line { + color: var(--theme-highlight-bluegrey); +} + +#callstack-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/* Tracer */ + +#trace { + list-style-image: url(tracer-icon.png); + -moz-image-region: rect(0px,16px,16px,0px); +} + +#trace[checked] { + -moz-image-region: rect(0px,32px,16px,16px); +} + +@media (min-resolution: 2dppx) { + #trace { + list-style-image: url(tracer-icon@2x.png); + -moz-image-region: rect(0px,32px,32px,0px); + } + + #trace[checked] { + -moz-image-region: rect(0px,64px,32px,32px); + } +} + +#clear-tracer { + /* Make this button as narrow as the text inside it. */ + min-width: 1px; +} + +.trace-name { + -moz-padding-start: 4px; +} + +/* Tracer dark theme */ + +.theme-dark .trace-item { + color: var(--theme-selection-color); +} + +.theme-dark .trace-item.black-boxed { + color: rgba(128,128,128,0.4); +} + +.theme-dark .trace-item.selected-matching { + background-color: rgba(29,79,115,.4); /* Select highlight blue at 40% alpha */ +} + +.theme-dark .selected > .trace-item { + background-color: rgba(29,79,115,.6); /* Select highlight blue at 60% alpha */ +} + +.trace-call { + color: var(--theme-highlight-blue); +} + +.trace-return, +.trace-yield { + color: var(--theme-highlight-green); +} + +.trace-throw { + color: var(--theme-highlight-red); +} + +.trace-param { + color: var(--theme-content-color1); +} + +.theme-dark .trace-syntax { + color: var(--theme-content-color2); +} + +/* Tracer light theme */ +.theme-light .trace-item { + color: var(--theme-content-color1); +} + +.theme-light .trace-item.black-boxed { + color: rgba(128,128,128,0.4); +} + +.theme-light .trace-item.selected-matching { + background-color: rgba(76,158,217,.4); /* Select highlight blue at 40% alpha */ +} + +.theme-light .selected > .trace-item { + background-color: rgba(76,158,217,.6); /* Select highlight blue at 60% alpha */ +} + +#tracer-traces .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/* Watch expressions view */ + +#expressions { + min-height: 10px; + max-height: 125px; +} + +.dbg-expression { + height: 20px; +} + +.dbg-expression-arrow { + background-image: url(commandline-icon.png); + background-position: -16px 0; + background-repeat: no-repeat; + background-size: 32px 16px; + width: 16px; + height: 16px; + margin: 2px; +} + +@media (min-resolution: 2dppx) { + .dbg-expression-arrow { + background-image: url(commandline-icon@2x.png); + } +} + +.dbg-expression-input { + color: inherit; +} + +.dbg-expression-button { + -moz-appearance: none; + border: none; + background: none; + text-decoration: underline; + cursor: pointer; +} + +.dbg-expression-button { + color: var(--theme-highlight-blue); +} + +/* Event listeners view */ + +.dbg-event-listener-type { + font-weight: 600; +} + +.dbg-event-listener-location { + color: var(--theme-content-color1); +} + +.dbg-event-listener-separator { + color: var(--theme-body-color-alt); +} + +.dbg-event-listener-targets { + color: var(--theme-highlight-bluegrey); +} + +.theme-dark #event-listeners .selected { + /* Selected items shouldn't be displayed differently. */ + background: none; + color: #fff; +} + +.theme-light #event-listeners .selected { + /* Selected items shouldn't be displayed differently. */ + background: none; + color: #000; +} + +/* Searchbox and the search operations help panel */ + +#searchbox { + min-width: 220px; + -moz-margin-start: 1px; +} + +#filter-label { + -moz-margin-start: 2px; +} + +#searchbox-panel-operators { + margin-top: 5px; + margin-bottom: 8px; + -moz-margin-start: 2px; +} + +.searchbox-panel-operator-button { + min-width: 26px; + margin-top: 0; + margin-bottom: 0; + -moz-margin-start: 2px; + -moz-margin-end: 6px; + text-align: center; +} + +.searchbox-panel-operator-label { + padding-bottom: 2px; +} + +/* Searchbox results panel */ + +#results-panel { + border: none; +} + +.results-panel-item { + padding: 6px 8px; + border-top: 1px solid rgba(128,128,128,0.2); +} + +.results-panel-item:first-of-type { + border-top: none; +} + +.results-panel-item-label { + font-weight: 600; +} + +.results-panel-item-label-before { + -moz-padding-end: 6px; +} + +.theme-dark .results-panel-item-label { + color: var(--theme-selection-color); +} + +.theme-light .results-panel-item-label { + color: var(--theme-body-color); +} + +.results-panel-item-label-before { + color: var(--theme-highlight-bluegrey); +} + +.results-panel-item-label-below { + color: var(--theme-content-color3); +} + +#results-panel .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/* Sources search view */ + +#globalsearch { + min-height: 10px; + max-height: 50vh; +} + +.dbg-results-header { + -moz-padding-start: 6px; +} + +.dbg-results-header-location { + font-weight: 600; +} + +.dbg-results-header-match-count { + -moz-padding-start: 6px; +} + +.dbg-results-line-number { + min-width: 3em; + -moz-border-end: 1px solid rgba(128,128,128,0.2); + -moz-padding-end: 4px; + text-align: end; +} + +.dbg-results-line-contents { + -moz-padding-start: 4px; +} + +.dbg-results-line-contents-string[match=true] { + background-color: rgba(255,255,0,0.2); + border: 1px solid rgba(128,128,128,0.7); + border-radius: 4px; + margin-top: -1px !important; + margin-bottom: -1px !important; + cursor: pointer; +} + +.dbg-results-line-contents-string[match=true][focusing] { + transition: transform 0.3s ease-in-out; +} + +.dbg-results-line-contents-string[match=true][focused] { + transition-duration: 0.1s; + transform: scale(1.75, 1.75); +} + +.dbg-source-results:not(.selected):hover { + background-color: var(--theme-sidebar-background); +} + +.dbg-results-header { + background-color: var(--theme-tab-toolbar-background); +} + +.theme-dark .dbg-results-header { + color: var(--theme-content-color1); +} + +.theme-light .dbg-results-header { + color: var(--theme-content-color3); +} + +.theme-dark .dbg-search-result:hover { + background-color: rgba(29,79,115,.2); /* Select highlight blue at 40% alpha */ +} + +.theme-light .dbg-search-result:hover { + background-color: rgba(76,158,217,.2); /* Select highlight blue at 40% alpha */ +} + +.dbg-results-header-match-count { + color: var(--theme-content-color3); +} + +.dbg-results-line-number { + background-color: var(--theme-tab-toolbar-background); + color: var(--theme-body-color-alt); +} + +.dbg-results-line-contents-string { + color: var(--theme-body-color-alt); +} + +.theme-dark .dbg-results-line-contents-string[match=true] { + color: var(--theme-selection-color); +} + +.theme-light .dbg-results-line-contents-string[match=true] { + color: var(--theme-body-color); +} + +/* Toolbar controls */ + +#debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon, +#sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#resume { + list-style-image: url(debugger-pause.png); + -moz-image-region: rect(0px,16px,16px,0px); +} + +#resume[checked] { + list-style-image: url(debugger-play.png); +} + +@media (min-resolution: 2dppx) { + #resume { + list-style-image: url(debugger-pause@2x.png); + -moz-image-region: rect(0px,32px,32px,0px); + } + + #resume[checked] { + list-style-image: url(debugger-play@2x.png); + -moz-image-region: rect(0px,64px,32px,32px); + } +} + +#resume ~ toolbarbutton { + transition: opacity 0.15s ease-in-out; +} + +#resume:not([checked]) ~ toolbarbutton { + opacity: 0.5; +} + +#step-over { + list-style-image: url(debugger-step-over.png); +} + +#step-in { + list-style-image: url(debugger-step-in.png); +} + +#step-out { + list-style-image: url(debugger-step-out.png); +} + +@media (min-resolution: 2dppx) { + #step-over { + list-style-image: url(debugger-step-over@2x.png); + } + + #step-in { + list-style-image: url(debugger-step-in@2x.png); + } + + #step-out { + list-style-image: url(debugger-step-out@2x.png); + } +} + +#instruments-pane-toggle { + background: none; + box-shadow: none; + border: none; + list-style-image: url(debugger-collapse.png); + -moz-image-region: rect(0px,16px,16px,0px); +} + +#instruments-pane-toggle[pane-collapsed] { + list-style-image: url(debugger-expand.png); +} + +#instruments-pane-toggle:hover { + -moz-image-region: rect(0px,32px,16px,16px); +} + +@media (min-resolution: 2dppx) { + #instruments-pane-toggle { + list-style-image: url(debugger-collapse@2x.png); + -moz-image-region: rect(0px,32px,32px,0px); + } + + #instruments-pane-toggle[pane-collapsed] { + list-style-image: url(debugger-expand@2x.png); + } + + #instruments-pane-toggle:hover { + -moz-image-region: rect(0px,64px,32px,32px); + } +} + +/* Horizontal vs. vertical layout */ + +#vertical-layout-panes-container { + min-height: 35vh; + max-height: 80vh; +} + +#body[layout=vertical] #sources-pane > tabs { + -moz-border-end: none; +} + +#body[layout=vertical] #instruments-pane { + margin: 0 !important; + /* To prevent all the margin hacks to hide the sidebar. */ +} + +#body[layout=vertical] .side-menu-widget-container, +#body[layout=vertical] .side-menu-widget-empty-text { + box-shadow: none !important; +} + +#body[layout=vertical] .side-menu-widget-item-arrow { + background-image: none !important; +} + +#body[layout=vertical] .side-menu-widget-group, +#body[layout=vertical] .side-menu-widget-item { + -moz-margin-end: 0; +} diff --git a/src/chrome/browser/devtools/dock-bottom@2x.png b/src/chrome/global/devtools/dock-bottom@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/dock-side@2x.png b/src/chrome/global/devtools/dock-side@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/dropmarker.svg b/src/chrome/global/devtools/dropmarker.svg diff --git a/src/chrome/browser/devtools/editor-breakpoint.png b/src/chrome/global/devtools/editor-breakpoint.png Binary files differ. diff --git a/src/chrome/browser/devtools/editor-breakpoint@2x.png b/src/chrome/global/devtools/editor-breakpoint@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/editor-debug-location.png b/src/chrome/global/devtools/editor-debug-location.png Binary files differ. diff --git a/src/chrome/browser/devtools/editor-debug-location@2x.png b/src/chrome/global/devtools/editor-debug-location@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/editor-error.png b/src/chrome/global/devtools/editor-error.png Binary files differ. diff --git a/src/chrome/browser/devtools/eyedropper.css b/src/chrome/global/devtools/eyedropper.css diff --git a/src/chrome/browser/devtools/filetype-dir-close.svg b/src/chrome/global/devtools/filetype-dir-close.svg diff --git a/src/chrome/browser/devtools/filetype-dir-open.svg b/src/chrome/global/devtools/filetype-dir-open.svg diff --git a/src/chrome/browser/devtools/filetype-globe.svg b/src/chrome/global/devtools/filetype-globe.svg diff --git a/src/chrome/browser/devtools/filetype-store.svg b/src/chrome/global/devtools/filetype-store.svg diff --git a/src/chrome/browser/devtools/filters.svg b/src/chrome/global/devtools/filters.svg diff --git a/src/chrome/browser/devtools/floating-scrollbars-light.css b/src/chrome/global/devtools/floating-scrollbars-light.css diff --git a/src/chrome/browser/devtools/floating-scrollbars.css b/src/chrome/global/devtools/floating-scrollbars.css diff --git a/src/chrome/appver/27/devtools/font-inspector.css b/src/chrome/global/devtools/font-inspector.css diff --git a/src/chrome/appver/27/devtools/inspector.css b/src/chrome/global/devtools/inspector.css diff --git a/src/chrome/browser/devtools/itemArrow-dark-ltr.svg b/src/chrome/global/devtools/itemArrow-dark-ltr.svg diff --git a/src/chrome/browser/devtools/itemArrow-dark-rtl.svg b/src/chrome/global/devtools/itemArrow-dark-rtl.svg diff --git a/src/chrome/browser/devtools/itemArrow-ltr.svg b/src/chrome/global/devtools/itemArrow-ltr.svg diff --git a/src/chrome/browser/devtools/itemArrow-rtl.svg b/src/chrome/global/devtools/itemArrow-rtl.svg diff --git a/src/chrome/global/devtools/itemToggle.png b/src/chrome/global/devtools/itemToggle.png Binary files differ. diff --git a/src/chrome/browser/devtools/itemToggle@2x.png b/src/chrome/global/devtools/itemToggle@2x.png Binary files differ. diff --git a/src/chrome/appver/27/devtools/layoutview.css b/src/chrome/global/devtools/layoutview.css diff --git a/src/chrome/global/devtools/light-theme.css b/src/chrome/global/devtools/light-theme.css @@ -0,0 +1,1350 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +/* According to: + * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17 + */ +:root { + --theme-body-background: #fcfcfc; + --theme-sidebar-background: #f7f7f7; + --theme-contrast-background: #e6b064; + + --theme-tab-toolbar-background: #ebeced; + --theme-toolbar-background: #f0f1f2; + --theme-selection-background: #4c9ed9; + --theme-selection-color: #f5f7fa; + --theme-selection-background-semitransparent: rgba(76, 158, 217, .23); + --theme-splitter-color: #aaaaaa; + --theme-comment: hsl(90,2%,46%); + + --theme-body-color: #18191a; + --theme-body-color-alt: #585959; + --theme-content-color1: #292e33; + --theme-content-color2: #8fa1b2; + --theme-content-color3: #667380; + + --theme-highlight-green: hsl(72,100%,27%); + --theme-highlight-blue: hsl(208,56%,40%); + --theme-highlight-bluegrey: hsl(208,81%,21%); + --theme-highlight-purple: #5b5fff; + --theme-highlight-lightorange: #a18650; + --theme-highlight-orange: hsl(24,85%,39%); + --theme-highlight-red: #bf5656; + --theme-highlight-pink: #b82ee5; +} + +.theme-body { + background: var(--theme-body-background); + color: var(--theme-body-color); +} + +.theme-sidebar { + background: var(--theme-sidebar-background); + color: var(--theme-body-color); +} + +::-moz-selection { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.theme-bg-darker { + background: var(--theme-selection-background-semitransparent); +} + +.theme-selected, +.CodeMirror-hint-active { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.theme-bg-contrast, +.variable-or-property:not([overridden])[changed] { + background: var(--theme-contrast-background); +} + +.theme-link, +.cm-s-mozilla .cm-link, +.CodeMirror-Tern-type { + color: var(--theme-highlight-blue); +} + +/* + * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion + * failures in debug builds. + */ +.theme-link:visited, +.cm-s-mozilla .cm-link:visited { + color: var(--theme-highlight-blue); +} + +.theme-comment, +.cm-s-mozilla .cm-meta, +.cm-s-mozilla .cm-hr, +.cm-s-mozilla .cm-comment, +.variable-or-property .token-undefined, +.variable-or-property .token-null, +.CodeMirror-Tern-completion-unknown:before { + color: var(--theme-comment); +} + +.theme-gutter { + background-color: hsl(0,0%,90%); + color: var(--theme-content-color3); + border-color: hsl(0,0%,65%); +} + +.theme-separator { /* grey */ + border-color: #cddae5; +} + +.cm-s-mozilla .cm-unused-line { + text-decoration: line-through; + text-decoration-color: var(--theme-highlight-bluegrey); +} + +.cm-s-mozilla .cm-executed-line { + background-color: #fcfffc; +} + +.theme-fg-color1, +.cm-s-mozilla .cm-number, +.variable-or-property .token-number, +.variable-or-property[return] > .title > .name, +.variable-or-property[scope] > .title > .name { + color: var(--theme-highlight-green); +} + +.CodeMirror-Tern-completion-number:before { + background-color: hsl(72,100%,27%); +} + +.theme-fg-color2, +.cm-s-mozilla .cm-attribute, +.cm-s-mozilla .cm-builtin, +.cm-s-mozilla .cm-def, +.cm-s-mozilla .cm-property, +.cm-s-mozilla .cm-qualifier, +.variables-view-variable > .title > .name { + color: var(--theme-highlight-blue); +} + +.CodeMirror-Tern-completion-object:before { + background-color: hsl(208,56%,40%); +} + +.theme-fg-color3, +.cm-s-mozilla .cm-variable, +.cm-s-mozilla .cm-tag, +.cm-s-mozilla .cm-header, +.cm-s-mozilla .cm-bracket, +.variables-view-property > .title > .name { + color: var(--theme-highlight-bluegrey); +} + +.CodeMirror-Tern-completion-array:before { + background-color: var(--theme-highlight-bluegrey); +} + +.theme-fg-color4 { + color: var(--theme-highlight-orange); +} + +.theme-fg-color5, +.cm-s-mozilla .cm-keyword { + color: var(--theme-highlight-lightorange); +} + +.theme-fg-color6, +.cm-s-mozilla .cm-string, +.cm-s-mozilla .cm-string-2, +.variable-or-property .token-string, +.CodeMirror-Tern-farg { + color: var(--theme-highlight-orange); +} + +.CodeMirror-Tern-completion-string:before, +.CodeMirror-Tern-completion-fn:before { + background-color: hsl(24,85%,39%); +} + +.theme-fg-color7, +.cm-s-mozilla .cm-atom, +.cm-s-mozilla .cm-quote, +.cm-s-mozilla .cm-error, +.variable-or-property .token-boolean, +.variable-or-property .token-domnode, +.variable-or-property[exception] > .title > .name { + color: var(--theme-highlight-red); +} + +.CodeMirror-Tern-completion-bool:before { + background-color: #bf5656; +} + +.variable-or-property .token-domnode { + font-weight: bold; +} + +.theme-fg-contrast { /* To be used for text on theme-bg-contrast */ + color: black; +} + +.theme-toolbar, +.devtools-toolbar, +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs, +.CodeMirror-dialog { /* General toolbar styling */ + color: var(--theme-body-color-alt); + background-color: var(--theme-toolbar-background); + border-color: var(--theme-splitter-color); +} + +.ruleview-colorswatch, +.computedview-colorswatch, +.ruleview-bezierswatch { + box-shadow: 0 0 0 1px #c4c4c4; +} + +/* CodeMirror specific styles. + * Best effort to match the existing theme, some of the colors + * are duplicated here to prevent weirdness in the main theme. */ + +.CodeMirror { /* Inherit platform specific font sizing and styles */ + font-family: inherit; + font-size: inherit; + background: transparent; +} + +.CodeMirror pre, +.cm-s-mozilla .cm-variable-2, +.cm-s-mozilla .cm-variable-3, +.cm-s-mozilla .cm-operator, +.cm-s-mozilla .cm-special { + color: var(--theme-body-color); +} + +.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor { + border-left: solid 1px black; +} + +.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */ + background: rgb(185, 215, 253); +} + +.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */ + background: rgb(176, 176, 176); +} + +.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */ + background: rgba(185, 215, 253, .35); +} + +div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */ + outline: solid 1px rgba(0, 0, 0, .25); + color: black; +} + +/* Highlight for a line that contains an error. */ +div.CodeMirror div.error-line { + background: rgba(255,0,0,0.2); +} + +/* Highlight for a line that represents a stack frame's location. */ +div.CodeMirror div.debug-line { + background: rgba(0,128,255,0.1); + box-shadow: + 0 1px 0 0 rgba(0,128,255,0.4), + 0 -1px 0 0 rgba(0,128,255,0.4); +} + +/* Generic highlighted text */ +div.CodeMirror span.marked-text { + background: rgba(255,255,0,0.2); + border: 1px dashed rgba(192,192,0,0.6); + -moz-margin-start: -1px; + -moz-margin-end: -1px; +} + +/* Highlight for evaluating current statement. */ +div.CodeMirror span.eval-text { + background-color: #ccd; +} + +.cm-s-mozilla .CodeMirror-linenumber { /* line number text */ + color: var(--theme-content-color3); +} + +.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */ + border-right-color: var(--theme-splitter-color); + background-color: var(--theme-sidebar-background); +} + +.cm-s-markup-view pre { + line-height: 1.4em; + min-height: 1.4em; +} + +/* Twisty and checkbox controls */ + +.theme-twisty, .theme-checkbox { + width: 14px; + height: 14px; + background-repeat: no-repeat; + background-image: url("chrome://global/skin/devtools/controls.png"); + background-size: 56px 28px; +} + +.theme-twisty { + cursor: pointer; + background-position: 0 -14px; +} + +.theme-twisty:-moz-focusring { + outline-style: none; +} + +.theme-twisty[open] { + background-position: -14px -14px; +} + +.theme-twisty[invisible] { + visibility: hidden; +} + +/* Use white twisty when next to a selected item in markup view */ +.theme-selected ~ .theme-twisty { + background-position: -28px -14px; +} + +.theme-selected ~ .theme-twisty[open] { + background-position: -42px -14px; +} + +.theme-checkbox { + display: inline-block; + border: 0; + padding: 0; + outline: none; + background-position: 0 0; +} + +.theme-checkbox[checked] { + background-position: -14px 0; +} + +@media (min-resolution: 2dppx) { + .theme-twisty, .theme-checkbox { + background-image: url("chrome://global/skin/devtools/controls@2x.png"); + } +} + +/* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */ + +.theme-tooltip-panel .panel-arrowcontent { + padding: 4px; + background: rgba(255, 255, 255, .9); + border-radius: 5px; + box-shadow: none; + border: 3px solid #d9e1e8; +} + +/* Overring panel arrow images to fit with our light and dark themes */ + +.theme-tooltip-panel .panel-arrow[side="top"] { + list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-vertical-light.png"); + margin-bottom: -4px; +} + +.theme-tooltip-panel .panel-arrow[side="bottom"] { + list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-vertical-light.png"); + margin-top: -4px; +} + +.theme-tooltip-panel .panel-arrow[side="left"] { + list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-horizontal-light.png"); + margin-right: -4px; +} + +.theme-tooltip-panel .panel-arrow[side="right"] { + list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-horizontal-light.png"); + margin-left: -4px; +} + +@media (min-resolution: 2dppx) { + .theme-tooltip-panel .panel-arrow[side="top"], + .theme-tooltip-panel .panel-arrow[side="bottom"] { + list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-vertical-light@2x.png"); + } + + .theme-tooltip-panel .panel-arrow[side="left"], + .theme-tooltip-panel .panel-arrow[side="right"] { + list-style-image: url("chrome://global/skin/devtools/tooltip/arrow-horizontal-light@2x.png"); + } +} + +.theme-tooltip-panel .devtools-tooltip-simple-text { + color: black; + border-bottom: 1px solid #d9e1e8; +} + +.theme-tooltip-panel .devtools-tooltip-simple-text:last-child { + border-bottom: 0; +} + +.CodeMirror-hints, +.CodeMirror-Tern-tooltip { + box-shadow: 0 0 4px rgba(128, 128, 128, .5); + background-color: var(--theme-sidebar-background); +} + + + +/* Toolbars */ +.devtools-toolbar, +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs { + -moz-appearance: none; + padding: 0; + border-width: 0; + border-bottom-width: 1px; + border-style: solid; + height: 24px; + line-height: 24px; + box-sizing: border-box; +} + +.devtools-toolbar { + padding: 0 3px; +} + +.devtools-toolbar checkbox { + margin: 0 2px; + padding: 0; +} +.devtools-toolbar checkbox .checkbox-check { + margin: 0; + padding: 0; +} +.devtools-toolbar checkbox .checkbox-label-box { + border: none !important; /* overrides .checkbox-label-box from checkbox.css */ +} +.devtools-toolbar checkbox .checkbox-label-box .checkbox-label { + margin: 0 6px !important; /* overrides .checkbox-label from checkbox.css */ + padding: 0; +} + +/* Toolbar buttons */ +.devtools-menulist, +.devtools-toolbarbutton { + -moz-appearance: none; + -moz-box-align: center; + background: transparent; + min-width: 78px; + min-height: 18px; + padding: 1px; + text-shadow: none; + border: none; + border-radius: 0; + margin: 2px 3px; + color: inherit; + transition: background 0.05s ease-in-out; + color: var(--theme-content-color1); + background-color: var(--theme-toolbar-background); +} + +.devtools-menulist:-moz-focusring, +.devtools-toolbarbutton:-moz-focusring { + outline: 1px dotted hsla(210,30%,85%,0.7); + outline-offset: -4px; +} + +.devtools-toolbarbutton[standalone] { + -moz-margin-end: 5px; + border-width: 1px; + border-style: solid; +} +.devtools-toolbarbutton[label][standalone] { + min-height: 2em; +} + +.devtools-toolbarbutton:not([label]), +.devtools-toolbarbutton[text-as-image] { + min-width: 32px; +} + +#toolbox-buttons .devtools-toolbarbutton[text-as-image] { + -moz-padding-start: 5px; + -moz-padding-end: 5px; + min-width: inherit; +} + +/* Command buttons with menupopups should be styled slightly differently - + no background color and a bit more narrow */ +#toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) { + background: transparent; +} +#toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker { + padding: 0 2px; +} + +.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { + display: none; +} + +.devtools-toolbar .devtools-toolbarbutton { + border-width: 0; +} + +.devtools-toolbarbutton > .toolbarbutton-icon { + margin: 0; +} + +.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { + -moz-appearance: none; + color: inherit; + border-width: 0; + -moz-box-orient: horizontal; + padding: 0; +} + +.devtools-toolbarbutton[type=menu-button] { + padding: 0 1px; + -moz-box-align: stretch; +} + +.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon { + -moz-margin-end: 4px; +} + +.devtools-menulist > .menulist-dropmarker { + -moz-appearance: none; + display: -moz-box; + list-style-image: url("chrome://global/skin/devtools/dropmarker.svg"); + -moz-box-align: center; + min-width: 16px; +} + +.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker, +.devtools-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; +} + +.theme-dark .devtools-menulist, +.theme-dark .devtools-toolbarbutton { + border-color: rgba(0, 0, 0, .4); /* Splitters */ +} +.theme-light .devtools-menulist, +.theme-light .devtools-toolbarbutton { + border-color: rgba(170, 170, 170, .5); /* Splitters */ +} + +/* Text-only buttons */ +.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), +.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image] { + background-color: rgba(170, 170, 170, .2); /* Splitter */ +} +.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]), +.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image] { + background-color: rgba(0, 0, 0, .2); /* Splitter */ +} + +/* Button States */ +.theme-dark .devtools-toolbarbutton:not([disabled]):hover, +.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, +.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover { + background: rgba(0, 0, 0, .3); /* Splitters */ +} +.theme-light .devtools-toolbarbutton:not([disabled]):hover, +.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover, +.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover { + background: rgba(170, 170, 170, .3); /* Splitters */ +} + +.theme-dark .devtools-toolbarbutton:not([disabled]):hover:active, +.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, +.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active { + background: rgba(0, 0, 0, .4); /* Splitters */ +} +.theme-light .devtools-toolbarbutton:not([disabled]):hover:active, +.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active, +.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active { + background: rgba(170, 170, 170, .4); /* Splitters */ +} + +/* Menu type buttons and checked states */ +.theme-dark .devtools-toolbarbutton[checked=true], +.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { + background: rgba(29, 79, 115, .7); /* Select highlight blue */ + color: var(--theme-selection-color); +} + +.theme-light .devtools-toolbarbutton[checked=true], +.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] { + background: rgba(76, 158, 217, .2); /* Select highlight blue */ +} + +.theme-dark .devtools-menulist[open=true], +.theme-dark .devtools-toolbarbutton[open=true], +.theme-dark .devtools-toolbarbutton[open=true]:hover, +.theme-dark .devtools-toolbarbutton[open=true]:hover:active, +.theme-dark .devtools-toolbarbutton[checked=true]:hover { + background: rgba(29, 79, 115, .8); /* Select highlight blue */ + color: var(--theme-selection-color); +} + +.theme-light .devtools-menulist[open=true], +.theme-light .devtools-toolbarbutton[open=true], +.theme-light .devtools-toolbarbutton[open=true]:hover, +.theme-light .devtools-toolbarbutton[open=true]:hover:active, +.theme-light .devtools-toolbarbutton[checked=true]:hover { + background: rgba(76, 158, 217, .4); /* Select highlight blue */ +} + +.devtools-option-toolbarbutton { + -moz-appearance: none; + list-style-image: url("chrome://global/skin/devtools/tool-options.svg"); + background: none; + opacity: .8; + border: none; +} + +.devtools-option-toolbarbutton[open=true] { + opacity: 1; +} + +/* Toolbar button groups */ +.devtools-toolbarbutton-group > .devtools-toolbarbutton { + margin-left: 1px; + margin-right: 1px; + outline-offset: -3px; + box-shadow: none; +} + +.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child { + -moz-margin-end: 0; +} + +.devtools-toolbarbutton-group + .devtools-toolbarbutton { + -moz-margin-start: 3px; +} + +.devtools-separator + .devtools-toolbarbutton { + -moz-margin-start: 1px; +} + +/* HTML buttons, similar to toolbar buttons, but work in HTML documents */ + +.devtools-button { + border: 0 solid var(--theme-splitter-color); + background: var(--theme-toolbar-background); + margin: 0; + padding: 0; + min-width: 32px; + min-height: 18px; + /* The icon is absolutely positioned in the button using ::before */ + position: relative; +} + +.devtools-button[standalone] { + min-height: 32px; + border-width: 1px; +} + +/* Button States */ +.theme-dark .devtools-button:not([disabled]):hover { + background: rgba(0, 0, 0, .3); /* Splitters */ +} +.theme-light .devtools-button:not([disabled]):hover { + background: rgba(170, 170, 170, .3); /* Splitters */ +} + +.theme-dark .devtools-button:not([disabled]):hover:active { + background: rgba(0, 0, 0, .4); /* Splitters */ +} +.theme-light .devtools-button:not([disabled]):hover:active { + background: rgba(170, 170, 170, .4); /* Splitters */ +} + +/* Menu type buttons and checked states */ +.theme-dark .devtools-button[checked] { + background: rgba(29, 79, 115, .7) !important; /* Select highlight blue */ + color: var(--theme-selection-color); +} + +.theme-light .devtools-button[checked] { + background: rgba(76, 158, 217, .2) !important; /* Select highlight blue */ +} + +.devtools-button::before { + content: ""; + display: block; + width: 16px; + height: 16px; + position: absolute; + left: 50%; + top: 50%; + margin: -8px 0 0 -8px; + background-repeat: no-repeat; +} + +@media (min-resolution: 2dppx) { + .devtools-button::before { + background-size: 32px; + } +} + +/* Text input */ + +.devtools-textinput, +.devtools-searchinput { + -moz-appearance: none; + margin: 0 3px; + border: 1px solid; + border-radius: 2px; + padding: 4px 6px; + border-color: var(--theme-splitter-color); +} + +.devtools-searchinput { + margin-top: 1px; + margin-bottom: 1px; + padding: 0; + -moz-padding-start: 22px; + -moz-padding-end: 12px; + background-position: 8px center; + background-size: 11px 11px; + background-repeat: no-repeat; + font-size: inherit; +} + +.theme-dark .devtools-searchinput { + background-image: url(magnifying-glass.png); +} + +.theme-light .devtools-searchinput { + background-image: url(magnifying-glass-light.png); +} + +@media (min-resolution: 2dppx) { + .theme-dark .devtools-searchinput { + background-image: url(magnifying-glass@2x.png); + } + + .theme-light .devtools-searchinput { + background-image: url(magnifying-glass-light@2x.png); + } +} + +.devtools-searchinput:-moz-locale-dir(rtl) { + background-position: calc(100% - 8px) center; +} + +.devtools-searchinput > .textbox-input-box > .textbox-search-icons { + display: none; +} + +.devtools-no-search-result { + border-color: var(--theme-highlight-red) !important; +} + +/* Close button */ + +.devtools-closebutton { + -moz-appearance: none; + border: none; + margin: 0 4px; + min-width: 16px; + width: 16px; + opacity: 0.8; +} + +.devtools-closebutton > image { + width: 16px; + height: 16px; + -moz-appearance: none; + background-size: 16px 16px; + background-image: url("chrome://global/skin/devtools/close@2x.png"); + background-position: center center; + background-repeat: no-repeat; +} + +.devtools-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; +} + +.devtools-closebutton > .toolbarbutton-text { + display: none; +} + +.devtools-closebutton:hover { + opacity: 1; +} + +/* In-tools sidebar */ +.devtools-sidebar-tabs { + -moz-appearance: none; + margin: 0; +} + +.devtools-sidebar-tabs > tabpanels { + -moz-appearance: none; + background: transparent; + padding: 0; + border: 0; +} + +.theme-light .devtools-sidebar-tabs > tabpanels { + background: var(--theme-sidebar-background); + color: var(--theme-body-color); +} + +.devtools-sidebar-tabs tabs { + position: static; + font: inherit; + margin-bottom: 0; + overflow: hidden; +} + +.devtools-sidebar-alltabs { + margin: 0; + border-width: 0 0 1px 0; + -moz-border-start-width: 1px; + border-style: solid; +} + +.devtools-sidebar-alltabs dropmarker { + display: none; +} + +.devtools-sidebar-tabs tabs > .tabs-right, +.devtools-sidebar-tabs tabs > .tabs-left { + display: none; +} + +.devtools-sidebar-tabs tabs > tab { + -moz-appearance: none; + /* We want to match the height of a toolbar with a toolbarbutton + * First, we need to replicated the padding of toolbar (4px), + * then we need to take the border of the buttons into account (1px). + */ + padding: 0 3px; + margin: 0; + min-width: 78px; + text-align: center; + background-color: transparent; + color: inherit; + -moz-box-flex: 1; + border-width: 0; + -moz-border-start-width: 1px; + border-style: solid; + border-radius: 0; + position: static; + text-shadow: none; +} + +.devtools-sidebar-tabs tabs > tab:first-child { + -moz-border-start-width: 0; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab:hover { + background: hsla(206,37%,4%,.2); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab:hover:active { + background: hsla(206,37%,4%,.4); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { + background: hsla(206,37%,4%,.2); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { + background: hsla(206,37%,4%,.4); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected], +.theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active { + color: var(--theme-selection-color); + background: #1d4f73; + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab:hover { + background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab:hover:active { + background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#aaa, #aaa); +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { + background: #ddd; + border-image: linear-gradient(#aaa, #aaa); +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected], +.theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active { + color: var(--theme-selection-color); + background: #4c9ed9; + border-image: linear-gradient(#aaa, #aaa); +} + +/* Toolbox - moved from toolbox.css. + * Rules that apply to the global toolbox like command buttons, + * devtools tabs, docking buttons, etc. */ + +#toolbox-controls > toolbarbutton, +#toolbox-dock-buttons > toolbarbutton { + -moz-appearance: none; + border: none; + margin: 0 4px; + min-width: 16px; + width: 16px; +} + +#toolbox-controls > toolbarbutton > .toolbarbutton-text, +#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text, +.command-button > .toolbarbutton-text { + display: none; +} + +#toolbox-dock-buttons > toolbarbutton > image { + -moz-appearance: none; + width: 16px; + height: 16px; + background-size: 16px 16px; + background-position: 0 center; + background-repeat: no-repeat; +} + +#toolbox-dock-bottom > image { + background-image: url("chrome://global/skin/devtools/dock-bottom@2x.png"); +} + +#toolbox-dock-side > image { + background-image: url("chrome://global/skin/devtools/dock-side@2x.png"); +} + +#toolbox-dock-window > image { + background-image: url("chrome://global/skin/devtools/undock@2x.png"); +} + +#toolbox-dock-window, +#toolbox-dock-bottom, +#toolbox-dock-side { + opacity: 0.8; +} + +#toolbox-dock-window:hover, +#toolbox-dock-bottom:hover, +#toolbox-dock-side:hover { + opacity: 1; +} + +.devtools-separator { + margin: 0 2px; + width: 2px; + background-image: linear-gradient(transparent, hsla(204,45%,98%,.1), transparent), + linear-gradient(transparent, hsla(206,37%,4%,.6), transparent), + linear-gradient(transparent, hsla(204,45%,98%,.1), transparent); + background-size: 1px 100%; + background-repeat: no-repeat; + background-position: 0, 1px, 2px; +} + +#toolbox-buttons:empty + .devtools-separator, +.devtools-separator[invisible] { + visibility: hidden; +} + +#toolbox-controls-separator { + margin: 0; +} + +/* Command buttons */ + +.command-button { + -moz-appearance: none; + border: none; + padding: 0 8px; + margin: 0; + width: 32px; + position: relative; +} + +.command-button:hover { + background-color: hsla(206,37%,4%,.2); +} +.command-button:hover:active, .command-button[checked=true]:not(:hover) { + background-color: hsla(206,37%,4%,.4); +} + +.command-button > image { + -moz-appearance: none; + width: 16px; + height: 16px; + background-size: 64px 16px; + background-position: 0 center; + background-repeat: no-repeat; +} +.command-button:hover > image { + background-position: -16px center; +} +.command-button:hover:active > image { + background-position: -32px center; +} +.command-button[checked=true] > image { + background-position: -48px center; +} +.command-button[open=true] > image { + background-position: 0 center; +} + +#command-button-paintflashing > image { + background-image: url("chrome://global/skin/devtools/command-paintflashing.png"); +} + +#command-button-screenshot > image { + background-image: url("chrome://global/skin/devtools/command-screenshot.png"); +} + +#command-button-responsive > image { + background-image: url("chrome://global/skin/devtools/command-responsivemode.png"); +} + +#command-button-tilt > image { + background-image: url("chrome://global/skin/devtools/command-tilt.png"); +} + +#command-button-scratchpad > image { + background-image: url("chrome://global/skin/devtools/command-scratchpad.png"); + background-size: 48px 16px; +} + +#command-button-pick > image { + background-image: url("chrome://global/skin/devtools/command-pick.png"); +} + +#command-button-frames > image { + background-image: url("chrome://global/skin/devtools/command-frames.png"); +} + +#command-button-splitconsole > image { + background-image: url("chrome://global/skin/devtools/command-console.png"); +} + +#command-button-eyedropper > image { + background-image: url("chrome://global/skin/devtools/command-eyedropper.png"); +} + +@media (min-resolution: 2dppx) { + #command-button-paintflashing > image { + background-image: url("chrome://global/skin/devtools/command-paintflashing@2x.png"); + } + + #command-button-screenshot > image { + background-image: url("chrome://global/skin/devtools/command-screenshot@2x.png"); + } + + #command-button-responsive > image { + background-image: url("chrome://global/skin/devtools/command-responsivemode@2x.png"); + } + + #command-button-tilt > image { + background-image: url("chrome://global/skin/devtools/command-tilt@2x.png"); + } + + #command-button-scratchpad > image { + background-image: url("chrome://global/skin/devtools/command-scratchpad@2x.png"); + } + + #command-button-pick > image { + background-image: url("chrome://global/skin/devtools/command-pick@2x.png"); + } + + #command-button-frames > image { + background-image: url("chrome://global/skin/devtools/command-frames@2x.png"); + } + + #command-button-splitconsole > image { + background-image: url("chrome://global/skin/devtools/command-console@2x.png"); + } + + #command-button-eyedropper > image { + background-image: url("chrome://global/skin/devtools/command-eyedropper@2x.png"); + } +} + +/* Tabs */ + +.devtools-tabbar { + -moz-appearance: none; + min-height: 24px; + border: 0px solid; + border-bottom-width: 1px; + padding: 0; + background: var(--theme-tab-toolbar-background); + border-bottom-color: var(--theme-splitter-color); +} + +.theme-light .devtools-tabbar { + box-shadow: 0 -2px 0 rgba(170,170,170,.1) inset; +} + +.theme-dark .devtools-tabbar { + box-shadow: 0 -2px 0 rgba(0,0,0,.1) inset; +} + +#toolbox-tabs { + margin: 0; +} + +.devtools-tab { + -moz-appearance: none; + -moz-binding: url("chrome://global/content/bindings/general.xml#control-item"); + -moz-box-align: center; + min-width: 32px; + min-height: 24px; + max-width: 110px; + margin: 0; + padding: 0; + border-style: solid; + border-width: 0; + -moz-border-start-width: 1px; + -moz-box-align: center; +} + +.theme-dark .devtools-tab { + color: var(--theme-body-color-alt); + border-color: #42484f; +} + +.theme-light .devtools-tab { + color: var(--theme-body-color); + border-color: var(--theme-splitter-color); +} + +.theme-dark .devtools-tab:hover { + background-color: hsla(206,37%,4%,.2); + color: #ced3d9; +} + +.theme-light .devtools-tab:hover { + background-color: rgba(170,170,170,.2); +} + +.theme-dark .devtools-tab:hover:active { + background-color: hsla(206,37%,4%,.4); + color: var(--theme-selection-color); +} + +.theme-light .devtools-tab:hover:active { + background-color: rgba(170,170,170,.4); +} + +.theme-dark .devtools-tab:not([selected])[highlighted] { + background-color: hsla(99,100%,14%,.2); + box-shadow: 0 2px 0 #7bc107 inset; +} + +.theme-light .devtools-tab:not([selected])[highlighted] { + background-color: rgba(44, 187, 15, .2); +} + +.devtools-tab > image { + border: none; + -moz-margin-end: 0; + -moz-margin-start: 4px; + opacity: 0.6; + max-height: 16px; + width: 16px; /* Prevents collapse during theme switching */ +} + +.devtools-tab > label { + white-space: nowrap; +} + +.devtools-tab:hover > image { + opacity: 0.8; +} + +.devtools-tab:active > image, +.devtools-tab[selected] > image { + opacity: 1; +} + +.devtools-tabbar .devtools-tab[selected], +.devtools-tabbar .devtools-tab[selected]:hover:active { + color: var(--theme-selection-color); + background-color: var(--theme-selection-background); +} + +.theme-dark .devtools-tabbar .devtools-tab[selected] { + box-shadow: 0 2px 0 #d7f1ff inset, + 0 8px 3px -5px #2b82bf inset, + 0 -2px 0 rgba(0,0,0,.2) inset; +} + +.theme-light .devtools-tabbar .devtools-tab[selected] { + box-shadow: 0 2px 0 #d7f1ff inset, + 0 8px 3px -5px #2b82bf inset, + 0 -2px 0 rgba(0,0,0,.06) inset; +} + +#toolbox-tabs .devtools-tab[selected], +#toolbox-tabs .devtools-tab[highlighted] { + border-width: 0; + -moz-padding-start: 1px; +} + +#toolbox-tabs .devtools-tab[selected]:last-child, +#toolbox-tabs .devtools-tab[highlighted]:last-child { + -moz-padding-end: 1px; +} + +#toolbox-tabs .devtools-tab[selected] + .devtools-tab, +#toolbox-tabs .devtools-tab[highlighted] + .devtools-tab { + -moz-border-start-width: 0; + -moz-padding-start: 1px; +} + +#toolbox-tabs .devtools-tab:first-child[selected] { + -moz-border-start-width: 0; +} + +#toolbox-tabs .devtools-tab:last-child { + -moz-border-end-width: 1px; +} + +.devtools-tab:not([highlighted]) > .highlighted-icon, +.devtools-tab[selected] > .highlighted-icon, +.devtools-tab:not([selected])[highlighted] > .default-icon { + visibility: collapse; +} + +/* The options tab is special - it doesn't have the same parent + as the other tabs (toolbox-option-container vs toolbox-tabs) */ +#toolbox-option-container .devtools-tab:not([selected]) { + background-color: transparent; +} +#toolbox-option-container .devtools-tab { + border-color: transparent; + border-width: 0; + -moz-padding-start: 1px; +} +#toolbox-tab-options > image { + margin: 0 8px; +} + +/* Invert the colors of certain dark theme images for displaying + * inside of the light theme. + */ +.theme-light .devtools-tab[icon-invertable] > image, +.theme-light #toolbox-dock-buttons > toolbarbutton > image, +.theme-light .command-button-invertable > image, +.theme-light .command-button-invertable:active > image, +.theme-light .devtools-closebutton > image, +.theme-light .devtools-toolbarbutton > image, +.theme-light .devtools-option-toolbarbutton > image, +.theme-light #breadcrumb-separator-normal, +.theme-light .scrollbutton-up > .toolbarbutton-icon, +.theme-light .scrollbutton-down > .toolbarbutton-icon, +.theme-light #black-boxed-message-button .button-icon, +.theme-light .notice-container button .button-icon, +.theme-light #requests-menu-perf-notice-button .button-icon, +.theme-light #requests-menu-network-summary-button .button-icon, +.theme-light .event-tooltip-debugger-icon, +.theme-light .devtools-button::before { + filter: url(filters.svg#invert); +} + +/* Since selected backgrounds are blue, we want to use the normal + * (light) icons. */ +.theme-light .command-button-invertable[checked=true]:not(:active) > image, +.theme-light .devtools-tab[icon-invertable][selected] > image, +.theme-light .devtools-tab[icon-invertable][highlighted] > image, +.theme-light #record-snapshot[checked] > image, +.theme-light #profiler-start[checked] > image, +.theme-light .notice-container button[checked] .button-icon { + filter: none !important; +} + +.theme-light .command-button:hover { + background-color: inherit; +} + +.theme-light .command-button:hover:active, +.theme-light .command-button[checked=true]:not(:hover) { + background-color: inherit; +} + +.hidden-labels-box:not(.visible) > label, +.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child { + display: none; +} + +.devtools-invisible-splitter { + border-color: transparent; +} + +.devtools-horizontal-splitter { + border-bottom: 1px solid var(--theme-splitter-color); +} + +.devtools-side-splitter { + -moz-border-end: 1px solid var(--theme-splitter-color); + border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */ +} + +/* Throbbers */ +.devtools-throbber::before { + content: ""; + display: inline-block; + vertical-align: bottom; + -moz-margin-end: 0.5em; + width: 1em; + height: 1em; + border: 2px solid currentColor; + border-right-color: transparent; + border-radius: 50%; + animation: 1.1s linear throbber-spin infinite; +} + +@keyframes throbber-spin { + from { + transform: none; + } + to { + transform: rotate(360deg); + } +} diff --git a/src/chrome/browser/devtools/magnifying-glass-light.png b/src/chrome/global/devtools/magnifying-glass-light.png Binary files differ. diff --git a/src/chrome/browser/devtools/magnifying-glass-light@2x.png b/src/chrome/global/devtools/magnifying-glass-light@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/magnifying-glass.png b/src/chrome/global/devtools/magnifying-glass.png Binary files differ. diff --git a/src/chrome/browser/devtools/magnifying-glass@2x.png b/src/chrome/global/devtools/magnifying-glass@2x.png Binary files differ. diff --git a/src/chrome/appver/27/devtools/markup-view.css b/src/chrome/global/devtools/markup-view.css diff --git a/src/chrome/global/devtools/netmonitor.css b/src/chrome/global/devtools/netmonitor.css @@ -0,0 +1,881 @@ +/* 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/. */ + +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +#requests-menu-empty-notice { + margin: 0; + padding: 12px; + font-size: 120%; +} + +#notice-perf-message { + margin-top: 2px; +} + +#requests-menu-perf-notice-button { + min-width: 30px; + min-height: 26px; + margin: 0; + list-style-image: url(profiler-stopwatch.svg); +} + +#requests-menu-perf-notice-button .button-text { + display: none; +} + +#requests-menu-reload-notice-button { + min-height: 26px; + margin: 0; +} + + +/* Network requests table */ + +#requests-menu-toolbar { + padding: 0; +} + +.requests-menu-header:first-child, +.requests-menu-subitem:first-child { + -moz-padding-start: 6px; +} + +.requests-menu-subitem { + padding: 3px; +} + +.theme-dark .requests-menu-header:not(:last-child), +.theme-dark .requests-menu-subitem:not(:last-child) { + -moz-border-end: 1px solid rgba(0,0,0,0.2); + box-shadow: 1px 0 0 rgba(128,128,128,0.15); +} + +.theme-dark .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), +.theme-dark .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { + box-shadow: -1px 0 0 rgba(128,128,128,0.15); +} + +.theme-light .requests-menu-header:not(:last-child), +.theme-light .requests-menu-subitem:not(:last-child) { + -moz-border-end: 1px solid rgba(128,128,128,0.25); + box-shadow: 1px 0 0 transparent; +} + +.theme-light .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), +.theme-light .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { + box-shadow: -1px 0 0 transparent; +} + +.requests-menu-header-button { + -moz-appearance: none; + background: none; + min-width: 1px; + min-height: 24px; + margin: 0; + border: none; + padding: 0; + color: inherit; + font-weight: inherit !important; + transition: background-color 0.1s ease-in-out; +} + +.requests-menu-header-button:hover { + background: rgba(0,0,0,0.10); +} + +.requests-menu-header-button:hover:active { + background: rgba(0,0,0,0.25); +} + +.requests-menu-header-button:not(:active)[sorted] { + background: rgba(0,0,0,0.15); +} + +.requests-menu-header-button:not(:active)[sorted=ascending] { + background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); + background-size: 100% 1px; + background-repeat: no-repeat; +} + +.requests-menu-header-button:not(:active)[sorted=descending] { + background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); + background-size: 100% 1px; + background-repeat: no-repeat; + background-position: bottom; +} + +/* Network requests table: specific column dimensions */ + +.requests-menu-status-and-method { + width: 12em; +} + +.requests-menu-status { + width: 20px; + height: 10px; +} + +.requests-menu-method { + text-align: center; + font-weight: 600; +} + +.requests-menu-icon-and-file { + width: 20vw; + min-width: 4em; +} + +.requests-menu-icon { + background: #fff; + width: calc(1em + 4px); + height: calc(1em + 4px); + margin: -4px 0px; + -moz-margin-end: 4px; +} + +.theme-dark .requests-menu-icon { + outline: 1px solid rgba(0,0,0,0.2); +} + +.theme-light .requests-menu-icon { + outline: 1px solid rgba(128,128,128,0.25); +} + +.requests-menu-file { + text-align: start; +} + +.requests-menu-security-and-domain { + width: 14vw; + min-width: 10em; +} + +.requests-security-state-icon { + -moz-margin-end: 4px; + -moz-image-region:rect(0px, 16px, 16px, 0px); +} + +.requests-security-state-icon:hover { + -moz-image-region: rect(0px, 32px, 16px, 16px); +} + +.requests-security-state-icon:active { + -moz-image-region: rect(0px, 48px, 16px, 32px); +} + +.security-state-insecure { + list-style-image: url(chrome://browser/skin/identity-icons-generic.png); +} + +.security-state-secure { + cursor: pointer; + list-style-image: url(chrome://browser/skin/identity-icons-https.png); +} + +.security-state-weak { + cursor: pointer; + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); +} + +.security-state-broken { + cursor: pointer; + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); +} + +.requests-menu-type { + text-align: center; + width: 4em; +} + +.requests-menu-size { + text-align: center; + width: 8em; +} + +.requests-menu-transferred { + text-align: center; + width: 8em; +} + +/* Network requests table: status codes */ + +box.requests-menu-status { + background: #fff; + width: 10px; + -moz-margin-start: 5px; + -moz-margin-end: 5px; + border-radius: 10px; + transition: box-shadow 0.5s ease-in-out; +} + +label.requests-menu-status-code { + -moz-margin-start: 3px !important; + width: 3em; + -moz-margin-end: -3em !important; +} + +.theme-dark box.requests-menu-status:not([code]) { + background-color: rgba(95, 115, 135, 1); /* dark grey */ +} + +.theme-light box.requests-menu-status:not([code]) { + background-color: rgba(143, 161, 178, 1); /* grey */ +} + +.theme-dark box.requests-menu-status[code^="1"] { + background-color: rgba(70, 175, 227, 1); /* light blue */ +} + +.theme-light box.requests-menu-status[code^="1"] { + background-color: rgba(0, 136, 204, 1); /* light blue */ +} + +.theme-dark box.requests-menu-status[code^="2"] { + background-color: rgba(112, 191, 83, 1); /* green */ +} + +.theme-light box.requests-menu-status[code^="2"] { + background-color: rgba(44, 187, 15, 1); /* green */ +} + +/* 3xx are triangles */ +.theme-dark box.requests-menu-status[code^="3"] { + background-color: transparent; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 10px solid rgba(217, 155, 40, 1); /* light orange */ + border-radius: 0; +} + +.theme-light box.requests-menu-status[code^="3"] { + background-color: transparent; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 10px solid rgba(217, 126, 0, 1); /* light orange */ + border-radius: 0; +} + +/* 4xx and 5xx are squares - error codes */ +.theme-dark box.requests-menu-status[code^="4"] { + background-color: rgba(235, 83, 104, 1); /* red */ + border-radius: 0; /* squares */ +} + +.theme-light box.requests-menu-status[code^="4"] { + background-color: rgba(237, 38, 85, 1); /* red */ + border-radius: 0; /* squares */ +} + +.theme-dark box.requests-menu-status[code^="5"] { + background-color: rgba(223, 128, 255, 1); /* pink? */ + border-radius: 0; + transform: rotate(45deg); +} + +.theme-light box.requests-menu-status[code^="5"] { + background-color: rgba(184, 46, 229, 1); /* pink! */ + border-radius: 0; + transform: rotate(45deg); +} + +/* Network requests table: waterfall header */ + +#requests-menu-waterfall-label { + -moz-padding-start: 8px; + -moz-padding-end: 8px; +} + +.requests-menu-timings-division { + width: 100px; + padding-top: 2px; + -moz-padding-start: 4px; + font-size: 75%; + pointer-events: none; +} + +.requests-menu-timings-division:not(:first-child) { + -moz-border-start: 1px dotted; + -moz-margin-start: -100px !important; /* Don't affect layout. */ +} + +.requests-menu-timings-division:-moz-locale-dir(ltr) { + transform-origin: left center; +} + +.requests-menu-timings-division:-moz-locale-dir(rtl) { + transform-origin: right center; +} + +.theme-dark .requests-menu-timings-division[division-scale=millisecond] { + -moz-border-start-color: var(--theme-selection-color) !important; +} + +.theme-light .requests-menu-timings-division[division-scale=millisecond] { + -moz-border-start-color: var(--theme-body-color-alt) !important; +} + +.theme-dark .requests-menu-timings-division[division-scale=second] { + -moz-border-start-color: var(--theme-selection-color) !important; + font-weight: 600; +} + +.theme-light .requests-menu-timings-division[division-scale=second] { + -moz-border-start-color: var(--theme-body-color-alt) !important; + font-weight: 600; +} + +.theme-dark .requests-menu-timings-division[division-scale=minute] { + -moz-border-start-color: var(--theme-selection-color) !important; + font-weight: 600; +} + +.theme-light .requests-menu-timings-division[division-scale=minute] { + -moz-border-start-color: var(--theme-body-color-alt) !important; + font-weight: 600; +} + +/* Network requests table: waterfall items */ + +.requests-menu-subitem.requests-menu-waterfall { + -moz-padding-start: 0px; + -moz-padding-end: 4px; + /* Background created on a <canvas> in js. */ + /* @see browser/devtools/netmonitor/netmonitor-view.js */ + background-image: -moz-element(#waterfall-background); + background-repeat: repeat-y; + background-position: -1px center; +} + +.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) { + background-position: right center; +} + +.requests-menu-timings:-moz-locale-dir(ltr) { + transform-origin: left center; +} + +.requests-menu-timings:-moz-locale-dir(rtl) { + transform-origin: right center; +} + +.requests-menu-timings-total:-moz-locale-dir(ltr) { + transform-origin: left center; +} + +.requests-menu-timings-total:-moz-locale-dir(rtl) { + transform-origin: right center; +} + +.requests-menu-timings-total { + -moz-padding-start: 4px; + font-size: 85%; + font-weight: 600; +} + +.requests-menu-timings-box { + height: 9px; +} + +.requests-menu-timings-box.blocked { + background-color: rgba(235, 83, 104, 0.8); /* red */ +} + +.requests-menu-timings-box.dns { + background-color: rgba(223, 128, 255, 0.8); /* pink */ +} + +.requests-menu-timings-box.connect { + background-color: rgba(217, 102, 41, 0.8); /* orange */ +} + +/* Use custom colors for dark and light theme on remaining timing types. */ +.theme-dark .requests-menu-timings-box.send { + background-color: rgba(70, 175, 227, 0.8); /* light blue */ +} + +.theme-light .requests-menu-timings-box.send { + background-color: rgba(0, 136, 204, 0.8); /* blue */ +} + +.theme-dark .requests-menu-timings-box.wait { + background-color: rgba(94, 136, 176, 0.8); /* blue grey */ +} + +.theme-light .requests-menu-timings-box.wait { + background-color: rgba(95, 136, 176, 0.8); /* blue grey */ +} + +.theme-dark .requests-menu-timings-box.receive { + background-color: rgba(112, 191, 83, 0.8); /* green */ +} + +.theme-light .requests-menu-timings-box.receive { + background-color: rgba(44, 187, 15, 0.8); /* green */ +} + +/* SideMenuWidget */ + +.side-menu-widget-item-contents { + padding: 0px; +} + +.theme-dark .side-menu-widget-item:not(.selected)[odd] { + background: rgba(255,255,255,0.05); +} + +.theme-light .side-menu-widget-item:not(.selected)[odd] { + background: rgba(128,128,128,0.05); +} + +/* Network request details */ + +#details-pane-toggle { + background: none; + box-shadow: none; + border-color: transparent; + list-style-image: url("chrome://global/skin/devtools/debugger-collapse.png"); + -moz-image-region: rect(0px,16px,16px,0px); +} + +#details-pane-toggle > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#details-pane-toggle[pane-collapsed] { + list-style-image: url("chrome://global/skin/devtools/debugger-expand.png"); +} + +#details-pane-toggle:active { + -moz-image-region: rect(0px,32px,16px,16px); +} + +@media (min-resolution: 2dppx) { + #details-pane-toggle { + list-style-image: url("chrome://global/skin/devtools/debugger-collapse@2x.png"); + -moz-image-region: rect(0px,32px,32px,0px); + } + + #details-pane-toggle[pane-collapsed] { + list-style-image: url("chrome://global/skin/devtools/debugger-expand@2x.png"); + } + + #details-pane-toggle:active { + -moz-image-region: rect(0px,64px,32px,32px); + } +} + +/* Network request details tabpanels */ + +.theme-dark .tabpanel-content { + background-color: var(--theme-toolbar-background); + color: var(--theme-selection-color); +} + +/* Summary tabpanel */ + +.tabpanel-summary-container { + padding: 1px; +} + +.tabpanel-summary-label { + -moz-padding-start: 4px; + -moz-padding-end: 3px; + font-weight: 600; +} + +.tabpanel-summary-value { + color: inherit; + -moz-padding-start: 3px; +} + +/* Headers tabpanel */ + +#headers-summary-status, +#headers-summary-version { + padding-bottom: 2px; +} + +#headers-summary-size { + padding-top: 2px; +} + +#headers-summary-resend { + margin-top: -10px; + -moz-margin-end: 6px; +} + +#toggle-raw-headers { + margin-top: -10px; + -moz-margin-end: 6px; +} + +.raw-response-textarea { + height: 50vh; +} + +/* Response tabpanel */ + +#response-content-info-header { + margin: 0; + padding: 3px 8px; + background-color: var(--theme-highlight-red); + color: var(--theme-selection-color); +} + +#response-content-image-box { + padding-top: 10px; + padding-bottom: 10px; +} + +#response-content-image { + background: #fff; + border: 1px dashed GrayText; + margin-bottom: 10px; +} + +/* Preview tabpanel */ + +#preview-tabpanel { + background: #fff; +} + +#response-preview { + display: -moz-box; + -moz-box-flex: 1; +} + +/* Timings tabpanel */ + +#timings-tabpanel .tabpanel-summary-label { + width: 10em; +} + +#timings-tabpanel .requests-menu-timings-box { + transition: transform 0.2s ease-out; + border: none; + min-width: 1px; +} + +#timings-tabpanel .requests-menu-timings-total { + transition: transform 0.2s ease-out; +} + +/* Security tabpanel */ +.security-info-section { + -moz-padding-start: 1em; +} + +#security-tabpanel { + overflow: auto; +} + +.security-warning-icon { + background-image: url(alerticon-warning.png); + background-size: 13px 12px; + -moz-margin-start: 5px; + vertical-align: top; + width: 13px; + height: 12px; +} + +@media (min-resolution: 2dppx) { + .security-warning-icon { + background-image: url(alerticon-warning@2x.png); + } +} + +/* Custom request form */ + +#custom-pane { + padding: 0.6em 0.5em; +} + +.custom-header { + font-size: 1.1em; +} + +.custom-section { + margin-top: 0.5em; +} + +#custom-method-value { + width: 4.5em; +} + +/* Footer */ + +.theme-dark #requests-menu-footer { + border-top: 1px solid rgba(0,0,0,0.2); + box-shadow: 0 1px 0 rgba(128,128,128,0.15) inset; + background-color: var(--theme-toolbar-background); +} + +.theme-light #requests-menu-footer { + border-top: 1px solid rgba(128,128,128,0.25); + box-shadow: 0 1px 0 transparent inset; + background-color: var(--theme-toolbar-background); +} + +.requests-menu-footer-button, +.requests-menu-footer-label { + min-width: 1em; + margin: 0; + border: none; + padding: 2px 1vw; +} + +.theme-dark .requests-menu-footer-button, +.theme-dark .requests-menu-footer-label { + color: var(--theme-selection-color); +} + +.theme-light .requests-menu-footer-button, +.theme-light .requests-menu-footer-label { + color: var(--theme-body-color); +} + +.requests-menu-footer-spacer { + min-width: 2px; +} + +.theme-dark .requests-menu-footer-spacer:not(:first-child), +.theme-dark .requests-menu-footer-button:not(:first-child) { + -moz-border-start: 1px solid rgba(128,128,128,0.15); + box-shadow: -1px 0 0 rgba(0,0,0,0.2); +} + +.theme-light .requests-menu-footer-spacer:not(:first-child), +.theme-light .requests-menu-footer-button:not(:first-child) { + -moz-border-start: 1px solid transparent; + box-shadow: -1px 0 0 rgba(128,128,128,0.25); +} + +.requests-menu-footer-button { + -moz-appearance: none; + background: rgba(0,0,0,0.025); +} + +.requests-menu-footer-button:hover { + background: rgba(0,0,0,0.10); +} + +.theme-dark .requests-menu-footer-button:hover:active { + background-color: rgba(29,79,115,0.4); /* Select Highlight Blue at 40% opacity */ +} + +.theme-light .requests-menu-footer-button:hover:active { + background-color: rgba(76,158,217,0.4); /* Select Highlight Blue at 40% opacity */ +} + +.theme-dark .requests-menu-footer-button:not(:active)[checked] { + background-color: rgba(29,79,115,1); /* Select Highlight Blue */ + color: rgba(245,247,250,1); /* Light foreground text */ +} + +.theme-light .requests-menu-footer-button:not(:active)[checked] { + background-color: rgba(76,158,217,1); /* Select Highlight Blue */ + color: rgba(245,247,250,1); /* Light foreground text */ +} + +.requests-menu-footer-label { + padding-top: 3px; + font-weight: 600; +} + +/* Performance analysis buttons */ + +#requests-menu-network-summary-button { + background: none; + box-shadow: none; + border-color: transparent; + list-style-image: url(profiler-stopwatch.svg); + -moz-padding-end: 0; + cursor: pointer; +} + +#requests-menu-network-summary-label { + -moz-padding-start: 0; + cursor: pointer; +} + +#requests-menu-network-summary-label:hover { + text-decoration: underline; +} + +/* Performance analysis view */ + +#network-statistics-toolbar { + border: none; + margin: 0; + padding: 0; +} + +#network-statistics-back-button { + min-width: 4em; + min-height: 100vh; + margin: 0; + padding: 0; + border-radius: 0; + border-top: none; + border-bottom: none; + -moz-border-start: none; +} + +#network-statistics-view-splitter { + border-color: rgba(0,0,0,0.2); + cursor: default; + pointer-events: none; +} + +#network-statistics-charts { + min-height: 1px; +} + +#network-statistics-charts { + background-color: var(--theme-toolbar-background); +} + +#network-statistics-charts .pie-chart-container { + -moz-margin-start: 3vw; + -moz-margin-end: 1vw; +} + +#network-statistics-charts .table-chart-container { + -moz-margin-start: 1vw; + -moz-margin-end: 3vw; +} + +.chart-colored-blob[name=html] { + fill: var(--theme-highlight-bluegrey); + background: var(--theme-highlight-bluegrey); +} + +.chart-colored-blob[name=css] { + fill: var(--theme-highlight-blue); + background: var(--theme-highlight-blue); +} + +.chart-colored-blob[name=js] { + fill: var(--theme-highlight-lightorange); + background: var(--theme-highlight-lightorange); +} + +.chart-colored-blob[name=xhr] { + fill: var(--theme-highlight-orange); + background: var(--theme-highlight-orange); +} + +.chart-colored-blob[name=fonts] { + fill: var(--theme-highlight-purple); + background: var(--theme-highlight-purple); +} + +.chart-colored-blob[name=images] { + fill: var(--theme-highlight-pink); + background: var(--theme-highlight-pink); +} + +.chart-colored-blob[name=media] { + fill: var(--theme-highlight-green); + background: var(--theme-highlight-green); +} + +.chart-colored-blob[name=flash] { + fill: var(--theme-highlight-red); + background: var(--theme-highlight-red); +} + +.table-chart-row-label[name=cached] { + display: none; +} + +.table-chart-row-label[name=count] { + width: 3em; + text-align: end; +} + +.table-chart-row-label[name=label] { + width: 7em; +} + +.table-chart-row-label[name=size] { + width: 7em; +} + +.table-chart-row-label[name=time] { + width: 7em; +} + +/* Responsive sidebar */ +@media (max-width: 700px) { + #requests-menu-toolbar { + height: 22px; + } + + .requests-menu-header-button { + min-height: 20px; + } + + #details-pane { + margin: 0 !important; + /* To prevent all the margin hacks to hide the sidebar. */ + } + + .requests-menu-status-and-method { + width: 16vw; + } + + .requests-menu-icon-and-file { + width: 30vw; + } + + .requests-menu-security-and-domain { + width: 30vw; + } + + .requests-menu-type { + width: 8vw; + } + + .requests-menu-size { + width: 16vw; + border-width: 0 !important; + box-shadow: none !important; + /* The "Timeline" header is not visible anymore, and thus the + right border and box-shadow of "Size" column should be hidden. */ + } +} + +.requests-menu-header-button > .button-box { + padding: 0; +} + +.requests-menu-timings-division { + padding-top: 1px; + font-size: 90%; +} + +.requests-menu-footer-button, +.requests-menu-footer-label { + padding-top: 0px; + padding-bottom: 0px; +} + +/* Responsive sidebar */ +@media (max-width: 700px) { + .requests-menu-footer-button, + .requests-menu-footer-label { + padding-top: 0px; + padding-bottom: 0px; + } +} diff --git a/src/chrome/browser/devtools/newtab-inverted.png b/src/chrome/global/devtools/newtab-inverted.png Binary files differ. diff --git a/src/chrome/browser/devtools/newtab-inverted@2x.png b/src/chrome/global/devtools/newtab-inverted@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/newtab.png b/src/chrome/global/devtools/newtab.png Binary files differ. diff --git a/src/chrome/browser/devtools/newtab@2x.png b/src/chrome/global/devtools/newtab@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/noise.png b/src/chrome/global/devtools/noise.png Binary files differ. diff --git a/src/chrome/browser/devtools/performance-icons.svg b/src/chrome/global/devtools/performance-icons.svg diff --git a/src/chrome/browser/devtools/performance.css b/src/chrome/global/devtools/performance.css diff --git a/src/chrome/browser/devtools/power.svg b/src/chrome/global/devtools/power.svg diff --git a/src/chrome/browser/devtools/profiler-stopwatch-checked.svg b/src/chrome/global/devtools/profiler-stopwatch-checked.svg diff --git a/src/chrome/browser/devtools/profiler-stopwatch.svg b/src/chrome/global/devtools/profiler-stopwatch.svg diff --git a/src/chrome/global/devtools/profiler.css b/src/chrome/global/devtools/profiler.css @@ -0,0 +1,398 @@ +/* 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/. */ + +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +/* CSS Variables specific to this panel that aren't defined by the themes */ +.theme-dark { + --cell-border-color: rgba(255,255,255,0.15); + --focus-cell-border-color: rgba(0,0,0,0.3); + --row-alt-background-color: rgba(29,79,115,0.15); + --row-hover-background-color: rgba(29,79,115,0.25); + --tab-hover-background-color: rgba(0,0,0,0.3); +} + +.theme-light { + --cell-border-color: rgba(0,0,0,0.15); + --focus-cell-border-color: rgba(255,255,255,0.5); + --row-alt-background-color: rgba(76,158,217,0.1); + --row-hover-background-color: rgba(76,158,217,0.2); + --tab-hover-background-color: rgba(255,255,255,0.8); +} + +/* Reload and waiting notices */ + +.notice-container { + margin-top: -50vh; + font-size: 120%; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color-alt); +} + +#empty-notice button, +#recording-notice button { + min-width: 30px; + min-height: 28px; + margin: 0; + list-style-image: url(profiler-stopwatch.svg); +} + +#empty-notice button[checked], +#recording-notice button[checked] { + list-style-image: url(profiler-stopwatch-checked.svg); +} + +#empty-notice button .button-text, +#recording-notice button .button-text { + display: none; +} + +.theme-dark #loading-notice { + font-size: 250%; + color: rgba(255,255,255,0.2); +} + +.theme-light #loading-notice { + font-size: 250%; + color: rgba(0,0,0,0.2); +} + +/* Recordings pane */ + +#recordings-pane > tabs, +#recordings-pane .devtools-toolbar { + -moz-border-end-width: 1px; +} + +#recordings-pane > tabs, +#recordings-pane .devtools-toolbar { + -moz-border-end-color: var(--theme-splitter-color); +} + +#record-button { + list-style-image: url(profiler-stopwatch.svg); +} + +#record-button[checked] { + list-style-image: url(profiler-stopwatch-checked.svg); +} + +#record-button[locked] { + pointer-events: none; +} + +/* Recording items */ + +.recording-item { + padding: 4px; +} + +.recording-item-title { + font-size: 110%; +} + +.recording-item-footer { + padding-top: 4px; + font-size: 90%; +} + +.recording-item-save { + text-decoration: underline; + cursor: pointer; +} + +.recording-item-duration, +.recording-item-save { + color: var(--theme-body-color-alt); +} + +#recordings-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} + +/* Profile pane */ + +#profile-content tabs { + -moz-box-align: stretch; + height: 24px; + font: inherit; +} + +#profile-content tab { + -moz-box-flex: 0; + background-color: transparent; + border: none; + border-radius: 0; + padding: 0; + text-shadow: none; + transition-duration: 0.25s; + transition-timing-function: ease-in-out; + transition-property: opacity, transform; +} + +#profile-content tab { + color: var(--theme-body-color); +} + +#profile-content tab:not([selected]) { + cursor: pointer; +} + +#profile-content tab[covered] { + opacity: 0; + transform: translateY(100%); +} + +#profile-content tab { + -moz-appearance: none; + -moz-border-end: 1px solid var(--theme-splitter-color); +} + +#profile-content tab:hover { + background-color: var(--tab-hover-background-color); +} + +#profile-content tab[selected] { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +#profile-content tabpanel { + -moz-box-orient: vertical; + transform: translateZ(1px); /* Make sure the tabpanel appears above the tab */ +} + +#profile-newtab-button { + -moz-appearance: none; + background-color: transparent; + background-position: 4px 2px; + background-size: 54px 20px; + min-width: 26px; + margin: 0; + border: none; + cursor: pointer; +} + +.theme-dark #profile-newtab-button { + background-color: rgba(112,191,83,0.2); +} + +.theme-light #profile-newtab-button { + background-color: rgba(44,187,15,0.2); +} + +.theme-dark #profile-newtab-button { + background-image: url(newtab-inverted.png); +} + +.theme-light #profile-newtab-button { + background-image: url(newtab.png); +} + +@media (min-resolution: 2dppx) { + .theme-dark #profile-newtab-button { + background-image: url(newtab-inverted@2x.png); + } + + .theme-light #profile-newtab-button { + background-image: url(newtab@2x.png); + } +} + +#profile-newtab-button:hover { + background-position: 40px 2px; +} + +#profile-newtab-button:hover:active { + background-position: 22px 2px; +} + +/* Profile call tree */ + +.call-tree-headers-container { + border-top: 1px solid var(--theme-splitter-color); +} + +.call-tree-cells-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); + overflow: auto; +} + +.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="allocations"], +.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="self-allocations"], +.call-tree-cells-container[categories-hidden] .call-tree-category { + display: none; +} + +.call-tree-header[type="duration"], +.call-tree-cell[type="duration"], +.call-tree-header[type="self-duration"], +.call-tree-cell[type="self-duration"] { + width: 9em; +} + +.call-tree-header[type="percentage"], +.call-tree-cell[type="percentage"], +.call-tree-header[type="self-percentage"], +.call-tree-cell[type="self-percentage"] { + width: 6em; +} + +.call-tree-header[type="samples"], +.call-tree-cell[type="samples"] { + width: 5em; +} + +.call-tree-header[type="function"], +.call-tree-cell[type="function"] { + -moz-box-flex: 1; +} + +.call-tree-header, +.call-tree-cell { + -moz-box-align: center; + overflow: hidden; + padding: 1px 4px; + color: var(--theme-body-color); +} + +.call-tree-header:not(:last-child), +.call-tree-cell:not(:last-child) { + -moz-border-end-width: 1px; + -moz-border-end-style: solid; +} + +.call-tree-header, +.call-tree-cell { + -moz-border-end-color: var(--cell-border-color); +} + +.call-tree-header:not(:last-child) { + text-align: center; +} + +.call-tree-cell:not(:last-child) { + text-align: end; +} + +.call-tree-header { + background-color: var(--theme-tab-toolbar-background); +} + +.call-tree-item:last-child:not(:focus) { + border-bottom: 1px solid var(--cell-border-color); +} + +.call-tree-item:nth-child(2n) { + background-color: var(--row-alt-background-color); +} + +.call-tree-item:hover { + background-color: var(--row-hover-background-color); +} + +.call-tree-item:focus { + background-color: var(--theme-selection-background); +} + +.call-tree-item:focus label { + color: var(--theme-selection-color) !important; +} + +.call-tree-item:focus .call-tree-cell { + -moz-border-end-color: var(--focus-cell-border-color); +} + +.call-tree-item:not([origin="content"]) .call-tree-name, +.call-tree-item:not([origin="content"]) .call-tree-url, +.call-tree-item:not([origin="content"]) .call-tree-line, +.call-tree-item:not([origin="content"]) .call-tree-column { + /* Style chrome and non-JS nodes differently. */ + opacity: 0.6; +} + +.call-tree-url { + -moz-margin-start: 4px !important; + cursor: pointer; +} + +.call-tree-url:hover { + text-decoration: underline; +} + +.call-tree-url { + color: var(--theme-highlight-blue); +} + +.call-tree-line { + color: var(--theme-highlight-orange); +} + +.call-tree-column { + color: var(--theme-highlight-orange); + opacity: 0.6; +} + +.call-tree-host { + -moz-margin-start: 8px !important; + font-size: 90%; + color: var(--theme-content-color2); +} + +.call-tree-name[value=""], +.call-tree-url[value=""], +.call-tree-line[value=""], +.call-tree-column[value=""], +.call-tree-host[value=""] { + display: none; +} + +.call-tree-zoom { + -moz-appearance: none; + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + background-size: 11px; + min-width: 11px; + -moz-margin-start: 8px !important; + cursor: zoom-in; + opacity: 0; +} + +.theme-dark .call-tree-zoom { + background-image: url(magnifying-glass.png); +} + +.theme-light .call-tree-zoom { + background-image: url(magnifying-glass-light.png); +} + +@media (min-resolution: 2dppx) { + .theme-dark .call-tree-zoom { + background-image: url(magnifying-glass@2x.png); + } + + .theme-light .call-tree-zoom { + background-image: url(magnifying-glass-light@2x.png); + } +} + +.call-tree-item:hover .call-tree-zoom { + transition: opacity 0.3s ease-in; + opacity: 1; +} + +.call-tree-item:hover .call-tree-zoom:hover { + opacity: 0; +} + +.call-tree-category { + transform: scale(0.75); + transform-origin: center right; +} diff --git a/src/chrome/browser/devtools/projecteditor/projecteditor.css b/src/chrome/global/devtools/projecteditor/projecteditor.css diff --git a/src/chrome/global/devtools/responsive-horizontal-resizer.png b/src/chrome/global/devtools/responsive-horizontal-resizer.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsive-horizontal-resizer@2x.png b/src/chrome/global/devtools/responsive-horizontal-resizer@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/responsive-se-resizer.png b/src/chrome/global/devtools/responsive-se-resizer.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsive-se-resizer@2x.png b/src/chrome/global/devtools/responsive-se-resizer@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/responsive-vertical-resizer.png b/src/chrome/global/devtools/responsive-vertical-resizer.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsive-vertical-resizer@2x.png b/src/chrome/global/devtools/responsive-vertical-resizer@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsiveui-home.png b/src/chrome/global/devtools/responsiveui-home.png Binary files differ. diff --git a/src/chrome/global/devtools/responsiveui-rotate.png b/src/chrome/global/devtools/responsiveui-rotate.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsiveui-rotate@2x.png b/src/chrome/global/devtools/responsiveui-rotate@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/responsiveui-screenshot.png b/src/chrome/global/devtools/responsiveui-screenshot.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsiveui-screenshot@2x.png b/src/chrome/global/devtools/responsiveui-screenshot@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/responsiveui-touch.png b/src/chrome/global/devtools/responsiveui-touch.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsiveui-touch@2x.png b/src/chrome/global/devtools/responsiveui-touch@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/ruleview.css b/src/chrome/global/devtools/ruleview.css @@ -0,0 +1,232 @@ +/* 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/. */ + +.ruleview { + height: 100%; +} + +.ruleview-rule-source { + -moz-padding-start: 5px; + text-align: end; + float: right; + -moz-user-select: none; +} + +.ruleview-rule-source, +.ruleview-rule-source > label { + cursor: pointer; +} + +.ruleview-rule-source[unselectable], +.ruleview-rule-source[unselectable] > label { + cursor: default; +} + +.ruleview-rule-source:not([unselectable]):hover { + text-decoration: underline; +} + +.ruleview-header { + border-top-width: 1px; + border-bottom-width: 1px; + border-top-style: solid; + border-bottom-style: solid; + padding: 1px 4px; + -moz-user-select: none; + word-wrap: break-word; + margin-top: 4px; +} + +.ruleview-rule-pseudo-element { + padding-left:20px; + border-left: solid 10px; +} + +.ruleview-rule, +#noResults { + padding: 2px 4px; +} + +/* User agent styles are not editable, display them differently */ +.ruleview-rule[uneditable=true] { + background: var(--theme-tab-toolbar-background); +} + +.ruleview-rule[uneditable=true] :focus { + outline: none; +} + +.ruleview-rule[uneditable=true] .theme-link { + color: var(--theme-highlight-bluegrey); +} + +.ruleview-rule[uneditable=true] .ruleview-enableproperty { + visibility: hidden; +} + +.ruleview-rule[uneditable=true] .ruleview-colorswatch, +.ruleview-rule[uneditable=true] .ruleview-bezierswatch { + cursor: default; +} + + +.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname, +.ruleview-rule[uneditable=true] .ruleview-propertycontainer > .ruleview-propertyvalue { + border-bottom-color: transparent; +} + +#noResults { + font: message-box; + color: GrayText; +} + +.ruleview-rule + .ruleview-rule { + border-top-width: 1px; + border-top-style: dotted; +} + +.ruleview-warning { + background-image: url(alerticon-warning.png); + background-size: 13px 12px; + -moz-margin-start: 5px; + display: inline-block; + vertical-align: top; + width: 13px; + height: 12px; +} + + +@media (min-resolution: 2dppx) { + .ruleview-warning { + background-image: url(alerticon-warning@2x.png); + } +} + +.ruleview-ruleopen { + -moz-padding-end: 5px; +} + +.ruleview-ruleclose { + cursor: text; + padding-right: 20px; +} + +.ruleview-propertylist { + list-style: none; + padding: 0; + margin: 0; +} + +.ruleview-rule:not(:hover) .ruleview-enableproperty { + visibility: hidden; +} + +.ruleview-expander { + display: inline-block; +} + +.ruleview-newproperty { + /* (enable checkbox width: 12px) + (expander width: 15px) */ + -moz-margin-start: 27px; +} + +.ruleview-namecontainer, +.ruleview-propertycontainer, +.ruleview-propertyname, +.ruleview-propertyvalue { + text-decoration: inherit; +} + +.ruleview-computedlist { + list-style: none; + padding: 0; +} + +.ruleview-computed { + -moz-margin-start: 35px; +} + +.ruleview-colorswatch, +.ruleview-bezierswatch { + cursor: pointer; + border-radius: 50%; + width: 1em; + height: 1em; + vertical-align: text-top; + -moz-margin-end: 5px; + display: inline-block; + position: relative; +} + +.ruleview-colorswatch::before { + content: ''; + background-color: #eee; + background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), + linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); + background-size: 12px 12px; + background-position: 0 0, 6px 6px; + position: absolute; + border-radius: 50%; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; +} + +.ruleview-bezierswatch { + background: url("chrome://global/skin/devtools/cubic-bezier-swatch.png"); + background-size: 1em; +} + +@media (min-resolution: 2dppx) { + .ruleview-bezierswatch { + background: url("chrome://global/skin/devtools/cubic-bezier-swatch@2x.png"); + background-size: 1em; + } +} + +.ruleview-overridden { + text-decoration: line-through; +} + +.theme-light .ruleview-overridden { + text-decoration-color: var(--theme-content-color3); +} + +.styleinspector-propertyeditor { + border: 1px solid #CCC; + padding: 0; +} + +.ruleview-property { + border-left: 3px solid transparent; + clear: right; +} + +.ruleview-property > * { + vertical-align: middle; +} + +.ruleview-property[dirty] { + border-left-color: var(--theme-highlight-green); +} + +.ruleview-namecontainer > .ruleview-propertyname, +.ruleview-propertycontainer > .ruleview-propertyvalue { + border-bottom: 1px dashed transparent; +} + +.ruleview-namecontainer:hover > .ruleview-propertyname, +.ruleview-propertycontainer:hover > .ruleview-propertyvalue { + border-bottom-color: hsl(0,0%,50%); +} + +.ruleview-selector { + word-wrap: break-word; +} + +.ruleview-selector-separator, .ruleview-selector-unmatched { + color: #888; +} diff --git a/src/chrome/appver/26/devtools/scratchpad.css b/src/chrome/global/devtools/scratchpad.css diff --git a/src/chrome/global/devtools/shadereditor.css b/src/chrome/global/devtools/shadereditor.css @@ -0,0 +1,123 @@ +/* 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/. */ + +/* 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/. */ + +/* Reload and waiting notices */ + +.notice-container { + margin-top: -50vh; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color-alt); +} + +#reload-notice { + font-size: 120%; +} + +#waiting-notice { + font-size: 110%; +} + +/* Shaders pane */ + +#shaders-pane { + min-width: 150px; +} + +#shaders-pane + .devtools-side-splitter { + border-color: transparent; +} + +.program-item { + padding: 2px 0px; +} + +.side-menu-widget-item-checkbox { + -moz-appearance: none; + opacity: 0; + transition: opacity .15s ease-out 0s; +} + +/* Only show the checkbox when the source is hovered over, is selected, or if it + * is not checked. */ +.side-menu-widget-item:hover > .side-menu-widget-item-checkbox, +.side-menu-widget-item.selected > .side-menu-widget-item-checkbox, +.side-menu-widget-item-checkbox:not([checked]) { + opacity: 1; + transition: opacity .15s ease-out 0s; +} + +.side-menu-widget-item-checkbox .checkbox-check { + -moz-appearance: none; + background-image: url(itemToggle.png); + background-color: transparent; + background-repeat: no-repeat; + background-clip: content-box; + background-size: 32px 16px; + background-position: -16px 0; + width: 16px; + height: 16px; + border: 0; +} + +@media (min-resolution: 2dppx) { + .side-menu-widget-item-checkbox .checkbox-check { + background-image: url(itemToggle@2x.png); + } +} + +.side-menu-widget-item-checkbox[checked] .checkbox-check { + background-position: 0 0; +} + +/* Invert all toggle icons but the one in the active row for light theme */ +.theme-light .side-menu-widget-item:not(.selected) .checkbox-check { + filter: url(filters.svg#invert); +} + +/* Shader source editors */ + +.editor-label { + padding: 1px 12px; + border-top: 1px solid; +} + +.editor-label { + background: var(--theme-toolbar-background); + border-color: var(--theme-splitter-color); + color: var(--theme-body-color-alt); +} + +.editor-label[selected] { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +/* Responsive sidebar */ + +@media (max-width: 700px) { + #shaders-pane { + max-height: 60vh; + } + + #editors-splitter { + border-color: transparent; + } + + .side-menu-widget-container { + box-shadow: none !important; + } + + .side-menu-widget-item-arrow { + background-image: none !important; + } + + .editor-label { + -moz-box-ordinal-group: 0; + border-bottom: 1px solid; + } +} diff --git a/src/chrome/global/devtools/splitview.css b/src/chrome/global/devtools/splitview.css @@ -0,0 +1,152 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + + +.splitview-nav-container .devtools-throbber { + display: none; + text-align: center; +} + +.loading .splitview-nav-container .devtools-throbber { + display: block; +} + +.theme-dark .splitview-nav-container { + background-color: var(--theme-toolbar-background); +} + +.splitview-nav { + -moz-appearance: none; + list-style-image: none; + list-style: none; + padding: 0; + margin: 0; +} + +.theme-dark .splitview-nav { + box-shadow: inset -1px 0 0 #000; +} + +.theme-dark .splitview-nav:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #000; +} + +.theme-light .splitview-nav { + box-shadow: inset -1px 0 0 #aaa; +} + +.theme-light .splitview-nav:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #aaa; +} + +.splitview-nav > li { + /* To compensate for the top and bottom borders */ + margin-top: -1px; + margin-bottom: -1px; + -moz-padding-end: 8px; + -moz-box-align: center; + outline: 0; + vertical-align: bottom; +} + +.theme-dark .splitview-nav > li { + border-top: 1px solid rgba(0,0,0,0.2); + border-bottom: 1px solid rgba(128,128,128,0.15); +} + +.theme-dark .splitview-nav > li:last-of-type { + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); +} + +.theme-light .splitview-nav > li { + border-top: 1px solid rgba(128,128,128,0.15); + border-bottom: 1px solid transparent; +} + +.theme-light .splitview-nav > li:last-of-type { + box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15); +} + +.placeholder { + -moz-box-flex: 1; + text-align: center; +} + +.splitview-nav > li.splitview-active { + background-repeat: no-repeat, no-repeat, repeat-x; + background-position: center right, center right, top left; + background-size: auto, 1px, auto; +} + +.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) { + background-repeat: no-repeat, no-repeat, repeat-x; + background-position: center left, center left, top right; +} + +.theme-dark .splitview-nav > li.splitview-active { + background-image: url(itemArrow-dark-ltr.svg), + linear-gradient(#000, #000), + linear-gradient(#1d4f73, #1d4f73); +} + +.theme-dark .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) { + background-image: url(itemArrow-dark-rtl.svg), + linear-gradient(#000, #000), + linear-gradient(#1d4f73, #1d4f73); +} + +.theme-light .splitview-nav > li.splitview-active { + background-image: url(itemArrow-ltr.svg), + linear-gradient(#aaa, #aaa), + linear-gradient(#4c9ed9, #4c9ed9); +} + +.theme-light .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) { + background-image: url(itemArrow-rtl.svg), + linear-gradient(#aaa, #aaa), + linear-gradient(#4c9ed9, #4c9ed9); +} + +/* Toolbars */ + +.splitview-main > .devtools-toolbar { + background-origin: border-box; + background-clip: border-box; +} + +.theme-dark .splitview-main > toolbar, +.theme-dark .loading .splitview-nav-container { + -moz-border-end: 1px solid #000; +} + +.theme-light .splitview-main > toolbar, +.theme-light .loading .splitview-nav-container { + -moz-border-end: 1px solid #aaa; +} + +.splitview-main > .devtools-toolbarbutton { + font-size: 11px; + padding: 0 8px; + width: auto; + min-width: 48px; + min-height: 0; +} + + +/* Resizers */ + +.splitview-portrait-resizer { + -moz-appearance: none; + background: linear-gradient(black 1px, rgba(255,255,255,0.2) 1px), + linear-gradient(hsl(210,11%,36%), hsl(210,11%,18%)); + height: 12px; + background-size: 10px 2px, 100% 12px; + background-clip: content-box, border-box; + background-repeat: repeat-y, no-repeat; + background-position: center center; + padding: 2px 0; + border-top: 1px solid hsla(210,8%,5%,.5); + border-bottom: 1px solid hsla(210,8%,5%,.5); +} diff --git a/src/chrome/global/devtools/storage.css b/src/chrome/global/devtools/storage.css @@ -0,0 +1,48 @@ +/* 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/. */ + +/* Storage Host Tree */ + +#storage-tree { + min-width: 220px; + max-width: 500px; + overflow: auto; +} + +.theme-dark #storage-tree { + background: #343c45; /* Toolbars */ +} + +#storage-tree .tree-widget-item[type="store"]:after { + background-image: url(chrome://global/skin/devtools/filetype-store.svg); + background-size: 18px 18px; + background-position: -1px 0; +} + +/* Columns with date should have a min width so that date is visible */ +#expires, #lastAccessed, #creationTime { + min-width: 150px; +} + +/* Variables View Sidebar */ + +#storage-sidebar { + max-width: 500px; + min-width: 250px; +} + +/* Responsive sidebar */ +@media (max-width: 700px) { + #storage-tree { + max-width: 100%; + } + + #storage-table #path { + display: none; + } + + #storage-table .table-widget-cell { + min-width: 100px; + } +} diff --git a/src/chrome/global/devtools/styleeditor.css b/src/chrome/global/devtools/styleeditor.css @@ -0,0 +1,305 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +.stylesheet-title, +.stylesheet-name { + text-decoration: none; +} + +.stylesheet-name { + font-size: 13px; +} + +.theme-dark .stylesheet-title, +.theme-dark .stylesheet-name { + color: var(--theme-selection-color); +} + +.theme-dark .stylesheet-rule-count, +.theme-dark .stylesheet-linked-file, +.theme-dark .stylesheet-saveButton { + color: var(--theme-body-color-alt); +} + +.theme-light .stylesheet-title, +.theme-light .stylesheet-name { + color: var(--theme-body-color-alt); +} + +.theme-light .stylesheet-rule-count, +.theme-light .stylesheet-linked-file, +.theme-light .stylesheet-saveButton { + color: var(--theme-body-color); +} + +.stylesheet-saveButton { + text-decoration: underline; + cursor: pointer; +} + +.splitview-active .stylesheet-title, +.splitview-active .stylesheet-name, +.theme-light .splitview-active .stylesheet-rule-count, +.theme-light .splitview-active .stylesheet-linked-file, +.theme-light .splitview-active .stylesheet-saveButton { + color: var(--theme-selection-color); +} + +.splitview-nav:focus { + outline: 0; /* focus ring is on the stylesheet name */ +} + +.splitview-nav > li.unsaved > hgroup .stylesheet-name { + font-style: italic; +} + +.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before, +.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after { + font-style: italic; +} + +.splitview-nav.empty > p { + padding: 0 10px; +} + +.stylesheet-sidebar { + max-width: 400px; + min-width: 100px; +} + +.theme-light .stylesheet-sidebar { + border-color: #aaa; /* Splitters */ +} + +.theme-dark .stylesheet-sidebar { + border-color: #000; /* Splitters */ +} + +.theme-light .media-rule-label { + border-bottom-color: #cddae5; /* Grey */ +} + +.theme-dark .media-rule-label { + border-bottom-color: #303b47; /* Grey */ +} + +.media-rule-label { + padding: 4px; + cursor: pointer; + border-bottom: 1px solid; +} + +.media-rule-line { + -moz-padding-start: 4px; +} + +.theme-light .media-condition-unmatched { + color: grey; +} + +.theme-dark .media-condition-unmatched { + color: #606C75; +} + +.stylesheet-enabled { + padding: 8px 0; + margin: 0 8px; + background-image: url(itemToggle.png); + background-repeat: no-repeat; + background-clip: content-box; + background-position: 0 8px; + background-size: 48px 24px; + width: 24px; + height: 40px; +} + +@media (min-resolution: 2dppx) { + .stylesheet-enabled { + background-image: url(itemToggle@2x.png); + } +} + +.disabled > .stylesheet-enabled { + background-position: -24px 8px; +} + +/* Invert all toggle icons but the one in the active row for light theme */ +.theme-light .splitview-nav > li:not(.splitview-active) .stylesheet-enabled { + filter: url(filters.svg#invert); +} + +.splitview-nav > li > .stylesheet-enabled:focus, +.splitview-nav > li:hover > .stylesheet-enabled { + outline: 0; +} + +.stylesheet-linked-file:not(:empty){ + -moz-margin-end: 0.4em; +} + +.stylesheet-linked-file:not(:empty):before { + -moz-margin-start: 0.4em; +} + +li.linked-file-error .stylesheet-linked-file:after { + font-size: 110%; +} + +.stylesheet-more > h3 { + font-size: 11px; + -moz-margin-end: 2px; +} + +.devtools-searchinput { + max-width: 25ex; + font-size: 11px; +} + +.placeholder a { + text-decoration: underline; +} + +h1, +h2, +h3 { + font-size: inherit; + font-weight: normal; + margin: 0; + padding: 0; +} + +@media (max-width: 700px) { + .stylesheet-sidebar { + width: 150px; + } +} + +/* portrait mode */ +@media (max-width: 550px) { + .splitview-nav { + box-shadow: none; + } + + .splitview-nav > li.splitview-active { + background-size: 0 0, 0 0, auto; + } + + .stylesheet-enabled { + padding: 0; + background-position: 0 0; + height: 24px; + } + + .disabled > .stylesheet-enabled { + background-position: -24px 0; + } + + .splitview-nav > li > hgroup.stylesheet-info { + -moz-box-align: baseline; + } + + .stylesheet-sidebar { + width: 180px; + } +} + +.csscoverage-report { + background-color: var(--theme-toolbar-background); +} + +.csscoverage-report-container { + height: 100vh; + padding: 0 30px; +} + +.csscoverage-report-content { + margin: 20px auto; + -moz-column-width: 300px; + font-size: 13px; +} + +.csscoverage-report h1 { + font-size: 120%; +} + +.csscoverage-report h2 { + font-size: 110%; +} + +.csscoverage-report h1, +.csscoverage-report h2, +.csscoverage-report h3 { + font-weight: bold; + margin: 10px 0; +} + +.csscoverage-list:after { + content: ', '; +} + +.csscoverage-list:last-child:after { + display: none; +} + +.csscoverage-report textarea { + width: 100%; + height: 100px; +} + +.csscoverage-report a { + cursor: pointer; + text-decoration: underline; +} + +.csscoverage-report > .csscoverage-toolbar { + border: none; + margin: 0; + padding: 0; +} + +.csscoverage-report > .csscoverage-toolbarbutton { + min-width: 4em; + min-height: 100vh; + margin: 0; + padding: 0; + border-radius: 0; + border-top: none; + border-bottom: none; + -moz-border-start: none; +} + +.chart-colored-blob[name="Used Preload"] { + fill: var(--theme-highlight-pink); + background: var(--theme-highlight-pink);; +} + +.chart-colored-blob[name=Used] { + fill: var(--theme-highlight-green); + background: var(--theme-highlight-green); +} + +.chart-colored-blob[name=Unused] { + fill: var(--theme-highlight-lightorange); + background: var(--theme-highlight-lightorange); +} + +/* Undo 'largest' customization */ +.theme-dark .pie-chart-slice[largest] { + stroke-width: 1px; + stroke: rgba(0,0,0,0.2); +} + +.theme-light .pie-chart-slice[largest] { + stroke-width: 1px; + stroke: rgba(255,255,255,0.8); +} + +.csscoverage-report .pie-chart-slice { + cursor: default; +} + +.csscoverage-report-chart { + margin: 0 50px; +} diff --git a/src/chrome/browser/devtools/timeline-filter.svg b/src/chrome/global/devtools/timeline-filter.svg diff --git a/src/chrome/browser/devtools/timeline.css b/src/chrome/global/devtools/timeline.css diff --git a/src/chrome/global/devtools/toggle-tools.png b/src/chrome/global/devtools/toggle-tools.png Binary files differ. diff --git a/src/chrome/browser/devtools/toggle-tools@2x.png b/src/chrome/global/devtools/toggle-tools@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/tool-debugger-paused.svg b/src/chrome/global/devtools/tool-debugger-paused.svg diff --git a/src/chrome/browser/devtools/tool-debugger.svg b/src/chrome/global/devtools/tool-debugger.svg diff --git a/src/chrome/browser/devtools/tool-inspector.svg b/src/chrome/global/devtools/tool-inspector.svg diff --git a/src/chrome/browser/devtools/tool-network.svg b/src/chrome/global/devtools/tool-network.svg diff --git a/src/chrome/browser/devtools/tool-options.svg b/src/chrome/global/devtools/tool-options.svg diff --git a/src/chrome/browser/devtools/tool-profiler.svg b/src/chrome/global/devtools/tool-profiler.svg diff --git a/src/chrome/browser/devtools/tool-scratchpad.svg b/src/chrome/global/devtools/tool-scratchpad.svg diff --git a/src/chrome/browser/devtools/tool-storage.svg b/src/chrome/global/devtools/tool-storage.svg diff --git a/src/chrome/browser/devtools/tool-styleeditor.svg b/src/chrome/global/devtools/tool-styleeditor.svg diff --git a/src/chrome/browser/devtools/tool-webaudio.svg b/src/chrome/global/devtools/tool-webaudio.svg diff --git a/src/chrome/browser/devtools/tool-webconsole.svg b/src/chrome/global/devtools/tool-webconsole.svg diff --git a/src/chrome/browser/devtools/tooltip/arrow-horizontal-dark.png b/src/chrome/global/devtools/tooltip/arrow-horizontal-dark.png Binary files differ. diff --git a/src/chrome/browser/devtools/tooltip/arrow-horizontal-dark@2x.png b/src/chrome/global/devtools/tooltip/arrow-horizontal-dark@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/tooltip/arrow-horizontal-light.png b/src/chrome/global/devtools/tooltip/arrow-horizontal-light.png Binary files differ. diff --git a/src/chrome/browser/devtools/tooltip/arrow-horizontal-light@2x.png b/src/chrome/global/devtools/tooltip/arrow-horizontal-light@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/tooltip/arrow-vertical-dark.png b/src/chrome/global/devtools/tooltip/arrow-vertical-dark.png Binary files differ. diff --git a/src/chrome/browser/devtools/tooltip/arrow-vertical-dark@2x.png b/src/chrome/global/devtools/tooltip/arrow-vertical-dark@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/tooltip/arrow-vertical-light.png b/src/chrome/global/devtools/tooltip/arrow-vertical-light.png Binary files differ. diff --git a/src/chrome/browser/devtools/tooltip/arrow-vertical-light@2x.png b/src/chrome/global/devtools/tooltip/arrow-vertical-light@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/tracer-icon.png b/src/chrome/global/devtools/tracer-icon.png Binary files differ. diff --git a/src/chrome/browser/devtools/tracer-icon@2x.png b/src/chrome/global/devtools/tracer-icon@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/undock@2x.png b/src/chrome/global/devtools/undock@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/vview-delete.png b/src/chrome/global/devtools/vview-delete.png Binary files differ. diff --git a/src/chrome/browser/devtools/vview-delete@2x.png b/src/chrome/global/devtools/vview-delete@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/vview-edit.png b/src/chrome/global/devtools/vview-edit.png Binary files differ. diff --git a/src/chrome/browser/devtools/vview-edit@2x.png b/src/chrome/global/devtools/vview-edit@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/vview-lock.png b/src/chrome/global/devtools/vview-lock.png Binary files differ. diff --git a/src/chrome/browser/devtools/vview-lock@2x.png b/src/chrome/global/devtools/vview-lock@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/vview-open-inspector.png b/src/chrome/global/devtools/vview-open-inspector.png Binary files differ. diff --git a/src/chrome/browser/devtools/vview-open-inspector@2x.png b/src/chrome/global/devtools/vview-open-inspector@2x.png Binary files differ. diff --git a/src/chrome/global/devtools/webaudioeditor.css b/src/chrome/global/devtools/webaudioeditor.css @@ -0,0 +1,257 @@ +/* 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/. */ + +/* 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/. */ + +/* Reload and waiting notices */ +.notice-container { + margin-top: -50vh; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color-alt); +} + +#reload-notice { + font-size: 120%; +} + +#waiting-notice { + font-size: 110%; +} + +/* Context Graph */ +svg { + overflow: hidden; + -moz-box-flex: 1; +} + +/* Edges in graph */ +.edgePath path { + stroke-width: 1px; + fill: none; +} + +.theme-dark .edgePath path { + stroke: #b6babf; /* Grey foreground text */ +} +.theme-light .edgePath path { + stroke: #aaaaaa; /* Splitters */ +} + +/* AudioParam connection edges */ +g.edgePath.param-connection { + stroke-dasharray: 5,5; +} + +.theme-dark .edgePath.param-connection path { + stroke: #b6babf; /* Grey foreground text */ +} +.theme-light .edgePath.param-connection path { + stroke: #aaaaaa; /* Splitters */ +} + +/* Labels in AudioParam connection should have background that match + * the main background so there's whitespace around the label, on top of the + * dotted lines. */ +.theme-dark g.edgeLabel rect { + fill: #14171a; +} +.theme-light g.edgeLabel rect { + fill: #fcfcfc; /* Background - Editor */ +} +.theme-dark g.edgeLabel tspan { + fill: var(--theme-body-color-alt); +} +.theme-light g.edgeLabel tspan { + fill: #585959; /* Grey foreground text */ +} + +/* Audio Nodes */ +.nodes rect { + stroke-width: 1px; + cursor: pointer; +} + +.nodes rect { + stroke: var(--theme-tab-toolbar-background); +} +.theme-light rect { + fill: var(--theme-tab-toolbar-background); +} +.theme-dark rect { + fill: var(--theme-toolbar-background); +} + +/** + * Bypassed Nodes + */ + +.theme-light .nodes g.bypassed rect { + fill: url(chrome://global/skin/devtools/filters.svg#bypass-light); +} +.theme-dark .nodes g.bypassed rect { + fill: url(chrome://global/skin/devtools/filters.svg#bypass-dark); +} +.nodes g.bypassed.selected rect { + stroke: var(--theme-selection-background); +} + +/* +.nodes g.bypassed text { + opacity: 0.8; +} +*/ + +/** + * Selected Nodes + */ +.nodes g.selected rect { + fill: var(--theme-selection-background); +} + +/* Don't style bypassed nodes text different because it'd be illegible in light-theme */ +.theme-light g.selected:not(.bypassed) text { + fill: var(--theme-toolbar-background); +} + + +/* Text in nodes and edges */ +text { + cursor: default; /* override the "text" cursor */ + font-weight: 300; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serf; + font-size: 14px; +} + +text { + fill: var(--theme-body-color-alt); +} + + +.nodes text { + cursor: pointer; +} + +/** + * Inspector Styles + */ + +/* hide the variables view scope title as its redundant, + * because there's only one scope displayed. */ +.variables-view-scope > .title { + display: none; +} + +#web-audio-inspector-title { + margin: 6px; +} + +.web-audio-inspector .error { + background-image: url(alerticon-warning.png); + background-size: 13px 12px; + -moz-appearance: none; + opacity: 0; + transition: opacity .5s ease-out 0s; +} + +#inspector-pane-toggle { + background: none; + box-shadow: none; + border: none; + list-style-image: url(debugger-collapse.png); + -moz-image-region: rect(0px,16px,16px,0px); +} + +#inspector-pane-toggle > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#inspector-pane-toggle[pane-collapsed] { + list-style-image: url(debugger-expand.png); +} + +#inspector-pane-toggle:active { + -moz-image-region: rect(0px,32px,16px,16px); +} + +/** + * Automation Styles + */ + +#automation-param-toolbar .automation-param-button[selected] { + color: var(--theme-selection-color); + background-color: var(--theme-selection-background); +} + +#automation-graph { + overflow: hidden; + -moz-box-flex: 1; +} + +@media (min-resolution: 2dppx) { + #inspector-pane-toggle { + list-style-image: url(debugger-collapse@2x.png); + -moz-image-region: rect(0px,32px,32px,0px); + } + + #inspector-pane-toggle[pane-collapsed] { + list-style-image: url(debugger-expand@2x.png); + } + + #inspector-pane-toggle:active { + -moz-image-region: rect(0px,64px,32px,32px); + } + + .web-audio-inspector .error { + background-image: url(alerticon-warning@2x.png); + } +} + +/** + * Inspector toolbar + */ + +#audio-node-toolbar .bypass { + list-style-image: url(power.svg); +} + +#audio-node-toolbar toolbarbutton[disabled] { + opacity: 0.5; + background-color: transparent; +} + +.theme-dark #audio-node-toolbar toolbarbutton[checked] { + background-color: #1d4f73; /* Select Highlight Blue */ +} +.theme-light #audio-node-toolbar toolbarbutton[checked] { + background-color: #4c9ed9; /* Select Highlight Blue */ +} + +/* don't invert checked buttons so we can have white icons on light theme */ +#audio-node-toolbar toolbarbutton[checked] > .toolbarbutton-icon { + filter: none; +} + + +/** + * Responsive Styles + * `.devtools-responsive-container` takes care of most of + * the changing of host types. + */ +@media (max-width: 700px) { + /** + * Override the inspector toggle so it's always open + * in the portrait view, with the toggle button hidden. + */ + #inspector-pane-toggle { + display: none; + } + + #web-audio-inspector { + margin-left: 0px !important; + margin-right: 0px !important; + } +} diff --git a/src/chrome/global/devtools/webconsole.css b/src/chrome/global/devtools/webconsole.css @@ -0,0 +1,594 @@ +/* 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/. */ + +/* 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/. */ + +/* General output styles */ + +a { + -moz-user-focus: normal; + -moz-user-input: enabled; + cursor: pointer; + text-decoration: underline; +} + +/* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited + * assertion when loading HTML page with links in XUL iframe */ +*:visited { } + +.message { + display: flex; + flex: none; + padding: 0 7px; + width: 100%; + box-sizing: border-box; +} + +.message > .timestamp { + flex: none; + color: GrayText; + margin: 4px 6px 0 0; +} + +.message > .indent { + flex: none; +} + +.message > .icon { + flex: none; + margin: 3px 6px 0 0; + padding: 0 4px; + height: 1em; + align-self: flex-start; +} + +.message > .icon::before { + content: ""; + background-image: url(chrome://global/skin/devtools/webconsole.png); + background-position: 8px 8px; + background-repeat: no-repeat; + background-size: 48px 40px; + width: 8px; + height: 8px; + display: inline-block; +} + +@media (min-resolution: 2dppx) { + .message > .icon::before { + background-image: url(chrome://global/skin/devtools/webconsole@2x.png); + } +} + +.message > .message-body-wrapper { + flex: 1 1 100%; + margin: 3px; +} + +.message-body-wrapper .table-widget-body { + overflow: visible; +} + +/* The red bubble that shows the number of times a message is repeated */ +.message-repeats { + -moz-user-select: none; + flex: none; + margin: 2px 6px; + padding: 0 6px; + height: 1.25em; + color: white; + background-color: red; + border-radius: 40px; + font: message-box; + font-size: 0.9em; + font-weight: 600; +} + +.message-repeats[value="1"] { + display: none; +} + +.message-location { + display: flex; + flex: none; + align-self: flex-start; + justify-content: flex-end; + width: 10em; + margin-top: 3px; + color: -moz-nativehyperlinktext; + text-decoration: none; + white-space: nowrap; +} + +.message-location:hover, +.message-location:focus { + text-decoration: underline; +} + +.message-location > .filename { + text-overflow: ellipsis; + text-align: end; + overflow: hidden; +} + +.message-location > .line-number { + flex: none; +} + +.message-flex-body { + display: flex; +} + +.message-body > * { + white-space: pre-wrap; + word-wrap: break-word; +} + +.message-flex-body > .message-body { + display: block; + flex: 1 1 auto; + vertical-align: middle; +} + +.message-flex-body > .message-location { + margin-top: 0; +} + +.jsterm-input-container { + border-top-width: 1px; + border-top-style: solid; +} + +#output-wrapper { + direction: ltr; + overflow: auto; +} + +#output-container { + -moz-user-select: text; + -moz-box-flex: 1; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +#output-container.hideTimestamps > .message { + -moz-padding-start: 0; + -moz-margin-start: 7px; + width: calc(100% - 7px); +} + +#output-container.hideTimestamps > .message > .timestamp { + display: none; +} + +#output-container.hideTimestamps > .message > .indent { + background-color: var(--theme-body-background); +} + +.filtered-by-type, +.filtered-by-string { + display: none; +} + +.hidden-message { + display: block; + visibility: hidden; + height: 0; + overflow: hidden; +} + +/* WebConsole colored drops */ + +.webconsole-filter-button { + -moz-user-focus: normal; +} + +.webconsole-filter-button > .toolbarbutton-menubutton-button:before { + content: ""; + display: inline-block; + height: 8px; + width: 8px; + border-radius: 50%; + margin-left: 5px; + border-width: 1px; + border-style: solid; +} + +/* Network styles */ +.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#444444, #000000); + border-color: #777; +} + +.message:hover { + background-color: var(--theme-selection-background-semitransparent) !important; +} + +.theme-light .message[severity=error] { + background-color: rgba(255, 150, 150, 0.3); +} + +.theme-dark .message[severity=error] { + background-color: rgba(235, 83, 104, 0.17); +} + +.console-string { + color: var(--theme-highlight-lightorange); +} + +.theme-selected .console-string, +.theme-selected .cm-number, +.theme-selected .cm-variable, +.theme-selected .kind-ArrayLike { + color: #f5f7fa !important; /* Selection Text Color */ +} + +.message[category=network] > .indent { + -moz-border-end: solid #000 6px; +} + +.message[category=network][severity=error] > .icon::before { + background-position: -8px 0; +} + +.message[category=network] > .message-body { + display: flex; +} + +.message[category=network] .method { + flex: none; +} + +.message[category=network]:not(.navigation-marker) .url { + flex: 1 1 auto; + /* Make sure the URL is very small initially, let flex change width as needed. */ + width: 100px; + min-width: 5em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.message[category=network] .status { + flex: none; + -moz-margin-start: 6px; +} + +.message[category=network].mixed-content .url { + color: #FF0000; +} + +.message .learn-more-link { + color: -moz-nativehyperlinktext; + margin: 0 6px; +} + +.message[category=network] .xhr { + background-color: var(--theme-body-color-alt); + color: var(--theme-body-background); + border-radius: 3px; + font-weight: bold; + font-size: 10px; + padding: 2px; + line-height: 10px; + -moz-margin-end: 1ex; +} + +/* CSS styles */ +.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#2DC3F3, #00B6F0); + border-color: #1BA2CC; +} + +.message[category=cssparser] > .indent { + -moz-border-end: solid #00b6f0 6px; +} + +.message[category=cssparser][severity=error] > .icon::before { + background-position: -8px -8px; +} + +.message[category=cssparser][severity=warn] > .icon::before { + background-position: -16px -8px; +} + +/* JS styles */ +.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#FCB142, #FB9500); + border-color: #E98A00; +} + +.message[category=exception] > .indent { + -moz-border-end: solid #fb9500 6px; +} + +.message[category=exception][severity=error] > .icon::before { + background-position: -8px -16px; +} + +.message[category=exception][severity=warn] > .icon::before { + background-position: -16px -16px; +} + +/* Web Developer styles */ +.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#B9B9B9, #AAAAAA); + border-color: #929292; +} + +.message[category=console] > .indent { + -moz-border-end: solid #cbcbcb 6px; +} + +.message[category=console][severity=error] > .icon::before, +.message[category=output][severity=error] > .icon::before { + background-position: -8px -24px; +} + +.message[category=console][severity=warn] > .icon::before { + background-position: -16px -24px; +} + +.message[category=console][severity=info] > .icon::before { + background-position: -24px -24px; +} + +/* Input and output styles */ +.message[category=input] > .indent, +.message[category=output] > .indent { + -moz-border-end: solid #808080 6px; +} + +.message[category=input] > .icon::before { + background-position: -32px -24px; +} + +.message[category=output] > .icon::before { + background-position: -40px -24px; +} + +/* JSTerm Styles */ +.jsterm-input-node, +.jsterm-complete-node { + border: none; + padding: 0 0 0 16px; + -moz-appearance: none; + background-color: transparent; +} + +.jsterm-input-node { + background-image: -moz-image-rect(url("chrome://global/skin/devtools/commandline-icon.png"), 0, 32, 16, 16); + background-repeat: no-repeat; + background-size: 16px 16px; +} + +@media (min-resolution: 2dppx) { + .jsterm-input-node { + background-image: -moz-image-rect(url('chrome://global/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32); + } +} + +:-moz-any(.jsterm-input-node, + .jsterm-complete-node) > .textbox-input-box > .textbox-textarea { + overflow-x: hidden; +} + +.inlined-variables-view .message-body { + display: flex; + flex-direction: column; +} +.inlined-variables-view iframe { + display: block; + flex: 1; + margin-top: 5px; + margin-bottom: 15px; + -moz-margin-end: 15px; + border: 1px solid rgba(128, 128, 128, .5); + border-radius: 3px; +} + +#webconsole-sidebar > tabs { + height: 0; + border: none; +} + +.devtools-side-splitter ~ #webconsole-sidebar[hidden] { + display: none; +} + +/* Security styles */ + +.message[category=security] > .indent { + -moz-border-end: solid red 6px; +} + +.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#FF3030, #FF7D7D); + border-color: #D12C2C; +} + +.message[category=security][severity=error] > .icon::before { + background-position: -8px -32px; +} + +.message[category=security][severity=warn] > .icon::before { + background-position: -16px -32px; +} + +.navigation-marker { + color: #aaa; + background: linear-gradient(#aaa, #aaa) no-repeat left 50%; + background-size: 100% 2px; + margin-top: 6px; + margin-bottom: 6px; + font-size: 0.9em; +} + +.navigation-marker .url { + -moz-padding-end: 9px; + text-decoration: none; +} + +.stacktrace { + display: none; + list-style: none; + padding: 0 1em 0 1.5em; + margin: 5px 0 0 0; + max-height: 10em; + overflow-y: auto; + border: 1px solid rgb(200,200,200); + border-radius: 3px; +} + +.consoletable { + margin: 5px 0 0 0; +} + +.theme-light .message[severity=error] .stacktrace { + background-color: rgba(255, 255, 255, 0.5); +} + +.theme-dark .message[severity=error] .stacktrace { + background-color: rgba(0, 0, 0, 0.5); +} + +.message[open] .stacktrace { + display: block; +} + +.message .theme-twisty { + display: inline-block; + vertical-align: middle; + margin: 0 3px 0 0; +} + +.stacktrace li { + display: flex; + margin: 0; +} + +.stacktrace .function { + display: block; + flex: 1 1 auto; +} + +.cm-s-mozilla a[class] { + font-style: italic; + text-decoration: none; +} + +.cm-s-mozilla a[class]:hover, +.cm-s-mozilla a[class]:focus { + text-decoration: underline; +} + +/* Open DOMNode in inspector button */ +.open-inspector { + background: url("chrome://global/skin/devtools/vview-open-inspector.png") no-repeat 0 0; + padding-left: 16px; + margin-left: 5px; + cursor: pointer; +} + +.elementNode:hover .open-inspector, +.open-inspector:hover { + background-position: -32px 0; +} + +.open-inspector:active { + background-position: -16px 0; +} + +.jsterm-input-container { + background-color: var(--theme-tab-toolbar-background); + border-color: var(--theme-body-background); +} + +.jsterm-input-node { + color: var(--theme-content-color1); +} + +.jsterm-complete-node { + color: var(--theme-comment); +} + +.navigation-marker .url { + background: var(--theme-body-background); +} + +.theme-dark .inlined-variables-view iframe { + border-color: #333; +} + +.theme-dark .stacktrace { + border-color: #333; +} + +.theme-light .jsterm-input-container { + /* For light theme use a white background for the input - it looks better + than off-white */ + background-color: #fff; + border-color: ThreeDShadow; +} +.theme-light .navigation-marker .url { + background: #fff; +} + +.theme-light .inlined-variables-view iframe { + border-color: #ccc; +} + +.theme-light .stacktrace { + border-color: #ccc; +} + +@media (max-width: 500px) { + .message > .timestamp { + display: none; + } + .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text { + display: none; + } + .hud-console-filter-toolbar .webconsole-filter-button { + min-width: 40px; + } + .hud-console-filter-toolbar .webconsole-clear-console-button { + min-width: 25px; + } + .webconsole-filter-button > .toolbarbutton-menubutton-button:before { + width: 12px; + height: 12px; + margin-left: 1px; + } + .toolbarbutton-menubutton-dropmarker { + margin: 0px; + } +} + +@media (max-width: 300px) { + .hud-console-filter-toolbar { + -moz-box-orient: vertical; + } + .toolbarbutton-text { + display: -moz-box; + } + .devtools-toolbarbutton { + margin-top: 3px; + } + .hud-console-filter-toolbar .hud-filter-box, + .hud-console-filter-toolbar .devtools-toolbarbutton { + margin-top: 5px; + } +} + +/* + * This hardcoded width likely due to a toolkit Windows specific bug. + * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7 + */ + +.hud-filter-box { + width: 200px; +} diff --git a/src/chrome/browser/devtools/webconsole.png b/src/chrome/global/devtools/webconsole.png Binary files differ. diff --git a/src/chrome/browser/devtools/webconsole@2x.png b/src/chrome/global/devtools/webconsole@2x.png Binary files differ. diff --git a/src/chrome/appver/27/devtools/webconsole_networkpanel.css b/src/chrome/global/devtools/webconsole_networkpanel.css diff --git a/src/chrome/global/devtools/widgets.css b/src/chrome/global/devtools/widgets.css @@ -0,0 +1,1597 @@ +/* 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/. */ + +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + + +/* Generic pane helpers */ + +.generic-toggled-side-pane { + -moz-margin-start: 0 !important; + /* Unfortunately, transitions don't work properly with locale-aware properties, + so both the left and right margins are set via js, while the start margin + is always overridden here. */ +} + +.generic-toggled-side-pane[animated] { + transition: margin 0.25s ease-in-out; +} + +/* Responsive container */ + +.devtools-responsive-container { + -moz-box-orient: horizontal; +} + +.devtools-main-content { + min-width: 50px; +} + +.devtools-main-content, +.devtools-sidebar-tabs { + /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */ + position: relative; +} + +@media (max-width: 700px) { + .devtools-responsive-container { + -moz-box-orient: vertical; + } + + .devtools-responsive-container > .devtools-side-splitter { + /* This is a normally vertical splitter, but we have turned it horizontal + due to the smaller resolution */ + min-height: 3px; + height: 3px; + margin-top: -3px; + + /* Reset the vertical splitter styles */ + border-width: 0; + border-bottom-width: 1px; + border-bottom-style: solid; + -moz-margin-start: 0; + width: auto; + min-width: 0; + + /* In some edge case the cursor is not changed to n-resize */ + cursor: n-resize; + } + + .devtools-responsive-container > .devtools-sidebar-tabs { + min-height: 35vh; + max-height: 75vh; + } +} + +/* BreacrumbsWidget */ + +.breadcrumbs-widget-container { + -moz-margin-end: 3px; + max-height: 24px; /* Set max-height for proper sizing on linux */ + height: 24px; /* Set height to prevent starting small waiting for content */ +} + +.scrollbutton-up, +.scrollbutton-down { + -moz-appearance: none; + background: transparent; + box-shadow: none; + border: none; + list-style-image: none; + margin: 0; + padding: 0; +} + +.scrollbutton-up > .toolbarbutton-icon, +.scrollbutton-down > .toolbarbutton-icon { + -moz-appearance: none; + width: 7px; + height: 16px; + background-size: 14px 16px; + background-position: 0 center; + background-repeat: no-repeat; + background-image: url("breadcrumbs-scrollbutton.png"); + list-style-image: none; + margin: 0 8px; + padding: 0; +} + +@media (min-resolution: 2dppx) { + .scrollbutton-up > .toolbarbutton-icon, + .scrollbutton-down > .toolbarbutton-icon { + background-image: url("breadcrumbs-scrollbutton@2x.png"); + } +} + +.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon, +.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon { + background-position: -7px center; +} + +.scrollbutton-up[disabled] > .toolbarbutton-icon, +.scrollbutton-down[disabled] > .toolbarbutton-icon { + opacity: 0.5; +} + +/* Draw shadows to indicate there is more content 'behind' scrollbuttons. */ +.scrollbutton-up:-moz-locale-dir(ltr), +.scrollbutton-down:-moz-locale-dir(rtl) { + border-right: solid 1px rgba(255, 255, 255, .1); + border-left: solid 1px transparent; + box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background); +} + +.scrollbutton-down:-moz-locale-dir(ltr), +.scrollbutton-up:-moz-locale-dir(rtl) { + border-right: solid 1px transparent; + border-left: solid 1px rgba(255, 255, 255, .1); + box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background); +} + +.scrollbutton-up[disabled], +.scrollbutton-down[disabled] { + box-shadow: none; + border-color: transparent; +} + +.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl), +.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) { + transform: scaleX(-1); +} + +/* The breadcrumb separator elements are used as background images with + * -moz-element, so we position them offscreen since we don't care about + * seeing the original elements. + */ +.breadcrumb-separator-container { + position: fixed; + top: -1000px; + left: -1000px; +} + +#breadcrumb-separator-before, +#breadcrumb-separator-after, +#breadcrumb-separator-normal { + width: 12px; + height: 24px; + overflow: hidden; +} + +#breadcrumb-separator-before, +#breadcrumb-separator-after:after { + background: var(--theme-selection-background); +} + +#breadcrumb-separator-after, +#breadcrumb-separator-before:after { + background: var(--theme-toolbar-background); +} + +/* This chevron arrow cannot be replicated easily in CSS, so we are using + * a background image for it (still keeping it in a separate element so + * we can handle RTL support with a CSS transform). + */ +#breadcrumb-separator-normal { + background: url(breadcrumbs-divider@2x.png) no-repeat center right; + background-size: 12px 24px; +} + +/* Fake a triangle by rotating a rectangle inside the elements */ +#breadcrumb-separator-before:after, +#breadcrumb-separator-after:after { + content: ""; + display: block; + width: 25px; + height: 24px; + transform: translateX(-18px) rotate(45deg); + -moz-box-sizing: border-box; +} + +.breadcrumbs-widget-item { + background-color: transparent; + -moz-appearance: none; + min-height: 24px; + min-width: 65px; + margin: 0; + padding: 0 8px 0 20px; + border: none; + outline: none; + color: hsl(210,30%,85%); +} + +.breadcrumbs-widget-item > .button-box { + border: none; + padding-top: 0; + padding-bottom: 0; +} + +.breadcrumbs-widget-item:not([checked]) { + background: -moz-element(#breadcrumb-separator-normal) no-repeat center left; +} + +.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item { + background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0; +} + +.breadcrumbs-widget-item[checked] { + background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0; +} + +.breadcrumbs-widget-item[checked] { + background-color: var(--theme-selection-background); +} + +.breadcrumbs-widget-item:first-child { + background-image: none; +} + +/* RTL support: move the images that were on the left to the right, + * and move images that were on the right to the left. + */ +.breadcrumbs-widget-item:-moz-locale-dir(rtl) { + padding: 0 20px 0 8px; +} + +.breadcrumbs-widget-item:-moz-locale-dir(rtl), +.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) { + background-position: center right; +} + +#breadcrumb-separator-before:-moz-locale-dir(rtl), +#breadcrumb-separator-after:-moz-locale-dir(rtl), +#breadcrumb-separator-normal:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +#breadcrumb-separator-before:-moz-locale-dir(rtl):after, +#breadcrumb-separator-after:-moz-locale-dir(rtl):after { + transform: translateX(-5px) rotate(45deg); +} + +.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id, +.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag, +.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes, +.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes { + color: var(--theme-selection-color); +} + +.theme-dark .breadcrumbs-widget-item { + color: var(--theme-selection-color); +} + +.theme-light .breadcrumbs-widget-item { + color: var(--theme-body-color); +} + +.breadcrumbs-widget-item-id { + color: var(--theme-body-color-alt); +} + +.breadcrumbs-widget-item-classes { + color: var(--theme-content-color1); +} + +.breadcrumbs-widget-item-pseudo-classes { + color: var(--theme-highlight-lightorange); +} + +.theme-dark .breadcrumbs-widget-item:not([checked]):hover label { + color: white; +} + +.theme-light .breadcrumbs-widget-item:not([checked]):hover label { + color: black; +} + +/* SimpleListWidget */ + +.simple-list-widget-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); +} + +.simple-list-widget-item.selected { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.theme-dark .simple-list-widget-item:not(.selected):hover { + background-color: rgba(255,255,255,.05); +} + +.theme-light .simple-list-widget-item:not(.selected):hover { + background-color: rgba(0,0,0,.05); +} + +.simple-list-widget-empty-text, +.simple-list-widget-perma-text { + padding: 4px 8px; +} + +.simple-list-widget-empty-text, +.simple-list-widget-perma-text { + color: var(--theme-body-color-alt); +} + +/* FastListWidget */ + +.fast-list-widget-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); +} + +.fast-list-widget-empty-text { + padding: 4px 8px; +} + +.fast-list-widget-empty-text { + color: var(--theme-body-color-alt); +} + +/* SideMenuWidget */ + +.side-menu-widget-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); +} + +/* SideMenuWidget container */ + +.theme-dark .side-menu-widget-container:-moz-locale-dir(ltr), +.theme-dark .side-menu-widget-empty-text:-moz-locale-dir(ltr) { + box-shadow: inset -1px 0 0 #000; +} + +.theme-dark .side-menu-widget-container:-moz-locale-dir(rtl), +.theme-dark .side-menu-widget-empty-text:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #000; +} + +.side-menu-widget-container:-moz-locale-dir(ltr), +.side-menu-widget-empty-text:-moz-locale-dir(ltr) { + box-shadow: inset -1px 0 0 #aaa; +} + +.side-menu-widget-container:-moz-locale-dir(rtl), +.side-menu-widget-empty-text:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #aaa; +} + +.side-menu-widget-group { + /* To allow visibility of the dark margin shadow. */ + -moz-margin-end: 1px; +} + +.side-menu-widget-container[with-arrows=true] .side-menu-widget-item { + /* To compensate for the arrow image's dark margin. */ + -moz-margin-end: -1px; +} + +/* SideMenuWidget groups */ + +.side-menu-widget-group-title { + padding: 4px; + background-color: var(--theme-tab-toolbar-background); +} + +.theme-dark .side-menu-widget-group-title { + color: var(--theme-content-color1); +} + +.theme-light .side-menu-widget-group-title { + color: var(--theme-content-color3); +} + +/* SideMenuWidget items */ + +.side-menu-widget-item { + /* To compensate for the top and bottom borders */ + margin-top: -1px; + margin-bottom: -1px; + background-clip: padding-box; +} + +.theme-dark .side-menu-widget-item { + border-top: 1px solid rgba(0,0,0,0.2); + border-bottom: 1px solid rgba(128,128,128,0.15); + color: var(--theme-selection-color); +} + +.theme-dark .side-menu-widget-item:last-of-type { + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); +} + +.theme-light .side-menu-widget-item { + border-top: 1px solid rgba(128,128,128,0.15); + border-bottom: 1px solid transparent; + color: var(--theme-body-color); +} + +.theme-light .side-menu-widget-item:last-of-type { + box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15); +} + +.side-menu-widget-item.selected { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.side-menu-widget-item-arrow { + -moz-margin-start: -7px; + width: 7px; /* The image's width is 7 pixels */ + /* Cover the border of the side-menu-widget-item */ + margin-top: -1px; + margin-bottom: -1px; +} + +.side-menu-widget-item.selected > .side-menu-widget-item-arrow { + background-size: auto, 1px 100%; + background-repeat: no-repeat; +} + +.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { + background-position: center right, top right; +} + +.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { + background-position: center left, top left; +} + +.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { + background-image: url(itemArrow-dark-ltr.svg), linear-gradient(to right, #000, #000); +} + +.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { + background-image: url(itemArrow-dark-rtl.svg), linear-gradient(to right, #000, #000); +} + +.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { + background-image: url(itemArrow-ltr.svg), linear-gradient(to right, #aaa, #aaa); +} + +.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { + background-image: url(itemArrow-rtl.svg), linear-gradient(to right, #aaa, #aaa); +} + +/* SideMenuWidget items contents */ + +.side-menu-widget-item-contents { + padding: 4px; + /* To avoid having content overlapping the arrow image. */ + -moz-padding-end: 8px; +} + +.side-menu-widget-item-other { + /* To avoid having content overlapping the arrow image. */ + -moz-padding-end: 8px; + /* To compensate for the .side-menu-widget-item-contents padding. */ + -moz-margin-start: -4px; + -moz-margin-end: -8px; +} + +.side-menu-widget-item-other:first-of-type { + margin-top: 4px; +} + +.side-menu-widget-item-other:last-of-type { + margin-bottom: -4px; +} + +.theme-dark .side-menu-widget-item-other { + background-color: rgba(0,0,0,.1); +} + +.theme-light .side-menu-widget-item-other { + background-color: rgba(128,128,128,.1); +} + +.theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other { + background-color: rgba(0,0,0,.2); /* Darken the selection by 20% */ + color: var(--theme-selection-color); +} + +.theme-light .side-menu-widget-item.selected .side-menu-widget-item-other { + background-color: rgba(255,255,255,.8); /* Lighten the selection by 20% */ + color: var(--theme-body-color); +} + +.side-menu-widget-item.selected .side-menu-widget-item-other.selected { + background-color: transparent; + color: var(--theme-selection-color); +} + +/* SideMenuWidget checkboxes */ + +.side-menu-widget-group-checkbox { + margin: 0; + -moz-margin-end: 4px; +} + +.side-menu-widget-item-checkbox { + margin: 0; + -moz-margin-start: 4px; +} + +/* SideMenuWidget misc */ + +.theme-dark .side-menu-widget-container, +.theme-dark .side-menu-widget-empty-text { + background-color: var(--theme-toolbar-background); +} + +.side-menu-widget-empty-text { + padding: 4px 8px; +} + +/* VariablesView */ + +.variables-view-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); +} + +.variables-view-empty-notice { + padding: 2px; +} + +.variables-view-empty-notice { + color: var(--theme-body-color-alt); +} + +.variables-view-scope:focus > .title, +.variable-or-property:focus > .title { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.variables-view-scope > .title { + border-top-width: 1px; + border-top-style: solid; + margin-top: -1px; +} + +/* Generic variables traits */ + +.variables-view-variable:not(:last-child) { + border-bottom: 1px solid rgba(128, 128, 128, .15); +} + +.variables-view-variable > .title > .name { + font-weight: 600; +} + +/* Generic variables *and* properties traits */ + +.variable-or-property:focus > .title > label { + color: inherit !important; +} + +.variables-view-container .theme-twisty { + margin: 2px; +} + +.variable-or-property > .title > .theme-twisty { + -moz-margin-start: 5px; +} + +.variable-or-property:not([untitled]) > .variables-view-element-details { + -moz-margin-start: 7px; +} + +/* Traits applied when variables or properties are changed or overridden */ + +.variable-or-property:not([overridden]) { + transition: background 1s ease-in-out; +} + +.variable-or-property:not([overridden])[changed] { + transition-duration: .4s; +} + +.variable-or-property[overridden] { + background: rgba(128,128,128,0.05); +} + +.variable-or-property[overridden] .title > label { + /* Cross out the title for this variable and all child properties. */ + font-style: italic; + text-decoration: line-through; + border-bottom: none !important; + color: rgba(128,128,128,0.9); + opacity: 0.7; +} + +/* Traits applied when variables or properties are editable */ + +.variable-or-property[editable] > .title > .value { + cursor: text; +} + +.variable-or-property[overridden] .title > .value { + /* Disallow editing this variable and all child properties. */ + pointer-events: none; +} + +/* Custom configurable/enumerable/writable or frozen/sealed/extensible + * variables and properties */ + +.variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name { + opacity: 0.6; +} + +.variable-or-property-non-writable-icon { + background: url("chrome://global/skin/devtools/vview-lock.png") no-repeat; + background-size: cover; + width: 16px; + height: 16px; +} + +@media (min-resolution: 2dppx) { + .variable-or-property-non-writable-icon { + background-image: url("chrome://global/skin/devtools/vview-lock@2x.png"); + } +} + +.variable-or-property-frozen-label, +.variable-or-property-sealed-label, +.variable-or-property-non-extensible-label { + height: 16px; + -moz-padding-end: 4px; +} + +.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label, +.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label, +.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label { + color: #666; +} + +/* Aligned values */ + +.variables-view-container[aligned-values] .title > .separator { + -moz-box-flex: 1; +} + +.variables-view-container[aligned-values] .title > .value { + -moz-box-flex: 0; + width: 70vw; +} + +.variables-view-container[aligned-values] .title > .element-value-input { + width: calc(70vw - 10px); +} + +/* Actions first */ + +.variables-view-open-inspector { + -moz-box-ordinal-group: 1; +} + +.variables-view-edit, +.variables-view-add-property { + -moz-box-ordinal-group: 2; +} + +.variable-or-property-frozen-label, +.variable-or-property-sealed-label, +.variable-or-property-non-extensible-label, +.variable-or-property-non-writable-icon { + -moz-box-ordinal-group: 3; +} + +.variables-view-delete { + -moz-box-ordinal-group: 4; +} + +.variables-view-container[actions-first] .variables-view-delete, +.variables-view-container[actions-first] .variables-view-add-property, +.variables-view-container[actions-first] .variables-view-open-inspector { + -moz-box-ordinal-group: 0; +} + +.variables-view-container[actions-first] [invisible] { + visibility: hidden; +} + +/* Variables and properties tooltips */ + +.variable-or-property > tooltip > label { + margin: 0 2px 0 2px; +} + +.variable-or-property[non-enumerable] > tooltip > label.enumerable, +.variable-or-property[non-configurable] > tooltip > label.configurable, +.variable-or-property[non-writable] > tooltip > label.writable, +.variable-or-property[non-extensible] > tooltip > label.extensible { + color: #800; + text-decoration: line-through; +} + +.variable-or-property[overridden] > tooltip > label.overridden { + -moz-padding-start: 4px; + -moz-border-start: 1px dotted #000; +} + +.variable-or-property[safe-getter] > tooltip > label.WebIDL { + -moz-padding-start: 4px; + -moz-border-start: 1px dotted #000; + color: #080; +} + +/* Variables and properties editing */ + +.variables-view-delete { + background: url("chrome://global/skin/devtools/vview-delete.png"); + background-size: cover; + width: 16px; + height: 16px; +} + +@media (min-resolution: 2dppx) { + .variables-view-delete { + background-image: url("chrome://global/skin/devtools/vview-delete@2x.png"); + } +} + +.variables-view-delete:hover { + background-position: 16px; +} + +.variables-view-delete:active { + background-position: 32px; +} + +.variable-or-property:focus > .title > .variables-view-delete { + background-position: 0px; +} + +.variables-view-edit { + background: url("chrome://global/skin/devtools/vview-edit.png"); + background-size: cover; + width: 16px; + height: 16px; + cursor: pointer; +} + +@media (min-resolution: 2dppx) { + .variables-view-edit { + background-image: url("chrome://global/skin/devtools/vview-edit@2x.png"); + } +} + +.variables-view-edit:hover { + background-position: 16px; +} + +.variables-view-edit:active { + background-position: 32px; +} + +.variable-or-property:focus > .title > .variables-view-edit { + background-position: 0px; +} + +.variables-view-open-inspector { + background: url("chrome://global/skin/devtools/vview-open-inspector.png"); + background-size: cover; + width: 16px; + height: 16px; + cursor: pointer; +} + +@media (min-resolution: 2dppx) { + .variables-view-open-inspector { + background-image: url("chrome://global/skin/devtools/vview-open-inspector@2x.png"); + } +} + +.variables-view-open-inspector:hover { + background-position: 16px; +} + +.variables-view-open-inspector:active { + background-position: 32px; +} + +.variable-or-property:focus > .title > .variables-view-open-inspector { + background-position: 0px; +} + +/* Variables and properties input boxes */ + +.variable-or-property > .title > .separator + .element-value-input { + -moz-margin-start: -2px !important; + -moz-margin-end: 2px !important; +} + +.variable-or-property > .title > .separator[hidden=true] + .element-value-input { + -moz-margin-start: 4px !important; + -moz-margin-end: 2px !important; +} + +.element-name-input { + -moz-margin-start: -2px !important; + -moz-margin-end: 2px !important; + font-weight: 600; +} + +.element-value-input, +.element-name-input { + border: 1px solid rgba(128, 128, 128, .5) !important; + border-radius: 0; + color: inherit; +} + +/* Variables and properties searching */ + +.variable-or-property[unmatched] { + border: none; + margin: 0; +} + +/* Canvas graphs */ + +.graph-widget-container { + position: relative; +} + +.graph-widget-canvas { + width: 100%; + height: 100%; +} + +.graph-widget-canvas[input=hovering-background] { + cursor: text; +} + +.graph-widget-canvas[input=hovering-region] { + cursor: pointer; +} + +.graph-widget-canvas[input=hovering-selection-start-boundary], +.graph-widget-canvas[input=hovering-selection-end-boundary], +.graph-widget-canvas[input=adjusting-selection-boundary] { + cursor: col-resize; +} + +.graph-widget-canvas[input=hovering-selection-contents] { + cursor: grab; +} + +.graph-widget-canvas[input=dragging-selection-contents] { + cursor: grabbing; +} + +/* Line graph widget */ + +.line-graph-widget-gutter { + position: absolute; + background: rgba(255,255,255,0.75); + width: 10px; + height: 100%; + top: 0; + left: 0; + border-right: 1px solid rgba(255,255,255,0.25); + pointer-events: none; +} + +.line-graph-widget-gutter-line { + position: absolute; + width: 100%; + border-top: 1px solid; +} + +.line-graph-widget-gutter-line[type=maximum] { + border-color: #2cbb0f; +} + +.line-graph-widget-gutter-line[type=minimum] { + border-color: #ed2655; +} + +.line-graph-widget-gutter-line[type=average] { + border-color: #d97e00; +} + +.line-graph-widget-tooltip { + position: absolute; + background: rgba(255,255,255,0.75); + border-radius: 2px; + line-height: 15px; + -moz-padding-start: 6px; + -moz-padding-end: 6px; + transform: translateY(-50%); + font-size: 80%; + z-index: 1; + pointer-events: none; +} + +.line-graph-widget-tooltip[with-arrows=true]::before { + content: ""; + position: absolute; + border-top: 3px solid transparent; + border-bottom: 3px solid transparent; + top: calc(50% - 3px); +} + +.line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { + -moz-border-end: 3px solid rgba(255,255,255,0.75); + left: -3px; +} + +.line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { + -moz-border-start: 3px solid rgba(255,255,255,0.75); + right: -3px; +} + +.line-graph-widget-tooltip[type=maximum] { + left: 14px; +} + +.line-graph-widget-tooltip[type=minimum] { + left: 14px; +} + +.line-graph-widget-tooltip[type=average] { + right: 4px; +} + +.line-graph-widget-tooltip > [text=info] { + color: #18191a; +} + +.line-graph-widget-tooltip > [text=value] { + -moz-margin-start: 3px; +} + +.line-graph-widget-tooltip > [text=metric] { + -moz-margin-start: 1px; + color: #667380; +} + +.line-graph-widget-tooltip > [text=value], +.line-graph-widget-tooltip > [text=metric] { + text-shadow: 1px 0px rgba(255,255,255,0.6), + -1px 0px rgba(255,255,255,0.6), + 0px -1px rgba(255,255,255,0.6), + 0px 1px rgba(255,255,255,0.6); +} + +.line-graph-widget-tooltip[type=maximum] > [text=value] { + color: #2cbb0f; +} + +.line-graph-widget-tooltip[type=minimum] > [text=value] { + color: #ed2655; +} + +.line-graph-widget-tooltip[type=average] > [text=value] { + color: #d97e00; +} + +/* Bar graph widget */ + +.bar-graph-widget-canvas { + background: #f7f7f7; +} + +.bar-graph-widget-legend { + position: absolute; + top: 4px; + left: 8px; + color: #292e33; + font-size: 80%; + pointer-events: none; +} + +.bar-graph-widget-legend-item { + float: left; + -moz-margin-end: 8px; +} + +.bar-graph-widget-legend-item > [view="color"], +.bar-graph-widget-legend-item > [view="label"] { + vertical-align: middle; +} + +.bar-graph-widget-legend-item > [view="color"] { + display: inline-block; + width: 8px; + height: 8px; + border: 1px solid #fff; + border-radius: 1px; + -moz-margin-end: 4px; + pointer-events: all; + cursor: pointer; +} + +.bar-graph-widget-legend-item > [view="label"] { + text-shadow: 1px 0px rgba(255,255,255,0.8), + -1px 0px rgba(255,255,255,0.8), + 0px -1px rgba(255,255,255,0.8), + 0px 1px rgba(255,255,255,0.8); +} + +/* Charts */ + +.generic-chart-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); +} + +.theme-dark .generic-chart-container { + color: var(--theme-selection-color); +} + +.theme-light .generic-chart-container { + color: var(--theme-body-color-alt); +} + +.chart-colored-blob { + fill: var(--theme-content-color2); + background: var(--theme-content-color2); +} + +/* Charts: Pie */ + +.pie-chart-slice { + stroke-width: 1px; + cursor: pointer; +} + +.theme-dark .pie-chart-slice { + stroke: rgba(0,0,0,0.2); +} + +.theme-light .pie-chart-slice { + stroke: rgba(255,255,255,0.8); +} + +.theme-dark .pie-chart-slice[largest] { + stroke-width: 2px; + stroke: #fff; +} + +.theme-light .pie-chart-slice[largest] { + stroke: #000; +} + +.pie-chart-label { + text-anchor: middle; + dominant-baseline: middle; + pointer-events: none; +} + +.theme-dark .pie-chart-label { + fill: #000; +} + +.theme-light .pie-chart-label { + fill: #fff; +} + +.pie-chart-container[slices="1"] > .pie-chart-slice { + stroke-width: 0px; +} + +.pie-chart-slice, +.pie-chart-label { + transition: all 0.1s ease-out; +} + +.pie-chart-slice:not(:hover):not([focused]), +.pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label { + transform: none !important; +} + +/* Charts: Table */ + +.table-chart-title { + padding-bottom: 10px; + font-size: 120%; + font-weight: 600; +} + +.table-chart-row { + margin-top: 1px; + cursor: pointer; +} + +.table-chart-grid:hover > .table-chart-row { + transition: opacity 0.1s ease-in-out; +} + +.table-chart-grid:not(:hover) > .table-chart-row { + transition: opacity 0.2s ease-in-out; +} + +.generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover), +.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) { + opacity: 0.4; +} + +.table-chart-row-box { + width: 8px; + height: 1.5em; + -moz-margin-end: 10px; +} + +.table-chart-row-label { + width: 8em; + -moz-padding-end: 6px; + cursor: inherit; +} + +.table-chart-totals { + margin-top: 8px; + padding-top: 6px; +} + +.table-chart-totals { + border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */ +} + +.table-chart-summary-label { + font-weight: 600; + padding: 1px 0px; +} + +.theme-dark .table-chart-summary-label { + color: var(--theme-selection-color); +} + +.theme-light .table-chart-summary-label { + color: var(--theme-body-color); +} + +/* Table Widget */ + +/* Table body */ + +.table-widget-body > .devtools-side-splitter { + border: none; +} + +.table-widget-body { + overflow: auto; +} + +.theme-light .table-widget-body { + background: var(--theme-sidebar-background); +} + +.theme-dark .table-widget-body, +.theme-dark .table-widget-empty-text { + background-color: var(--theme-toolbar-background); +} + +.theme-dark .table-widget-body:-moz-locale-dir(ltr) { + box-shadow: inset -1px 0 0 #000; +} + +.theme-dark .table-widget-body:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #000; +} + +.table-widget-body:-moz-locale-dir(ltr) { + box-shadow: inset -1px 0 0 #aaa; +} + +.table-widget-body:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #aaa; +} + +/* Column Headers */ + +.theme-dark .table-widget-column-header, +.theme-dark .table-widget-cell { + -moz-border-end: 1px solid rgba(0,0,0,0.2); + box-shadow: inset 1px 0 0 rgba(128,128,128,0.15); +} + +.theme-light .table-widget-column-header, +.theme-light .table-widget-cell { + -moz-border-end: 1px solid rgba(128,128,128,0.25); + box-shadow: inset 1px 0 0 transparent; +} + +/* Table widget column header colors are taken from netmonitor.inc.css to match + the look of both the tables. This needs to be updated along with netmonitor + header colors in bug 951714 */ + +.table-widget-column-header { + background: rgba(0,0,0,0); + position: sticky; + top: 0; + min-height: 32px; + width: 100%; + border: none; + padding: 8px 0 0 !important; + color: inherit; + text-align: center; + font-weight: inherit !important; + transition: background-color 0.1s ease-in-out; +} + +.table-widget-column-header:hover { + background: rgba(0,0,0,0.10); +} + +.table-widget-column-header:hover:active { + background: rgba(0,0,0,0.25); +} + +.table-widget-column-header:not(:active)[sorted] { + background: rgba(0,0,0,0.15); +} + +.table-widget-column-header:not(:active)[sorted=ascending] { + background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); + background-size: 100% 1px; + background-repeat: no-repeat; +} + +.table-widget-column-header:not(:active)[sorted=descending] { + background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); + background-size: 100% 1px; + background-repeat: no-repeat; + background-position: bottom; +} + +/* Cells */ + +.table-widget-cell { + width: 100%; + margin: -1px 0 !important; + padding: 3px 4px; + background-clip: padding-box; + min-width: 100px; + -moz-user-focus: normal; +} + +.theme-dark .table-widget-cell { + border-top: 1px solid rgba(0,0,0,0.2); + border-bottom: 1px solid rgba(128,128,128,0.15); + color: var(--theme-selection-color); +} + +.theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), +.theme-dark .table-widget-cell:not(.theme-selected)[odd] { + background: rgba(255,255,255,0.05); +} + +.theme-dark .table-widget-cell:last-of-type { + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); +} + +.theme-light .table-widget-cell { + border-top: 1px solid rgba(128,128,128,0.15); + border-bottom: 1px solid transparent; +} + +.theme-light .table-widget-cell:not(.theme-selected) { + color: var(--theme-body-color); +} + +.theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), +.theme-light .table-widget-cell:not(.theme-selected)[odd] { + background: rgba(128,128,128,0.05); +} + +.theme-light .table-widget-cell:last-of-type { + box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15); +} + +.table-widget-cell.flash-out { + animation: flash-out 0.5s ease-in; +} + +@keyframes flash-out { + to { + background: var(--theme-contrast-background); + } +} + +/* Empty text and initial text */ + +.table-widget-empty-text { + display: none; + text-align: center; + font-size: large; + margin-top: -20px !important; +} + +.theme-light .table-widget-empty-text { + background: #F7F7F7; /* Background-Sidebar */ +} + +.table-widget-body:empty + .table-widget-empty-text:not([value=""]), +.table-widget-body[empty] + .table-widget-empty-text:not([value=""]) { + display: block; +} + +/* Tree Widget */ + +.tree-widget-container { + padding: 0; + margin: 0; + width: 100%; + height: 100%; + list-style: none; + overflow: hidden; + -moz-margin-end: 40px; +} + +.tree-widget-container:-moz-focusring, +.tree-widget-container *:-moz-focusring { + outline-style: none; +} + +.tree-widget-empty-text { + padding: 10px 20px; + font-size: medium; + background: transparent; + pointer-events: none; +} + +/* Tree Item */ + +.tree-widget-container .tree-widget-item { + padding: 2px 0px 4px; + /* OSX has line-height 14px by default, which causes weird alignment issues + * because of 20px high icons. thus making line-height consistent with that of + * windows. + */ + line-height: 17px !important; + display: inline-block; + width: 100%; + word-break: keep-all; /* To prevent long urls like http://foo.com/bar from + breaking in multiple lines */ +} + +.tree-widget-container .tree-widget-children { + margin: 0; + padding: 0; + list-style: none; +} + +.tree-widget-item[level="1"] { + font-weight: 800; +} + +/* Twisties */ +.tree-widget-item:before { + content: ""; + width: 14px; + height: 14px; + float: left; + margin: 3px 2px -3px; + background-repeat: no-repeat; + background-image: url("chrome://global/skin/devtools/controls.png"); + background-size: 56px 28px; + cursor: pointer; + background-position: -28px -14px; +} + +.tree-widget-item:-moz-locale-dir(rtl):before { + float: right; + transform: scaleX(-1); +} + +.theme-light .tree-widget-item:before { + background-position: 0 -14px; +} + +.tree-widget-item[empty]:before { + background: transparent; +} + +.tree-widget-item[expanded]:before { + background-position: -42px -14px; +} + +.theme-light .tree-widget-item[expanded]:before { + background-position: -14px -14px; +} + +.tree-widget-item + ul { + overflow: hidden; + animation: collapse-tree-item 0.2s; + max-height: 0; +} + +.tree-widget-item[expanded] + ul { + animation: expand-tree-item 0.3s; + max-height: unset; +} + +@keyframes collapse-tree-item { + from { + max-height: 300px; + } + to { + max-height: 0; + } +} + +@keyframes expand-tree-item { + from { + max-height: 0; + } + to { + max-height: 500px; + } +} + +@media (min-resolution: 2dppx) { + .tree-widget-item:before { + background-image: url("chrome://global/skin/devtools/controls@2x.png"); + } +} + +/* Indentation of child items in the tree */ + +/* For level > 6 */ +.tree-widget-item[level] + ul > li > .tree-widget-item { + -moz-padding-start: 98px; +} + +/* First level */ +.tree-widget-item[level="1"] + ul > li > .tree-widget-item { + -moz-padding-start: 14px; +} + +/* Second level */ +.tree-widget-item[level="2"] + ul > li > .tree-widget-item { + -moz-padding-start: 28px; +} + +/* Third level */ +.tree-widget-item[level="3"] + ul > li > .tree-widget-item { + -moz-padding-start: 42px; +} + +/* Fourth level */ +.tree-widget-item[level="4"] + ul > li > .tree-widget-item { + -moz-padding-start: 56px; +} + +/* Fifth level */ +.tree-widget-item[level="5"] + ul > li > .tree-widget-item { + -moz-padding-start: 70px; +} + +/* Sixth level */ +.tree-widget-item[level="6"] + ul > li > .tree-widget-item { + -moz-padding-start: 84px; +} + +/* Custom icons for certain tree items indicating the type of the item */ + +.tree-widget-item[type]:after { + content: ""; + float: left; + width: 16px; + height: 17px; + -moz-margin-end: 4px; + background-repeat: no-repeat; + background-size: 20px auto; + filter: url('filters.svg#invert'); + background-position: 0 0; + background-size: auto 20px; +} + +.tree-widget-item:-moz-locale-dir(rtl):after { + float: right; +} + +.theme-dark .tree-widget-item[type]:after { + filter: url('filters.svg#invert-white'); +} + +.tree-widget-item[type="dir"]:after { + background-image: url(chrome://global/skin/devtools/filetype-dir-close.svg); + background-position: 2px 0; + background-size: auto 16px; + width: 20px; +} + +.tree-widget-item[type="dir"][expanded]:not([empty]):after { + background-image: url(chrome://global/skin/devtools/filetype-dir-open.svg); +} + +.tree-widget-item[type="url"]:after { + background-image: url(chrome://global/skin/devtools/filetype-globe.svg); + background-size: auto 18px; + width: 18px; +} + +/* 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/. */ + +/* Manifest Editor overrides */ + +.variables-view-container.manifest-editor { + background-color: #F5F5F5; + padding: 20px 2px; +} + +.manifest-editor .variable-or-property:focus > .title { + background-color: #EDEDED; + color: #000; + border-radius: 4px; +} + +.manifest-editor .variables-view-property > .title > .name { + color: #27406A; +} + +.manifest-editor .variable-or-property > .title > label, +.manifest-editor textbox { + font-family: monospace; +} + +.manifest-editor .variable-or-property > .title > .token-string { + color: #54BC6A; + font-weight: bold; +} + +.manifest-editor .variable-or-property > .title > .token-boolean, +.manifest-editor .variable-or-property > .title > .token-number { + color: #009BD4; + font-weight: bold; +} + +.manifest-editor .variable-or-property > .title > .token-undefined { + color: #bbb; +} + +.manifest-editor .variable-or-property > .title > .token-null { + color: #999; +} + +.manifest-editor .variable-or-property > .title > .token-other { + color: #333; +} + +.manifest-editor .variables-view-variable { + border-bottom: none; +} + +.manifest-editor .variables-view-delete, +.manifest-editor .variables-view-delete:hover, +.manifest-editor .variables-view-delete:active, +.manifest-editor .variable-or-property:focus .variables-view-delete, +.manifest-editor .variables-view-add-property, +.manifest-editor .variables-view-add-property:hover, +.manifest-editor .variables-view-add-property:active, +.manifest-editor .variable-or-property:focus .variables-view-add-property { + list-style-image: none; + -moz-image-region: initial; +} + +.manifest-editor .variables-view-delete::before, +.manifest-editor .variables-view-add-property::before { + width: 11px; + height: 11px; + content: ""; + display: inline-block; + background-size: 11px auto; +} + +.manifest-editor .variables-view-delete::before { + background-image: url("app-manager/remove.svg"); +} + +.manifest-editor .variables-view-add-property::before { + background-image: url("app-manager/add.svg"); + -moz-margin-end: 2px; +} + +.breadcrumbs-widget-item:-moz-focusring > .button-box { + border-width: 0; +} +\ No newline at end of file
