diff --git a/chrome.manifest b/chrome.manifest index 488d675..2a0f7bf 100644 --- a/chrome.manifest +++ b/chrome.manifest @@ -9,3 +9,6 @@ skin osbrowser simplewhite whitefox/ostarget/general/ skin osbrowser simplewhite whitefox/ostarget/darwin/ os=Darwin skin osbrowser simplewhite whitefox/ostarget/win/ os=WINNT skin osbrowser simplewhite whitefox/ostarget/sunos/ os=SunOS + +skin apptarget simplewhite whitefox/apptarget/33/ appversion>=33.0a1 +skin apptarget simplewhite whitefox/apptarget/38/ appversion>=38.0a1 diff --git a/install.rdf b/install.rdf index 4b3079a..2904788 100755 --- a/install.rdf +++ b/install.rdf @@ -5,7 +5,7 @@ 4 Simple White Paint your firefox white. Make it look simpler, nicer. - 2.2.9 + 2.2.10 Louis Chan http://www.louis.hk/whitefox/ @@ -14,7 +14,7 @@ {ec8030f7-c20a-464f-9b0e-13a3a9e97384} 37.0 - 40.0 + 42.0 diff --git a/whitefox/apptarget/33/aboutReader.css b/whitefox/apptarget/33/aboutReader.css new file mode 100644 index 0000000..630b26a --- /dev/null +++ b/whitefox/apptarget/33/aboutReader.css @@ -0,0 +1,3 @@ +/* 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/. */ diff --git a/whitefox/apptarget/33/aboutSessionRestore.css b/whitefox/apptarget/33/aboutSessionRestore.css new file mode 100755 index 0000000..b4959c0 --- /dev/null +++ b/whitefox/apptarget/33/aboutSessionRestore.css @@ -0,0 +1,63 @@ + +html { + height: 100%; +} + +body { + height: 100%; + text-align: center; +} + +#errorPageContainer { + background-image: url("chrome://global/skin/icons/warning-large.png"); + display: -moz-box; + width: -moz-available; + height: 70%; + -moz-box-orient: vertical; + text-align: start; +} + +#errorShortDesc > p { + margin-top: 0.4em; + margin-bottom: 0; +} + +#errorLongContent, #errorTrailerDesc { + display: -moz-box; + -moz-box-flex: 1; + -moz-box-orient: vertical; +} + +#tabList { + margin-top: 2.5em; + width: 100%; + min-height: 12em; +} + +treechildren::-moz-tree-image(icon), +treechildren::-moz-tree-image(noicon) { + padding-right: 2px; + margin: 0px 2px; + width: 16px; + height: 16px; +} + +treechildren::-moz-tree-image(noicon) { + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); +} +treechildren::-moz-tree-image(container, noicon) { + list-style-image: url("chrome://browser/skin/aboutSessionRestore-window-icon.png"); +} +treechildren::-moz-tree-image(checked) { + list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); +} +treechildren::-moz-tree-image(partial) { + list-style-image: url("chrome://global/skin/checkbox/cbox-check-dis.gif"); +} + +#buttons { + width: 100%; +} +#buttons > button { + margin-top: 2em; +} diff --git a/whitefox/apptarget/33/aboutSupport.css b/whitefox/apptarget/33/aboutSupport.css new file mode 100644 index 0000000..1438ab0 --- /dev/null +++ b/whitefox/apptarget/33/aboutSupport.css @@ -0,0 +1,113 @@ +/* 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 { + background-color: -moz-Field; + color: -moz-FieldText; + font: message-box; +} + +body { + width: 90%; + margin-left: 5%; + margin-right: 5%; +} + +.page-subtitle { + margin-bottom: 3em; +} + +.major-section { + margin-top: 2em; + margin-bottom: 1em; + font-size: large; + text-align: start; + font-weight: bold; +} + +table { + background-color: -moz-Dialog; + color: -moz-DialogText; + font: message-box; + text-align: start; + width: 100%; + border: 1px solid ThreeDShadow; + border-spacing: 0px; +} + +th, td { + border: 1px dotted ThreeDShadow; + padding: 3px; +} + +thead th { + text-align: center; +} + +th { + text-align: start; + background-color: Highlight; + color: HighlightText; +} + +th.column { + white-space: nowrap; + width: 0px; +} + +td { + text-align: start; + border-top: 1px dotted ThreeDShadow; +} + +.prefs-table { + width: 100%; + table-layout: fixed; +} + +.pref-name { + width: 70%; + white-space: nowrap; + overflow: hidden; +} + +.pref-value { + width: 30%; + white-space: nowrap; + overflow: hidden; +} + +#reset-box { + background-color: -moz-Dialog; + border: 1px solid ThreeDShadow; + color: -moz-DialogText; + float: right; + margin-top: 2em; + margin-bottom: 20px; + -moz-margin-start: 20px; + -moz-margin-end: 0; + padding: 16px; + width: 30%; + visibility: hidden; +} + +#reset-box:-moz-dir(rtl) { + float: left; +} + +#reset-box > h3 { + margin-top: 0; +} + +#reset-box > button { + display: block; +} + +.block { + display: block; +} + +.hidden { + display: none; +} diff --git a/whitefox/apptarget/33/aboutTabCrashed.css b/whitefox/apptarget/33/aboutTabCrashed.css new file mode 100644 index 0000000..54d6e8f --- /dev/null +++ b/whitefox/apptarget/33/aboutTabCrashed.css @@ -0,0 +1,108 @@ +body { + background-color: rgb(241, 244, 248); + margin-top: 2em; + font: message-box; + font-size: 100%; +} + +p { + font-size: .8em; +} + +#error-box { + background: url('chrome://global/skin/icons/information-24.png') no-repeat left 4px; + -moz-padding-start: 30px; +} + +#error-box:-moz-locale-dir(rtl) { + background-position: right 4px; +} + +#main-error-msg { + color: #4b4b4b; + font-weight: bold; +} + +#report-box { + text-align: center; + width: 75%; + margin: 0 auto; + display: none; +} + +.crashDumpAvailable #report-box { + display: block +} + +#button-box { + text-align: center; + width: 75%; + margin: 0 auto; +} + +@media all and (min-width: 300px) { + #error-box { + max-width: 50%; + margin: 0 auto; + background-image: url('chrome://global/skin/icons/information-32.png'); + min-height: 36px; + -moz-padding-start: 38px; + } + + button { + width: auto !important; + min-width: 150px; + } +} + +@media all and (min-width: 780px) { + #error-box { + max-width: 30%; + } +} + +button { + font: message-box; + font-size: 0.6875em; + -moz-appearance: none; + -moz-user-select: none; + width: 100%; + margin: 2px 0; + padding: 2px 6px; + line-height: 1.2; + background-color: hsla(210,30%,95%,.1); + background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)); + background-clip: padding-box; + border: 1px solid hsla(210,15%,25%,.4); + border-color: hsla(210,15%,25%,.3) hsla(210,15%,25%,.35) hsla(210,15%,25%,.4); + border-radius: 3px; + box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, + 0 0 0 1px hsla(0,0%,100%,.3) inset, + 0 1px 0 hsla(0,0%,100%,.1); + + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; + transition-timing-function: ease; + +} + +button:hover { + background-color: hsla(210,30%,95%,.8); + border-color: hsla(210,15%,25%,.45) hsla(210,15%,25%,.5) hsla(210,15%,25%,.55); + box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, + 0 0 0 1px hsla(0,0%,100%,.3) inset, + 0 1px 0 hsla(0,0%,100%,.1), + 0 0 3px hsla(210,15%,25%,.1); + transition-property: background-color, border-color, box-shadow; + transition-duration: 150ms; + transition-timing-function: ease; +} + +button:hover:active { + background-color: hsla(210,15%,25%,.2); + box-shadow: 0 1px 1px hsla(210,15%,25%,.2) inset, + 0 0 2px hsla(210,15%,25%,.4) inset; + transition-property: background-color, border-color, box-shadow; + transition-duration: 10ms; + transition-timing-function: linear; +} diff --git a/whitefox/apptarget/33/aboutWelcomeBack.css b/whitefox/apptarget/33/aboutWelcomeBack.css new file mode 100644 index 0000000..dd79400 --- /dev/null +++ b/whitefox/apptarget/33/aboutWelcomeBack.css @@ -0,0 +1,42 @@ +/* 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/. */ + +#errorPageContainer { + background-image: url("chrome://global/skin/icons/information-64.png"); + height: auto; +} + +/* tablist starts out hidden, but JS may make it visible in response to + clicks on the radio buttons by setting an "available" attribute. +*/ +#tabList { + display: none; +} + +#tabList[available] { + display: -moz-box; +} + +.radioRestoreContainer { + display: flex; +} + +.radioRestoreButton { + flex: 0 0 auto; +} + +.radioRestoreButton:-moz-focusring { + outline: 1px dotted black; +} + +.radioChooseLabel { + flex: 1 1 auto; +} + +/* We want errorTrailerDesc to have the same padding-top as errorShortDesc + has padding-bottom +*/ +#errorTrailerDesc { + padding-top: 1em; +} diff --git a/whitefox/apptarget/33/config.css b/whitefox/apptarget/33/config.css new file mode 100644 index 0000000..04ba1e8 --- /dev/null +++ b/whitefox/apptarget/33/config.css @@ -0,0 +1,76 @@ + +@import url("chrome://global/skin/"); +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + + +#warningScreen +{ + background-color: -moz-Dialog; +} + +#warningBox +{ + background-color: -moz-Field; + color: -moz-FieldText; + border: 1px solid ThreeDShadow; + border-radius: 10px; + padding: 3em; + -moz-padding-start: 30px; + margin-left: 1em; + margin-right: 1em; +} + +#warningInnerBox +{ + max-width: 50em; +} + +#warningTitle +{ + margin: 0 0 .6em 0; + font-size: 160%; + border-bottom: 1px solid ThreeDLightShadow +} + +#warningText +{ + font-size: 110%; + margin-left: 0; +} + +#warningButton +{ + margin-top: 0.6em; +} + +#showWarningNextTime +{ + margin-top: 0.6em; +} + +#exclam +{ + list-style-image: url("chrome://global/skin/icons/warning-large.png"); + -moz-margin-end: 3em; +} + +#configTreeBody::-moz-tree-cell-text(user) +{ + font-weight: bold; +} + +#configTreeBody::-moz-tree-cell-text(locked) +{ + font-style: italic; +} + +#configTree +{ + margin-top: 5px; + margin-bottom: 5px; +} + +#filterRow +{ + margin-top: 5px; +} diff --git a/whitefox/apptarget/38/aboutReader.css b/whitefox/apptarget/38/aboutReader.css new file mode 100644 index 0000000..41cb532 --- /dev/null +++ b/whitefox/apptarget/38/aboutReader.css @@ -0,0 +1,441 @@ +/* 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 { + padding: 64px 0; + max-width: 660px; + margin-left: auto; + margin-right: auto; +} + +.light, +.light-button { + color: #333333; + background-color: #ffffff; +} + +.dark, +.dark-button { + color: #eeeeee; + background-color: #333333; +} + +.sepia, +.sepia-button { + color: #333333; + background-color: #f0ece7; +} + +.sans-serif { + font-family: sans-serif; +} + +.serif { + font-family: serif; +} + +.font-size1 { + font-size: 10px; +} + +.font-size2 { + font-size: 12px; +} + +.font-size3 { + font-size: 14px; +} + +.font-size4 { + font-size: 16px; +} + +.font-size5 { + font-size: 18px; +} + +.font-size6 { + font-size: 20px; +} + +.font-size7 { + font-size: 22px; +} + +.font-size8 { + font-size: 24px; +} + +.font-size9 { + font-size: 26px; +} + + +/* Loading/error message */ + +.message { + margin-top: 40px; + display: none; + text-align: center; + width: 100%; + font-size: 0.9rem; +} + +/* Header */ + +.header { + text-align: start; + display: none; +} + +.domain { + font-size: 0.9rem; + line-height: 1.33rem; + padding-bottom: 4px; + font-family: sans-serif; + text-decoration: none; + border-bottom: 1px solid; + color: #0095dd; +} + +.light > .container > .header > .domain, +.sepia > .container > .header > .domain { + border-bottom-color: #333333; +} + +.dark > .container > .header > .domain { + border-bottom-color: #eeeeee; +} + +.header > h1 { + font-size: 1.33rem; + line-height: 1.66rem; + width: 100%; + margin: 30px 0; + padding: 0; +} + +.header > .credits { + font-size: 0.9rem; + line-height: 1.33rem; + margin: 0 0 30px 0; + padding: 0; + font-style: italic; +} + +/* Content */ + +.content { + display: none; + font-size: 1rem; + line-height: 1.44rem; +} + +.content h1, +.content h2, +.content h3 { + font-weight: bold; +} + +.content h1 { + font-size: 1.33rem; + line-height: 1.66rem; +} + +.content h2 { + font-size: 1.1rem; + line-height: 1.66rem; +} + +.content h3 { + font-size: 1rem; + line-height: 1.66rem; +} + +.content a { + text-decoration: underline; + font-weight: normal; +} + +.content a, +.content a:visited, +.content a:hover, +.content a:active { + color: #0095dd; +} + +.content * { + max-width: 100%; + height: auto; +} + +.content p, +.content img, +.content code, +.content pre, +.content blockquote, +.content ul, +.content ol, +.content li { + margin: 0 0 30px 0; +} + +.content .wp-caption, +.content figure { + margin: 0 30px 30px 30px; +} + +.content .caption, +.content .wp-caption-text, +.content figcaption { + font-size: 0.9rem; + line-height: 1.33rem; + font-style: italic; +} + +.content code, +.content pre { + white-space: pre-wrap; +} + +.content blockquote { + padding: 0; + -moz-padding-start: 16px; +} + +.light > .container > .content blockquote, +.sepia > .container > .content blockquote { + -moz-border-start: 2px solid #333333; +} + +.dark > .container > .content blockquote { + -moz-border-start: 2px solid #eeeeee; +} + +.content ul, +.content ol { + padding: 0; +} + +.content ul { + -moz-padding-start: 30px; + list-style: disk; +} + +.content ol { + -moz-padding-start: 30px; + list-style: decimal; +} + +/*======= Controls toolbar =======*/ + +.toolbar { + font-family: sans-serif; + position: fixed; + height: 100%; + top: 0px; + left: 0px; + margin: 0; + padding: 0; + list-style: none; + background-color: #FBFBFB; + -moz-user-select: none; + border-right: 1px solid #B5B5B5; +} + +.button { + color: white; + display: block; + background-position: center; + background-size: 24px 24px; + background-repeat: no-repeat; + background-color: transparent; + height: 40px; + width: 40px; + border-top: 0; + border-left: 0; + border-right: 0; + border-bottom: 1px solid #c1c1c1; +} + +.button[hidden] { + display: none; +} + +.dropdown { + text-align: center; + list-style: none; + margin: 0px; + padding: 0px; +} + +.dropdown li { + margin: 0px; + padding: 0px; +} + +/*======= Font style popup =======*/ + +.dropdown-popup { + min-width: 250px; + text-align: start; + position: absolute; + left: 48px; /* offset to account for toolbar width */ + z-index: 1000; + background-color: #FBFBFB; + visibility: hidden; + border-radius: 4px; + border: 1px solid #B5B5B5; + box-shadow: 0px 1px 12px #666; +} + +.dropdown-popup > hr { + width: 100%; + height: 0px; + border: 0px; + border-top: 1px solid #B5B5B5; + margin: 0; +} + +.open > .dropdown-popup { + visibility: visible; +} + +.dropdown-arrow { + position: absolute; + top: 30px; /* offset arrow from top of popup */ + left: -16px; + width: 24px; + height: 24px; + background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); + display: block; +} + +#font-type-buttons, +#font-size-buttons, +#color-scheme-buttons { + display: flex; + flex-direction: row; +} + +#font-type-buttons > button, +#font-size-buttons > button, +#color-scheme-buttons > button { + text-align: center; + border-left: 1px solid #B5B5B5; + border-right: 0; + border-top: 0; + border-bottom: 0; + padding: 10px; +} + +#font-type-buttons > button, +#font-size-buttons > button { + width: 50%; + background-color: transparent; +} + +#color-scheme-buttons > button { + width: 33%; + font-size: 14px; +} + +#font-type-buttons > button:first-child, +#font-size-buttons > button:first-child, +#color-scheme-buttons > button:first-child { + border-left: 0px; +} + +#font-type-buttons > button { + display: inline-block; + font-size: 48px; + border-bottom: 3px solid transparent; +} + +#font-type-buttons > button:active:hover, +#font-type-buttons > button.selected { + border-bottom: 3px solid #FC6420; +} + +#font-type-buttons > button > div { + color: #666; + font-size: 12px; +} + +.button:hover, +#font-size-buttons > button:hover { + background-color: #EBEBEB; +} + +.dropdown.open, +.button:active, +#font-size-buttons > button:active, +#font-size-buttons > button.selected { + background-color: #DADADA; +} + +/* Only used on Android */ +#font-size-sample { + display: none; +} + +.serif-button { + font-family: serif; +} + +.minus-button, +.plus-button { + background-color: transparent; + border: 0; + height: 50px; + background-size: 18px 18px; + background-repeat: no-repeat; + background-position: center; +} + +/*======= Toolbar icons =======*/ + +/* Android-only controls */ +.share-button { + display: none; +} + +.close-button { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg"); + height: 68px; + background-position: center 8px; +} + +.close-button:active, +.close-button:hover { + background-image: url("chrome://global/skin/reader/RM-Close-hover-24x24.svg"); + background-color: #d94141; +} + +.style-button { + background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); +} + +.toggle-button.on { + background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); +} + +.toggle-button { + background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg"); +} + +.list-button { + background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg"); +} +.list-button.on { + background-color: #d9d9d9; +} + +.minus-button { + background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); +} + +.plus-button { + background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); +} diff --git a/whitefox/apptarget/38/aboutSessionRestore.css b/whitefox/apptarget/38/aboutSessionRestore.css new file mode 100644 index 0000000..5ee66a2 --- /dev/null +++ b/whitefox/apptarget/38/aboutSessionRestore.css @@ -0,0 +1,33 @@ + +.title { + background-image: url("chrome://browser/skin/session-restore.svg"); +} + +treechildren::-moz-tree-image(icon), +treechildren::-moz-tree-image(noicon) { + padding-right: 2px; + margin: 0 2px; + width: 16px; + height: 16px; +} + +treechildren::-moz-tree-image(noicon) { + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); +} +treechildren::-moz-tree-image(container, noicon) { + list-style-image: url("chrome://browser/skin/aboutSessionRestore-window-icon.png"); +} + +treechildren::-moz-tree-image(checked) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check"); +} +treechildren::-moz-tree-image(checked, selected) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted"); +} + +treechildren::-moz-tree-image(partial) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial"); +} +treechildren::-moz-tree-image(partial, selected) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial-inverted"); +} \ No newline at end of file diff --git a/whitefox/apptarget/38/aboutSupport.css b/whitefox/apptarget/38/aboutSupport.css new file mode 100644 index 0000000..71ef7a7 --- /dev/null +++ b/whitefox/apptarget/38/aboutSupport.css @@ -0,0 +1,118 @@ +/* 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 { + background-color: -moz-Field; + color: -moz-FieldText; + font: message-box; +} + +body { + width: 90%; + margin-left: 5%; + margin-right: 5%; +} + +.page-subtitle { + margin-bottom: 3em; +} + +.major-section { + margin-top: 2em; + margin-bottom: 1em; + font-size: large; + text-align: start; + font-weight: bold; +} + +table { + background-color: -moz-Dialog; + color: -moz-DialogText; + font: message-box; + text-align: start; + width: 100%; + border: 1px solid ThreeDShadow; + border-spacing: 0px; +} + +th, td { + border: 1px dotted ThreeDShadow; + padding: 3px; +} + +thead th { + text-align: center; +} + +th { + text-align: start; + background-color: Highlight; + color: HighlightText; +} + +th.column { + white-space: nowrap; + width: 0px; +} + +td { + text-align: start; + border-top: 1px dotted ThreeDShadow; +} + +.prefs-table { + width: 100%; + table-layout: fixed; +} + +.pref-name { + width: 70%; + white-space: nowrap; + overflow: hidden; +} + +.pref-value { + width: 30%; + white-space: nowrap; + overflow: hidden; +} + +#action-box { + background-color: -moz-Dialog; + border: 1px solid ThreeDShadow; + color: -moz-DialogText; + float: right; + margin-top: 2em; + margin-bottom: 20px; + -moz-margin-start: 20px; + -moz-margin-end: 0; + padding: 16px; + width: 30%; +} + +#action-box, +#reset-box, +#safe-mode-box { + display: none; +} + +#action-box:-moz-dir(rtl) { + float: left; +} + +#reset-box > h3 { + margin-top: 0; +} + +#action-box button { + display: block; +} + +.block { + display: block; +} + +.hidden { + display: none; +} diff --git a/whitefox/apptarget/38/aboutTabCrashed.css b/whitefox/apptarget/38/aboutTabCrashed.css new file mode 100644 index 0000000..2ef767e --- /dev/null +++ b/whitefox/apptarget/38/aboutTabCrashed.css @@ -0,0 +1,11 @@ +/* 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/. */ + +.title { + background-image: url("chrome://browser/skin/tab-crashed.svg"); +} + +#reportSent { + font-weight: bold; +} diff --git a/whitefox/apptarget/38/aboutWelcomeBack.css b/whitefox/apptarget/38/aboutWelcomeBack.css new file mode 100644 index 0000000..eb0b7a9 --- /dev/null +++ b/whitefox/apptarget/38/aboutWelcomeBack.css @@ -0,0 +1,51 @@ +/* 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/. */ + +.title { + background-image: url("chrome://browser/skin/welcome-back.svg"); +} + +.radioRestoreContainer:not(:last-child) { + margin-bottom: 0.2em; +} + +/* tablist starts out hidden, but JS may make it visible in response to + clicks on the radio buttons by setting an "available" attribute. +*/ +#tabList { + display: none; +} + +#tabList[available] { + display: -moz-box; +} + +treechildren::-moz-tree-image(icon), +treechildren::-moz-tree-image(noicon) { + padding-right: 2px; + margin: 0 2px; + width: 16px; + height: 16px; +} + +treechildren::-moz-tree-image(noicon) { + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); +} +treechildren::-moz-tree-image(container, noicon) { + list-style-image: url("chrome://browser/skin/aboutSessionRestore-window-icon.png"); +} + +treechildren::-moz-tree-image(checked) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check"); +} +treechildren::-moz-tree-image(checked, selected) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted"); +} + +treechildren::-moz-tree-image(partial) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial"); +} +treechildren::-moz-tree-image(partial, selected) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial-inverted"); +} \ No newline at end of file diff --git a/whitefox/apptarget/38/config.css b/whitefox/apptarget/38/config.css new file mode 100644 index 0000000..f1c7396 --- /dev/null +++ b/whitefox/apptarget/38/config.css @@ -0,0 +1,49 @@ +/* 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/. */ + +#warningScreen { + font-size: 15px; + padding-top: 0; + padding-bottom: 0; + -moz-padding-start: calc(48px + 4.6em); + -moz-padding-end: 48px; +} + +.title { + background-image: url("chrome://global/skin/icons/warning.svg"); +} + +#warningTitle { + font-weight: lighter; + line-height: 1.2; + color: #333; + margin: 0; + margin-bottom: .5em; +} + +#warningText { + margin: 1em 0; +} + +#warningButton { + margin-top: 0.6em; +} + +#filterRow { + margin-top: 4px; + -moz-margin-start: 4px; +} + +#configTree { + margin-top: 4px; + margin-bottom: 4px; +} + +#configTreeBody::-moz-tree-cell-text(user) { + font-weight: bold; +} + +#configTreeBody::-moz-tree-cell-text(locked) { + font-style: italic; +} diff --git a/whitefox/browser/Toolbar-aero.png b/whitefox/browser/Toolbar-aero.png index 9fdbf7c..83f6cd3 100644 Binary files a/whitefox/browser/Toolbar-aero.png and b/whitefox/browser/Toolbar-aero.png differ diff --git a/whitefox/browser/Toolbar-inverted.png b/whitefox/browser/Toolbar-inverted.png index 3532c33..eb7bdf1 100644 Binary files a/whitefox/browser/Toolbar-inverted.png and b/whitefox/browser/Toolbar-inverted.png differ diff --git a/whitefox/browser/Toolbar.png b/whitefox/browser/Toolbar.png index 9fdbf7c..83f6cd3 100644 Binary files a/whitefox/browser/Toolbar.png and b/whitefox/browser/Toolbar.png differ diff --git a/whitefox/browser/aboutSessionRestore.css b/whitefox/browser/aboutSessionRestore.css index b4959c0..a392449 100755 --- a/whitefox/browser/aboutSessionRestore.css +++ b/whitefox/browser/aboutSessionRestore.css @@ -1,63 +1 @@ - -html { - height: 100%; -} - -body { - height: 100%; - text-align: center; -} - -#errorPageContainer { - background-image: url("chrome://global/skin/icons/warning-large.png"); - display: -moz-box; - width: -moz-available; - height: 70%; - -moz-box-orient: vertical; - text-align: start; -} - -#errorShortDesc > p { - margin-top: 0.4em; - margin-bottom: 0; -} - -#errorLongContent, #errorTrailerDesc { - display: -moz-box; - -moz-box-flex: 1; - -moz-box-orient: vertical; -} - -#tabList { - margin-top: 2.5em; - width: 100%; - min-height: 12em; -} - -treechildren::-moz-tree-image(icon), -treechildren::-moz-tree-image(noicon) { - padding-right: 2px; - margin: 0px 2px; - width: 16px; - height: 16px; -} - -treechildren::-moz-tree-image(noicon) { - list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); -} -treechildren::-moz-tree-image(container, noicon) { - list-style-image: url("chrome://browser/skin/aboutSessionRestore-window-icon.png"); -} -treechildren::-moz-tree-image(checked) { - list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); -} -treechildren::-moz-tree-image(partial) { - list-style-image: url("chrome://global/skin/checkbox/cbox-check-dis.gif"); -} - -#buttons { - width: 100%; -} -#buttons > button { - margin-top: 2em; -} +@import url("chrome://apptarget/skin/aboutSessionRestore.css"); \ No newline at end of file diff --git a/whitefox/browser/aboutTabCrashed.css b/whitefox/browser/aboutTabCrashed.css index 54d6e8f..3bcac30 100644 --- a/whitefox/browser/aboutTabCrashed.css +++ b/whitefox/browser/aboutTabCrashed.css @@ -1,108 +1 @@ -body { - background-color: rgb(241, 244, 248); - margin-top: 2em; - font: message-box; - font-size: 100%; -} - -p { - font-size: .8em; -} - -#error-box { - background: url('chrome://global/skin/icons/information-24.png') no-repeat left 4px; - -moz-padding-start: 30px; -} - -#error-box:-moz-locale-dir(rtl) { - background-position: right 4px; -} - -#main-error-msg { - color: #4b4b4b; - font-weight: bold; -} - -#report-box { - text-align: center; - width: 75%; - margin: 0 auto; - display: none; -} - -.crashDumpAvailable #report-box { - display: block -} - -#button-box { - text-align: center; - width: 75%; - margin: 0 auto; -} - -@media all and (min-width: 300px) { - #error-box { - max-width: 50%; - margin: 0 auto; - background-image: url('chrome://global/skin/icons/information-32.png'); - min-height: 36px; - -moz-padding-start: 38px; - } - - button { - width: auto !important; - min-width: 150px; - } -} - -@media all and (min-width: 780px) { - #error-box { - max-width: 30%; - } -} - -button { - font: message-box; - font-size: 0.6875em; - -moz-appearance: none; - -moz-user-select: none; - width: 100%; - margin: 2px 0; - padding: 2px 6px; - line-height: 1.2; - background-color: hsla(210,30%,95%,.1); - background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)); - background-clip: padding-box; - border: 1px solid hsla(210,15%,25%,.4); - border-color: hsla(210,15%,25%,.3) hsla(210,15%,25%,.35) hsla(210,15%,25%,.4); - border-radius: 3px; - box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, - 0 0 0 1px hsla(0,0%,100%,.3) inset, - 0 1px 0 hsla(0,0%,100%,.1); - - transition-property: background-color, border-color, box-shadow; - transition-duration: 150ms; - transition-timing-function: ease; - -} - -button:hover { - background-color: hsla(210,30%,95%,.8); - border-color: hsla(210,15%,25%,.45) hsla(210,15%,25%,.5) hsla(210,15%,25%,.55); - box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, - 0 0 0 1px hsla(0,0%,100%,.3) inset, - 0 1px 0 hsla(0,0%,100%,.1), - 0 0 3px hsla(210,15%,25%,.1); - transition-property: background-color, border-color, box-shadow; - transition-duration: 150ms; - transition-timing-function: ease; -} - -button:hover:active { - background-color: hsla(210,15%,25%,.2); - box-shadow: 0 1px 1px hsla(210,15%,25%,.2) inset, - 0 0 2px hsla(210,15%,25%,.4) inset; - transition-property: background-color, border-color, box-shadow; - transition-duration: 10ms; - transition-timing-function: linear; -} +@import url("chrome://apptarget/skin/aboutTabCrashed.css"); \ No newline at end of file diff --git a/whitefox/browser/aboutWelcomeBack.css b/whitefox/browser/aboutWelcomeBack.css index dd79400..716af7a 100644 --- a/whitefox/browser/aboutWelcomeBack.css +++ b/whitefox/browser/aboutWelcomeBack.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/. */ - -#errorPageContainer { - background-image: url("chrome://global/skin/icons/information-64.png"); - height: auto; -} - -/* tablist starts out hidden, but JS may make it visible in response to - clicks on the radio buttons by setting an "available" attribute. -*/ -#tabList { - display: none; -} - -#tabList[available] { - display: -moz-box; -} - -.radioRestoreContainer { - display: flex; -} - -.radioRestoreButton { - flex: 0 0 auto; -} - -.radioRestoreButton:-moz-focusring { - outline: 1px dotted black; -} - -.radioChooseLabel { - flex: 1 1 auto; -} - -/* We want errorTrailerDesc to have the same padding-top as errorShortDesc - has padding-bottom -*/ -#errorTrailerDesc { - padding-top: 1em; -} +@import url("chrome://apptarget/skin/aboutWelcomeBack.css"); \ No newline at end of file diff --git a/whitefox/browser/browser-common.css b/whitefox/browser/browser-common.css index c97962f..77d0438 100755 --- a/whitefox/browser/browser-common.css +++ b/whitefox/browser/browser-common.css @@ -575,12 +575,12 @@ menuitem.bookmark-item { /* Note that this file isn't used for HiDPI on OS X. */ -:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button), +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button), #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { list-style-image: url("chrome://browser/skin/Toolbar.png"); } -toolbar[brighttext] :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button), +toolbar[brighttext] :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button), toolbar[brighttext] #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { list-style-image: url(chrome://browser/skin/Toolbar-inverted.png); } @@ -794,6 +794,14 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #webide-button[cui-areatype="toolbar"] { -moz-image-region: rect(0, 738px, 18px, 720px); } + +#pocket-button[cui-areatype="toolbar"] { + -moz-image-region: rect(0, 774px, 18px, 756px); +} + +#pocket-button[cui-areatype="toolbar"][open] { + -moz-image-region: rect(18px, 774px, 36px, 756px); +} /* Menu panel and palette styles */ /* Note that this file isn't used for HiDPI on OS X. */ @@ -803,8 +811,8 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { } toolbaritem[sdkstylewidget="true"] > toolbarbutton, -:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)[cui-areatype="menu-panel"], -toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button) { +:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button) { list-style-image: var(--menupanel-list-style-image); } @@ -866,6 +874,10 @@ toolbarpaletteitem[place="palette"] > #feed-button { -moz-image-region: rect(0px, 416px, 32px, 384px); } +#feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 416px, 64px, 384px); +} + #social-share-button[cui-areatype="menu-panel"], toolbarpaletteitem[place="palette"] > #social-share-button { -moz-image-region: rect(0px, 448px, 32px, 416px); @@ -967,6 +979,15 @@ toolbarpaletteitem[place="palette"] > #webide-button { -moz-image-region: rect(0px, 960px, 32px, 928px); } +#pocket-button[cui-areatype="menu-panel"], +toolbarpaletteitem[place="palette"] > #pocket-button { + -moz-image-region: rect(0px, 992px, 32px, 960px); +} + +#pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] { + -moz-image-region: rect(32px, 992px, 64px, 960px); +} + toolbaritem[sdkstylewidget="true"] > toolbarbutton { -moz-image-region: rect(0, 832px, 32px, 800px); } @@ -1128,9 +1149,9 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-an transition-duration: 150ms; } -#nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-icon, -#nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-badge-container, -#nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { +#nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-icon, +#nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-badge-container, +#nav-bar .toolbarbutton-1:not(:-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button, #pocket-button)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } @@ -1154,7 +1175,7 @@ toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon { } /*#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon { - -moz-border-end: none; + -moz-border-end: none transparent; }*/ #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { @@ -1984,6 +2005,58 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 48px, 16px, 32px); } +/* Reading List button */ + +#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { + opacity: 0; + width: 0px; +} + +#readinglist-addremove-button { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage"); + -moz-image-region: rect(0, 14px, 14px, 0); + transition: width 150ms ease-in-out, opacity 150ms ease-in-out 150ms; + opacity: 1; + width: 20px; +} + +#readinglist-addremove-button:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); +} + +#readinglist-addremove-button:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); +} + +#readinglist-addremove-button[already-added="true"] { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); +} + +#readinglist-addremove-button[already-added="true"]:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); +} + +#readinglist-addremove-button[already-added="true"]:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); +} + +/* Reader mode button */ + +#reader-mode-button { + list-style-image: url("chrome://browser/skin/readerMode.svg"); + -moz-image-region: rect(0, 16px, 16px, 0); +} + +#reader-mode-button:hover, +#reader-mode-button[readeractive]:hover { + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +#reader-mode-button:hover:active, +#reader-mode-button[readeractive] { + -moz-image-region: rect(0, 48px, 16px, 32px); +} + /* social share panel */ .social-share-frame { @@ -2200,7 +2273,7 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon { #TabsToolbar { min-height: 0; padding: 0; - /*margin-bottom: -1px; overlap the nav-bar's top border *//*Louis*/ + /*margin-bottom: calc(-1 * var(--tab-toolbar-navbar-overlap)); overlap the nav-bar's top border *//*Louis*/ } #tabbrowser-tabs { @@ -2617,63 +2690,40 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { .popup-notification-icon[popupid="xpinstall-disabled"], .popup-notification-icon[popupid="addon-progress"], -.popup-notification-icon[popupid="addon-install-cancelled"], .popup-notification-icon[popupid="addon-install-blocked"], .popup-notification-icon[popupid="addon-install-failed"], +.popup-notification-icon[popupid="addon-install-confirmation"], .popup-notification-icon[popupid="addon-install-complete"] { list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); width: 32px; height: 32px; } -.popup-notification-icon[popupid="click-to-play-plugins"] { - list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); -} - -.popup-notification-icon[popupid="web-notifications"] { - list-style-image: url(chrome://browser/skin/notification-64.png); -} - -.addon-progress-description { - width: 350px; - max-width: 350px; -} - -.popup-progress-label, -.popup-progress-meter { - -moz-margin-start: 0; - -moz-margin-end: 0; +.popup-notification-description[popupid="addon-progress"], +.popup-notification-description[popupid="addon-install-confirmation"] { + width: 27em; + max-width: 27em; } -.popup-progress-cancel { - -moz-appearance: none; - background: transparent; - border: none; - padding: 0; - margin: 0; - min-height: 0; - min-width: 0; - list-style-image: url(chrome://mozapps/skin/downloads/downloadButtons.png); - -moz-image-region: rect(0px, 32px, 16px, 16px); +.addon-install-confirmation-name { + font-weight: bold; } -.popup-progress-cancel:hover { - -moz-image-region: rect(16px, 32px, 32px, 16px); +.popup-notification-icon[popupid="click-to-play-plugins"] { + list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } -.popup-progress-cancel:active { - -moz-image-region: rect(32px, 32px, 48px, 16px); +.popup-notification-icon[popupid="web-notifications"] { + list-style-image: url(chrome://browser/skin/notification-64.png); } .popup-notification-icon[popupid="indexedDB-permissions-prompt"], -.popup-notification-icon[popupid="indexedDB-quota-prompt"], .popup-notification-icon[popupid*="offline-app-requested"], .popup-notification-icon[popupid="offline-app-usage"] { list-style-image: url(chrome://global/skin/icons/question-64.png); } -.popup-notification-icon[popupid="password-save"], -.popup-notification-icon[popupid="password-change"] { +.popup-notification-icon[popupid="password"] { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png); } @@ -3050,6 +3100,19 @@ notification[value="translation"] { -moz-appearance: none; } +/* Loop/ Hello browser styles */ + +notification[value="loop-sharing-notification"] .button-menubutton-button { + -moz-appearance: none; + min-width: 0; + border: 0; + margin: 0; +} + +notification[value="loop-sharing-notification"] .messageImage { + list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png); +} + /* Bookmarks roots menu-items */ #subscribeToPageMenuitem:not([disabled]), #subscribeToPageMenupopup, @@ -3071,6 +3134,18 @@ notification[value="translation"] { -moz-image-region: auto; } +#menu_readingList, +#BMB_readingList { + list-style-image: url("chrome://browser/skin/readinglist/readinglist-icon.svg"); + -moz-image-region: auto; +} + +#panelMenu_pocket, +#menu_pocket, +#BMB_pocket { + list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png"); +} + /* ::::: Keyboard UI Panel ::::: */ .KUI-panel { @@ -4522,6 +4597,17 @@ chatbox { list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); } +#eme-notification-icon[firstplay=true] { + animation: emeTeachingMoment 0.2s linear 0s 5 normal; +} + +@keyframes emeTeachingMoment { + 0% {transform: translateX(0); } + 25% {transform: translateX(3px) } + 75% {transform: translateX(-3px) } + 100% { transform: translateX(0); } +} + /* Customization mode */ /* This Source Code Form is subject to the terms of the Mozilla Public @@ -4677,14 +4763,26 @@ chatbox { #customization-titlebar-visibility-button { list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png"); -moz-image-region: rect(0, 24px, 24px, 0); +} + +#customization-lwtheme-button, +#customization-titlebar-visibility-button { padding: 2px 7px; } +#customization-lwtheme-button > .box-inherit > .box-inherit > .button-text, #customization-titlebar-visibility-button > .button-box > .button-text { /* Sadly, button.css thinks its margins are perfect for everyone. */ -moz-margin-start: 6px !important; } +#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon { + width: 20px; + height: 20px; + border-radius: 2px; + background-size: contain; +} + #customization-titlebar-visibility-button > .button-box > .button-icon { vertical-align: middle; } @@ -5248,61 +5346,18 @@ toolbarpaletteitem[place="toolbar"] { background-color: rgb(105,173,61); } -.SearchHighlight { - -moz-margin-end: 6px; - font-size: 110%; - width: 225px; -} - -.SearchHighlight label, -.SearchHighlight description { - color: #535353; - margin: 0 0 8px 0; - padding: 0; -} - -.SearchHighlightTitle { - font-weight: bold; -} - -.SearchHighlight .dot { - width: 7px; - height: 7px; - background-image: -moz-image-rect(url("chrome://browser/skin/dots.png"), 0, 100%, 100%, 9); - background-size: 7px; - background-position: center center; - background-repeat: no-repeat; - -moz-margin-end: 2px; -} - -.SearchHighlight .dot.filled { - background-image: -moz-image-rect(url("chrome://browser/skin/dots.png"), 0, 7, 100%, 0); -} - -.SearchHighlight button { - margin: 0; - /* On some platforms clicking the button will steal focus from the search box - causing the popup to close. */ - -moz-user-focus: ignore; -} - -@media not all and (max-resolution: 1dppx) { - .SearchHighlight .dot { - background-image: -moz-image-rect(url("chrome://browser/skin/dots@2x.png"), 0, 100%, 100%, 18); - } - - .SearchHighlight .dot.filled { - background-image: -moz-image-rect(url("chrome://browser/skin/dots@2x.png"), 0, 14, 100%, 0); - } -} - /* Notification overrides for Heartbeat UI */ notification.heartbeat { background-color: #F1F1F1; - box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.35); + border-bottom: 1px solid #C1C1C1; + height: 40px; } +/* In themes/osx/global/notification.css the close icon is inverted because notifications + on OSX are usually dark. Heartbeat is light, so override that behaviour. */ + + @keyframes pulse-onshow { 0% { opacity: 0; @@ -5337,17 +5392,17 @@ notification.heartbeat { .messageText.heartbeat { color: #333333; - font-weight: normal; - font-family: "Lucida Grande", Segoe, Ubuntu; - font-size: 14px; - line-height: 16px; text-shadow: none; + -moz-margin-start: 0px; + /* The !important is required to override OSX default style. */ + -moz-margin-end: 12px !important; } .messageImage.heartbeat { - width: 36px; - height: 36px; - -moz-margin-end: 10px; + width: 24px; + height: 24px; + -moz-margin-start: 8px; + -moz-margin-end: 8px; } .messageImage.heartbeat.pulse-onshow { @@ -5364,9 +5419,25 @@ notification.heartbeat { animation-timing-function: linear; } +/* Learn More link styles */ +.heartbeat > .text-link { + color: #0095DD; + -moz-margin-start: 0px; +} + +.heartbeat > .text-link:hover { + color: #008ACB; + text-decoration: none; +} + +.heartbeat > .text-link:hover:active { + color: #006B9D; +} + /* Heartbeat UI Rating Star Classes */ .heartbeat > #star-rating-container { display: -moz-box; + margin-bottom: 4px; } .heartbeat > #star-rating-container > #star5 { @@ -5388,8 +5459,10 @@ notification.heartbeat { .heartbeat > #star-rating-container > .star-x { background: url("chrome://browser/skin/heartbeat-star-off.svg"); cursor: pointer; - width: 24px; - height: 24px; + /* Overrides the -moz-margin-end for all platforms defined in the .plain class */ + -moz-margin-end: 4px !important; + width: 16px; + height: 16px; } .heartbeat > #star-rating-container > .star-x:hover, @@ -5561,7 +5634,7 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left { background-color: hsl(210,75%,92%); } - .tab-background-middle[selected=true]:not(:-moz-lwtheme) { + .tab-background-middle[visuallyselected=true]:not(:-moz-lwtheme) { background-color: hsl(210,75%,92%); } diff --git a/whitefox/browser/customizableui/menu-arrow.svg b/whitefox/browser/customizableui/menu-arrow.svg new file mode 100644 index 0000000..23b087f --- /dev/null +++ b/whitefox/browser/customizableui/menu-arrow.svg @@ -0,0 +1,29 @@ + + + + + + + + + + diff --git a/whitefox/browser/devtools/animationinspector.css b/whitefox/browser/devtools/animationinspector.css index 395fb73..c632d91 100644 --- a/whitefox/browser/devtools/animationinspector.css +++ b/whitefox/browser/devtools/animationinspector.css @@ -1,25 +1,65 @@ +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 { - margin-top: 10%; + padding-top: 10%; text-align: center; + flex: 1; + overflow: auto; /* The error message is hidden by default */ display: none; } -/* Element picker button */ +/* The animation players container */ + +#players { + flex: 1; + overflow: auto; +} + +/* Element picker and toggle-all buttons */ -#element-picker { +#element-picker, +#toggle-all { position: relative; } -#element-picker::before { +#element-picker::before, +#toggle-all::before { content: ""; display: block; width: 16px; @@ -31,23 +71,45 @@ body { 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); - color: var(--theme-content-color3); border-bottom: 1px solid var(--theme-splitter-color); padding: 1px 4px; word-wrap: break-word; @@ -91,7 +153,8 @@ body { background-image: url(debugger-pause.png); } -.paused .timeline .toggle::before { +.paused .timeline .toggle::before, +.finished .timeline .toggle::before { background-image: url(debugger-play.png); } @@ -100,7 +163,8 @@ body { background-image: url(debugger-pause@2x.png); } - .paused .timeline .toggle::before { + .paused .timeline .toggle::before, + .finished .timeline .toggle::before { background-image: url(debugger-play@2x.png); } } diff --git a/whitefox/browser/devtools/canvasdebugger.css b/whitefox/browser/devtools/canvasdebugger.css index d9f15b4..24b191c 100644 --- a/whitefox/browser/devtools/canvasdebugger.css +++ b/whitefox/browser/devtools/canvasdebugger.css @@ -116,14 +116,8 @@ pointer-events: none; } -.snapshot-item-footer[saving]::before { - display: inline-block; - content: ""; - background: url("chrome://global/skin/icons/loading_16.png") center no-repeat; - width: 16px; - height: 16px; +.snapshot-item-footer.devtools-throbber::before { margin-top: -2px; - -moz-margin-end: 4px; } #snapshots-list .selected label { diff --git a/whitefox/browser/devtools/dark-theme.css b/whitefox/browser/devtools/dark-theme.css index 61fc3fb..1f90b49 100644 --- a/whitefox/browser/devtools/dark-theme.css +++ b/whitefox/browser/devtools/dark-theme.css @@ -191,7 +191,8 @@ .theme-toolbar, .devtools-toolbar, -.devtools-sidebar-tabs > tabs, +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs, .CodeMirror-dialog { /* General toolbar styling */ color: var(--theme-body-color-alt); background-color: var(--theme-toolbar-background); @@ -405,7 +406,8 @@ div.CodeMirror span.eval-text { /* Toolbars */ .devtools-toolbar, -.devtools-sidebar-tabs > tabs { +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs { -moz-appearance: none; padding: 0; border-width: 0; @@ -806,19 +808,30 @@ div.CodeMirror span.eval-text { color: var(--theme-body-color); } -.devtools-sidebar-tabs > tabs { +.devtools-sidebar-tabs tabs { position: static; font: inherit; margin-bottom: 0; overflow: hidden; } -.devtools-sidebar-tabs > tabs > .tabs-right, -.devtools-sidebar-tabs > tabs > .tabs-left { +.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 > tab { +.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), @@ -839,70 +852,70 @@ div.CodeMirror span.eval-text { text-shadow: none; } -.devtools-sidebar-tabs > tabs > tab:first-child { +.devtools-sidebar-tabs tabs > tab:first-child { -moz-border-start-width: 0; } -.theme-dark .devtools-sidebar-tabs > tabs > tab { +.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 { +.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 { +.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 { +.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 { +.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 { +.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 { +.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 { +.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 { +.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 { +.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 { +.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 { +.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 { +.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); @@ -1124,7 +1137,7 @@ div.CodeMirror span.eval-text { -moz-box-align: center; min-width: 32px; min-height: 24px; - max-width: 127px; + max-width: 110px; margin: 0; padding: 0; border-style: solid; @@ -1269,8 +1282,7 @@ div.CodeMirror span.eval-text { .theme-light .scrollbutton-up > .toolbarbutton-icon, .theme-light .scrollbutton-down > .toolbarbutton-icon, .theme-light #black-boxed-message-button .button-icon, -.theme-light #profiling-notice-button .button-icon, -.theme-light #canvas-debugging-empty-notice-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, @@ -1284,7 +1296,8 @@ div.CodeMirror span.eval-text { .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 #profiler-start[checked] > image, +.theme-light .notice-container button[checked] .button-icon { filter: none !important; } @@ -1315,3 +1328,25 @@ div.CodeMirror span.eval-text { 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/whitefox/browser/devtools/filters.svg b/whitefox/browser/devtools/filters.svg index 69c6bc3..916028b 100644 --- a/whitefox/browser/devtools/filters.svg +++ b/whitefox/browser/devtools/filters.svg @@ -13,4 +13,15 @@ + + + + + + + + + + + diff --git a/whitefox/browser/devtools/light-theme.css b/whitefox/browser/devtools/light-theme.css index 87be9ea..b13e682 100644 --- a/whitefox/browser/devtools/light-theme.css +++ b/whitefox/browser/devtools/light-theme.css @@ -194,7 +194,8 @@ .theme-toolbar, .devtools-toolbar, -.devtools-sidebar-tabs > tabs, +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs, .CodeMirror-dialog { /* General toolbar styling */ color: var(--theme-body-color-alt); background-color: var(--theme-toolbar-background); @@ -403,7 +404,8 @@ div.CodeMirror span.eval-text { /* Toolbars */ .devtools-toolbar, -.devtools-sidebar-tabs > tabs { +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs { -moz-appearance: none; padding: 0; border-width: 0; @@ -804,19 +806,30 @@ div.CodeMirror span.eval-text { color: var(--theme-body-color); } -.devtools-sidebar-tabs > tabs { +.devtools-sidebar-tabs tabs { position: static; font: inherit; margin-bottom: 0; overflow: hidden; } -.devtools-sidebar-tabs > tabs > .tabs-right, -.devtools-sidebar-tabs > tabs > .tabs-left { +.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 > tab { +.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), @@ -837,70 +850,70 @@ div.CodeMirror span.eval-text { text-shadow: none; } -.devtools-sidebar-tabs > tabs > tab:first-child { +.devtools-sidebar-tabs tabs > tab:first-child { -moz-border-start-width: 0; } -.theme-dark .devtools-sidebar-tabs > tabs > tab { +.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 { +.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 { +.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 { +.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 { +.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 { +.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 { +.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 { +.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 { +.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 { +.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 { +.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 { +.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 { +.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); @@ -1122,7 +1135,7 @@ div.CodeMirror span.eval-text { -moz-box-align: center; min-width: 32px; min-height: 24px; - max-width: 127px; + max-width: 110px; margin: 0; padding: 0; border-style: solid; @@ -1267,8 +1280,7 @@ div.CodeMirror span.eval-text { .theme-light .scrollbutton-up > .toolbarbutton-icon, .theme-light .scrollbutton-down > .toolbarbutton-icon, .theme-light #black-boxed-message-button .button-icon, -.theme-light #profiling-notice-button .button-icon, -.theme-light #canvas-debugging-empty-notice-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, @@ -1282,7 +1294,8 @@ div.CodeMirror span.eval-text { .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 #profiler-start[checked] > image, +.theme-light .notice-container button[checked] .button-icon { filter: none !important; } @@ -1313,3 +1326,25 @@ div.CodeMirror span.eval-text { 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/whitefox/browser/devtools/netmonitor.css b/whitefox/browser/devtools/netmonitor.css index d33d9dc..71419ab 100644 --- a/whitefox/browser/devtools/netmonitor.css +++ b/whitefox/browser/devtools/netmonitor.css @@ -177,6 +177,11 @@ 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); @@ -192,6 +197,11 @@ width: 8em; } +.requests-menu-transferred { + text-align: center; + width: 8em; +} + /* Network requests table: status codes */ box.requests-menu-status { @@ -484,6 +494,7 @@ label.requests-menu-status-code { } .tabpanel-summary-value { + color: inherit; -moz-padding-start: 3px; } @@ -568,8 +579,19 @@ label.requests-menu-status-code { overflow: auto; } -#security-error-message { - white-space: pre-wrap; +.security-warning-icon { + background-image: url(alerticon-warning.png); + background-size: 13px 12px; + -moz-margin-start: 5px; + vertical-align: top; + width: 13px; + height: 12px; +} + +@media (min-resolution: 2dppx) { + .security-warning-icon { + background-image: url(alerticon-warning@2x.png); + } } /* Custom request form */ diff --git a/whitefox/browser/devtools/performance-icons.svg b/whitefox/browser/devtools/performance-icons.svg index 2a9292d..8bea997 100644 --- a/whitefox/browser/devtools/performance-icons.svg +++ b/whitefox/browser/devtools/performance-icons.svg @@ -27,16 +27,16 @@ - - - - + + + + - - - - - + + + + + diff --git a/whitefox/browser/devtools/performance.css b/whitefox/browser/devtools/performance.css index 8ad74d2..198e56a 100644 --- a/whitefox/browser/devtools/performance.css +++ b/whitefox/browser/devtools/performance.css @@ -29,31 +29,65 @@ -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 { +.record-button { list-style-image: url(profiler-stopwatch.svg); } -#record-button[checked] { +.record-button[checked] { list-style-image: url(profiler-stopwatch-checked.svg); } -#record-button[locked] { +.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-calltree-view { +#select-js-calltree-view, +#select-memory-calltree-view { list-style-image: url(performance-icons.svg#details-call-tree); } -#select-flamegraph-view { +#select-js-flamegraph-view, +#select-memory-flamegraph-view { list-style-image: url(performance-icons.svg#details-flamegraph); } @@ -65,27 +99,42 @@ 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: 9em; + 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: 6em; + width: 5vw; } .call-tree-header[type="samples"], .call-tree-cell[type="samples"] { - width: 5em; + 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"], @@ -146,7 +195,8 @@ .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-line, +.call-tree-item:not([origin="content"]) .call-tree-column { /* Style chrome and non-JS nodes differently. */ opacity: 0.6; } @@ -168,14 +218,21 @@ 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; } @@ -280,7 +337,8 @@ } .waterfall-header-name { - padding: 4px; + padding: 2px 4px; + font-size: 90%; } .waterfall-header-tick { @@ -365,3 +423,33 @@ .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/whitefox/browser/devtools/power.svg b/whitefox/browser/devtools/power.svg new file mode 100644 index 0000000..2888951 --- /dev/null +++ b/whitefox/browser/devtools/power.svg @@ -0,0 +1,14 @@ + + + + diff --git a/whitefox/browser/devtools/profiler.css b/whitefox/browser/devtools/profiler.css index 85c71f4..58868e3 100644 --- a/whitefox/browser/devtools/profiler.css +++ b/whitefox/browser/devtools/profiler.css @@ -224,6 +224,8 @@ 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; } @@ -309,7 +311,8 @@ .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-line, +.call-tree-item:not([origin="content"]) .call-tree-column { /* Style chrome and non-JS nodes differently. */ opacity: 0.6; } @@ -327,19 +330,25 @@ 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; } diff --git a/whitefox/browser/devtools/shadereditor.css b/whitefox/browser/devtools/shadereditor.css index 90441a0..3d01e20 100644 --- a/whitefox/browser/devtools/shadereditor.css +++ b/whitefox/browser/devtools/shadereditor.css @@ -22,15 +22,6 @@ 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; -} - /* Shaders pane */ #shaders-pane { diff --git a/whitefox/browser/devtools/splitview.css b/whitefox/browser/devtools/splitview.css index 55f51f2..9710c38 100644 --- a/whitefox/browser/devtools/splitview.css +++ b/whitefox/browser/devtools/splitview.css @@ -4,10 +4,13 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.loading .splitview-nav-container { - background-image: url(chrome://global/skin/icons/loading_16.png); - background-repeat: no-repeat; - background-position: center center; +.splitview-nav-container .devtools-throbber { + display: none; + text-align: center; +} + +.loading .splitview-nav-container .devtools-throbber { + display: block; } .theme-dark .splitview-nav-container { diff --git a/whitefox/browser/devtools/webaudioeditor.css b/whitefox/browser/devtools/webaudioeditor.css index 21f4d8d..de0e21e 100644 --- a/whitefox/browser/devtools/webaudioeditor.css +++ b/whitefox/browser/devtools/webaudioeditor.css @@ -21,15 +21,6 @@ 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; -} - /* Context Graph */ svg { overflow: hidden; @@ -85,13 +76,47 @@ g.edgePath.param-connection { .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 */ @@ -104,9 +129,6 @@ text { fill: var(--theme-body-color-alt); } -.theme-light g.selected text { - fill: var(--theme-toolbar-background); -} .nodes text { cursor: pointer; @@ -116,6 +138,12 @@ text { * 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; } @@ -149,6 +177,20 @@ text { -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); @@ -168,6 +210,32 @@ text { } } +/** + * 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 diff --git a/whitefox/browser/devtools/webconsole.css b/whitefox/browser/devtools/webconsole.css index acd43d2..9ae37e7 100644 --- a/whitefox/browser/devtools/webconsole.css +++ b/whitefox/browser/devtools/webconsole.css @@ -266,6 +266,17 @@ a { 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); diff --git a/whitefox/browser/dots.png b/whitefox/browser/dots.png deleted file mode 100644 index e856fd0..0000000 Binary files a/whitefox/browser/dots.png and /dev/null differ diff --git a/whitefox/browser/dots@2x.png b/whitefox/browser/dots@2x.png deleted file mode 100644 index 5b9089b..0000000 Binary files a/whitefox/browser/dots@2x.png and /dev/null differ diff --git a/whitefox/browser/downloads/allDownloadsViewOverlay.css b/whitefox/browser/downloads/allDownloadsViewOverlay.css index e05ae08..c674487 100755 --- a/whitefox/browser/downloads/allDownloadsViewOverlay.css +++ b/whitefox/browser/downloads/allDownloadsViewOverlay.css @@ -52,18 +52,22 @@ /*** Button icons ***/ +.downloadButton.downloadConfirmBlock, .downloadButton.downloadCancel { -moz-image-region: rect(0px, 16px, 16px, 0px); } +richlistitem.download:hover > .downloadButton.downloadConfirmBlock, richlistitem.download:hover > .downloadButton.downloadCancel { -moz-image-region: rect(0px, 32px, 16px, 16px); } +richlistitem.download:hover > .downloadButton.downloadConfirmBlock:hover, richlistitem.download:hover > .downloadButton.downloadCancel:hover { -moz-image-region: rect(0px, 48px, 16px, 32px); } +richlistitem.download:hover > .downloadButton.downloadConfirmBlock:active, richlistitem.download:hover > .downloadButton.downloadCancel:active { -moz-image-region: rect(0px, 64px, 16px, 48px); } diff --git a/whitefox/browser/downloads/downloads.css b/whitefox/browser/downloads/downloads.css index c609816..c9b8396 100755 --- a/whitefox/browser/downloads/downloads.css +++ b/whitefox/browser/downloads/downloads.css @@ -182,15 +182,19 @@ richlistitem[type="download"]:first-child { /*** Button icons ***/ +.downloadButton.downloadConfirmBlock, .downloadButton.downloadCancel { -moz-image-region: rect(0px, 16px, 16px, 0px); } +richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock, richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel { -moz-image-region: rect(0px, 32px, 16px, 16px); } +richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:hover, richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover { -moz-image-region: rect(0px, 48px, 16px, 32px); } +richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:active, richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active { -moz-image-region: rect(0px, 64px, 16px, 48px); } diff --git a/whitefox/browser/menuPanel-aero.png b/whitefox/browser/menuPanel-aero.png index 72bd7d9..1dc60f0 100644 Binary files a/whitefox/browser/menuPanel-aero.png and b/whitefox/browser/menuPanel-aero.png differ diff --git a/whitefox/browser/menuPanel.png b/whitefox/browser/menuPanel.png index 72bd7d9..1dc60f0 100644 Binary files a/whitefox/browser/menuPanel.png and b/whitefox/browser/menuPanel.png differ diff --git a/whitefox/browser/pageInfo.css b/whitefox/browser/pageInfo.css old mode 100755 new mode 100644 index f205b57..d125fd9 --- a/whitefox/browser/pageInfo.css +++ b/whitefox/browser/pageInfo.css @@ -116,7 +116,7 @@ textbox[disabled] { } /* General Tab */ -groupbox.collapsable caption .caption-icon { +groupbox.collapsable caption .caption-icon { width: 9px; height: 9px; background-repeat: no-repeat; @@ -132,16 +132,16 @@ groupbox.collapsable[closed="true"] { -moz-appearance: none; } -groupbox.collapsable[closed="true"] caption .caption-icon { +groupbox.collapsable[closed="true"] caption .caption-icon { background-image: url("chrome://global/skin/tree/twisty-clsd.png"); } -groupbox tree { +groupbox tree { margin: 0 3px; border: none; } -#securityBox description { +#securityBox description { -moz-margin-start: 10px; } @@ -206,7 +206,7 @@ treechildren::-moz-tree-cell-text(broken) { -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow; } -.feedTitle { +.feedTitle { font-weight: bold; } @@ -247,12 +247,16 @@ treechildren::-moz-tree-cell-text(broken) { #securityPanel .header { font-size: 120%; } - + #securityPanel .fieldLabel { - margin: 2px 10px 3px 10px; + margin: 2px 10px 3px; } #securityPanel .fieldValue { font-weight: bold; - margin: 2px 10px 0px 10px; + margin: 2px 10px 3px; +} + +#securityPanel row { + -moz-box-align: center; } diff --git a/whitefox/browser/places/bookmarks-menu-arrow.png b/whitefox/browser/places/bookmarks-menu-arrow.png deleted file mode 100755 index 616f16b..0000000 Binary files a/whitefox/browser/places/bookmarks-menu-arrow.png and /dev/null differ diff --git a/whitefox/browser/preferences/in-content/preferences.css b/whitefox/browser/preferences/in-content/preferences.css index 4f57324..3daa250 100644 --- a/whitefox/browser/preferences/in-content/preferences.css +++ b/whitefox/browser/preferences/in-content/preferences.css @@ -28,6 +28,24 @@ treecol { list-style-image: url("chrome://browser/skin/preferences/in-content/icons.png"); } +#categories { + max-height: 100vh; +} + +#categories > scrollbox { + overflow-x: hidden !important; +} + +/** + * We want the last category to always have non-0 getBoundingClientRect().bottom + * so we can use the value to figure out the max-height of the list in + * preferences.js, so use collapse instead of display: none; if it's hidden + */ +#categories > .category[hidden="true"] { + display: -moz-box; + visibility: collapse; +} + #category-general > .category-icon { -moz-image-region: rect(0, 24px, 24px, 0); } @@ -113,6 +131,43 @@ treecol { /* General Pane */ +#startupTable { + border-collapse: collapse; +} + +#startupTable > tr > td { + padding: 0; /* remove the padding from html.css */ +} + +#startupTable > tr:not(:first-child) > td { + padding-top: 0.5em; /* add a spacing between the rows */ +} + +#startupTable > tr > .label-cell { + text-align: end; + width: 0; /* make the column as small as possible */ +} + +#startupTable > tr > .label-cell > label { + white-space: nowrap; +} + +#startupTable > tr > .content-cell > menulist, +#startupTable > tr > .content-cell > textbox { + width: calc(100% - 8px); + margin-left: 4px; + margin-right: 4px; +} + +#startupTable > tr > .homepage-buttons { + display: flex; + flex-wrap: wrap; +} + +#startupTable > tr > .homepage-buttons > .content-cell-item { + flex-grow: 1; +} + #useFirefoxSync { font-size: 90%; -moz-margin-end: 8px !important; @@ -137,6 +192,11 @@ treecol { margin-right: 4px !important; } +#defaultFontSizeLabel { + /* !important needed to override common !important rule */ + -moz-margin-start: 4px !important; +} + /* Applications Pane Styles */ #applicationsContent { @@ -147,6 +207,10 @@ treecol { -moz-margin-start: 0; } +#handlersView { + height: 25em; +} + #handlersView > richlistitem { min-height: 36px !important; } @@ -173,12 +237,42 @@ treecol { -moz-margin-end: 8px !important; } +/* Collapse the non-active vboxes in decks to use only the height the + active vbox needs */ +#historyPane:not([selectedIndex="1"]) > #historyDontRememberPane, +#historyPane:not([selectedIndex="2"]) > #historyCustomPane, +#weavePrefsDeck:not([selectedIndex="1"]) > #hasAccount, +#weavePrefsDeck:not([selectedIndex="2"]) > #needsUpdate, +#weavePrefsDeck:not([selectedIndex="3"]) > #fxaDeterminingStatus, +#weavePrefsDeck:not([selectedIndex="4"]) > #noFxaAccount, +#weavePrefsDeck:not([selectedIndex="5"]) > #hasFxaAccount, +#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified, +#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected { + visibility: collapse; +} + /* XXX This style is for bug 740213 and should be removed once that bug has a solution. */ description > html|a { cursor: pointer; } +#fxaProfileImage { + width: 60px; + height: 60px; + border-radius: 50%; + border-width: 5px; + border-color: red; + background-image: url(chrome://browser/skin/preferences/in-content/default-profile-image.svg); + background-size: contain; + cursor: pointer; + -moz-margin-end: 15px; +} + +#fxaProfileImage:hover { + border-color: blue; +} + #noFxaAccount { /* Overriding the margins from the base preferences.css theme file. These overrides can be simplified by fixing bug 1027174 */ @@ -196,21 +290,16 @@ description > html|a { -moz-margin-start: 0; } -#advancedPrefs { - padding-bottom: 0; /* no padding needed in inContent prefs */ -} - #tabsElement { -moz-margin-end: 4px; /* add the 4px end-margin of other elements */ } -#encryptionPanel { - margin-top: 15px; -} - #telemetryLearnMore, #FHRLearnMore, #crashReporterLearnMore { + /* provide some margin between the links and the label text */ + /* !important is needed to override the rules defined in common.css */ + -moz-margin-start: 20px !important; /* center the links */ margin-top: 8px; margin-bottom: 8px; @@ -232,6 +321,10 @@ description > html|a { } } +#showUpdateHistory { + -moz-margin-start: 0; +} + /** * Dialog */ @@ -294,10 +387,26 @@ description > html|a { width: 66ch; } +.largeDialogContainer.doScroll { + overflow-y: auto; + -moz-box-flex: 1; +} + /** * End Dialog */ +/** + * Font dialog menulist fixes + */ + +#defaultFontType, +#serif, +#sans-serif, +#monospace { + min-width: 30ch; +} + /** * Sync migration */ @@ -320,6 +429,40 @@ description > html|a { to { opacity: 1; } } +/*@media not all and (-moz-windows-default-theme) { + #category-general > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#general-native"); + } + + #category-search > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#search-native"); + } + + #category-content > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#content-native"); + } + + #category-application > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#applications-native"); + } + + #category-privacy > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#privacy-native"); + } + + #category-security > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#security-native"); + } + + #category-sync > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#sync-native"); + } + + #category-advanced > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#advanced-native"); + } +}*/ + .actionsMenu > .menulist-label-box > .menulist-icon { -moz-margin-end: 9px; } @@ -329,6 +472,10 @@ filefield + button { -moz-margin-start: -4px; } +#advancedPrefs { + padding-bottom: 0; /* override padding from normal preferences.css */ +} + /** * Dialog */ diff --git a/whitefox/browser/preferences/in-content/search.css b/whitefox/browser/preferences/in-content/search.css index ebcd82e..a203a4d 100644 --- a/whitefox/browser/preferences/in-content/search.css +++ b/whitefox/browser/preferences/in-content/search.css @@ -2,6 +2,10 @@ * 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/. */ + #defaultEngine { + -moz-margin-start: 0; + } + #defaultEngine > .menulist-label-box > .menulist-icon { height: 16px; } @@ -12,7 +16,7 @@ } #engineList { - margin: .5em 6px; + margin: .5em 0; } #engineList treechildren::-moz-tree-image(engineShown, checked) { @@ -43,3 +47,17 @@ height: 2px; -moz-margin-start: 0; } + +#engineShown { + min-width: 26px; +} + +#addEnginesBox { + margin-bottom: 1em; +} + +#removeEngineButton, +#restoreDefaultSearchEngines { + margin-right: 0; + margin-left: 0; +} diff --git a/whitefox/browser/preferences/preferences.css b/whitefox/browser/preferences/preferences.css index 66450e4..20d7e67 100644 --- a/whitefox/browser/preferences/preferences.css +++ b/whitefox/browser/preferences/preferences.css @@ -47,6 +47,7 @@ radio[pane=paneSync] { list-style-image: url("chrome://browser/skin/preferences/Options-sync.png") !important; } +/* These lines should be removed as part of fixing bug 1140495 */ label.small { font-size: smaller; } diff --git a/whitefox/browser/reader-tour.png b/whitefox/browser/reader-tour.png new file mode 100644 index 0000000..be346b3 Binary files /dev/null and b/whitefox/browser/reader-tour.png differ diff --git a/whitefox/browser/reader-tour@2x.png b/whitefox/browser/reader-tour@2x.png new file mode 100644 index 0000000..1a60d93 Binary files /dev/null and b/whitefox/browser/reader-tour@2x.png differ diff --git a/whitefox/browser/readerMode.svg b/whitefox/browser/readerMode.svg new file mode 100644 index 0000000..3d024ea --- /dev/null +++ b/whitefox/browser/readerMode.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/whitefox/browser/readinglist/icons.svg b/whitefox/browser/readinglist/icons.svg new file mode 100644 index 0000000..6aa0159 --- /dev/null +++ b/whitefox/browser/readinglist/icons.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/whitefox/browser/readinglist/readinglist-icon.svg b/whitefox/browser/readinglist/readinglist-icon.svg new file mode 100644 index 0000000..0a24a67 --- /dev/null +++ b/whitefox/browser/readinglist/readinglist-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/whitefox/browser/readinglist/sidebar.css b/whitefox/browser/readinglist/sidebar.css new file mode 100644 index 0000000..43ea464 --- /dev/null +++ b/whitefox/browser/readinglist/sidebar.css @@ -0,0 +1,141 @@ +/* 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, body { + overflow-x: hidden; +} + +body { + margin: 0; + font: message-box; + color: #333333; + -moz-user-select: none; + overflow: hidden; +} + +#emptyListInfo { + cursor: default; + padding: 3em 1em; + text-align: center; +} + +.item { + display: flex; + flex-flow: row; + cursor: pointer; + padding: 6px; + opacity: 0; + max-height: 0; + transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms; +} + +.item.active { + background: #FEFEFE; +} + +.item.selected { + background: #FDFDFD; +} + +.item-thumb-container { + min-width: 64px; + max-width: 64px; + min-height: 40px; + max-height: 40px; + border: 1px solid white; + box-shadow: 0px 1px 2px rgba(0,0,0,.35); + margin: 5px; + background-color: #ebebeb; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-image: url("chrome://branding/content/silhouette-40.svg"); +} + +.item-thumb-container.preview-available { + background-color: #fff; + background-size: cover; +} + +.item-summary-container { + display: flex; + flex-flow: column; + -moz-padding-start: 4px; + overflow: hidden; + flex-grow: 1; +} + +.item-title-lines { + display: flex; +} + +.item-title { + overflow: hidden; + max-height: 2.8em; + line-height: 1.4; + flex-grow: 1; +} + +.item-domain { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-height: 1.4em; + color: #0095DD; +} + +.item:hover .item-domain { + color: #008ACB; +} + +.item:not(:hover):not(.selected) .remove-button { + visibility: hidden; +} + +.remove-button { + padding: 0; + width: 16px; + height: 16px; + min-width: 16px; + min-height: 16px; + background-size: contain; + background-color: transparent; + border-width: 0; +} + +.item.visible { + opacity: 1; + max-height: 80px; + transition: max-height 250ms ease-in-out, opacity 250ms ease-in-out 250ms; +} + +html { + background-color: #EEF3FA; +} + +.item { + -moz-padding-end: 0; +} + +.item-title { + margin: 1px 0 0; +} + +.item-title, .item-domain { + -moz-margin-end: 6px; +} + +.remove-button { + -moz-margin-end: 2px; + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 16, 16, 0); +} + +.remove-button:hover { + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 32, 16, 16); +} + +.remove-button:hover:active { + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 48, 16, 32); +} diff --git a/whitefox/browser/session-restore.svg b/whitefox/browser/session-restore.svg new file mode 100644 index 0000000..aadee35 --- /dev/null +++ b/whitefox/browser/session-restore.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/whitefox/browser/tab-crashed.svg b/whitefox/browser/tab-crashed.svg new file mode 100644 index 0000000..9a656eb --- /dev/null +++ b/whitefox/browser/tab-crashed.svg @@ -0,0 +1,16 @@ + + + + + + + + \ No newline at end of file diff --git a/whitefox/browser/update-badge.svg b/whitefox/browser/update-badge.svg new file mode 100644 index 0000000..6a4c2a0 --- /dev/null +++ b/whitefox/browser/update-badge.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/whitefox/browser/welcome-back.svg b/whitefox/browser/welcome-back.svg new file mode 100644 index 0000000..38610cb --- /dev/null +++ b/whitefox/browser/welcome-back.svg @@ -0,0 +1,17 @@ + + + + + + + + \ No newline at end of file diff --git a/whitefox/browser/yosemite/Toolbar.png b/whitefox/browser/yosemite/Toolbar.png index 9fdbf7c..83f6cd3 100644 Binary files a/whitefox/browser/yosemite/Toolbar.png and b/whitefox/browser/yosemite/Toolbar.png differ diff --git a/whitefox/browser/yosemite/menuPanel.png b/whitefox/browser/yosemite/menuPanel.png index 72bd7d9..1dc60f0 100644 Binary files a/whitefox/browser/yosemite/menuPanel.png and b/whitefox/browser/yosemite/menuPanel.png differ diff --git a/whitefox/global/aboutReader.css b/whitefox/global/aboutReader.css index 630b26a..8121e5f 100644 --- a/whitefox/global/aboutReader.css +++ b/whitefox/global/aboutReader.css @@ -1,3 +1,124 @@ /* 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 { + padding: 64px 0; +} + +@media (max-width: 785px) { + body { + padding-top: 64px; + -moz-padding-end: 0; + padding-bottom: 64px; + -moz-padding-start: 51px; + } +} + +body.loaded { + transition: color 0.4s, background-color 0.4s; +} + +body.light { + color: #333333; + background-color: #ffffff; +} + +body.dark { + color: #eeeeee; + background-color: #333333; +} + +body.dark *::-moz-selection { + background-color: #FFFFFF; + color: #0095DD; +} +body.dark a::-moz-selection { + color: #DD4800; +} + +body.sepia { + color: #5b4636; + background-color: #f4ecd8; +} + +body.sans-serif, +body.sans-serif .remove-button { + font-family: Helvetica, Arial, sans-serif; +} + +body.serif, +body.serif .remove-button { + font-family: Georgia, "Times New Roman", serif; +} + +#container { + max-width: 30em; + margin: 0 auto; +} + +#container.font-size1 { + font-size: 12px; +} + +#container.font-size2 { + font-size: 14px; +} + +#container.font-size3 { + font-size: 16px; +} + +#container.font-size4 { + font-size: 18px; +} + +#container.font-size5 { + font-size: 20px; +} + +#container.font-size6 { + font-size: 22px; +} + +#container.font-size7 { + font-size: 24px; +} + +#container.font-size8 { + font-size: 26px; +} + +#container.font-size9 { + font-size: 28px; +} + +/* Override some controls and content styles based on color scheme */ + +body.light > .container > .header > .domain { + border-bottom-color: #333333 !important; +} + +body.sepia > .container > .header > .domain { + border-bottom-color: #5b4636 !important; +} + +body.dark > .container > .header > .domain { + border-bottom-color: #eeeeee !important; +} + +body.sepia > .container > .footer { + background-color: #dedad4 !important; +} + +body.light blockquote { + -moz-border-start: 2px solid #333333 !important; +} + +body.sepia blockquote { + -moz-border-start: 2px solid #5b4636 !important; +} + +body.dark blockquote { + -moz-border-start: 2px solid #eeeeee !important; +} diff --git a/whitefox/global/aboutReaderContent.css b/whitefox/global/aboutReaderContent.css new file mode 100644 index 0000000..8412751 --- /dev/null +++ b/whitefox/global/aboutReaderContent.css @@ -0,0 +1,113 @@ +/* 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/. */ + +#moz-reader-content { + display: none; + font-size: 1em; + line-height: 1.6em; +} + +h1, +h2, +h3 { + font-weight: bold; +} + +h1 { + font-size: 1.6em; + line-height: 1.25em; +} + +h2 { + font-size: 1.2em; + line-height: 1.51em; +} + +h3 { + font-size: 1em; + line-height: 1.66em; +} + +a { + text-decoration: underline; + font-weight: normal; +} + +a, +a:visited, +a:hover, +a:active { + color: #0095dd; +} + +* { + max-width: 100%; + height: auto; +} + +p, +code, +pre, +blockquote, +ul, +ol, +li, +figure, +.wp-caption { + margin: 0 0 30px 0; +} + +p > img:only-child, +p > a:only-child > img:only-child, +.wp-caption img, +figure img { + display: block; +} + +img[moz-reader-center] { + margin-left: auto; + margin-right: auto; +} + +.caption, +.wp-caption-text, +figcaption { + font-size: 0.9em; + line-height: 1.48em; + font-style: italic; +} + +code, +pre { + white-space: pre-wrap; +} + +blockquote { + padding: 0; + -moz-padding-start: 16px; +} + +ul, +ol { + padding: 0; +} + +ul { + -moz-padding-start: 30px; + list-style: disc; +} + +ol { + -moz-padding-start: 30px; + list-style: decimal; +} + +/* Hide elements with common "hidden" class names */ +.visually-hidden, +.visuallyhidden, +.hidden, +.invisible, +.sr-only { + display: none; +} diff --git a/whitefox/global/aboutReaderControls.css b/whitefox/global/aboutReaderControls.css new file mode 100644 index 0000000..b71bd59 --- /dev/null +++ b/whitefox/global/aboutReaderControls.css @@ -0,0 +1,371 @@ +/* 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/. */ + +.light-button { + color: #333333; + background-color: #ffffff; +} + +.dark-button { + color: #eeeeee; + background-color: #333333; +} + +.sepia-button { + color: #5b4636; + background-color: #f4ecd8; +} + +.sans-serif-button { + font-family: Helvetica, Arial, sans-serif; +} + +.serif-button { + font-family: Georgia, "Times New Roman", serif; +} + +/* Loading/error message */ + +#reader-message { + margin-top: 40px; + display: none; + text-align: center; + width: 100%; + font-size: 0.9em; +} + +/* Header */ + +.header { + text-align: start; + display: none; +} + +.domain { + font-size: 0.9em; + line-height: 1.48em; + padding-bottom: 4px; + font-family: Helvetica, Arial, sans-serif; + text-decoration: none; + border-bottom: 1px solid; + color: #0095dd; +} + +.header > h1 { + font-size: 1.6em; + line-height: 1.25em; + width: 100%; + margin: 30px 0; + padding: 0; +} + +.header > .credits { + font-size: 0.9em; + line-height: 1.48em; + margin: 0 0 30px 0; + padding: 0; + font-style: italic; +} + +/*======= Controls toolbar =======*/ + +.toolbar { + font-family: Helvetica, Arial, sans-serif; + position: fixed; + height: 100%; + top: 0; + left: 0; + margin: 0; + padding: 0; + list-style: none; + background-color: #fbfbfb; + -moz-user-select: none; + border-right: 1px solid #b5b5b5; +} + +.button { + display: block; + background-size: 24px 24px; + background-repeat: no-repeat; + color: #333; + background-color: #fbfbfb; + height: 40px; + padding: 0; +} + +.toolbar .button { + width: 40px; + background-position: center; + margin-right: -1px; + border-top: 0; + border-left: 0; + border-right: 1px solid #b5b5b5; + border-bottom: 1px solid #c1c1c1; +} + +.button[hidden] { + display: none; +} + +.dropdown { + text-align: center; + list-style: none; + margin: 0; + padding: 0; +} + +.dropdown li { + margin: 0; + padding: 0; +} + +/*======= Font style popup =======*/ + +.dropdown-popup { + min-width: 300px; + text-align: start; + position: absolute; + left: 48px; /* offset to account for toolbar width */ + z-index: 1000; + background-color: #fbfbfb; + visibility: hidden; + border-radius: 4px; + border: 1px solid #b5b5b5; + border-bottom-width: 0; + box-shadow: 0 1px 12px #666; +} + +.dropdown-popup > hr { + display: none; +} + +.open > .dropdown-popup { + visibility: visible; +} + +.dropdown-arrow { + position: absolute; + top: 30px; /* offset arrow from top of popup */ + left: -16px; + width: 24px; + height: 24px; + background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); + display: block; +} + +#font-type-buttons, +#font-size-buttons, +#color-scheme-buttons { + display: flex; + flex-direction: row; +} + +#font-type-buttons > button:first-child { + border-top-left-radius: 3px; +} +#font-type-buttons > button:last-child { + border-top-right-radius: 3px; +} +#color-scheme-buttons > button:first-child { + border-bottom-left-radius: 3px; +} +#color-scheme-buttons > button:last-child { + border-bottom-right-radius: 3px; +} + +#font-type-buttons > button, +#font-size-buttons > button, +#color-scheme-buttons > button { + text-align: center; + border: 0; +} + +#font-type-buttons > button, +#font-size-buttons > button { + width: 50%; + background-color: transparent; + border-left: 1px solid #B5B5B5; + border-bottom: 1px solid #B5B5B5; +} + +#color-scheme-buttons > button { + width: 33.33%; + font-size: 14px; +} + +#color-scheme-buttons > .dark-button { + margin-top: -1px; + height: 61px; +} + +#font-type-buttons > button:first-child, +#font-size-buttons > button:first-child { + border-left: 0; +} + +#font-type-buttons > button { + display: inline-block; + font-size: 62px; + height: 100px; +} + +#font-size-buttons > button, +#color-scheme-buttons > button { + height: 60px; +} + +#font-type-buttons > button:active:hover, +#font-type-buttons > button.selected, +#color-scheme-buttons > button:active:hover, +#color-scheme-buttons > button.selected { + box-shadow: inset 0 -3px 0 0 #fc6420; +} + +#font-type-buttons > button:active:hover, +#font-type-buttons > button.selected { + border-bottom: 1px solid #FC6420; +} + +/* Make the serif button content the same size as the sans-serif button content. */ +#font-type-buttons > button > .description { + color: #666; + font-size: 12px; + margin-top: -5px; +} + +/* Font sizes are different per-platform, so we need custom CSS to line them up. */ +#font-type-buttons > .sans-serif-button > .name { + margin-top: 2px; +} + +#font-type-buttons > .sans-serif-button > .description { + margin-top: -4px; +} + +#font-type-buttons > .serif-button > .name { + font-size: 63px; +} + +.button:hover, +#font-size-buttons > button:hover, +#font-type-buttons > button:hover { + background-color: #ebebeb; +} + +.dropdown.open, +.button:active, +#font-size-buttons > button:active, +#font-size-buttons > button.selected { + background-color: #dadada; +} + +/* Only used on Android */ +#font-size-sample { + display: none; +} + +.minus-button, +.plus-button { + background-color: transparent; + border: 0; + background-size: 18px 18px; + background-repeat: no-repeat; + background-position: center; +} + +.footer { + height: 64px; + background-color: #ebebeb; + position: absolute; + left: 0; + width: 100%; + text-align: center; + padding: 12px 0; + box-sizing: border-box; + box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset; +} + +.remove-button { + background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); + margin: 0 auto; + border: 1px solid #c1c1c1; + background-position: 10px 7px; + padding-left: 42px; + padding-right: 10px; + border-radius: 2px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + font-size: 18px; +} + + +/*======= Toolbar icons =======*/ + +/* Android-only controls */ +.share-button { + display: none; +} + +.close-button { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close"); + height: 68px; + background-position: center 8px; +} + +.close-button:hover { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); + background-color: #d94141; + border-bottom: 1px solid #d94141; + border-right: 1px solid #d94141; +} + +.close-button:hover:active { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); + background-color: #AE2325; + border-bottom: 1px solid #AE2325; + border-right: 1px solid #AE2325; +} + +.style-button { + background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); +} + +.toggle-button.on { + background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); +} + +.toggle-button { + background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg"); +} + +.list-button { + background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg"); +} +.list-button.on { + background-color: #d9d9d9; +} + +.minus-button { + background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); +} + +.plus-button { + background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); +} + +#pocket-button { + background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark"); +} + +#pocket-button:hover:active { + background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark-added"); +} + +@media print { + .toolbar { + display: none !important; + } + .footer { + display: none !important; + } +} diff --git a/whitefox/global/aboutSupport.css b/whitefox/global/aboutSupport.css index 1438ab0..ebcbac3 100644 --- a/whitefox/global/aboutSupport.css +++ b/whitefox/global/aboutSupport.css @@ -1,113 +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 { - background-color: -moz-Field; - color: -moz-FieldText; - font: message-box; -} - -body { - width: 90%; - margin-left: 5%; - margin-right: 5%; -} - -.page-subtitle { - margin-bottom: 3em; -} - -.major-section { - margin-top: 2em; - margin-bottom: 1em; - font-size: large; - text-align: start; - font-weight: bold; -} - -table { - background-color: -moz-Dialog; - color: -moz-DialogText; - font: message-box; - text-align: start; - width: 100%; - border: 1px solid ThreeDShadow; - border-spacing: 0px; -} - -th, td { - border: 1px dotted ThreeDShadow; - padding: 3px; -} - -thead th { - text-align: center; -} - -th { - text-align: start; - background-color: Highlight; - color: HighlightText; -} - -th.column { - white-space: nowrap; - width: 0px; -} - -td { - text-align: start; - border-top: 1px dotted ThreeDShadow; -} - -.prefs-table { - width: 100%; - table-layout: fixed; -} - -.pref-name { - width: 70%; - white-space: nowrap; - overflow: hidden; -} - -.pref-value { - width: 30%; - white-space: nowrap; - overflow: hidden; -} - -#reset-box { - background-color: -moz-Dialog; - border: 1px solid ThreeDShadow; - color: -moz-DialogText; - float: right; - margin-top: 2em; - margin-bottom: 20px; - -moz-margin-start: 20px; - -moz-margin-end: 0; - padding: 16px; - width: 30%; - visibility: hidden; -} - -#reset-box:-moz-dir(rtl) { - float: left; -} - -#reset-box > h3 { - margin-top: 0; -} - -#reset-box > button { - display: block; -} - -.block { - display: block; -} - -.hidden { - display: none; -} +@import url("chrome://apptarget/skin/aboutSupport.css"); \ No newline at end of file diff --git a/whitefox/global/config.css b/whitefox/global/config.css index 04ba1e8..000f836 100644 --- a/whitefox/global/config.css +++ b/whitefox/global/config.css @@ -1,76 +1 @@ - -@import url("chrome://global/skin/"); -@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); - - -#warningScreen -{ - background-color: -moz-Dialog; -} - -#warningBox -{ - background-color: -moz-Field; - color: -moz-FieldText; - border: 1px solid ThreeDShadow; - border-radius: 10px; - padding: 3em; - -moz-padding-start: 30px; - margin-left: 1em; - margin-right: 1em; -} - -#warningInnerBox -{ - max-width: 50em; -} - -#warningTitle -{ - margin: 0 0 .6em 0; - font-size: 160%; - border-bottom: 1px solid ThreeDLightShadow -} - -#warningText -{ - font-size: 110%; - margin-left: 0; -} - -#warningButton -{ - margin-top: 0.6em; -} - -#showWarningNextTime -{ - margin-top: 0.6em; -} - -#exclam -{ - list-style-image: url("chrome://global/skin/icons/warning-large.png"); - -moz-margin-end: 3em; -} - -#configTreeBody::-moz-tree-cell-text(user) -{ - font-weight: bold; -} - -#configTreeBody::-moz-tree-cell-text(locked) -{ - font-style: italic; -} - -#configTree -{ - margin-top: 5px; - margin-bottom: 5px; -} - -#filterRow -{ - margin-top: 5px; -} +@import url("chrome://apptarget/skin/config.css"); \ No newline at end of file diff --git a/whitefox/global/icons/warning.svg b/whitefox/global/icons/warning.svg new file mode 100644 index 0000000..0082970 --- /dev/null +++ b/whitefox/global/icons/warning.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/whitefox/global/in-content/check-partial.svg b/whitefox/global/in-content/check-partial.svg new file mode 100644 index 0000000..b46a731 --- /dev/null +++ b/whitefox/global/in-content/check-partial.svg @@ -0,0 +1,31 @@ + + + + + + + + + + \ No newline at end of file diff --git a/whitefox/global/in-content/sorter.png b/whitefox/global/in-content/sorter.png deleted file mode 100644 index 4193473..0000000 Binary files a/whitefox/global/in-content/sorter.png and /dev/null differ diff --git a/whitefox/global/in-content/sorter@2x.png b/whitefox/global/in-content/sorter@2x.png deleted file mode 100644 index 5e4d46d..0000000 Binary files a/whitefox/global/in-content/sorter@2x.png and /dev/null differ diff --git a/whitefox/global/media/videoClickToPlayButton.svg b/whitefox/global/media/videoClickToPlayButton.svg old mode 100755 new mode 100644 index 67ff4a7..f118afb --- a/whitefox/global/media/videoClickToPlayButton.svg +++ b/whitefox/global/media/videoClickToPlayButton.svg @@ -46,58 +46,34 @@ height="1.25" color-interpolation-filters="sRGB" id="dropShadow"> - - - - - - - + + style="fill:#ffffff;" /> + style="filter:url(#dropShadow);" /> + style="fill:url(#arrowGradient);" /> + style="fill:url(#whiteGradient);" /> + style="fill:white;fill-opacity:.3;" /> + style="fill:white;fill-opacity:.8;" /> diff --git a/whitefox/global/reader/RM-Add-24x24.svg b/whitefox/global/reader/RM-Add-24x24.svg new file mode 100644 index 0000000..66551ef --- /dev/null +++ b/whitefox/global/reader/RM-Add-24x24.svg @@ -0,0 +1,6 @@ + + + + diff --git a/whitefox/global/reader/RM-Close-24x24.svg b/whitefox/global/reader/RM-Close-24x24.svg new file mode 100644 index 0000000..b0674b2 --- /dev/null +++ b/whitefox/global/reader/RM-Close-24x24.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/whitefox/global/reader/RM-Delete-24x24.svg b/whitefox/global/reader/RM-Delete-24x24.svg new file mode 100644 index 0000000..6010fbe --- /dev/null +++ b/whitefox/global/reader/RM-Delete-24x24.svg @@ -0,0 +1,6 @@ + + + + diff --git a/whitefox/global/reader/RM-Minus-24x24.svg b/whitefox/global/reader/RM-Minus-24x24.svg new file mode 100644 index 0000000..9da7e03 --- /dev/null +++ b/whitefox/global/reader/RM-Minus-24x24.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/whitefox/global/reader/RM-Plus-24x24.svg b/whitefox/global/reader/RM-Plus-24x24.svg new file mode 100644 index 0000000..249912a --- /dev/null +++ b/whitefox/global/reader/RM-Plus-24x24.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/whitefox/global/reader/RM-Reading-List-24x24.svg b/whitefox/global/reader/RM-Reading-List-24x24.svg new file mode 100644 index 0000000..1f21efd --- /dev/null +++ b/whitefox/global/reader/RM-Reading-List-24x24.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/whitefox/global/reader/RM-Type-Controls-24x24.svg b/whitefox/global/reader/RM-Type-Controls-24x24.svg new file mode 100644 index 0000000..a25429a --- /dev/null +++ b/whitefox/global/reader/RM-Type-Controls-24x24.svg @@ -0,0 +1,23 @@ + + + + + + + diff --git a/whitefox/global/reader/RM-Type-Controls-Arrow.svg b/whitefox/global/reader/RM-Type-Controls-Arrow.svg new file mode 100644 index 0000000..9094d8a --- /dev/null +++ b/whitefox/global/reader/RM-Type-Controls-Arrow.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/whitefox/global/reader/pocket.svg b/whitefox/global/reader/pocket.svg new file mode 100644 index 0000000..63b22fa --- /dev/null +++ b/whitefox/global/reader/pocket.svg @@ -0,0 +1,28 @@ + + + + + + + + + diff --git a/whitefox/ostarget/darwin/browser.css b/whitefox/ostarget/darwin/browser.css index ce039e6..a0cf0c2 100644 --- a/whitefox/ostarget/darwin/browser.css +++ b/whitefox/ostarget/darwin/browser.css @@ -212,4 +212,12 @@ toolbarbutton.bookmark-item > menupopup { .messageCloseButton > .toolbarbutton-icon { width: 16px !important; } + + #PanelUI-update-status > .toolbarbutton-icon, + #PanelUI-fxa-status > .toolbarbutton-icon, + #PanelUI-quit > .toolbarbutton-icon, + #PanelUI-customize > .toolbarbutton-icon, + #PanelUI-help > .toolbarbutton-icon { + width: 16px; + } } diff --git a/whitefox/ostarget/darwin/global/in-content/common.css b/whitefox/ostarget/darwin/global/in-content/common.css index de4e1f2..18d910a 100644 --- a/whitefox/ostarget/darwin/global/in-content/common.css +++ b/whitefox/ostarget/darwin/global/in-content/common.css @@ -11,7 +11,8 @@ @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; html|body, -xul|page { +xul|page, +xul|window { font: message-box; -moz-appearance: none; background-color: #fbfbfb; @@ -28,15 +29,22 @@ html|h1 { font-size: 2.5em; font-weight: lighter; line-height: 1.2; + color: #333; margin: 0; margin-bottom: .5em; } +html|hr { + border-style: solid none none none; + border-color: #c1c1c1; +} + xul|caption { -moz-appearance: none; margin: 0; } +xul|caption > xul|checkbox, xul|caption > xul|label { font-size: 1.3rem; font-weight: bold; @@ -65,7 +73,7 @@ xul|prefpane > xul|*.content-box { xul|groupbox { -moz-appearance: none; border: none; - margin: 15px 0; + margin: 15px 0 0; -moz-padding-start: 0; -moz-padding-end: 0; font-size: 1.25rem; @@ -202,7 +210,7 @@ xul|menulist > xul|*.menulist-label-box { padding-left: 10px !important; } -xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon { +xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] { -moz-margin-end: 5px; } @@ -361,7 +369,6 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator { height: 30px; color: #333; line-height: 20px; - text-shadow: 0 1px 1px #fefffe; padding-right: 10px; padding-left: 10px; border: 1px solid #c1c1c1; @@ -386,34 +393,52 @@ xul|textbox[disabled="true"] { /* Links */ html|a, -xul|*.text-link, -xul|*.inline-link { +.text-link, +.inline-link { line-height: 22px; color: #0095dd; text-decoration: none; } html|a:hover, -xul|*.text-link:hover, -xul|*.inline-link:hover { - color: #4cb1ff; - text-decoration: none; +.text-link:hover, +.inline-link:hover { + color: #178ce5; + text-decoration: underline; } html|a:hover:active, -xul|*.text-link:hover:active, -xul|*.inline-link:hover:active { +.text-link:hover:active, +.inline-link:hover:active { color: #ff9500; text-decoration: none; } /* Checkboxes and radio buttons */ +/* Hide the actual checkbox */ +html|input[type="checkbox"] { + opacity: 0; + position: absolute; +} + +/* Create a box to style as the checkbox */ +html|input[type="checkbox"] + html|label:before { + display: inline-block; + content: ""; + vertical-align: middle; +} + +html|input[type="checkbox"] + html|label { + line-height: 0px; +} + xul|checkbox { -moz-margin-start: 0; } -xul|*.checkbox-check { +xul|*.checkbox-check, +html|input[type="checkbox"] + html|label:before { -moz-appearance: none; width: 23px; height: 23px; @@ -428,7 +453,8 @@ xul|*.checkbox-check { box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03); } -xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check { +xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, +html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { border-color: #0095dd; } @@ -436,7 +462,12 @@ xul|*.checkbox-check[checked] { list-style-image: url("chrome://global/skin/in-content/check.svg#check"); } -xul|checkbox[disabled="true"] > xul|*.checkbox-check { +html|input[type="checkbox"]:checked + html|label:before { + background-image: url("chrome://global/skin/in-content/check.svg#check"), linear-gradient(#fff, rgba(255,255,255,0.8)) !important; +} + +xul|checkbox[disabled="true"] > xul|*.checkbox-check, +html|input[type="checkbox"]:disabled + html|label { opacity: 0.5; } @@ -449,6 +480,10 @@ xul|richlistitem > xul|*.checkbox-check { margin: 3px 6px; } +xul|radio { + -moz-margin-start: 0; +} + xul|*.radio-check { -moz-appearance: none; width: 23px; @@ -521,6 +556,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur padding-bottom: 2px; -moz-padding-start: 9px; margin: 0; + -moz-user-select: none; } *|*.category-icon { @@ -542,6 +578,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur font-weight: normal; line-height: 40px; margin: 0; + -moz-user-select: none; } /* File fields */ @@ -627,6 +664,11 @@ xul|tree { border: 1px solid #c1c1c1; } +xul|tree:-moz-focusring, +xul|richlistbox:-moz-focusring { + border: 1px dotted #0095dd; +} + xul|listheader, xul|treecols { -moz-appearance: none; @@ -644,7 +686,7 @@ xul|treecolpicker { padding: 5px 10px; } -xul|treecol:not([hideheader="true"]):hover, +xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover, xul|treecolpicker:hover { background-color: #dadada; color: #333; @@ -658,21 +700,15 @@ xul|treecolpicker { } xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { - list-style-image: url("chrome://global/skin/in-content/sorter.png"); - width: 12px; - height: 8px; + list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown"); + width: 18px; + height: 18px; } -xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="descending"] { +xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] { transform: scaleY(-1); } -@media (min-resolution: 2dppx) { - xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { - list-style-image: url("chrome://global/skin/in-content/sorter@2x.png"); - } -} - /* This is the only way to increase the height of a tree row unfortunately */ xul|treechildren::-moz-tree-row { min-height: 2em; @@ -686,6 +722,7 @@ xul|treechildren::-moz-tree-cell-text { xul|treechildren::-moz-tree-cell-text(selected) { color: #fff; } + xul|tabs { padding-right: 0; padding-left: 0; @@ -696,17 +733,23 @@ xul|tab[selected] { } xul|button, +html|button, xul|colorpicker[type="button"], xul|menulist { margin-top: 3px; } -xul|button { +xul|button, +html|button { /* use the same margin of other elements for the alignment */ margin-left: 4px; margin-right: 4px; } +xul|caption { + -moz-padding-start: 0; +} + xul|groupbox > xul|*.groupbox-body { padding: 0; } @@ -754,6 +797,20 @@ xul|description { html|a:-moz-focusring, xul|*.text-link:-moz-focusring, xul|*.inline-link:-moz-focusring { - outline-width: 0; - box-shadow: 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 1.5px 1px -moz-mac-focusring; + color: #ff9500; + text-decoration: underline; +} + +xul|button:-moz-focusring, +xul|menulist:-moz-focusring, +xul|checkbox:-moz-focusring > .checkbox-check, +xul|radio[focused="true"] > .radio-check, +xul|tab:-moz-focusring > .tab-middle > .tab-text { + outline: 2px solid rgba(0,149,221,0.5); + outline-offset: 1px; + -moz-outline-radius: 2px; } + +xul|radio[focused="true"] > .radio-check { + -moz-outline-radius: 100%; +} \ No newline at end of file diff --git a/whitefox/ostarget/darwin/panelUIOverlay.css b/whitefox/ostarget/darwin/panelUIOverlay.css index c2bc051..800ee78 100644 --- a/whitefox/ostarget/darwin/panelUIOverlay.css +++ b/whitefox/ostarget/darwin/panelUIOverlay.css @@ -92,11 +92,17 @@ background-size: var(--panel-ui-button-background-size); background-position: var(--panel-ui-button-background-position); background-repeat: var(--panel-ui-button-background-repeat); -} +}*/ #PanelUI-button:-moz-locale-dir(rtl) { background-position: 100% 0, calc(100% - 1px) 0, calc(100% - 2px) 0; -}*/ +} + +#PanelUI-menu-button[update-status="succeeded"] .toolbarbutton-badge::after { + content: url(chrome://browser/skin/update-badge.svg); + background-color: #74BF43; + height: 10px; +} .panel-subviews { padding: 4px; @@ -231,6 +237,11 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan max-width: 30em; } +/* Bug 1164419 - increase Pocket panel size to accomidate wider Russian text. */ +panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-viewstack > .panel-mainview:not([panelid="PanelUI-popup"]) { + max-width: 33em; /* standaloneSubviewWidth + 3 */ +} + panelview:not([mainview]) .toolbarbutton-text, .cui-widget-panel toolbarbutton > .toolbarbutton-text { text-align: start; @@ -241,6 +252,11 @@ panelview:not([mainview]) .toolbarbutton-text, padding: 4px 0; } +.cui-widget-panel[viewId="PanelUI-pocketView"] > .panel-arrowcontainer > .panel-arrowcontent { + padding-top: 0; + padding-bottom: 0; +} + .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent { padding-bottom: 0; } @@ -497,7 +513,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { min-height: 40px; -moz-appearance: none; box-shadow: none; - border: none; + border: none; border-radius: 0; transition: background-color; -moz-box-orient: horizontal; @@ -788,7 +804,7 @@ panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover, toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover, menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive], menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive], -.share-provider-button:not(:-moz-any([disabled],[open],:active)):hover, +.share-provider-button:not(:-moz-any([disabled],[open],:active)):hover:not([checked="true"]), .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover, .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton:not(:-moz-any([disabled],[open],:active)):hover { background-color: hsla(210,4%,10%,.08); @@ -1158,7 +1174,9 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { #customizationui-widget-multiview > .panel-viewcontainer, #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack, #PanelUI-panicView > .panel-subview-body, -#PanelUI-panicView { +#PanelUI-panicView, +#PanelUI-pocketView > .panel-subview-body, +#PanelUI-pocketView { overflow: visible; } diff --git a/whitefox/ostarget/general/global/in-content/common.css b/whitefox/ostarget/general/global/in-content/common.css index e0c28a4..b96f102 100644 --- a/whitefox/ostarget/general/global/in-content/common.css +++ b/whitefox/ostarget/general/global/in-content/common.css @@ -6,7 +6,8 @@ @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; html|body, -xul|page { +xul|page, +xul|window { font: message-box; -moz-appearance: none; background-color: #fbfbfb; @@ -23,15 +24,22 @@ html|h1 { font-size: 2.5em; font-weight: lighter; line-height: 1.2; + color: #333; margin: 0; margin-bottom: .5em; } +html|hr { + border-style: solid none none none; + border-color: #c1c1c1; +} + xul|caption { -moz-appearance: none; margin: 0; } +xul|caption > xul|checkbox, xul|caption > xul|label { font-size: 1.3rem; font-weight: bold; @@ -60,7 +68,7 @@ xul|prefpane > xul|*.content-box { xul|groupbox { -moz-appearance: none; border: none; - margin: 15px 0; + margin: 15px 0 0; -moz-padding-start: 0; -moz-padding-end: 0; font-size: 1.25rem; @@ -197,7 +205,7 @@ xul|menulist > xul|*.menulist-label-box { padding-left: 10px !important; } -xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon { +xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] { -moz-margin-end: 5px; } @@ -356,7 +364,6 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator { height: 30px; color: #333; line-height: 20px; - text-shadow: 0 1px 1px #fefffe; padding-right: 10px; padding-left: 10px; border: 1px solid #c1c1c1; @@ -381,34 +388,52 @@ xul|textbox[disabled="true"] { /* Links */ html|a, -xul|*.text-link, -xul|*.inline-link { +.text-link, +.inline-link { line-height: 22px; color: #0095dd; text-decoration: none; } html|a:hover, -xul|*.text-link:hover, -xul|*.inline-link:hover { - color: #4cb1ff; - text-decoration: none; +.text-link:hover, +.inline-link:hover { + color: #178ce5; + text-decoration: underline; } html|a:hover:active, -xul|*.text-link:hover:active, -xul|*.inline-link:hover:active { +.text-link:hover:active, +.inline-link:hover:active { color: #ff9500; text-decoration: none; } /* Checkboxes and radio buttons */ +/* Hide the actual checkbox */ +html|input[type="checkbox"] { + opacity: 0; + position: absolute; +} + +/* Create a box to style as the checkbox */ +html|input[type="checkbox"] + html|label:before { + display: inline-block; + content: ""; + vertical-align: middle; +} + +html|input[type="checkbox"] + html|label { + line-height: 0px; +} + xul|checkbox { -moz-margin-start: 0; } -xul|*.checkbox-check { +xul|*.checkbox-check, +html|input[type="checkbox"] + html|label:before { -moz-appearance: none; width: 23px; height: 23px; @@ -423,7 +448,8 @@ xul|*.checkbox-check { box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03); } -xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check { +xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, +html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { border-color: #0095dd; } @@ -431,7 +457,12 @@ xul|*.checkbox-check[checked] { list-style-image: url("chrome://global/skin/in-content/check.svg#check"); } -xul|checkbox[disabled="true"] > xul|*.checkbox-check { +html|input[type="checkbox"]:checked + html|label:before { + background-image: url("chrome://global/skin/in-content/check.svg#check"), linear-gradient(#fff, rgba(255,255,255,0.8)) !important; +} + +xul|checkbox[disabled="true"] > xul|*.checkbox-check, +html|input[type="checkbox"]:disabled + html|label { opacity: 0.5; } @@ -444,6 +475,10 @@ xul|richlistitem > xul|*.checkbox-check { margin: 3px 6px; } +xul|radio { + -moz-margin-start: 0; +} + xul|*.radio-check { -moz-appearance: none; width: 23px; @@ -516,6 +551,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur padding-bottom: 2px; -moz-padding-start: 9px; margin: 0; + -moz-user-select: none; } *|*.category-icon { @@ -537,6 +573,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur font-weight: normal; line-height: 40px; margin: 0; + -moz-user-select: none; } /* File fields */ @@ -622,6 +659,11 @@ xul|tree { border: 1px solid #c1c1c1; } +xul|tree:-moz-focusring, +xul|richlistbox:-moz-focusring { + border: 1px dotted #0095dd; +} + xul|listheader, xul|treecols { -moz-appearance: none; @@ -639,7 +681,7 @@ xul|treecolpicker { padding: 5px 10px; } -xul|treecol:not([hideheader="true"]):hover, +xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover, xul|treecolpicker:hover { background-color: #dadada; color: #333; @@ -653,21 +695,15 @@ xul|treecolpicker { } xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { - list-style-image: url("chrome://global/skin/in-content/sorter.png"); - width: 12px; - height: 8px; + list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown"); + width: 18px; + height: 18px; } -xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="descending"] { +xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] { transform: scaleY(-1); } -@media (min-resolution: 2dppx) { - xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { - list-style-image: url("chrome://global/skin/in-content/sorter@2x.png"); - } -} - /* This is the only way to increase the height of a tree row unfortunately */ xul|treechildren::-moz-tree-row { min-height: 2em; @@ -681,11 +717,13 @@ xul|treechildren::-moz-tree-cell-text { xul|treechildren::-moz-tree-cell-text(selected) { color: #fff; } + xul|caption { background-color: transparent; } xul|button, +html|button, xul|colorpicker[type="button"], xul|menulist { margin: 2px 4px; @@ -713,7 +751,6 @@ xul|checkbox { xul|radio { -moz-binding: url("chrome://global/content/bindings/radio.xml#radio"); - -moz-margin-start: 0; -moz-padding-start: 0; } @@ -739,9 +776,38 @@ xul|*.inline-link:-moz-focusring { border: 1px dotted -moz-DialogText; } +/* Don't draw a transparent border for the focusring because when page + colors are disabled, the border is drawn in -moz-DialogText */ +xul|*.text-link:not(:-moz-focusring), +xul|button:not(:-moz-focusring) > xul|*.button-box, +xul|menulist:not(:-moz-focusring) > xul|*.menulist-label-box, xul|radio:not([focused="true"]) > xul|*.radio-label-box, xul|checkbox:not(:-moz-focusring) > xul|*.checkbox-label-box { border-width: 0; margin: 1px; +} + +xul|*.text-link:not(:-moz-focusring) { + margin-top: 2px; + margin-right: 1px !important; + margin-left: 1px !important; + margin-bottom: 3px; +} + +xul|menulist:not(:-moz-focusring) > xul|*.menulist-label-box { + margin: 2px; +} + +xul|radio:not([focused="true"]) > xul|*.radio-label-box, +xul|checkbox:not(:-moz-focusring) > xul|*.checkbox-label-box { -moz-margin-start: 0; } + +/* Use a 2px border so that selected row highlight is still visible behind + an existing high-contrast border that uses the background color */ +@media not all and (-moz-windows-default-theme) { + xul|treechildren::-moz-tree-row(selected), + xul|listbox xul|listitem[selected="true"] { + border: 2px dotted Highlight; + } +} diff --git a/whitefox/ostarget/general/panelUIOverlay.css b/whitefox/ostarget/general/panelUIOverlay.css index aa93c24..69a64b1 100644 --- a/whitefox/ostarget/general/panelUIOverlay.css +++ b/whitefox/ostarget/general/panelUIOverlay.css @@ -102,6 +102,12 @@ background-position: 100% 0, calc(100% - 1px) 0, calc(100% - 2px) 0; }*/ +#PanelUI-menu-button[update-status="succeeded"] .toolbarbutton-badge::after { + content: url(chrome://browser/skin/update-badge.svg); + background-color: #74BF43; + height: 10px; +} + .panel-subviews { padding: 4px; background-clip: padding-box; @@ -235,6 +241,11 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan max-width: 30em; } +/* Bug 1164419 - increase Pocket panel size to accomidate wider Russian text. */ +panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-viewstack > .panel-mainview:not([panelid="PanelUI-popup"]) { + max-width: 33em; /* standaloneSubviewWidth + 3 */ +} + panelview:not([mainview]) .toolbarbutton-text, .cui-widget-panel toolbarbutton > .toolbarbutton-text { text-align: start; @@ -245,6 +256,11 @@ panelview:not([mainview]) .toolbarbutton-text, padding: 4px 0; } +.cui-widget-panel[viewId="PanelUI-pocketView"] > .panel-arrowcontainer > .panel-arrowcontent { + padding-top: 0; + padding-bottom: 0; +} + .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent { padding-bottom: 0; } @@ -501,7 +517,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { min-height: 40px; -moz-appearance: none; box-shadow: none; - border: none; + border: none; border-radius: 0; transition: background-color; -moz-box-orient: horizontal; @@ -792,7 +808,7 @@ panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover, toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover, menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive], menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive], -.share-provider-button:not(:-moz-any([disabled],[open],:active)):hover, +.share-provider-button:not(:-moz-any([disabled],[open],:active)):hover:not([checked="true"]), .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover, .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton:not(:-moz-any([disabled],[open],:active)):hover { background-color: hsla(210,4%,10%,.08); @@ -1162,7 +1178,9 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { #customizationui-widget-multiview > .panel-viewcontainer, #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack, #PanelUI-panicView > .panel-subview-body, -#PanelUI-panicView { +#PanelUI-panicView, +#PanelUI-pocketView > .panel-subview-body, +#PanelUI-pocketView { overflow: visible; } @@ -1457,12 +1475,19 @@ toolbarbutton.social-provider-menuitem > .toolbarbutton-icon { menu.subviewbutton > .menu-right { -moz-appearance: none; - list-style-image: url(chrome://browser/skin/places/bookmarks-menu-arrow.png); - -moz-image-region: rect(0, 16px, 16px, 0); + list-style-image: url(chrome://browser/skin/customizableui/menu-arrow.svg#arrow); + /* Reset the rect we inherit from the button: */ + -moz-image-region: auto; } menu[disabled="true"].subviewbutton > .menu-right { - -moz-image-region: rect(0, 32px, 16px, 16px); + list-style-image: url(chrome://browser/skin/customizableui/menu-arrow.svg#arrow-disabled); +} + +@media not all and (-moz-windows-default-theme) { + menu[_moz-menuactive].subviewbutton > .menu-right { + list-style-image: url(chrome://browser/skin/customizableui/menu-arrow.svg#arrow-hover); + } } menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) { @@ -1485,3 +1510,100 @@ menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) { } } } + +@media not all and (-moz-windows-default-theme) { + #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, + #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button, + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton { + border: 1px solid transparent; + } + + panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover, + .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover, + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton:not(:-moz-any([disabled],[open],:active)):hover { + border-color: ThreeDLightShadow !important; + } + + toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover, + menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive], + menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive] { + border-color: Highlight; + } + + panelview:not(#PanelUI-mainView) .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover, + toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover, + menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive], + menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive], + .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover { + background-color: Highlight; + color: highlighttext; + } + + panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]), + toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active), + menu.subviewbutton:not([disabled])[_moz-menuactive]:active, + menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active, + .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active), + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) { + background-color: Highlight; + border-color: ThreeDLightShadow; + color: highlighttext; + box-shadow: none; + } + + panelview .toolbarbutton-1[disabled], + toolbarbutton.subviewbutton[disabled], + menu.subviewbutton[disabled], + menuitem.subviewbutton[disabled], + .widget-overflow-list .toolbarbutton-1[disabled], + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] { + text-shadow: none; + } + + #PanelUI-fxa-status, + #PanelUI-help, + #PanelUI-customize { + border: 1px solid transparent; + } + + #PanelUI-fxa-status:not([disabled]):hover, + #PanelUI-help:not([disabled]):hover, + #PanelUI-customize:hover, + #PanelUI-fxa-status:not([disabled]):hover:active, + #PanelUI-help:not([disabled]):hover:active, + #PanelUI-customize:hover:active { + border-color: ThreeDLightShadow; + box-shadow: none; + } + + #BMB_bookmarksPopup .menu-text, + #BMB_bookmarksPopup menupopup { + color: -moz-FieldText; + } + + #BMB_bookmarksPopup .subviewbutton[disabled=true] > .menu-text { + color: GrayText; + } + + #BMB_bookmarksPopup menupopup[placespopup=true] > hbox { + box-shadow: none; + background: -moz-field; + border: 1px solid ThreeDShadow; + } + + .subviewbutton.panel-subview-footer, + #BMB_bookmarksPopup .subviewbutton.panel-subview-footer { + color: ButtonText; + } + + .subviewbutton:not([disabled])[_moz-menuactive], + menuitem.panel-subview-footer:not(:-moz-any([disabled],:active))[_moz-menuactive], + .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover, + .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active), + .subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive] > .menu-accel-container, + .PanelUI-subView .subviewbutton[shortcut]:not(:-moz-any([disabled],[open],:active)):hover::after, + #BMB_bookmarksPopup .panel-subview-footer:not([disabled])[_moz-menuactive] > .menu-text { + background-color: Highlight; + color: highlighttext !important; + } +}