commit 6f70fd10444d00e1b375cdf6503f4aa69d312a4f parent 63e4337382178837b4633b667c3f32442efd0bd3 Author: Lootyhoof <lootyhoofer@gmail.com> Date: Sun, 9 Oct 2016 16:00:11 +0100 Add styling for PM27 devtools Diffstat:
212 files changed, 18271 insertions(+), 5387 deletions(-)
diff --git a/src/chrome/appver/26/browser.css b/src/chrome/appver/26/browser.css @@ -0,0 +1,88 @@ +/* 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 @@ -0,0 +1,222 @@ +/* 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 @@ -0,0 +1,399 @@ +/* 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/browser/devtools/app-manager/help.css b/src/chrome/appver/26/devtools/app-manager/help.css diff --git a/src/chrome/appver/26/devtools/app-manager/index.css b/src/chrome/appver/26/devtools/app-manager/index.css @@ -0,0 +1,93 @@ +/* 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 @@ -0,0 +1,497 @@ +/* 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 @@ -0,0 +1,155 @@ +/* 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 @@ -0,0 +1,508 @@ +/* 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 @@ -0,0 +1,176 @@ +/* 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 @@ -0,0 +1,195 @@ +/* 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 @@ -0,0 +1,464 @@ +/* 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 @@ -0,0 +1,78 @@ +* { + -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 @@ -0,0 +1,58 @@ +/* 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 @@ -0,0 +1,46 @@ +/* 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 @@ -0,0 +1,194 @@ +/* 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 @@ -0,0 +1,16 @@ +/* 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 @@ -0,0 +1,549 @@ +/* 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 @@ -0,0 +1,88 @@ +/* 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 @@ -0,0 +1,145 @@ +/* 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/scratchpad.css b/src/chrome/appver/26/devtools/scratchpad.css @@ -0,0 +1,13 @@ +/* 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/26/devtools/shadereditor.css b/src/chrome/appver/26/devtools/shadereditor.css @@ -0,0 +1,134 @@ +/* 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 @@ -0,0 +1,114 @@ +/* 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 @@ -0,0 +1,131 @@ +/* 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/browser/devtools/toolbox.css b/src/chrome/appver/26/devtools/toolbox.css diff --git a/src/chrome/appver/26/devtools/webconsole.css b/src/chrome/appver/26/devtools/webconsole.css @@ -0,0 +1,331 @@ +/* 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 @@ -0,0 +1,100 @@ +/* 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 @@ -0,0 +1,772 @@ +/* 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/27/browser.css b/src/chrome/appver/27/browser.css @@ -0,0 +1,172 @@ +/* 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/connection-footer.css b/src/chrome/appver/27/devtools/app-manager/connection-footer.css @@ -0,0 +1,224 @@ +/* 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; + flex-grow: 1; + max-height: 100%; +} + +#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; + 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/27/devtools/app-manager/device.css b/src/chrome/appver/27/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("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/browser/devtools/app-manager/help.css b/src/chrome/appver/27/devtools/app-manager/help.css diff --git a/src/chrome/appver/27/devtools/app-manager/index.css b/src/chrome/appver/27/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://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 @@ -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("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/commandline.css b/src/chrome/appver/27/devtools/commandline.css @@ -0,0 +1,154 @@ +/* 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: 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%); +} + +.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-name:hover, +.gcli-menu-desc:hover { + background-color: hsla(0,0%,0%,.3); +} + +.gcli-menu-highlight, +.gcli-menu-highlight:hover { + background-color: hsla(0,100%,100%,.1); +} + +.gcli-menu-typed { + color: hsl(25,78%,50%); +} + +.gcli-menu-more { + font-size: 80%; + text-align: end; + -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/27/devtools/common.css b/src/chrome/appver/27/devtools/common.css @@ -0,0 +1,231 @@ + +:root { + font: message-box; +} + +.devtools-monospace { + font-family: Consolas, monospace; +} + +/* Splitters */ +.devtools-horizontal-splitter { + -moz-appearance: none; + background-image: none; + background-color: transparent; + border: 0; + border-bottom: 1px solid rgba(118, 121, 125, .5); + min-height: 3px; + height: 3px; + margin-top: -3px; + position: relative; +} + +.devtools-side-splitter { + -moz-appearance: none; + background-image: none; + background-color: transparent; + border: 0; + -moz-border-end: 1px solid rgba(118, 121, 125, .5); + min-width: 3px; + width: 3px; + -moz-margin-start: -3px; + position: relative; + cursor: e-resize; +} + +.devtools-toolbox-side-iframe { + min-width: 465px; +} + +/* Autocomplete Popup */ +/* Dark and light theme */ + +.devtools-autocomplete-popup { + -moz-appearance: none !important; + box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset; + background-color: transparent; + border-radius: 3px; + overflow-x: hidden; + 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: end; +} + +/* Rest of the dark and light theme */ + +.devtools-autocomplete-popup, +.theme-dark .CodeMirror-hints, +.theme-dark .CodeMirror-Tern-tooltip { + border: 1px solid hsl(210,11%,10%); + background-image: linear-gradient(to bottom, hsla(209,18%,18%,0.9), hsl(210,11%,16%)); +} + +.devtools-autocomplete-popup.light-theme, +.light-theme .CodeMirror-hints, +.light-theme .CodeMirror-Tern-tooltip { + border: 1px solid hsl(210,24%,90%); + background-image: linear-gradient(to bottom, hsla(209,18%,100%,0.9), hsl(210,24%,95%)); +} + +.devtools-autocomplete-popup.light-theme { + box-shadow: 0 1px 0 hsla(209,29%,90%,.25) inset; +} + +.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; +} + +/* Tooltip widget (see browser/devtools/shared/widgets/Tooltip.js) */ + +.devtools-tooltip .panel-arrowcontent { + padding: 4px; +} + +.devtools-tooltip .panel-arrowcontainer { + /* Reseting the transition used when panels are shown */ + transition: none; + /* Panels slide up/down/left/right when they appear using a transform. + Since we want to remove the transition, we don't need to transform anymore + plus it can interfeer by causing mouseleave events on the underlying nodes */ + transform: none; +} + +.devtools-tooltip[clamped-dimensions] { + min-height: 100px; + max-height: 400px; + min-width: 100px; + max-width: 400px; +} +.devtools-tooltip[clamped-dimensions-no-min-height] { + min-height: 0; + max-height: 400px; + min-width: 100px; + max-width: 400px; +} +.devtools-tooltip[clamped-dimensions-no-max-or-min-height] { + min-width: 400px; + max-width: 400px; +} +.devtools-tooltip[clamped-dimensions] .panel-arrowcontent, +.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent, +.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent { + overflow: hidden; +} +.devtools-tooltip[wide] { + max-width: 600px; +} + +/* Tooltip: Simple Text */ + +.devtools-tooltip-simple-text { + max-width: 400px; + margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */ + padding: 8px 12px; + white-space: pre-wrap; +} + +.devtools-tooltip-simple-text:first-child { + margin-top: -4px; +} + +.devtools-tooltip-simple-text:last-child { + margin-bottom: -4px; +} + +/* Tooltip: Alert Icon */ + +.devtools-tooltip-alert-icon { + width: 32px; + height: 32px; + margin: 6px; + -moz-margin-end: 20px; +} + +.devtools-tooltip-alert-icon { + list-style-image: url("chrome://global/skin/icons/warning-32.png"); +} + +/* Tooltip: Variables View */ + +.devtools-tooltip-variables-view-box { + margin: -4px; /* Compensate for the .panel-arrowcontent padding. */ +} + +.devtools-tooltip-variables-view-box .variable-or-property > .title { + -moz-padding-end: 6px; +} + +/* Tooltip: Tiles */ + +.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; +} + +.devtools-tooltip-iframe { + border: none; + background: transparent; +} + +/* Eyedropper Widget */ + +.devtools-eyedropper-panel { + pointer-events: none; + -moz-appearance: none; + width: 156px; + height: 120px; + background-color: transparent; + border: none; +} diff --git a/src/chrome/appver/27/devtools/computedview.css b/src/chrome/appver/27/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("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 @@ -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://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 @@ -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("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/font-inspector.css b/src/chrome/appver/27/devtools/font-inspector.css @@ -0,0 +1,77 @@ +* { + 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 { + margin-left: -4px; + height: 60px; + 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/27/devtools/inspector.css b/src/chrome/appver/27/devtools/inspector.css @@ -0,0 +1,117 @@ +/* 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-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; +} + +/* Tooltip: Events */ + +#devtools-tooltip-events-container { + margin: -4px; /* Compensate for the .panel-arrowcontent padding. */ + max-width: 590px; + overflow-y: auto; +} + +.event-header { + display: flex; + align-items: center; + cursor: pointer; +} + +.event-tooltip-event-type, +.event-tooltip-filename, +.event-tooltip-attributes { + -moz-margin-start: 0; + flex-shrink: 0; + cursor: pointer; +} + +.event-tooltip-event-type { + font-weight: bold; + font-size: 13px; +} + +.event-tooltip-filename { + -moz-margin-end: 0; + font-size: 100%; + flex-shrink: 1; +} + +.event-tooltip-debugger-icon { + width: 16px; + height: 16px; + -moz-margin-end: 4px; + opacity: 0.6; + flex-shrink: 0; +} + +.event-tooltip-debugger-icon:hover { + opacity: 1; +} + +.event-tooltip-content-box { + display: none; + overflow: auto; + -moz-margin-end: 0; +} + +.event-tooltip-content-box[open] { + display: block; +} + +.event-tooltip-source-container { + margin-top: 5px; + margin-bottom: 10px; + -moz-margin-start: 5px; + -moz-margin-end: 0; +} + +.event-tooltip-source { + margin-bottom: 0; +} + +.event-tooltip-attributes-container { + display: flex; + flex-shrink: 0; + flex-grow: 1; + justify-content: flex-end; +} + +.event-tooltip-attributes-box { + display: flex; + flex-shrink: 0; + align-items: center; + border-radius: 3px; + padding: 2px; + -moz-margin-start: 5px; + background-color: var(--theme-body-color-alt); + color: var(--theme-toolbar-background); +} + +.event-tooltip-attributes { + margin: 0; + font-size: 9px; + padding-top: 2px; +} diff --git a/src/chrome/appver/27/devtools/layoutview.css b/src/chrome/appver/27/devtools/layoutview.css @@ -0,0 +1,60 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.theme-sidebar { + box-sizing: border-box; +} + +#main { + background-color: white; + border-color: hsla(210,100%,85%,0.7); + border-style: dotted; + color: var(--theme-selection-color); +} + +.margin, +.size { + color: var(--theme-highlight-blue); +} + +#content { + background-color: #87ceeb; + border-color: hsl(210,100%,85%); + border-style: dotted; +} + +#padding, +#margins { + border-color: hsla(210,100%,85%,0.2); + outline: dotted 1px hsl(210,100%,85%); +} + +#padding { + background-color: #6a5acd; +} + +#borders { + background-color: #444444; + border-style: dotted; + border-color: hsl(210,100%,85%); +} + +#margins { + background-color: #edff64; + /* This opacity applies to all of the regions, since they are nested. */ + opacity: .8; +} + +.editable { + border-bottom: 1px dashed transparent; +} + +.editable:hover { + border-bottom-color: hsl(0,0%,50%); +} + +.styleinspector-propertyeditor { + border: 1px solid #CCC; + padding: 0; +} diff --git a/src/chrome/appver/27/devtools/light-theme.css b/src/chrome/appver/27/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://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/markup-view.css b/src/chrome/appver/27/devtools/markup-view.css @@ -0,0 +1,100 @@ +/* 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; +} + + +/* Selected nodes in the tree should have light selected text. + theme-selected doesn't work in this case since the text is a + sibling of the class, not a child. */ +.theme-selected ~ .editor, +.theme-selected ~ .editor .theme-fg-color1, +.theme-selected ~ .editor .theme-fg-color2, +.theme-selected ~ .editor .theme-fg-color3, +.theme-selected ~ .editor .theme-fg-color4, +.theme-selected ~ .editor .theme-fg-color5, +.theme-selected ~ .editor .theme-fg-color6, +.theme-selected ~ .editor .theme-fg-color7 { + color: var(--theme-selection-color); +} + +/* In case a node isn't displayed in the page, we fade the syntax highlighting */ +.not-displayed .open, +.not-displayed .close { + opacity: .7; +} + +.tag-line { + padding-left: 2px; +} + +/* Preview */ + +#previewbar { + position: fixed; + top: 0; + right: 0; + width: 90px; + background: black; + border-left: 1px solid; + border-bottom: 1px solid; + overflow: hidden; +} + +#previewbar { + background: var(--theme-tab-toolbar-background); + border-color: var(--theme-splitter-color); +} + +#preview { + position: absolute; + top: 0; + right: 5px; + width: 80px; + height: 100%; + background-image: -moz-element(#root); + background-repeat: no-repeat; +} + +#previewbar.hide, +#previewbar.disabled { + display: none; +} + +#viewbox { + position: absolute; + top: 0; + right: 5px; + width: 80px; + border: 1px dashed #888; + background: rgba(205,205,255,0.2); + outline: 1px solid transparent; +} + +/* Events */ +.markupview-events { + font-size: 8px; + font-weight: bold; + line-height: 10px; + border-radius: 3px; + padding: 0px 2px; + -moz-margin-start: 5px; + -moz-user-select: none; +} + +.markupview-events { + background-color: var(--theme-body-color-alt); + color: var(--theme-body-background); +} diff --git a/src/chrome/appver/27/devtools/netmonitor.css b/src/chrome/appver/27/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("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 @@ -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("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 @@ -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("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 @@ -0,0 +1,13 @@ +/* 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 @@ -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("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 @@ -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("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 @@ -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("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 @@ -0,0 +1,278 @@ +/* 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 @@ -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://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/webconsole_networkpanel.css b/src/chrome/appver/27/devtools/webconsole_networkpanel.css @@ -0,0 +1,100 @@ +/* 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-table-header { + font-size: 11px; + font-weight: bold; + padding-right: 4px; + color: #000; + white-space: nowrap; + text-align: end; + vertical-align: top; + width: 10%; +} + +.property-table-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/27/devtools/widgets.css b/src/chrome/appver/27/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("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/browser/browser.css b/src/chrome/browser/browser.css @@ -1,5 +1,6 @@ @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"); @@ -2550,128 +2551,8 @@ html|*.highlighter-nodeinfobar-pseudo-classes { margin: 7px 0; } -/* Developer toolbar */ - -#developer-toolbar { - -moz-appearance: none; - padding: 0; - min-height: 32px; - background-image: url(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 > toolbarbutton { - -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 > 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); -} - -#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; -} - -#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%); - 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; -} - .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { background-color: hsl(210,30%,85%); color: hsl(210,24%,16%); diff --git a/src/chrome/browser/devtools/alerticon-warning@2x.png b/src/chrome/browser/devtools/alerticon-warning@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/animationinspector.css b/src/chrome/browser/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://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/add.svg b/src/chrome/browser/devtools/app-manager/add.svg @@ -4,7 +4,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/. --> -<!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="#00B2F7" 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 diff --git a/src/chrome/browser/devtools/app-manager/connection-footer.css b/src/chrome/browser/devtools/app-manager/connection-footer.css @@ -1,223 +1 @@ -/* 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; - flex-grow: 1; -} - -#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; -} +@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/default-app-icon.png b/src/chrome/browser/devtools/app-manager/default-app-icon.png Binary files differ. diff --git a/src/chrome/browser/devtools/app-manager/device.css b/src/chrome/browser/devtools/app-manager/device.css @@ -1,399 +1 @@ -/* 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('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('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; -} +@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/help.css b/src/chrome/browser/devtools/app-manager/help.css @@ -1,40 +1 @@ -/* 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; -} +@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.css b/src/chrome/browser/devtools/app-manager/index.css @@ -1,103 +1 @@ -/* 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; -} - -#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; -} +@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/projects.css b/src/chrome/browser/devtools/app-manager/projects.css @@ -1,548 +1 @@ -/* 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('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 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 */ +@import url("chrome://appver/skin/devtools/app-manager/projects.css"); +\ No newline at end of file diff --git a/src/chrome/browser/devtools/arrow-e@2x.png b/src/chrome/browser/devtools/arrow-e@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs-divider@2x.png b/src/chrome/browser/devtools/breadcrumbs-divider@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/breadcrumbs-scrollbutton@2x.png b/src/chrome/browser/devtools/breadcrumbs-scrollbutton@2x.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 @@ -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://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/close@2x.png b/src/chrome/browser/devtools/close@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-console.png b/src/chrome/browser/devtools/command-console.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-console@2x.png b/src/chrome/browser/devtools/command-console@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-eyedropper.png b/src/chrome/browser/devtools/command-eyedropper.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-eyedropper@2x.png b/src/chrome/browser/devtools/command-eyedropper@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-frames.png b/src/chrome/browser/devtools/command-frames.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-frames@2x.png b/src/chrome/browser/devtools/command-frames@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-paintflashing@2x.png b/src/chrome/browser/devtools/command-paintflashing@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-pick.png b/src/chrome/browser/devtools/command-pick.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-pick@2x.png b/src/chrome/browser/devtools/command-pick@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-responsivemode@2x.png b/src/chrome/browser/devtools/command-responsivemode@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-scratchpad@2x.png b/src/chrome/browser/devtools/command-scratchpad@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-screenshot.png b/src/chrome/browser/devtools/command-screenshot.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-screenshot@2x.png b/src/chrome/browser/devtools/command-screenshot@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/command-tilt@2x.png b/src/chrome/browser/devtools/command-tilt@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/commandline-icon@2x.png b/src/chrome/browser/devtools/commandline-icon@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/commandline.css b/src/chrome/browser/devtools/commandline.css @@ -1,153 +1 @@ -/* 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: 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%); -} - -.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; -} +@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,469 +1 @@ -/* 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; -} - -/* Toolbar and Toolbar items */ - -.devtools-toolbar { - -moz-appearance: none; - padding: 4px 3px; - color: hsl(210,30%,85%); - background-image: url(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(211,68%,6%,.5); - border-radius: 3px; - background: linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)) padding-box; - box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, 0 0 0 1px hsla(209,29%,72%,.1) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1); - margin: 0; - -moz-margin-end: 3px; - color: inherit; -} - -.devtools-toolbarbutton > .toolbarbutton-menubutton-button { - -moz-box-orient: horizontal; -} - -.devtools-menulist:-moz-focusring, -.devtools-toolbarbutton:-moz-focusring { - outline: 1px dotted hsla(210,30%,85%,0.7); - outline-offset: -4px; -} - -.devtools-toolbarbutton > .toolbarbutton-icon { - margin: 0; -} - -.devtools-toolbarbutton:not([label]) { - min-width: 32px; -} - -.devtools-toolbarbutton:not([label]) > .toolbarbutton-text { - display: none; -} - -.devtools-toolbarbutton:not([checked=true]):hover:active { - background-color: hsla(210,18%,9%,.1); - background-image: linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)); - box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1); -} - -.devtools-menulist[open=true], -.devtools-toolbarbutton[open=true], -.devtools-toolbarbutton[checked=true] { - border-color: hsla(211,68%,6%,.6); - background: linear-gradient(hsla(211,68%,6%,.1), hsla(211,68%,6%,.2)); - box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1); -} - -.devtools-toolbarbutton[checked=true] { - color: hsl(200,100%,60%) !important; -} - -.devtools-toolbarbutton[checked=true]:hover:active { - background-color: hsla(211,68%,6%,.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; - list-style-image: url("chrome://browser/skin/devtools/dropmarker.png"); - border-width: 0; - background-color: transparent; -} - -.devtools-menulist:focus:not([open="true"]):not(.menulist-compact) > .menulist-label-box { - color: hsl(210,30%,85%) !important; - background-color: transparent; -} - -.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button { - -moz-appearance: none; - color: inherit; - 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); -} - -.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"); - -moz-box-align: center; -} - -/* Text input */ - -.devtools-textinput, -.devtools-searchinput { - -moz-appearance: none; - margin: 0 3px; - min-height: 22px; - border: 1px solid hsla(211,68%,6%,.6); - box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05), 0 0 0 1px hsla(210,40%,83%,.1); - border-radius: 2px; - background-color: transparent; - background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35)); - padding: 3px; - transition-property: background-color, border-color, box-shadow; - transition-duration: 150ms; - transition-timing-function: ease; - color: inherit; -} - -.devtools-searchinput { - background-image: url(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[focused] { - border-color: hsl(200,70%,40%) hsl(200,75%,37%) hsl(200,80%,35%); - background-origin: padding-box; - background-clip: padding-box; - box-shadow: inset 0 0 0 1px hsla(211,68%,6%,.1); -} - -.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(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:hover:active { - opacity: 1; -} - -/* Splitters */ - -.devtools-horizontal-splitter { - -moz-appearance: none; - border-width: 1px 0 0 0; - -moz-border-top-colors: black; - background-color: transparent; - min-height: 3px; - height: 3px; - margin-bottom: -3px; - position: relative; -} - -.devtools-side-splitter { - border: 0; - -moz-border-start: 1px solid #242b33; - min-width: 0; - width: 3px; - background-color: transparent; - -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 { - -moz-appearance: none; - padding: 0; - border: 0; -} - -.devtools-sidebar-tabs > tabs { - -moz-appearance: none; - position: static; - color: hsl(210,30%,85%); - margin-bottom: 0; - padding: 0; - background-image: url(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, the padding of the button itself from toolbarbutton.css (3px), - * Also, we need to take the border of the buttons into accout (1px). - * Padding-bottom is one pixel shorter because we need to include the - * black border. - */ - padding: 8px 3px 7px; - -moz-padding-start: 6px; - margin: 0; - min-width: 78px; - text-shadow: 0 -1px 0 hsla(210,8%,5%,.45); - text-align: center; - color: inherit; - -moz-box-flex: 1; - border-width: 0; - background: transparent; - border-radius: 0; - position: static; - -moz-margin-start: -1px; -} - -.devtools-sidebar-tabs > tabs > tab:-moz-focusring { - position: static; -} - -.devtools-sidebar-tabs > tabs > tab:last-of-type { - -moz-border-end-width: 0; -} - -.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 { - 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; - } -} +@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,169 +1 @@ -/* 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 */ - -* { - 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; -} - -.property-value { - width: 50%; - max-width: 100%; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - background-image: url(arrow-e.png); - background-repeat: no-repeat; - background-size: 5px 8px; - background-position: 2px center; - padding-left: 10px; -} - -.other-property-value { - background-image: url(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; -} - -.expander[open] { - margin-left: -17px!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; -} +@import url("chrome://appver/skin/devtools/computedview.css"); +\ No newline at end of file diff --git a/src/chrome/browser/devtools/controls@2x.png b/src/chrome/browser/devtools/controls@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/cubic-bezier-swatch.png b/src/chrome/browser/devtools/cubic-bezier-swatch.png Binary files differ. diff --git a/src/chrome/browser/devtools/cubic-bezier-swatch@2x.png b/src/chrome/browser/devtools/cubic-bezier-swatch@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/dark-theme.css b/src/chrome/browser/devtools/dark-theme.css @@ -1,104 +1 @@ -/* 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; - margin-right: 5px; -} - -.theme-twisty:-moz-focusring { - outline-style: none; -} - -.theme-twisty:not([open]) { - width: 0; - height: 0; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid rgba(255,255,255,0.5); - margin-left: 5px; -} - -.theme-twisty[open] { - width: 10px; - height: 10px; - background-image: linear-gradient(to bottom right, transparent 68%, rgba(255,255,255,0.5) 68%); -} - -.theme-checkbox { - display: inline-block; - border: 0; - width: 14px; - height: 14px; - padding: 0; - outline: none; - background: url("chrome://browser/skin/devtools/checkbox-dark.png") no-repeat; -} - -.theme-checkbox[checked] { - background: url("chrome://browser/skin/devtools/checkbox-dark.png") 14px 0; -} - -.theme-selected { - background: #26384E; -} - -.theme-bg-darker { - background-color: rgba(0,0,0,0.1); -} - -.theme-link { /* blue */ - color: #3689b2; -} - -.theme-comment { /* grey */ - color: #5c6773; -} - -.theme-gutter { - background-color: #0f171f; - color: #667380; - border-color: #303b47; -} - -.theme-separator { /* grey */ - border-color: #303b47; -} - -.theme-fg-color1 { /* green */ - color: #5c9966; -} - -.theme-fg-color2 { /* blue */ - color: #3689b2; -} - -.theme-fg-color3 { /* pink/lavender */ - color: #a673bf; -} - -.theme-fg-color4 { /* purple/violet */ - color: #6270b2; -} - -.theme-fg-color5 { /* Yellow */ - color: #a18650; -} - -.theme-fg-color6 { /* Orange */ - color: #b26b47; -} - -.theme-fg-color7 { /* Red */ - color: #bf5656; -} +@import url("chrome://appver/skin/devtools/dark-theme.css"); +\ No newline at end of file diff --git a/src/chrome/browser/devtools/debugger-blackbox@2x.png b/src/chrome/browser/devtools/debugger-blackbox@2x.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-collapse@2x.png b/src/chrome/browser/devtools/debugger-collapse@2x.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-expand@2x.png b/src/chrome/browser/devtools/debugger-expand@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-pause@2x.png b/src/chrome/browser/devtools/debugger-pause@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-play@2x.png b/src/chrome/browser/devtools/debugger-play@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-prettyprint.png b/src/chrome/browser/devtools/debugger-prettyprint.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-prettyprint@2x.png b/src/chrome/browser/devtools/debugger-prettyprint@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-step-in@2x.png b/src/chrome/browser/devtools/debugger-step-in@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-step-out@2x.png b/src/chrome/browser/devtools/debugger-step-out@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-step-over@2x.png b/src/chrome/browser/devtools/debugger-step-over@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-toggleBreakpoints.png b/src/chrome/browser/devtools/debugger-toggleBreakpoints.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger-toggleBreakpoints@2x.png b/src/chrome/browser/devtools/debugger-toggleBreakpoints@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/debugger.css b/src/chrome/browser/devtools/debugger.css @@ -1,321 +1 @@ -/* 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-pane + .devtools-side-splitter { - -moz-border-start-color: transparent; -} - -/* 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 { - font-family: monospace; -} - -.dbg-breakpoint-line { - font-weight: 600; -} - -.dbg-breakpoint-text { - -moz-margin-start: 10px !important; - font-style: italic; -} - -/* 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; - font-family: Menlo, Monaco, monospace; -} - -/* Searchbox and the search operations help panel */ - -.devtools-searchinput { - min-width: 220px; - -moz-margin-start: 1px; -} - -#searchbox-panel-description { - margin-top: 0; - 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; - font-family: Menlo, Monaco, monospace; -} - -.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(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; - font-family: monospace; - color: #8c8c8c; -} - -.dbg-results-line-contents { - -moz-padding-start: 4px; - padding-top: 1px; - padding-bottom: 1px; - font-family: monospace; -} - -.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 { - 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 { - -moz-border-end-width: 0; -} - -#debugger-controls { - box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, - 0 0 0 1px hsla(209,29%,72%,.1) inset, - 0 0 0 1px hsla(209,29%,72%,.1), - 0 1px 0 hsla(210,16%,76%,.1); - 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:hover { - -moz-image-region: rect(0px,32px,16px,16px); -} - -#instruments-pane-toggle:hover:active { - -moz-image-region: rect(0px,48px,16px,32px); -} +@import url("chrome://appver/skin/devtools/debugger.css"); +\ No newline at end of file diff --git a/src/chrome/browser/devtools/dock-bottom@2x.png b/src/chrome/browser/devtools/dock-bottom@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/dock-side@2x.png b/src/chrome/browser/devtools/dock-side@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/dropmarker.svg b/src/chrome/browser/devtools/dropmarker.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="4" viewBox="0 0 8 4" enable-background="new 0 0 8 4"> + <polygon points="0,0 4,4 8,0" fill="#B6BABF" /> +</svg> +\ No newline at end of file diff --git a/src/chrome/browser/devtools/editor-breakpoint.png b/src/chrome/browser/devtools/editor-breakpoint.png Binary files differ. diff --git a/src/chrome/browser/devtools/editor-breakpoint@2x.png b/src/chrome/browser/devtools/editor-breakpoint@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/editor-debug-location.png b/src/chrome/browser/devtools/editor-debug-location.png Binary files differ. diff --git a/src/chrome/browser/devtools/editor-debug-location@2x.png b/src/chrome/browser/devtools/editor-debug-location@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/eyedropper.css b/src/chrome/browser/devtools/eyedropper.css @@ -0,0 +1,45 @@ +/* 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/. */ + +#canvas { + image-rendering: -moz-crisp-edges; + cursor: none; + border: 3px solid #E0E0E0; + border-radius: 50%; +} + +#canvas-overflow { + overflow: hidden; + width: 96px; + height: 96px; +} + +#color-preview { + width: 16px; + height: 16px; + box-shadow: 0px 0px 0px black; + border: solid 1px #fff; + margin: 3px; +} + +#color-value-box { + background-color: #E0E0E0; + border-radius: 1px; + width: 150px; +} + +#color-value { + padding: 0.3em; + text-shadow: 1px 1px 1px #fff; +} + +#color-value.highlight { + font-family: inherit; +} + +window { + /* inexplicably, otherwise background shows up on Linux */ + border: 1px solid transparent; + background-color: transparent; +} diff --git a/src/chrome/browser/devtools/filetype-dir-close.svg b/src/chrome/browser/devtools/filetype-dir-close.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" width="16" height="16"> + <path d="M 0.00,160.00 L 512.00,160.00 L 480.00,480.00 L 32.00,480.00 L 0.00,160.00 Z M 464.00,96.00 L 480.00,128.00 L 32.00,128.00 L 64.00,64.00 L 240.00,64.00 L 256.00,96.00 L 464.00,96.00 Z"/> +</svg> diff --git a/src/chrome/browser/devtools/filetype-dir-open.svg b/src/chrome/browser/devtools/filetype-dir-open.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" width="16" height="16"> + <path d="M 416.00,480.00L 512.00,224.00L 96.00,224.00L0.00,480.00 zM 64.00,192.00 L 0.00,480.00 L 0.00,64.00 L 144.00,64.00 L 208.00,128.00 L 416.00,128.00 L 416.00,192.00 Z"/> +</svg> diff --git a/src/chrome/browser/devtools/filetype-globe.svg b/src/chrome/browser/devtools/filetype-globe.svg @@ -0,0 +1,3 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="20" viewBox="0 0 878 1024"> + <path d="M438.857 73.143q119.429 0 220.286 58.857t159.714 159.714 58.857 220.286-58.857 220.286-159.714 159.714-220.286 58.857-220.286-58.857-159.714-159.714-58.857-220.286 58.857-220.286 159.714-159.714 220.286-58.857zM595.429 370.857q-1.143 0.571-5.429 5.429t-7.714 5.429q1.143 0 2.571-2.857t2.857-6.286 2-4q3.429-4 12.571-8.571 8-3.429 29.714-6.857 19.429-4.571 29.143 6.286-1.143-1.143 5.429-7.429t8.286-6.857q1.714-1.143 8.571-2.571t8.571-4.286l1.143-12.571q-6.857 0.571-10-4t-3.714-12q0 1.143-3.429 4.571 0-4-2.571-4.571t-6.571 0.571-5.143 0.571q-5.714-1.714-8.571-4.286t-4.571-9.429-2.286-8.571q-1.143-2.857-5.429-6t-5.429-6q-0.571-1.143-1.429-3.143t-1.714-3.714-2.286-3.143-3.143-1.429-4 2.857-4.286 5.714-2.571 2.857q-1.714-1.143-3.429-0.857t-2.571 0.571-2.571 1.714-2.857 2q-1.714 1.143-4.857 1.714t-4.857 1.143q8.571-2.857-0.571-6.286-5.714-2.286-9.143-1.714 5.143-2.286 4.286-6.857t-4.857-8h2.857q-0.571-2.286-4.857-4.857t-10-4.857-7.429-3.429q-4.571-2.857-19.429-5.429t-18.857-0.286q-2.857 3.429-2.571 6t2.286 8 2 7.143q0.571 3.429-3.143 7.429t-3.714 6.857q0 4 8 8.857t5.714 12.286q-1.714 4.571-9.143 9.143t-9.143 6.857q-2.857 4.571-0.857 10.571t6 9.429q1.143 1.143 0.857 2.286t-2 2.571-3.143 2.286-3.714 2l-1.714 1.143q-6.286 2.857-11.714-3.429t-7.714-14.857q-4-14.286-9.143-17.143-13.143-4.571-16.571 0.571-2.857-7.429-23.429-14.857-14.286-5.143-33.143-2.286 3.429-0.571 0-8.571-4-8.571-10.857-6.857 1.714-3.429 2.286-10t0.571-7.714q1.714-7.429 6.857-13.143 0.571-0.571 4-4.857t5.429-7.714 0.286-3.429q20 2.286 28.571-6.286 2.857-2.857 6.571-9.714t6-9.714q5.143-3.429 8-3.143t8.286 3.143 8.286 2.857q8 0.571 8.857-6.286t-4.286-11.429q6.857 0.571 1.714-9.714-2.857-4-4.571-5.143-6.857-2.286-15.429 2.857-4.571 2.286 1.143 4.571-0.571-0.571-5.429 6t-9.429 10-9.143-2.857q-0.571-0.571-3.143-7.714t-5.429-7.714q-4.571 0-9.143 8.571 1.714-4.571-6.286-8.571t-13.714-4.571q10.857-6.857-4.571-15.429-4-2.286-11.714-2.857t-11.143 2.286q-2.857 4-3.143 6.571t2.857 4.571 6 3.143 6.571 2.286 4.857 1.714q8 5.714 4.571 8-1.143 0.571-4.857 2t-6.571 2.571-3.429 2.286q-1.714 2.286 0 8t-1.143 8q-2.857-2.857-5.143-10t-4-9.429q4 5.143-14.286 3.429l-5.714-0.571q-2.286 0-9.143 1.143t-11.714 0.571-7.714-4.571q-2.286-4.571 0-11.429 0.571-2.286 2.286-1.143-2.286-1.714-6.286-5.429t-5.714-4.857q-26.286 8.571-53.714 23.429 3.429 0.571 6.857-0.571 2.857-1.143 7.429-3.714t5.714-3.143q19.429-8 24-4l2.857-2.857q8 9.143 11.429 14.286-4-2.286-17.143-0.571-11.429 3.429-12.571 6.857 4 6.857 2.857 10.286-2.286-1.714-6.571-5.714t-8.286-6.286-8.571-2.857q-9.143 0-12.571 0.571-83.429 45.714-134.286 126.857 4 4 6.857 4.571 2.286 0.571 2.857 5.143t1.429 6.286 6.571-1.714q5.143 4.571 1.714 10.857 0.571-0.571 25.143 15.429 10.857 9.714 12 12 1.714 6.286-5.714 10.286-0.571-1.143-5.143-5.143t-5.143-2.286q-1.714 2.857 0.286 10.571t6 7.143q-4 0-5.429 9.143t-1.429 20.286-0.571 13.429l1.143 0.571q-1.714 6.857 3.143 19.714t12.286 11.143q-7.429 1.714 11.429 24.571 3.429 4.571 4.571 5.143 1.714 1.143 6.857 4.286t8.571 5.714 5.714 6q2.286 2.857 5.714 12.857t8 13.429q-1.143 3.429 5.429 11.429t6 13.143q-0.571 0-1.429 0.571t-1.429 0.571q1.714 4 8.857 8t8.857 7.429q0.571 1.714 1.143 5.714t1.714 6.286 4.571 1.143q1.143-11.429-13.714-35.429-8.571-14.286-9.714-16.571-1.714-2.857-3.143-8.857t-2.571-8.286q1.143 0 3.429 0.857t4.857 2 4.286 2.286 1.143 1.714q-1.714 4 1.143 10t6.857 10.571 9.714 10.857 6.857 7.429q3.429 3.429 8 11.143t0 7.714q5.143 0 11.429 5.714t9.714 11.429q2.857 4.571 4.571 14.857t2.857 13.714q1.143 4 4.857 7.714t7.143 5.429l9.143 4.571t7.429 4q2.857 1.143 10.571 6t12.286 6.571q5.714 2.286 9.143 2.286t8.286-1.429 7.714-2q8.571-1.143 16.571 8.571t12 12q20.571 10.857 31.429 6.286-1.143 0.571 0.286 4.286t4.571 8.857 5.143 8.286 3.143 4.857q2.857 3.429 10.286 8.571t10.286 8.571q3.429-2.286 4-5.143-1.714 4.571 4 11.429t10.286 5.714q8-1.714 8-18.286-17.714 8.571-28-10.286 0-0.571-1.429-3.143t-2.286-4.857-1.429-4.857 0-4.286 2.857-1.714q5.143 0 5.714-2t-1.143-7.143-2.286-7.429q-0.571-4.571-6.286-11.429t-6.857-8.571q-2.857 5.143-9.143 4.571t-9.143-5.143q0 0.571-0.857 3.143t-0.857 3.714q-7.429 0-8.571-0.571 0.571-1.714 1.429-10t2-12.857q0.571-2.286 3.143-6.857t4.286-8.286 2.286-7.143-2.571-5.429-10-1.429q-10.857 0.571-14.857 11.429-0.571 1.714-1.714 6t-2.857 6.571-5.143 4q-4 1.714-13.714 1.143t-13.714-2.857q-7.429-4.571-12.857-16.571t-5.429-21.143q0-5.714 1.429-15.143t1.714-14.286-3.143-14q1.714-1.143 5.143-5.429t5.714-6q1.143-0.571 2.571-0.857t2.571 0 2.286-0.857 1.714-3.429q-0.571-0.571-2.286-1.714-1.714-1.714-2.286-1.714 4 1.714 16.286-0.857t15.714 0.857q8.571 6.286 12.571-1.143 0-0.571-1.429-5.429t-0.286-7.714q2.857 15.429 16.571 5.143 1.714 1.714 8.857 2.857t10 2.857q1.714 1.143 4 3.143t3.143 2.571 2.857-0.286 4.857-3.714q5.714 8 6.857 13.714 6.286 22.857 10.857 25.143 4 1.714 6.286 1.143t2.571-5.429 0-8-0.857-7.143l-0.571-4.571v-10.286l-0.571-4.571q-8.571-1.714-10.571-6.857t0.857-10.571 8.571-10.571q0.571-0.571 4.571-2t8.857-3.714 7.143-4.571q12-10.857 8.571-20 4 0 6.286-5.143-0.571 0-2.857-1.714t-4.286-2.857-2.571-1.143q5.143-2.857 1.143-9.143 2.857-1.714 4.286-6.286t4.286-5.714q5.143 6.857 12 1.143 4-4.571 0.571-9.143 2.857-4 11.714-6t10.571-5.429q4 1.143 4.571-1.143t0.571-6.857 1.714-6.857q2.286-2.857 8.571-5.143t7.429-2.857l9.714-6.286q1.714-2.286 0-2.286 10.286 1.143 17.714-6.286 5.714-6.286-3.429-11.429 1.714-3.429-1.714-5.429t-8.571-3.143q1.714-0.571 6.571-0.286t6-0.857q8.571-5.714-4-9.143-9.714-2.857-24.571 6.857zM502.286 872q117.714-20.571 200.571-108-1.714-1.714-7.143-2.571t-7.143-2q-10.286-4-13.714-4.571 0.571-4-1.429-7.429t-4.571-5.143-7.143-4.571-6.286-4q-1.143-1.143-4-3.429t-4-3.143-4.286-2.571-4.857-1.143-5.714 0.571l-1.714 0.571q-1.714 0.571-3.143 1.429t-3.143 1.714-2.286 1.714 0 1.429q-12-9.714-20.571-12.571-2.857-0.571-6.286-3.143t-6-4-5.714-0.857-6.571 4q-2.857 2.857-3.429 8.571t-1.143 7.429q-4-2.857 0-10t1.143-10.571q-1.714-3.429-6-2.571t-6.857 2.571-6.571 4.857-5.143 3.714-4.857 3.143-4.857 4.286q-1.714 2.286-3.429 6.857t-2.857 6.286q-1.143-2.286-6.571-3.714t-5.429-3.143q1.143 5.714 2.286 20t2.857 21.714q4 17.714-6.857 27.429-15.429 14.286-16.571 22.857-2.286 12.571 6.857 14.857 0 4-4.571 11.714t-4 12.286q0 3.429 1.143 9.143z"/> +</svg> diff --git a/src/chrome/browser/devtools/filetype-store.svg b/src/chrome/browser/devtools/filetype-store.svg @@ -0,0 +1,7 @@ +<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16"> +<g> +<path d="m1.3,12.5v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6,0-6.6-2.7-6.6-2.7z"/> +<path d="m14.7,3.4c0-1.4-3-2.5-6.7-2.5s-6.7,1.1-6.7,2.5c0,.2 0,.3 .1,.5-.1-.3-.1-.4-.1-.4v1.5c0,0 0,2.7 6.7,2.7 6.7,0 6.8-2.7 6.8-2.7v-1.6c0,.1 0,.2-.1,.5-0-.2-0-.3-0-.5z"/> +<path d="m1.3,8.7v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6-0-6.6-2.7-6.6-2.7z"/> +</g> +</svg> diff --git a/src/chrome/browser/devtools/filters.svg b/src/chrome/browser/devtools/filters.svg @@ -0,0 +1,27 @@ +<svg height="0" xmlns="http://www.w3.org/2000/svg"> +<filter id="invert" x="0%" y="0%" width="100%" height="100%" > + <feComponentTransfer> + <feFuncR type="table" tableValues=".1 0"/> + <feFuncG type="table" tableValues=".1 0"/> + <feFuncB type="table" tableValues=".1 0"/> + </feComponentTransfer> +</filter> +<filter id="invert-white" x="0%" y="0%" width="100%" height="100%" > + <feComponentTransfer> + <feFuncR type="table" tableValues=".6 0"/> + <feFuncG type="table" tableValues=".6 0"/> + <feFuncB type="table" tableValues=".6 0"/> + </feComponentTransfer> + </filter> + + <!-- Web Audio Gradients --> + <linearGradient id="bypass-light" x1="6%" y1="8%" x2="12%" y2="12%" spreadMethod="repeat"> + <stop offset="0%" stop-color="#f0f1f2"/> <!-- theme-toolbar-background --> + <stop offset="50%" stop-color="#fff"/> + </linearGradient> + + <linearGradient id="bypass-dark" x1="6%" y1="8%" x2="12%" y2="12%" spreadMethod="repeat"> + <stop offset="0%" stop-color="#343c45"/> <!-- theme-toolbar-background --> + <stop offset="50%" stop-color="transparent"/> + </linearGradient> +</svg> diff --git a/src/chrome/browser/devtools/font-inspector.css b/src/chrome/browser/devtools/font-inspector.css @@ -1,80 +1 @@ -* { - box-sizing: border-box; -} - -body { - margin: 0; - padding-bottom: 20px; -} - -#all-fonts { - padding: 0 5px; - margin: 0; -} - -#showall { - border-radius: 0; - border: 1px solid black; - margin: 3px; - cursor: pointer; - position: fixed; - bottom: 0; - right: 0; -} - -.font { - padding: 10px 5px; - font-size: 0; -} - -.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 { - font-size: 1rem; - 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; -} +@import url("chrome://appver/skin/devtools/font-inspector.css"); +\ No newline at end of file diff --git a/src/chrome/browser/devtools/inspector.css b/src/chrome/browser/devtools/inspector.css @@ -1,35 +1 @@ -/* 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-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: 6px; - -moz-padding-start: 22px; - background-position: 8px center, top left, top left; -} - -#inspector-searchbox[focused], -#inspector-searchbox[filled] { - max-width: 200px !important; -} +@import url("chrome://appver/skin/devtools/inspector.css"); +\ No newline at end of file diff --git a/src/chrome/browser/devtools/itemArrow-dark-ltr.svg b/src/chrome/browser/devtools/itemArrow-dark-ltr.svg @@ -0,0 +1,4 @@ +<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 7 12"> +<path fill="#181D20" d="M7,11.6 7,.4 1.5,6z"/> +<path fill="#000" d="M7,0 6,0 0,6 6,12 7,12 7,11.6 1.5,6 7,.4z"/> +</svg> diff --git a/src/chrome/browser/devtools/itemArrow-dark-rtl.svg b/src/chrome/browser/devtools/itemArrow-dark-rtl.svg @@ -0,0 +1,4 @@ +<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 7 12"> +<path fill="#181D20" d="M0,11.6 0,.4 5.5,6z"/> +<path fill="#000" d="M1,0 0,0 0,.4 5.5,6 0,11.6 0,12 1,12 7,6z"/> +</svg> +\ No newline at end of file diff --git a/src/chrome/browser/devtools/itemArrow-ltr.svg b/src/chrome/browser/devtools/itemArrow-ltr.svg @@ -0,0 +1,4 @@ +<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 7 12"> +<path fill="#f7f7f7" d="M7,11.6 7,.4 1.5,6z"/> +<path fill="#ababab" d="M7,0 6,0 0,6 6,12 7,12 7,11.6 1.5,6 7,.4z"/> +</svg> diff --git a/src/chrome/browser/devtools/itemArrow-rtl.svg b/src/chrome/browser/devtools/itemArrow-rtl.svg @@ -0,0 +1,4 @@ +<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 7 12"> +<path fill="#f7f7f7" d="M0,11.6 0,.4 5.5,6z"/> +<path fill="#ababab" d="M1,0 0,0 0,.4 5.5,6 0,11.6 0,12 1,12 7,6z"/> +</svg> diff --git a/src/chrome/browser/devtools/itemToggle@2x.png b/src/chrome/browser/devtools/itemToggle@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/layoutview.css b/src/chrome/browser/devtools/layoutview.css @@ -1,46 +1 @@ -/* 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(layout-background-grid.png); -} - -.theme-light .theme-body { - background-image: url(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%); - 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%); -} +@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,104 +1 @@ -/* 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; - margin-right: 5px; -} - -.theme-twisty:-moz-focusring { - outline-style: none; -} - -.theme-twisty:not([open]) { - width: 0; - height: 0; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid rgba(0,0,0,0.5); - margin-left: 5px; -} - -.theme-twisty[open] { - width: 10px; - height: 10px; - background-image: linear-gradient(to bottom right, transparent 68%, rgba(0,0,0,0.5) 68%); -} - -.theme-checkbox { - display: inline-block; - border: 0; - width: 14px; - height: 14px; - padding: 0; - outline: none; - background: url("chrome://browser/skin/devtools/checkbox-light.png") no-repeat; -} - -.theme-checkbox[checked] { - background: url("chrome://browser/skin/devtools/checkbox-light.png") 14px 0; -} - -.theme-selected { - background-color: hsl(0,0%,90%); -} - -.theme-bg-darker { - background: #F9F9F9; -} - -.theme-link { /* blue */ - color: hsl(208,56%,40%); -} - -.theme-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 { /* green */ - color: hsl(72,100%,27%); -} - -.theme-fg-color2 { /* blue */ - color: hsl(208,56%,40%); -} - -.theme-fg-color3 { /* dark blue */ - color: hsl(208,81%,21%) -} - -.theme-fg-color4 { /* Orange */ - color: hsl(24,85%,39%); -} - -.theme-fg-color5 { /* Yellow */ - color: #a18650; -} - -.theme-fg-color6 { /* Orange */ - color: hsl(24,85%,39%); -} - -.theme-fg-color7 { /* Red */ - color: #bf5656; -} +@import url("chrome://appver/skin/devtools/light-theme.css"); +\ No newline at end of file diff --git a/src/chrome/browser/devtools/magnifying-glass-light.png b/src/chrome/browser/devtools/magnifying-glass-light.png Binary files differ. diff --git a/src/chrome/browser/devtools/magnifying-glass-light@2x.png b/src/chrome/browser/devtools/magnifying-glass-light@2x.png Binary files differ. 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/magnifying-glass@2x.png b/src/chrome/browser/devtools/magnifying-glass@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/markup-view.css b/src/chrome/browser/devtools/markup-view.css @@ -1,44 +1 @@ -/* 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; -} - -.newattr { - cursor: pointer; -} - -.selected { - background-color: hsl(0,0%,90%); -} - -/* Give some padding to focusable elements to match the editor input - * that will replace them. */ -span[tabindex] { - display: inline-block; - padding: 1px 0; -} - -li.container { - position: relative; - padding: 2px 0 0 2px; -} - -.codebox { - padding-left: 14px; -} - -.expander { - position: absolute; -} - -.more-nodes { - padding-left: 16px; -} - -.styleinspector-propertyeditor { - border: 1px solid #CCC; -} +@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,531 +1 @@ -/* 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(background-noise-toolbar.png), hsl(208,11%,27%); -} - -/* Network requests table */ - -#requests-menu-empty-notice { - background: url(background-noise-toolbar.png), hsl(208,11%,27%); - padding: 12px; - font-size: 110%; - color: #fff; -} - -#requests-menu-toolbar { - height: 33px; - 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: 32px; /* 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: 1px; - -moz-padding-start: 4px; - -moz-border-start: 1px dotted #999; - font-size: 90%; - 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); -} - -.side-menu-widget-item-contents { - padding: 0; -} - -/* 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(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; - font-family: Menlo, Monaco, monospace; -} - -.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; -} - -/* Response tabpanel */ - -#response-content-info-header { - background: - url(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; -} - -/* 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: 0px 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: 0px 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. */ - } -} +@import url("chrome://appver/skin/devtools/netmonitor.css"); +\ No newline at end of file diff --git a/src/chrome/browser/devtools/newtab-inverted.png b/src/chrome/browser/devtools/newtab-inverted.png Binary files differ. diff --git a/src/chrome/browser/devtools/newtab-inverted@2x.png b/src/chrome/browser/devtools/newtab-inverted@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/newtab.png b/src/chrome/browser/devtools/newtab.png Binary files differ. diff --git a/src/chrome/browser/devtools/newtab@2x.png b/src/chrome/browser/devtools/newtab@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/performance-icons.svg b/src/chrome/browser/devtools/performance-icons.svg @@ -0,0 +1,42 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px"> +<style> + g { + fill: #edf0f1; + } + g:not(:target) { + display: none; + } +</style> +<g id="overview-markers"> + <rect x="0px" y="3px" width="5px" height="2.5px" rx="1" ry="1"/> + <rect x="7px" y="3px" width="9px" height="2.5px" rx="1" ry="1"/> + <rect x="0px" y="7px" width="9px" height="2.5px" rx="1" ry="1"/> + <rect x="10px" y="7px" width="6px" height="2.5px" rx="1" ry="1"/> + <rect x="4px" y="11px" width="5px" height="2.5px" rx="1" ry="1"/> + <rect x="12px" y="11px" width="4px" height="2.5px" rx="1" ry="1"/> +</g> +<g id="overview-frames"> + <rect x="1px" y="4px" width="2px" height="12px" rx="1" ry="1"/> + <rect x="5px" y="12px" width="2px" height="4px" rx="1" ry="1"/> + <rect x="9px" y="9px" width="2px" height="7px" rx="1" ry="1"/> + <rect x="13px" y="7px" width="2px" height="9px" rx="1" ry="1"/> +</g> +<g id="details-waterfall"> + <rect x="0px" y="3px" width="9px" height="2.5px" rx="1" ry="1"/> + <rect x="5px" y="7px" width="8px" height="2.5px" rx="1" ry="1"/> + <rect x="7px" y="11px" width="9px" height="2.5px" rx="1" ry="1"/> +</g> +<g id="details-call-tree"> + <rect x="0px" y="3px" width="16px" height="2px" rx="1" ry="1"/> + <rect x="0px" y="6px" width="8px" height="2px" rx="1" ry="1"/> + <rect x="0px" y="9px" width="11px" height="2px" rx="1" ry="1"/> + <rect x="0px" y="12px" width="6px" height="2px" rx="1" ry="1"/> +</g> +<g id="details-flamegraph"> + <rect x="0px" y="3px" width="16px" height="2px" rx="1" ry="1"/> + <rect x="0px" y="6px" width="8px" height="2px" rx="1" ry="1"/> + <rect x="10px" y="6px" width="6px" height="2px" rx="1" ry="1"/> + <rect x="2px" y="9px" width="6px" height="2px" rx="1" ry="1"/> + <rect x="5px" y="12px" width="3px" height="2px" rx="1" ry="1"/> +</g> +</svg> diff --git a/src/chrome/browser/devtools/performance.css b/src/chrome/browser/devtools/performance.css @@ -0,0 +1,455 @@ +/* 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(255,255,255,0.5); + --row-alt-background-color: rgba(29,79,115,0.15); + --row-hover-background-color: rgba(29,79,115,0.25); +} + +.theme-light { + --cell-border-color: rgba(0,0,0,0.15); + --focus-cell-border-color: rgba(0,0,0,0.3); + --row-alt-background-color: rgba(76,158,217,0.1); + --row-hover-background-color: rgba(76,158,217,0.2); +} + +/* Toolbar */ + +#performance-toolbar > tabs, +#performance-toolbar { + -moz-border-end-color: var(--theme-splitter-color); +} + +#performance-toolbar-controls-detail-views > toolbarbutton { + min-width: 0; +} + +#performance-toolbar-controls-detail-views .toolbarbutton-text { + -moz-padding-start: 4px; + -moz-padding-end: 8px; +} + +/* Recording Notice */ + +#performance-view .notice-container { + font-size: 120%; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color); + padding-bottom: 20vh; +} + +#performance-view .notice-container button { + min-width: 30px; + min-height: 28px; + margin: 0; +} + +/* Overview Panel */ + +.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; +} + +.record-button .button-icon { + margin: 0; +} + +.record-button .button-text { + display: none; +} + +/* Details Panel */ + +#select-waterfall-view { + list-style-image: url(performance-icons.svg#details-waterfall); +} + +#select-js-calltree-view, +#select-memory-calltree-view { + list-style-image: url(performance-icons.svg#details-call-tree); +} + +#select-js-flamegraph-view, +#select-memory-flamegraph-view { + list-style-image: url(performance-icons.svg#details-flamegraph); +} + +/* Profile call tree */ + +.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 { + font-size: 90%; + padding-top: 2px !important; + padding-bottom: 2px !important; +} + +.call-tree-header[type="duration"], +.call-tree-cell[type="duration"], +.call-tree-header[type="self-duration"], +.call-tree-cell[type="self-duration"] { + width: 6vw; +} + +.call-tree-header[type="percentage"], +.call-tree-cell[type="percentage"], +.call-tree-header[type="self-percentage"], +.call-tree-cell[type="self-percentage"] { + width: 5vw; +} + +.call-tree-header[type="samples"], +.call-tree-cell[type="samples"] { + width: 4.5vw; +} + +.call-tree-header[type="allocations"], +.call-tree-cell[type="allocations"], +.call-tree-header[type="self-allocations"], +.call-tree-cell[type="self-allocations"] { + width: 7vw; +} + +.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); + -moz-border-end-color: var(--cell-border-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: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; +} + +/** + * Details Waterfall Styles + */ + +.waterfall-list-contents { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); + overflow-x: hidden; + overflow-y: auto; +} + +.waterfall-header-contents { + overflow-x: hidden; +} + +.waterfall-background-ticks { + /* Background created on a <canvas> in js. */ + /* @see browser/devtools/timeline/widgets/waterfall.js */ + background-image: -moz-element(#waterfall-background); + background-repeat: repeat-y; + background-position: -1px center; +} + +.waterfall-marker-container[is-spacer] { + pointer-events: none; +} + +.theme-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(255,255,255,0.03); +} + +.theme-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(128,128,128,0.03); +} + +.theme-dark .waterfall-marker-container:hover { + background-color: rgba(255,255,255,0.1) !important; +} + +.theme-light .waterfall-marker-container:hover { + background-color: rgba(128,128,128,0.1) !important; +} + +.waterfall-marker-item { + overflow: hidden; +} + +.waterfall-sidebar { + -moz-border-end: 1px solid var(--theme-splitter-color); +} + +.waterfall-marker-container:hover > .waterfall-sidebar { + background-color: transparent; +} + +.waterfall-header-name { + padding: 2px 4px; + font-size: 90%; +} + +.waterfall-header-tick { + width: 100px; + font-size: 9px; + transform-origin: left center; + color: var(--theme-body-color); +} + +.waterfall-header-tick:not(:first-child) { + -moz-margin-start: -100px !important; /* Don't affect layout. */ +} + +.waterfall-marker-bullet { + width: 8px; + height: 8px; + -moz-margin-start: 8px; + -moz-margin-end: 6px; + border: 1px solid; + border-radius: 1px; +} + +.waterfall-marker-name { + font-size: 95%; + padding-bottom: 1px !important; +} + +.waterfall-marker-bar { + height: 9px; + border: 1px solid; + border-radius: 1px; + transform-origin: left center; +} + +.waterfall-marker-container.selected > .waterfall-sidebar, +.waterfall-marker-container.selected > .waterfall-marker-item { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.waterfall-marker-container.selected .waterfall-marker-bullet, +.waterfall-marker-container.selected .waterfall-marker-bar { + border-color: initial !important; +} + +.waterfall-marker-location { + color: -moz-nativehyperlinktext; +} + +.waterfall-marker-location:hover, +.waterfall-marker-location:focus { + text-decoration: underline; +} + +#waterfall-details { + -moz-padding-start: 8px; + -moz-padding-end: 8px; + padding-top: 2vh; + overflow: auto; +} + +.marker-details-bullet { + width: 8px; + height: 8px; + border: 1px solid; + border-radius: 1px; +} + +#waterfall-details > * { + padding-top: 3px; +} + +.marker-details-labelname { + -moz-padding-end: 4px; +} + +.marker-details-type { + font-size: 1.2em; + font-weight: bold; +} + +.marker-details-duration { + font-weight: bold; +} + +/* 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; +} diff --git a/src/chrome/browser/devtools/power.svg b/src/chrome/browser/devtools/power.svg @@ -0,0 +1,14 @@ +<!-- +Logo from raphaeljs.com, MIT License + +Copyright © 2008 Dmitry Baranovskiy + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software. +--> +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"> + <path stroke="#edf0f1" d="m10.89891,2.50043c-0.49827,-0.24134 -1.09841,-0.03411 -1.34129,0.46514c-0.24185,0.49928 -0.03311,1.09942 0.46517,1.34128c1.56306,0.76071 2.64193,2.36094 2.64092,4.21555c-0.00501,2.58626 -2.09749,4.6787 -4.68322,4.68321c-2.58623,-0.005 -4.67869,-2.09746 -4.68371,-4.68321c-0.001,-1.85561 1.07834,-3.45731 2.64294,-4.21654c0.49928,-0.24185 0.7065,-0.84201 0.46514,-1.34129c-0.24185,-0.49825 -0.84098,-0.70697 -1.34029,-0.46513c-2.23396,1.08135 -3.77446,3.37351 -3.77545,6.02296c0.00099,3.69518 2.99518,6.68989 6.69138,6.69088c3.6957,-0.00099 6.69037,-2.9957 6.69089,-6.69088c-0.00102,-2.64846 -1.53948,-4.9391 -3.77247,-6.02197zm-2.91842,4.9346c0.55398,0 1.00309,-0.44861 1.00309,-1.00357l0,-4.68373c0,-0.55446 -0.44911,-1.00309 -1.00309,-1.00309c-0.555,0 -1.00358,0.44911 -1.00358,1.00309l0,4.68321c0,0.55499 0.44858,1.00409 1.00358,1.00409z" stroke-width="0" fill="#edf0f1"/> +</svg> diff --git a/src/chrome/browser/devtools/profiler-stopwatch-checked.svg b/src/chrome/browser/devtools/profiler-stopwatch-checked.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16"> +<g fill="#3BACE5" fill-rule="evenodd"> +<path d="m8,1c-3.9,0-7,3.1-7,7s3.1,7 7,7c3.9,0 7-3.1 7-7s-3.1-7-7-7zm-.1,12c-2.8,0-5-2.2-5-5 0-2.8 2.2-5 5-5s5,2.2 5,5c0,2.8-2.2,5-5,5z"/> +<path d="m8,6.9c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1 0-.6 .5-1.1 1.1-1.1z"/> +<path d="m11.3,4.6l-3.9,2.5 1.5,1.4 2.4-3.9z"/> +<path opacity=".4" d="m4.6,10c.7,1.2 2,2 3.4,2 1.5,0 2.7-.8 3.4-2h-6.8z"/> +<g opacity=".3"> +<path d="m7.1,5.1l-.6-1.3-.9,.4 .7,1.3c.2-.1 .5-.3 .8-.4z"/> +<path d="m9.8,5.6l.7-1.4-.9-.4-.7,1.3c.3,.2 .6,.3 .9,.5z"/> +<path d="m10.8,7c.1,.3 .2,.7 .2,1h2v-1h-2.2z"/> +<path d="m5,8c0-.3 .1-.7 .2-1h-2.2l-.1,1h2.1z"/> +</g> +</g> +</svg> diff --git a/src/chrome/browser/devtools/profiler-stopwatch.svg b/src/chrome/browser/devtools/profiler-stopwatch.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16"> +<g fill="#edf0f1" fill-rule="evenodd"> +<path d="m8,1c-3.9,0-7,3.1-7,7s3.1,7 7,7c3.9,0 7-3.1 7-7s-3.1-7-7-7zm-.1,12c-2.8,0-5-2.2-5-5 0-2.8 2.2-5 5-5s5,2.2 5,5c0,2.8-2.2,5-5,5z"/> +<path d="m8,6.9c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1 0-.6 .5-1.1 1.1-1.1z"/> +<path d="m11.3,4.6l-3.9,2.5 1.5,1.4 2.4-3.9z"/> +<path opacity=".4" d="m4.6,10c.7,1.2 2,2 3.4,2 1.5,0 2.7-.8 3.4-2h-6.8z"/> +<g opacity=".3"> +<path d="m7.1,5.1l-.6-1.3-.9,.4 .7,1.3c.2-.1 .5-.3 .8-.4z"/> +<path d="m9.8,5.6l.7-1.4-.9-.4-.7,1.3c.3,.2 .6,.3 .9,.5z"/> +<path d="m10.8,7c.1,.3 .2,.7 .2,1h2v-1h-2.2z"/> +<path d="m5,8c0-.3 .1-.7 .2-1h-2.2l-.1,1h2.1z"/> +</g> +</g> +</svg> diff --git a/src/chrome/browser/devtools/profiler.css b/src/chrome/browser/devtools/profiler.css @@ -1,42 +1 @@ -/* 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 { - min-width: 196px; -} - -.profiler-sidebar + .devtools-side-splitter { - -moz-border-start-color: transparent; -} - -.profiler-sidebar-item { - padding: 3px 5px; -} - -.profiler-sidebar-item > h3 { - font-size: 13px; - display: block; -} - -.profiler-sidebar-item > span { - margin-top: 2px; - color: rgb(140, 152, 165); -} - -.selected .profiler-sidebar-item > span { - color: rgb(128, 195, 228); -} - -.devtools-toolbar { - height: 26px; - padding: 3px; -} - -.devtools-toolbar .devtools-toolbarbutton { - min-width: 48px; - min-height: 0; - font-size: 11px; - padding: 0px 8px; -} -\ No newline at end of file +@import url("chrome://appver/skin/devtools/profiler.css"); +\ No newline at end of file diff --git a/src/chrome/browser/devtools/projecteditor/projecteditor.css b/src/chrome/browser/devtools/projecteditor/projecteditor.css @@ -0,0 +1,188 @@ +/* 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/. */ + + :root { + color: #18191a; +} + +.view-project-detail { + overflow: auto; +} + +.plugin-hidden { + display: none; +} + +.arrow { + -moz-appearance: treetwisty; + width: 20px; + height: 20px; +} + +.arrow[open] { + -moz-appearance: treetwistyopen; +} + +.arrow[invisible] { + visibility: hidden; +} + +#projecteditor-menubar { + display: none; +} + +#projecteditor-toolbar, +#projecteditor-toolbar-bottom { + display: none; /* For now don't show the status bars */ + min-height: 22px; + height: 22px; + background: rgb(237, 237, 237); +} + +#sources { + overflow: auto; +} + +.sources-tree { + overflow:auto; + overflow-x: hidden; + -moz-user-focus: normal; + + /* Allows this to expand inside of parent xul element, while + still supporting child flexbox elements, including ellipses. */ + -moz-box-flex: 1; + display: block; +} + +.sources-tree input { + margin: 2px; + border: 1px solid gray; +} + +#main-deck .sources-tree { + background: rgb(225, 225, 225); + min-width: 100px; +} + +.entry { + color: #18191A; + display: flex; + align-items: center; +} + +.entry .file-label { + display: flex; + flex: 1; + align-items: center; +} + +.entry { + border: none; + box-shadow: none; + white-space: nowrap; + cursor: pointer; +} + +.entry:hover:not(.entry-group-title):not(.selected) { + background: rgba(0, 0, 0, .05); +} + +.entry.selected { + background: rgba(56, 117, 215, 1); + color: #F5F7FA; + outline: none; +} + +.entry-group-title { + background: rgba(56, 117, 215, 0.8); + color: #F5F7FA; + font-weight: bold; + font-size: 1.05em; + line-height: 35px; + padding: 0 10px; +} + +.sources-tree .entry-group-title .expander { + display: none; +} + +.entry .expander { + width: 16px; + padding: 0; +} + +.tree-collapsed .children { + display: none; +} + +/* Plugins */ + +#projecteditor-toolbar textbox { + margin: 0; +} + +.projecteditor-basic-display { + padding: 0 3px; +} + +/* App Manager */ +.project-name-label { + font-weight: bold; + padding-left: 10px; + overflow: hidden; + text-overflow: ellipsis; +} + +.project-flex { + flex: 1; +} + +.project-image { + max-height: 25px; + margin-left: -10px; +} + +.project-image, +.project-status, +.project-options { + flex-shrink: 0; +} + +.project-status { + width: 10px; + height: 10px; + border-radius: 50%; + border: solid 1px rgba(255, 255, 255, .5); + margin-right: 10px; + visibility: hidden; +} + +.project-status[status=valid] { + background: #70bf53; + visibility: visible; +} + +.project-status[status=warning] { + background: #d99b28; + visibility: visible; +} + +.project-status[status=error] { + background: #ed2655; + visibility: visible; +} + +/* Status Bar */ +.projecteditor-file-label { + font-weight: bold; + padding-left: 29px; + padding-right: 10px; + flex: 1; +} + +/* Image View */ +.editor-image { + padding: 10px; +} diff --git a/src/chrome/browser/devtools/responsive-horizontal-resizer@2x.png b/src/chrome/browser/devtools/responsive-horizontal-resizer@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsive-se-resizer@2x.png b/src/chrome/browser/devtools/responsive-se-resizer@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsive-vertical-resizer@2x.png b/src/chrome/browser/devtools/responsive-vertical-resizer@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsiveui-home.png b/src/chrome/browser/devtools/responsiveui-home.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsiveui-rotate@2x.png b/src/chrome/browser/devtools/responsiveui-rotate@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsiveui-screenshot@2x.png b/src/chrome/browser/devtools/responsiveui-screenshot@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/responsiveui-touch@2x.png b/src/chrome/browser/devtools/responsiveui-touch@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/ruleview.css b/src/chrome/browser/devtools/ruleview.css @@ -1,131 +1 @@ -/* 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-rule-inheritance { - border-top-width: 1px; - border-bottom-width: 1px; - border-top-style: solid; - border-bottom-style: solid; - padding: 1px 4px; - margin-top: 4px; - -moz-user-select: none; -} - -.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; - vertical-align: middle; - 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-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; -} +@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,9 +1 @@ -/* 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; -} +@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,138 +1 @@ -/* 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/. */ - -#body { - background: url(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(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(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); - } -} +@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,115 +1 @@ -/* 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(211,21%,26%); - 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,40%,83%,.1); - box-shadow: inset 0 -1px 0 hsla(211,68%,6%,.3); - -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(itemArrow-ltr.png), - linear-gradient(to right, black, black), - linear-gradient(hsl(200,100%,33%), hsl(200,100%,25%)); - 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(itemArrow-rtl.png), - linear-gradient(to right, black, black), - linear-gradient(hsl(200,100%,33%), hsl(200,100%,25%)); - 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-top-width: 0; - 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(209,18%,34%), hsl(210,24%,16%)); - 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); -} +@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 @@ -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://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,131 +1 @@ -/* 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(211,21%,26%); -} - -.stylesheet-title, -.stylesheet-name { - text-decoration: none; - color: hsl(210,30%,85%); -} - -.stylesheet-name { - font-size: 13px; -} - -.stylesheet-rule-count, -.stylesheet-saveButton { - color: hsl(210,16%,53%); -} - -.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(205,50%,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(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; - } -} +@import url("chrome://appver/skin/devtools/styleeditor.css"); +\ No newline at end of file diff --git a/src/chrome/browser/devtools/timeline-filter.svg b/src/chrome/browser/devtools/timeline-filter.svg @@ -0,0 +1,37 @@ +<?xml version="1.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/. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + x="0px" y="0px" + width="16" height="16" + viewBox="0 0 16 16" + enable-background="new 0 0 16 16" + xml:space="preserve"> +<style> +use:not(:target) { + display: none; +} + +use { + fill: #EDF0F1; +} + +use[id$="-disabled"] { + fill-opacity: 0.5; +} + +use[id$="-open"] { + fill: #3BACE5; +} + +</style> +<defs style="display:none"> + <path id="filter-shape" + d="M 2,2 v 3 l 5,4 v 6 h 2 v -6 l 5,-4 v -3 L 14,2 z"/> +</defs> +<use id="filter" xlink:href="#filter-shape"/> +<use id="filter-disabled" xlink:href="#filter-shape"/> +<use id="filter-open" xlink:href="#filter-shape"/> +</svg> diff --git a/src/chrome/browser/devtools/timeline.css b/src/chrome/browser/devtools/timeline.css @@ -0,0 +1,250 @@ +/* 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/. */ + +#record-button { + list-style-image: url(profiler-stopwatch.svg); + min-width: 24px; +} + +#record-button[checked] { + list-style-image: url(profiler-stopwatch-checked.svg); +} + +#record-button:not([checked]) ~ #record-label { + visibility: hidden; +} + +#memory-checkbox .checkbox-label { + line-height: 100%; +} + +#filter-button { + list-style-image: url(timeline-filter.svg#filter); + min-width: 24px; +} + +#filter-button[disabled] { + list-style-image: url(timeline-filter.svg#filter-disabled); +} + +#filter-button[open] { + list-style-image: url(timeline-filter.svg#filter-open); +} + +#timelineFilterPopup > menuitem:before { + content: ""; + display: block; + width: 8px; + height: 8px; + margin: 0 8px; + border: 1px solid; + border-radius: 1px; + background-color: var(--bullet-bg); + border-color: var(--bullet-border); +} + +.notice-container { + font-size: 120%; + padding-bottom: 35vh; +} + +.theme-dark .notice-container { + background: #343c45; /* Toolbars */ + color: #f5f7fa; /* Light foreground text */ +} + +.theme-light .notice-container { + background: #f0f1f2; /* Toolbars */ + color: #585959; /* Grey foreground text */ +} + +#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 #timeline-pane { + border-top: 1px solid #000; +} + +.theme-light #timeline-pane { + border-top: 1px solid #aaa; +} + +.waterfall-list-contents { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); + overflow-x: hidden; + overflow-y: auto; +} + +.waterfall-header-contents { + overflow-x: hidden; +} + +.waterfall-background-ticks { + /* Background created on a <canvas> in js. */ + /* @see browser/devtools/timeline/widgets/waterfall.js */ + background-image: -moz-element(#waterfall-background); + background-repeat: repeat-y; + background-position: -1px center; +} + +.waterfall-marker-container[is-spacer] { + pointer-events: none; +} + +.theme-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(255,255,255,0.03); +} + +.theme-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(128,128,128,0.03); +} + +.theme-dark .waterfall-marker-container:hover { + background-color: rgba(255,255,255,0.1) !important; +} + +.theme-light .waterfall-marker-container:hover { + background-color: rgba(128,128,128,0.1) !important; +} + +.waterfall-marker-item { + overflow: hidden; +} + +.waterfall-sidebar { + -moz-border-end: 1px solid; +} + +.theme-dark .waterfall-sidebar { + -moz-border-end-color: #000; +} + +.theme-light .waterfall-sidebar { + -moz-border-end-color: #aaa; +} + +.waterfall-marker-container:hover > .waterfall-sidebar { + background-color: transparent; +} + +.waterfall-header-name { + padding: 4px; +} + +.waterfall-header-tick { + width: 100px; + font-size: 9px; + transform-origin: left center; +} + +.theme-dark .waterfall-header-tick { + color: #a9bacb; +} + +.theme-light .waterfall-header-tick { + color: #292e33; +} + +.waterfall-header-tick:not(:first-child) { + -moz-margin-start: -100px !important; /* Don't affect layout. */ +} + +.waterfall-marker-bullet { + width: 8px; + height: 8px; + -moz-margin-start: 8px; + -moz-margin-end: 6px; + border: 1px solid; + border-radius: 1px; +} + +.waterfall-marker-name { + font-size: 95%; + padding-bottom: 1px !important; +} + +.waterfall-marker-bar { + height: 9px; + border: 1px solid; + border-radius: 1px; + transform-origin: left center; +} + +.theme-light .waterfall-marker-container.selected > .waterfall-sidebar, +.theme-light .waterfall-marker-container.selected > .waterfall-marker-item { + background-color: #4c9ed9; /* Select Highlight Blue */ + color: #f5f7fa; /* Light foreground text */ +} + +.theme-dark .waterfall-marker-container.selected > .waterfall-sidebar, +.theme-dark .waterfall-marker-container.selected > .waterfall-marker-item { + background-color: #1d4f73; /* Select Highlight Blue */ + color: #f5f7fa; /* Light foreground text */ +} + +.waterfall-marker-container.selected .waterfall-marker-bullet, +.waterfall-marker-container.selected .waterfall-marker-bar { + border-color: initial!important; +} + +.waterfall-marker-location { + color: -moz-nativehyperlinktext; +} + +.waterfall-marker-location:hover, +.waterfall-marker-location:focus { + text-decoration: underline; +} + +#timeline-waterfall-details { + -moz-padding-start: 8px; + -moz-padding-end: 8px; + padding-top: 2vh; + overflow: auto; +} + +.marker-details-bullet { + width: 8px; + height: 8px; + border: 1px solid; + border-radius: 1px; +} + +#timeline-waterfall-details > * { + padding-top: 3px; +} + +.marker-details-labelname { + -moz-padding-end: 4px; +} + +.marker-details-type { + font-size: 1.2em; + font-weight: bold; +} + +.marker-details-duration { + font-weight: bold; +} diff --git a/src/chrome/browser/devtools/toggle-tools@2x.png b/src/chrome/browser/devtools/toggle-tools@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/tool-debugger-paused.svg b/src/chrome/browser/devtools/tool-debugger-paused.svg @@ -0,0 +1,3 @@ +<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16"> +<path fill="#71c054" fill-rule="evenodd" d="m8,1c-3.9,0-7,3.1-7,7 0,3.9 3.1,7 7,7 3.9,0 7-3.1 7-7 0-3.9-3.1-7-7-7zm2,11h-1-5c-.6,0-1-.4-1-1v-6c0-.6 .4-1 1-1h5 1l4,4-4,4z"/> +</svg> diff --git a/src/chrome/browser/devtools/tool-debugger.svg b/src/chrome/browser/devtools/tool-debugger.svg @@ -0,0 +1,7 @@ +<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16"> +<g fill="#edf0f1" fill-rule="evenodd"> +<path d="m8,1c-3.9,0-7,3.1-7,7 0,3.9 3.1,7 7,7 3.9,0 7-3.1 7-7 0-3.9-3.1-7-7-7zm0,12c-2.8,0-5-2.2-5-5 0-2.8 2.2-5 5-5 2.8,0 5,2.2 5,5 0,2.8-2.2,5-5,5z"/> +<path d="m6,5c.6,0 1,.4 1,1v4c0,.6-.4,1-1,1-.6,0-1-.4-1-1v-4c0-.6 .4-1 1-1z"/> +<path d="m10,5c.6,0 1,.4 1,1v4c0,.6-.4,1-1,1-.6,0-1-.4-1-1v-4c0-.6 .4-1 1-1z"/> +</g> +</svg> diff --git a/src/chrome/browser/devtools/tool-inspector.svg b/src/chrome/browser/devtools/tool-inspector.svg @@ -0,0 +1,9 @@ +<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16"> +<path fill="#eef0f2" fill-rule="evenodd" d="M2,4v9h11V4H2z M11,11H4V6h7V11z"/> +<g opacity=".8"> +<path opacity=".8" fill="#eef0f2" fill-rule="evenodd" d="M0,8h2v1H0V8z"/> +<path opacity=".8" fill="#eef0f2" fill-rule="evenodd" d="M13,8h2v1h-2V8z"/> +<path opacity=".8" fill="#eef0f2" fill-rule="evenodd" d="M7,2h1v2H7V2z"/> +<path opacity=".8" fill="#eef0f2" fill-rule="evenodd" d="M7,13h1v2H7V13z"/> +</g> +</svg> diff --git a/src/chrome/browser/devtools/tool-network.svg b/src/chrome/browser/devtools/tool-network.svg @@ -0,0 +1,36 @@ +<svg width="17" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 17 16"> +<g fill="#edf0f1" fill-rule="evenodd"> +<path opacity=".1" d="M2.1,0h12.8C16,0,17,1,17,2.1v10.6c0,1.2-1,2.1-2.1,2.1H2.1c-1.2,0-2.1-1-2.1-2.1V2.1C0,1,1,0,2.1,0z"/> +<path d="m2.1,2.1h9.6c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1h-9.6c-.6,0-1.1-.5-1.1-1.1 .1-.6 .5-1.1 1.1-1.1z"/> +</g> +<g opacity=".7"> +<g opacity=".75"> +<path fill="#edf0f1" fill-rule="evenodd" d="m7.4,5.3h7.4c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1h-7.4c-.5-.1-1-.5-1-1.1 0-.6 .5-1.1 1-1.1z"/> +</g> +<g opacity=".85"> +<path fill="#edf0f1" d="m14.9,5.7c.4,0 .7,.3 .7,.7s-.4,.6-.7,.6h-7.5c-.3,0-.6-.3-.6-.6s.3-.7 .7-.7h7.4m0-.4h-7.5c-.6,0-1.1,.5-1.1,1.1 0,.6 .5,1.1 1.1,1.1h7.4c.6,0 1.1-.5 1.1-1.1 0-.6-.4-1.1-1-1.1z"/> +</g> +</g> +<g opacity=".75"> +<path fill="#edf0f1" fill-rule="evenodd" d="m5.3,8.5h3.2c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1h-3.2c-.6,0-1.1-.5-1.1-1.1 .1-.6 .5-1.1 1.1-1.1z"/> +</g> +<g opacity=".85"> +<path fill="#edf0f1" d="m8.5,8.9c.4,0 .7,.3 .7,.7 0,.4-.3,.7-.7,.7h-3.2c-.4,0-.7-.3-.7-.7 0-.4 .3-.7 .7-.7h3.2m0-.4h-3.2c-.6,0-1.1,.5-1.1,1.1 0,.6 .5,1.1 1.1,1.1h3.2c.6,0 1.1-.5 1.1-1.1 0-.6-.5-1.1-1.1-1.1z"/> +</g> +<g opacity=".7"> +<g opacity=".75"> +<path fill="#edf0f1" fill-rule="evenodd" d="m4.3,11.7h2.1c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1h-2.1c-.6,0-1.1-.5-1.1-1.1 0-.6 .5-1.1 1.1-1.1z"/> +</g> +<g opacity=".85"> +<path fill="#edf0f1" d="m6.4,12.1c.4,0 .7,.3 .7,.7 0,.4-.3,.7-.7,.7h-2.1c-.4,0-.7-.3-.7-.7 0-.4 .3-.7 .7-.7h2.1m0-.4h-2.1c-.6,0-1.1,.5-1.1,1.1 0,.6 .5,1.1 1.1,1.1h2.1c.6,0 1.1-.5 1.1-1.1-.1-.6-.5-1.1-1.1-1.1z"/> +</g> +</g> +<g opacity="5.000000e-02" fill="#edf0f1" fill-rule="evenodd"> +<path d="m7.4,14.3v-13.8c0-.3-.2-.5-.5-.5-.3,0-.5,.2-.5,.5v13.8c0,.3 .2,.5 .5,.5 .3,.1 .5-.2 .5-.5z"/> +<path d="m4.2,14.3v-13.8c0-.3-.2-.5-.5-.5-.3,0-.5,.2-.5,.5v13.8c0,.3 .2,.5 .5,.5 .3,.1 .5-.2 .5-.5z"/> +<path d="m1,14.6c0-.1 0-.1 0-.2v-13.9c0-.1 0-.1 0-.2-.6,.4-1,1-1,1.8v10.6c0,.8 .4,1.5 1,1.9z"/> +<path d="m16,.3c0,.1 0,.1 0,.2v13.8c0,.1 0,.1 0,.2 .6-.4 1-1 1-1.8v-10.6c0-.7-.4-1.4-1-1.8z"/> +<path d="m13.8,14.3v-13.8c0-.3-.2-.5-.5-.5-.3,0-.5,.2-.5,.5v13.8c0,.3 .2,.5 .5,.5 .3,.1 .5-.2 .5-.5z"/> +<path d="m10.6,14.3v-13.8c0-.3-.2-.5-.5-.5-.3,0-.5,.2-.5,.5v13.8c0,.3 .2,.5 .5,.5 .3,.1 .5-.2 .5-.5z"/> +</g> +</svg> diff --git a/src/chrome/browser/devtools/tool-options.svg b/src/chrome/browser/devtools/tool-options.svg @@ -0,0 +1,3 @@ +<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16"> +<path fill="#edf0f1" d="m11.5,13.9l-.6-1.5c.3-.2 .5-.4 .8-.6 .2-.2 .4-.5 .6-.7l1.5,.6c.3,.1 .6,0 .7-.3l.4-1c.1-.3 0-.6-.3-.7l-1.5-.6c.1-.6 .1-1.3 0-2l1.5-.6c.3-.1 .4-.4 .3-.7l-.4-1c-.1-.3-.4-.4-.7-.3l-1.5,.6c-.2-.3-.4-.5-.6-.8-.2-.1-.5-.3-.7-.5l.6-1.5c.1-.3 0-.6-.3-.7l-.9-.4c-.3-.1-.6,0-.7,.3l-.6,1.5c-.6-.1-1.3-.1-2,0l-.6-1.5c-.1-.3-.4-.4-.7-.3l-1,.4c-.2,.1-.3,.4-.2,.6l.6,1.5c-.3,.3-.5,.5-.8,.7-.2,.3-.4,.5-.6,.8l-1.5-.7c-.3-.1-.6,0-.7,.3l-.4,.9c-.1,.3 0,.6 .3,.7l1.5,.7c-.1,.6-.1,1.3 0,1.9l-1.5,.6c-.3,.1-.4,.4-.3,.7l.4,1c.1,.3 .4,.4 .7,.3l1.5-.6c.2,.3 .4,.5 .6,.8 .2,.2 .5,.4 .7,.6l-.6,1.5c-.1,.3 0,.6 .3,.7l1,.4c.3,.1 .6,0 .7-.3l.6-1.5c.6,.1 1.3,.1 2,0l.6,1.5c.1,.3 .4,.4 .7,.3l1-.4c.1-.1 .3-.4 .1-.7zm-5.1-4.2c-.9-.9-.9-2.4 0-3.3 .9-.9 2.4-.9 3.3,0 .9,.9 .9,2.4 0,3.3-.9,.9-2.4,.9-3.3,0z"/> +</svg> diff --git a/src/chrome/browser/devtools/tool-profiler.svg b/src/chrome/browser/devtools/tool-profiler.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16"> +<g fill="#edf0f1" fill-rule="evenodd"> +<path d="m8,1c-3.9,0-7,3.1-7,7s3.1,7 7,7c3.9,0 7-3.1 7-7s-3.1-7-7-7zm-.1,12c-2.8,0-5-2.2-5-5 0-2.8 2.2-5 5-5s5,2.2 5,5c0,2.8-2.2,5-5,5z"/> +<path d="m8,6.9c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1 0-.6 .5-1.1 1.1-1.1z"/> +<path d="m11.3,4.6l-3.9,2.5 1.5,1.4 2.4-3.9z"/> +<path opacity=".4" d="m4.6,10c.7,1.2 2,2 3.4,2 1.5,0 2.7-.8 3.4-2h-6.8z"/> +<g opacity=".3"> +<path d="m7.1,5.1l-.6-1.3-.9,.4 .7,1.3c.2-.1 .5-.3 .8-.4z"/> +<path d="m9.8,5.6l.7-1.4-.9-.4-.7,1.3c.3,.2 .6,.3 .9,.5z"/> +<path d="m10.8,7c.1,.3 .2,.7 .2,1h2v-1h-2.2z"/> +<path d="m5,8c0-.3 .1-.7 .2-1h-2.2l-.1,1h2.1z"/> +</g> +</g> +</svg> diff --git a/src/chrome/browser/devtools/tool-scratchpad.svg b/src/chrome/browser/devtools/tool-scratchpad.svg @@ -0,0 +1,6 @@ +<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16"> +<g fill="#edf0f1" fill-rule="evenodd"> +<path opacity=".3" d="m1.1,6.3c0-.3 .3-.6 .6-.6h4.6c.3,0 .6,.3 .6,.6s-.3,.6-.6,.6h-4.6c-.3,0-.6-.3-.6-.6zm12,1.7h-10.2c-.4,0-.6,.3-.6,.6 0,.3 .3,.6 .6,.6h10.3c.3,0 .6-.3 .6-.6-.1-.3-.3-.6-.7-.6zm-5.7,3.4c.3,0 .6-.3 .6-.6 0-.3-.3-.6-.6-.6h-4.5c-.3,0-.6,.3-.6,.6 0,.3 .3,.6 .6,.6h4.5zm2.3,1.2h-8c-.3,0-.6,.3-.6,.6 0,.3 .3,.6 .6,.6h8c.3,0 .6-.3 .6-.6 0-.4-.3-.6-.6-.6z"/> +<path d="m14.3,2.3h-.6v1.1c0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1v-.5c0,.3 .3,.6 .6,.6 .3,0 .6-.3 .6-.6v-.6-1.7c0-.1 0-.2-.1-.3-.1-.1-.1-.1-.2-.2-.2-.1-.3-.1-.4-.1-.3,0-.6,.3-.6,.6v1.7h-1.1v1.1c0,.6-.5,1.1-1.1,1.1-.7,.1-1.2-.4-1.2-1.1v-.5c0,.3 .3,.6 .6,.6 .3,0 .6-.3 .6-.6v-.6-1.7c0-.1 0-.2-.1-.3-.1-.1-.2-.2-.3-.2-.1-.1-.1-.1-.2-.1-.3,0-.6,.3-.6,.6v1.7h-1.1v1.1c0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1v-.5c0,.3 .3,.6 .6,.6 .3,0 .6-.3 .6-.6v-.6-1.7c0-.1 0-.2-.1-.3-.3-.1-.3-.2-.4-.2-.1-.1-.2-.1-.3-.1-.3,0-.5,.3-.5,.6v1.7h-1.2v1.1c0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1v-.5c0,.3 .3,.6 .6,.6 .3,0 .6-.3 .6-.6v-.6-1.7c0-.1 0-.2-.1-.3-.2-.1-.2-.2-.3-.2-.1-.1-.2-.1-.3-.1-.3,0-.6,.3-.6,.6v1.7h-.5c-.3,0-.6,.2-.6,.6v12.6c0,.2 .3,.5 .6,.5h13.7c.3,0 .6-.3 .6-.6v-12.5c0-.4-.3-.6-.6-.6zm-12.6,3.4h4.6c.3,0 .6,.3 .6,.6s-.3,.6-.6,.6h-4.6c-.3,0-.6-.3-.6-.6s.3-.6 .6-.6zm8,8h-8c-.3,0-.6-.3-.6-.6 0-.3 .3-.6 .6-.6h8c.3,0 .6,.3 .6,.6 0,.4-.3,.6-.6,.6zm-7.4-2.8c0-.3 .3-.6 .6-.6h4.6c.3,0 .6,.3 .6,.6 0,.3-.3,.6-.6,.6h-4.6c-.4-.1-.6-.3-.6-.6zm10.8-1.8h-10.2c-.3,0-.6-.3-.6-.6 0-.2 .2-.5 .6-.5h10.3c.3,0 .6,.3 .6,.6-.1,.3-.3,.5-.7,.5z"/> +</g> +</svg> diff --git a/src/chrome/browser/devtools/tool-storage.svg b/src/chrome/browser/devtools/tool-storage.svg @@ -0,0 +1,7 @@ +<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16"> +<g fill="#edf0f1"> +<path d="m1.3,12.5v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6,0-6.6-2.7-6.6-2.7z"/> +<path d="m14.7,3.4c0-1.4-3-2.5-6.7-2.5s-6.7,1.1-6.7,2.5c0,.2 0,.3 .1,.5-.1-.3-.1-.4-.1-.4v1.5c0,0 0,2.7 6.7,2.7 6.7,0 6.8-2.7 6.8-2.7v-1.6c0,.1 0,.2-.1,.5-0-.2-0-.3-0-.5z"/> +<path d="m1.3,8.7v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6-0-6.6-2.7-6.6-2.7z"/> +</g> +</svg> diff --git a/src/chrome/browser/devtools/tool-styleeditor.svg b/src/chrome/browser/devtools/tool-styleeditor.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 17 16"> +<g fill="#edf0f1" fill-rule="evenodd"> +<path d="m10,11.1 0,2.3-7.8,0 0-11.2 5.6-0 1.1,1.1 1.7-1.6-1.7-1.7-8.9,0 0,15.6 12.2,0 0-6.7z"/> +<path d="M6.7,7.8L14.5,0l2.2,2.2L8.9,10l-3.3,1.1L6.7,7.8z"/> +</g> +</svg> diff --git a/src/chrome/browser/devtools/tool-webaudio.svg b/src/chrome/browser/devtools/tool-webaudio.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="-6.167 -16.135 100 100" enable-background="new -6.167 -16.135 100 100" xml:space="preserve"> + <path fill="none" stroke="#edf0f1" stroke-width="8" stroke-linecap="round" stroke-miterlimit="10" d="M86.666,33.864 c-0.797,5.297-3.467,32.799-10.518,32.866c-7.086,0.066-9.973-27.596-10.9-32.866C64.322,28.597,61.436,0.933,54.35,1 c-7.105,0.068-9.644,27.561-10.517,32.864c-0.874,5.305-3.412,32.799-10.517,32.866c-7.087,0.066-9.974-27.596-10.899-32.866 C21.49,28.597,18.604,0.933,11.517,1C4.466,1.067,1.796,28.569,1,33.864"/> +</svg> +\ No newline at end of file diff --git a/src/chrome/browser/devtools/tool-webconsole.svg b/src/chrome/browser/devtools/tool-webconsole.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16"> +<path fill="#edf0f1" fill-rule="evenodd" d="M2,2h5.4l6.5,6.5L7.4,15H2l6.5-6.5L2,2z"/> +</svg> diff --git a/src/chrome/browser/devtools/toolbox.css b/src/chrome/browser/devtools/toolbox.css @@ -1,282 +1 @@ -/* 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; -} +@import url("chrome://appver/skin/devtools/toolbox.css"); +\ No newline at end of file diff --git a/src/chrome/browser/devtools/tracer-icon.png b/src/chrome/browser/devtools/tracer-icon.png Binary files differ. diff --git a/src/chrome/browser/devtools/tracer-icon@2x.png b/src/chrome/browser/devtools/tracer-icon@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/undock@2x.png b/src/chrome/browser/devtools/undock@2x.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-delete@2x.png b/src/chrome/browser/devtools/vview-delete@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/vview-edit@2x.png b/src/chrome/browser/devtools/vview-edit@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/vview-lock.png b/src/chrome/browser/devtools/vview-lock.png Binary files differ. diff --git a/src/chrome/browser/devtools/vview-lock@2x.png b/src/chrome/browser/devtools/vview-lock@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/vview-open-inspector.png b/src/chrome/browser/devtools/vview-open-inspector.png Binary files differ. diff --git a/src/chrome/browser/devtools/vview-open-inspector@2x.png b/src/chrome/browser/devtools/vview-open-inspector@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/webaudioeditor.css b/src/chrome/browser/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://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,293 +1 @@ -/* 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 */ - -.webconsole-timestamp { - color: GrayText; - margin-top: 0; - margin-bottom: 0; - font-family: monospace; -} - -.hud-msg-node { - list-style-image: url(chrome://browser/skin/devtools/webconsole.png); - -moz-image-region: rect(0, 1px, 0, 0); -} - -.webconsole-msg-icon { - margin: 3px 4px; - width: 8px; - height: 8px; -} - -.hud-clickable { - cursor: pointer; - text-decoration: underline; -} - -.webconsole-msg-body { - margin-top: 0; - margin-bottom: 3px; - -moz-margin-start: 3px; - -moz-margin-end: 6px; - white-space: pre-wrap; - font-family: monospace; -} - -.webconsole-msg-body-piece { - margin: 0; -} - -.webconsole-msg-url { - margin: 0 6px; -} - -/* Repeated messages */ -.webconsole-msg-repeat { - margin: 2px 0; - padding-left: 4px; - padding-right: 4px; - color: white; - background-color: red; - border-radius: 40px; - font: message-box; - font-size: 0.9em; - font-weight: 600; -} - -.webconsole-msg-repeat[value="1"] { - display: none; -} - -.webconsole-location { - margin-top: 0; - margin-bottom: 0; - -moz-margin-start: 0; - -moz-margin-end: 6px; - width: 10em; - text-align: end; -} - -.webconsole-mixed-content { - color: #FF0000; -} - -.webconsole-mixed-content-link { - color: #0000EE; - margin: 0; -} - -.hud-msg-node[selected="true"] > .webconsole-timestamp, -.hud-msg-node[selected="true"] > .webconsole-location { - color: inherit; -} - -.jsterm-input-container { - background: white; -} - -.jsterm-input-node, -.jsterm-complete-node { - font-family: monospace; -} - -.hud-output-node { - -moz-appearance: none; - border-bottom: 1px solid ThreeDShadow; - margin: 0; -} - -.hud-filtered-by-type, -.hud-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; -} - -.webconsole-msg-network > .webconsole-msg-icon-container { - -moz-border-start: solid #000 6px; -} - -.webconsole-msg-network.webconsole-msg-error { - -moz-image-region: rect(0, 16px, 8px, 8px); -} - -/* CSS styles */ -.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#2DC3F3, #00B6F0); - border-color: #1BA2CC; -} - -.webconsole-msg-cssparser > .webconsole-msg-icon-container { - -moz-border-start: solid #00b6f0 6px; -} - -.webconsole-msg-cssparser.webconsole-msg-error { - -moz-image-region: rect(8px, 16px, 16px, 8px); -} - -.webconsole-msg-cssparser.webconsole-msg-warn { - -moz-image-region: rect(8px, 24px, 16px, 16px); -} - -/* JS styles */ -.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#FCB142, #FB9500); - border-color: #E98A00; -} - -.webconsole-msg-exception > .webconsole-msg-icon-container { - -moz-border-start: solid #fb9500 6px; -} - -.webconsole-msg-exception.webconsole-msg-error { - -moz-image-region: rect(16px, 16px, 24px, 8px); -} - -.webconsole-msg-exception.webconsole-msg-warn { - -moz-image-region: rect(16px, 24px, 24px, 16px); -} - -/* Web Developer styles */ -.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#B9B9B9, #AAAAAA); - border-color: #929292; -} - -.webconsole-msg-console > .webconsole-msg-icon-container { - -moz-border-start: solid #cbcbcb 6px; -} - -.webconsole-msg-console.webconsole-msg-error, -.webconsole-msg-output.webconsole-msg-error { - -moz-image-region: rect(24px, 16px, 32px, 8px); -} - -.webconsole-msg-console.webconsole-msg-warn { - -moz-image-region: rect(24px, 24px, 32px, 16px); -} - -.webconsole-msg-console.webconsole-msg-info { - -moz-image-region: rect(24px, 32px, 32px, 24px); -} - -/* Input and output styles */ -.webconsole-msg-input > .webconsole-msg-icon-container, -.webconsole-msg-output > .webconsole-msg-icon-container { - border-left: solid #808080 6px; -} - -.webconsole-msg-input { - -moz-image-region: rect(24px, 40px, 32px, 32px); -} - -.webconsole-msg-output { - -moz-image-region: rect(24px, 48px, 32px, 40px); -} - -/* 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; -} - -:-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; -} - -.webconsole-msg-inspector iframe { - height: 7em; - margin-bottom: 15px; - -moz-margin-end: 15px; - border-radius: 4px; - box-shadow: 0 0 12px #dfdfdf; -} - -#webconsole-sidebar > tabs { - height: 0; - border: none; -} - -/* Security styles */ - -.webconsole-msg-security > .webconsole-msg-icon-container { - -moz-border-start: solid red 6px; -} - -.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before { - background-image: linear-gradient(#FF3030, #FF7D7D); - border-color: #D12C2C; -} - -.webconsole-msg-security.webconsole-msg-error { - -moz-image-region: rect(32px, 16px, 40px, 8px); -} - -.webconsole-msg-security.webconsole-msg-warn { - -moz-image-region: rect(32px, 24px, 40px, 16px); -} - -.webconsole-timestamp, -.webconsole-msg-body, -.jsterm-input-node, -.jsterm-complete-node { - font-family: Consolas, Lucida Console, monospace; -} - -/* - * 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; -} +@import url("chrome://appver/skin/devtools/webconsole.css"); +\ No newline at end of file diff --git a/src/chrome/browser/devtools/webconsole@2x.png b/src/chrome/browser/devtools/webconsole@2x.png Binary files differ. diff --git a/src/chrome/browser/devtools/webconsole_networkpanel.css b/src/chrome/browser/devtools/webconsole_networkpanel.css @@ -1,100 +1 @@ -/* 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-table-header { - font-size: 11px; - font-weight: bold; - padding-right: 4px; - color: #000; - white-space: nowrap; - text-align: right; - vertical-align: top; - width: 10%; -} - -.property-table-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; -} +@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,655 +1 @@ -/* 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: -1px 0; -} - -/* Preloading hack, LTR */ - -.breadcrumbs-widget-container:-moz-locale-dir(ltr)::after { - content: ''; - display: block; - background-image: - url(breadcrumbs/ltr-start.png), - url(breadcrumbs/ltr-start-selected.png), - url(breadcrumbs/ltr-start-pressed.png), - url(breadcrumbs/ltr-start-selected-pressed.png), - url(breadcrumbs/ltr-middle.png), - url(breadcrumbs/ltr-middle-selected.png), - url(breadcrumbs/ltr-middle-pressed.png), - url(breadcrumbs/ltr-middle-selected-pressed.png), - url(breadcrumbs/ltr-end.png), - url(breadcrumbs/ltr-end-selected.png), - url(breadcrumbs/ltr-end-pressed.png), - url(breadcrumbs/ltr-end-selected-pressed.png); -} - -/* Preloading hack, RTL */ - -.breadcrumbs-widget-container:-moz-locale-dir(rtl)::after { - content: ''; - display: block; - background-image: - url(breadcrumbs/rtl-start.png), - url(breadcrumbs/rtl-start-selected.png), - url(breadcrumbs/rtl-start-pressed.png), - url(breadcrumbs/rtl-start-selected-pressed.png), - url(breadcrumbs/rtl-middle.png), - url(breadcrumbs/rtl-middle-selected.png), - url(breadcrumbs/rtl-middle-pressed.png), - url(breadcrumbs/rtl-middle-selected-pressed.png), - url(breadcrumbs/rtl-end.png), - url(breadcrumbs/rtl-end-selected.png), - url(breadcrumbs/rtl-end-pressed.png), - url(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: 1px 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("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-color: transparent; - -moz-appearance: none; - overflow: hidden; - min-width: 85px; - max-width: 250px; - min-height: 25px; - border-style: solid; - border-width: 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:-moz-focusring > .button-box { - border-width: 0; -} - -.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("breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(ltr) { - border-image: url("breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item[checked]:-moz-locale-dir(ltr) { - border-image: url("breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(ltr) { - border-image: url("breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) { - border-image: url("breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) { - border-image: url("breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(ltr) { - border-image: url("breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(ltr) { - border-image: url("breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) { - border-image: url("breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) { - border-image: url("breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(ltr) { - border-image: url("breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(ltr) { - border-image: url("breadcrumbs/ltr-end-selected-pressed.png") 2 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("breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(rtl) { - border-image: url("breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item[checked]:-moz-locale-dir(rtl) { - border-image: url("breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(rtl) { - border-image: url("breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) { - border-image: url("breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) { - border-image: url("breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(rtl) { - border-image: url("breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) { - border-image: url("breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) { - border-image: url("breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) { - border-image: url("breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(rtl) { - border-image: url("breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch; -} - -.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) { - border-image: url("breadcrumbs/rtl-end-selected-pressed.png") 2 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 { - background: url(background-noise-toolbar.png), hsl(208,11%,27%); - color: #fff; -} - -.side-menu-widget-container[with-arrow=true]:-moz-locale-dir(ltr), -.side-menu-widget-group[with-arrow=true]:-moz-locale-dir(ltr), -.side-menu-widget-item[with-arrow=true]:-moz-locale-dir(ltr) { - box-shadow: inset -1px 0 0 #222426; -} - -.side-menu-widget-container[with-arrow=true]:-moz-locale-dir(rtl), -.side-menu-widget-group[with-arrow=true]:-moz-locale-dir(rtl), -.side-menu-widget-item[with-arrow=true]:-moz-locale-dir(rtl) { - box-shadow: inset 1px 0 0 #222426; -} - -.side-menu-widget-group-title { - background-image: linear-gradient(#1f3e4f, #1b3243); - 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; - text-shadow: 0 -1px 0 hsla(210,8%,5%,.45); - padding: 4px; - color: #f5f7fa; - transition-property: color, text-shadow; - transition-duration: 0.3s; -} - -.side-menu-widget-group:hover > .side-menu-widget-group-title { - text-shadow: 0 0 1px #cfcfcf; - color: #fff; -} - -.side-menu-widget-item { - border-top: 1px solid hsla(210,16%,76%,.1); - border-bottom: 1px solid hsla(210,8%,5%,.25); - cursor: pointer; -} - -.side-menu-widget-item:last-of-type { - box-shadow: 0 1px 0 hsla(210,16%,76%,.1); -} - -.side-menu-widget-item.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), - inset 0 -1px 0 hsla(210,40%,83%,.05); -} - -.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(itemArrow-ltr.png), linear-gradient(to right, black, black); - background-position: center right, top right; -} - -.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { - background-image: url(itemArrow-rtl.png), linear-gradient(to right, black, black); - background-position: center left, top left; -} - -.side-menu-widget-item-arrow { - -moz-margin-start: -8px; - width: 8px; -} - -.side-menu-widget-item-contents { - padding: 4px; -} - -.side-menu-widget-item label { - cursor: inherit; -} - -.side-menu-widget-item-other { - background: url(background-noise-toolbar.png), hsla(208,11%,27%, 0.65); - margin: 0 -4px; - -moz-padding-start: 5px; -} - -.side-menu-widget-item-other.selected { - background: url(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.selected .side-menu-widget-item-other:first-of-type { - border-top: 1px dotted #333; - margin-top: 3px; -} - -.side-menu-widget-item-other:first-of-type { - margin-top: 4px; -} - -.side-menu-widget-item-other:last-of-type { - margin-bottom: -4px; -} - -.side-menu-widget-item-other > label { - color: #f5f7fa; -} - -.side-menu-widget-empty-notice-container { - background: url(background-noise-toolbar.png), hsl(208,11%,27%); - padding: 12px; - color: #fff; - font-weight: 600; -} - -/* 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) { - margin-top: 1px; - -moz-margin-start: 2px; - -moz-margin-end: 1px; -} - -.variables-view-scope > .variables-view-element-details.enum:not(:empty) { - border-bottom: 1px solid #ddd; -} - -/* 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]) > .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; -} - -/* 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); -} - -*:not(:hover) .variables-view-delete { - display: none; -} - -.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 { - background: url("chrome://global/skin/tree/twisty-clsd.png") center center no-repeat; - width: 9px; - height: 20px; - -moz-margin-start: 5px; - -moz-margin-end: 5px; -} - -.arrow[open] { - background-image: url("chrome://global/skin/tree/twisty-open.png"); -} - -.arrow[invisible] { - visibility: hidden; -} +@import url("chrome://appver/skin/devtools/widgets.css"); +\ No newline at end of file
