From c1b1407c9a58e21060e4d09593b02990f6456c25 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 21 Aug 2015 17:50:24 +0200 Subject: update to 41.0b2 --- arc-firefox-theme/chrome/browser/Secure.png | Bin 865 -> 0 bytes arc-firefox-theme/chrome/browser/aboutNetError.css | 19 +- .../chrome/browser/aboutNetError_alert.svg | 29 +- .../chrome/browser/aboutNetError_info.svg | 7 +- .../chrome/browser/addons/addon-install-anchor.svg | 27 ++ .../browser/addons/addon-install-blocked.svg | 38 ++ .../browser/addons/addon-install-confirm.svg | 19 + .../browser/addons/addon-install-downloading.svg | 38 ++ .../chrome/browser/addons/addon-install-error.svg | 38 ++ .../browser/addons/addon-install-installed.svg | 38 ++ .../browser/addons/addon-install-restart.svg | 46 ++ .../browser/addons/addon-install-warning.svg | 38 ++ arc-firefox-theme/chrome/browser/browser.css | 216 ++++----- .../chrome/browser/content-contextmenu.svg | 109 ++--- .../chrome/browser/controlcenter/arrow-subview.svg | 7 + .../browser/controlcenter/conn-not-secure.svg | 8 + .../chrome/browser/controlcenter/conn-secure.svg | 26 ++ .../chrome/browser/controlcenter/panel.css | 264 +++++++++++ .../chrome/browser/controlcenter/permissions.svg | 11 + .../browser/customizableui/panelUIOverlay.css | 162 +++++-- arc-firefox-theme/chrome/browser/devedition.css | 8 +- .../chrome/browser/devedition/search.svg | 58 +-- .../devedition/urlbar-history-dropmarker.svg | 19 +- arc-firefox-theme/chrome/browser/devtools/add.svg | 12 +- .../browser/devtools/animation-fast-track.svg | 9 + .../chrome/browser/devtools/animationinspector.css | 190 +++++++- .../chrome/browser/devtools/app-manager/add.svg | 9 +- .../chrome/browser/devtools/app-manager/error.svg | 10 +- .../browser/devtools/app-manager/index-icons.svg | 94 +--- .../chrome/browser/devtools/app-manager/plus.svg | 9 +- .../chrome/browser/devtools/app-manager/remove.svg | 7 +- .../chrome/browser/devtools/app-manager/rocket.svg | 28 +- .../browser/devtools/app-manager/warning.svg | 10 +- .../chrome/browser/devtools/common.css | 10 + .../chrome/browser/devtools/computedview.css | 8 +- .../chrome/browser/devtools/dark-theme.css | 24 +- .../browser/devtools/dock-bottom-maximize@2x.png | Bin 0 -> 1096 bytes .../browser/devtools/dock-bottom-minimize@2x.png | Bin 0 -> 1125 bytes .../chrome/browser/devtools/dropmarker.svg | 9 +- .../chrome/browser/devtools/filetype-dir-close.svg | 5 +- .../chrome/browser/devtools/filetype-dir-open.svg | 5 +- .../chrome/browser/devtools/filetype-globe.svg | 7 +- .../chrome/browser/devtools/filetype-store.svg | 13 +- .../chrome/browser/devtools/filter-swatch.svg | 19 +- .../chrome/browser/devtools/filters.svg | 4 + .../browser/devtools/floating-scrollbars.css | 4 +- .../chrome/browser/devtools/font-inspector.css | 3 + .../chrome/browser/devtools/itemArrow-dark-ltr.svg | 9 +- .../chrome/browser/devtools/itemArrow-dark-rtl.svg | 11 +- .../chrome/browser/devtools/itemArrow-ltr.svg | 9 +- .../chrome/browser/devtools/itemArrow-rtl.svg | 9 +- .../chrome/browser/devtools/layoutview.css | 317 +++++++++++++- .../chrome/browser/devtools/light-theme.css | 24 +- .../chrome/browser/devtools/netmonitor.css | 175 +++----- .../chrome/browser/devtools/performance-icons.svg | 83 ++-- .../chrome/browser/devtools/performance.css | 487 +++++++++++---------- .../chrome/browser/devtools/power.svg | 2 +- .../devtools/profiler-stopwatch-checked.svg | 29 +- .../chrome/browser/devtools/profiler-stopwatch.svg | 29 +- .../chrome/browser/devtools/profiler.css | 400 ----------------- .../chrome/browser/devtools/pseudo-class.svg | 29 ++ .../chrome/browser/devtools/ruleview.css | 52 ++- .../chrome/browser/devtools/search-clear-dark.svg | 14 +- .../browser/devtools/search-clear-failed.svg | 14 +- .../chrome/browser/devtools/search-clear-light.svg | 14 +- .../chrome/browser/devtools/timeline-filter.svg | 53 +-- .../browser/devtools/tool-debugger-paused.svg | 7 +- .../chrome/browser/devtools/tool-debugger.svg | 15 +- .../chrome/browser/devtools/tool-inspector.svg | 19 +- .../chrome/browser/devtools/tool-network.svg | 73 +-- .../chrome/browser/devtools/tool-options.svg | 7 +- .../browser/devtools/tool-profiler-active.svg | 29 +- .../chrome/browser/devtools/tool-profiler.svg | 29 +- .../chrome/browser/devtools/tool-scratchpad.svg | 13 +- .../chrome/browser/devtools/tool-shadereditor.svg | 26 ++ .../chrome/browser/devtools/tool-storage.svg | 15 +- .../chrome/browser/devtools/tool-styleeditor.svg | 13 +- .../chrome/browser/devtools/tool-webaudio.svg | 7 +- .../chrome/browser/devtools/tool-webconsole.svg | 7 +- .../chrome/browser/devtools/webconsole.css | 43 +- .../chrome/browser/devtools/webconsole.png | Bin 1943 -> 0 bytes .../chrome/browser/devtools/webconsole.svg | 101 +++++ .../chrome/browser/devtools/webconsole@2x.png | Bin 2633 -> 0 bytes .../chrome/browser/devtools/widgets.css | 4 - arc-firefox-theme/chrome/browser/drm-icon.svg | 25 +- .../chrome/browser/fxa/default-profile-image.svg | 9 + .../chrome/browser/heartbeat-icon.svg | 38 +- .../chrome/browser/heartbeat-star-lit.svg | 476 +++----------------- .../chrome/browser/heartbeat-star-off.svg | 476 +++----------------- arc-firefox-theme/chrome/browser/identity.png | Bin 9690 -> 0 bytes .../chrome/browser/newtab/controls.svg | 93 ++-- arc-firefox-theme/chrome/browser/newtab/newTab.css | 2 - .../browser/preferences/aboutPermissions.css | 34 +- .../in-content/default-profile-image.svg | 12 - .../browser/preferences/in-content/icons.svg | 96 +--- .../browser/preferences/in-content/preferences.css | 22 +- arc-firefox-theme/chrome/browser/readerMode.svg | 59 ++- .../chrome/browser/readinglist/icons.svg | 37 +- .../browser/readinglist/readinglist-icon.svg | 5 +- .../chrome/browser/sass/_browser-sass.scss | 273 ++++++------ .../chrome/browser/sass/browser-dark.css | 216 ++++----- .../chrome/browser/sass/browser-darker.css | 216 ++++----- .../chrome/browser/sass/browser-light.css | 216 ++++----- .../chrome/browser/search-history-icon.svg | 44 +- arc-firefox-theme/chrome/browser/searchbar.css | 15 +- .../chrome/browser/session-restore.svg | 23 +- .../chrome/browser/social/chat-icons.svg | 70 ++- arc-firefox-theme/chrome/browser/syncProgress.css | 46 -- arc-firefox-theme/chrome/browser/tab-crashed.svg | 27 +- .../chrome/browser/tabbrowser/crashed.svg | 17 +- .../chrome/browser/tabbrowser/loading.png | Bin 12184 -> 13906 bytes .../chrome/browser/tabbrowser/tab-selected-end.svg | 18 +- .../browser/tabbrowser/tab-selected-start.svg | 18 +- arc-firefox-theme/chrome/browser/update-badge.svg | 5 +- arc-firefox-theme/chrome/browser/welcome-back.svg | 28 +- arc-firefox-theme/chrome/global/aboutSupport.css | 36 +- .../global/arrow/panelarrow-horizontal-themed.svg | 11 +- .../chrome/global/arrow/panelarrow-horizontal.svg | 11 +- .../global/arrow/panelarrow-vertical-themed.svg | 11 +- .../chrome/global/arrow/panelarrow-vertical.svg | 11 +- .../chrome/global/icons/autocomplete-search.svg | 45 +- arc-firefox-theme/chrome/global/icons/close.svg | 42 +- .../chrome/global/icons/panelarrow-horizontal.svg | 11 +- .../chrome/global/icons/panelarrow-vertical.svg | 11 +- arc-firefox-theme/chrome/global/icons/warning.svg | 23 +- .../chrome/global/in-content/check-partial.svg | 15 +- .../chrome/global/in-content/check.svg | 15 +- .../chrome/global/in-content/common.css | 197 ++++++--- .../chrome/global/in-content/dropdown.svg | 10 +- .../chrome/global/in-content/help-glyph.svg | 11 +- .../chrome/global/in-content/info-pages.css | 3 +- .../chrome/global/in-content/radio.svg | 8 +- arc-firefox-theme/chrome/global/inContentUI.css | 41 -- .../global/inContentUI/background-texture.png | Bin 1751 -> 0 bytes .../chrome/global/media/TopLevelVideoDocument.css | 1 + .../chrome/global/media/videoClickToPlayButton.svg | 83 +--- arc-firefox-theme/chrome/global/menu.css | 9 + .../global/menu/shared-menu-check-active.svg | 9 +- .../chrome/global/menu/shared-menu-check-black.svg | 9 +- .../chrome/global/menu/shared-menu-check-hover.svg | 9 +- arc-firefox-theme/chrome/global/notification.css | 5 + arc-firefox-theme/chrome/global/popup.css | 16 +- .../chrome/global/reader/RM-Add-24x24.svg | 9 +- .../chrome/global/reader/RM-Close-24x24.svg | 16 +- .../chrome/global/reader/RM-Delete-24x24.svg | 9 +- .../chrome/global/reader/RM-Minus-24x24.svg | 42 +- .../chrome/global/reader/RM-Plus-24x24.svg | 42 +- .../chrome/global/reader/RM-Reading-List-24x24.svg | 54 +-- .../global/reader/RM-Type-Controls-24x24.svg | 27 +- .../global/reader/RM-Type-Controls-Arrow.svg | 46 +- arc-firefox-theme/chrome/global/reader/pocket.svg | 20 +- .../mozapps/extensions/category-extensions.png | Bin 1862 -> 0 bytes .../chrome/mozapps/extensions/category-themes.png | Bin 1734 -> 0 bytes .../chrome/mozapps/extensions/extensions.css | 10 +- .../chrome/mozapps/extensions/utilities.svg | 13 +- 155 files changed, 3532 insertions(+), 3907 deletions(-) delete mode 100644 arc-firefox-theme/chrome/browser/Secure.png create mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-anchor.svg create mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-blocked.svg create mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-confirm.svg create mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-downloading.svg create mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-error.svg create mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-installed.svg create mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-restart.svg create mode 100644 arc-firefox-theme/chrome/browser/addons/addon-install-warning.svg create mode 100644 arc-firefox-theme/chrome/browser/controlcenter/arrow-subview.svg create mode 100644 arc-firefox-theme/chrome/browser/controlcenter/conn-not-secure.svg create mode 100644 arc-firefox-theme/chrome/browser/controlcenter/conn-secure.svg create mode 100644 arc-firefox-theme/chrome/browser/controlcenter/panel.css create mode 100644 arc-firefox-theme/chrome/browser/controlcenter/permissions.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/profiler.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png create mode 100644 arc-firefox-theme/chrome/browser/fxa/default-profile-image.svg delete mode 100644 arc-firefox-theme/chrome/browser/identity.png delete mode 100644 arc-firefox-theme/chrome/browser/preferences/in-content/default-profile-image.svg delete mode 100644 arc-firefox-theme/chrome/browser/syncProgress.css delete mode 100644 arc-firefox-theme/chrome/global/inContentUI.css delete mode 100644 arc-firefox-theme/chrome/global/inContentUI/background-texture.png delete mode 100644 arc-firefox-theme/chrome/mozapps/extensions/category-extensions.png delete mode 100644 arc-firefox-theme/chrome/mozapps/extensions/category-themes.png diff --git a/arc-firefox-theme/chrome/browser/Secure.png b/arc-firefox-theme/chrome/browser/Secure.png deleted file mode 100644 index 5ee25e9..0000000 Binary files a/arc-firefox-theme/chrome/browser/Secure.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/aboutNetError.css b/arc-firefox-theme/chrome/browser/aboutNetError.css index 460efd5..ff80788 100644 --- a/arc-firefox-theme/chrome/browser/aboutNetError.css +++ b/arc-firefox-theme/chrome/browser/aboutNetError.css @@ -6,7 +6,7 @@ body { display: flex; - box-sizing: padding-box; + box-sizing: border-box; min-height: 100vh; padding: 0 48px; align-items: center; @@ -33,18 +33,23 @@ ul { max-width: 512px; } -#errorTitleText { +#errorTitle { background: url("aboutNetError_info.svg") left 0 no-repeat; - background-size: 1.2em; - -moz-margin-start: -2em; - -moz-padding-start: 2em; + background-size: 3em; + -moz-margin-start: -5em; + -moz-padding-start: 5em; +} + +#errorTitleText { + border-bottom: 1px solid #C1C1C1; + padding-bottom: 0.4em; } #errorTitleText:-moz-dir(rtl) { background-position: right 0; } -#errorTitleText[sslv3=true] { +#errorTitle[sslv3=true] { background-image: url("aboutNetError_alert.svg"); } @@ -58,7 +63,7 @@ ul { } @media (max-width: 675px) { - #errorTitleText { + #errorTitle { padding-top: 0; background-image: none; -moz-padding-start: 0; diff --git a/arc-firefox-theme/chrome/browser/aboutNetError_alert.svg b/arc-firefox-theme/chrome/browser/aboutNetError_alert.svg index 7b95d68..66215d4 100644 --- a/arc-firefox-theme/chrome/browser/aboutNetError_alert.svg +++ b/arc-firefox-theme/chrome/browser/aboutNetError_alert.svg @@ -1,15 +1,18 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/aboutNetError_info.svg b/arc-firefox-theme/chrome/browser/aboutNetError_info.svg index 20010c1..2fc0607 100644 --- a/arc-firefox-theme/chrome/browser/aboutNetError_info.svg +++ b/arc-firefox-theme/chrome/browser/aboutNetError_info.svg @@ -1,5 +1,8 @@ - - + + + diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-anchor.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-anchor.svg new file mode 100644 index 0000000..563ca35 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/addons/addon-install-anchor.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-blocked.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-blocked.svg new file mode 100644 index 0000000..caaaa46 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/addons/addon-install-blocked.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-confirm.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-confirm.svg new file mode 100644 index 0000000..a164552 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/addons/addon-install-confirm.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-downloading.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-downloading.svg new file mode 100644 index 0000000..9dcc806 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/addons/addon-install-downloading.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-error.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-error.svg new file mode 100644 index 0000000..e25950f --- /dev/null +++ b/arc-firefox-theme/chrome/browser/addons/addon-install-error.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-installed.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-installed.svg new file mode 100644 index 0000000..3b352c2 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/addons/addon-install-installed.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-restart.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-restart.svg new file mode 100644 index 0000000..e3269c3 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/addons/addon-install-restart.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/addons/addon-install-warning.svg b/arc-firefox-theme/chrome/browser/addons/addon-install-warning.svg new file mode 100644 index 0000000..bac1903 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/addons/addon-install-warning.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/browser.css b/arc-firefox-theme/chrome/browser/browser.css index e78c95e..9f57fa2 100644 --- a/arc-firefox-theme/chrome/browser/browser.css +++ b/arc-firefox-theme/chrome/browser/browser.css @@ -1313,7 +1313,7 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #urlbar-display-box { margin-top: -1px; margin-bottom: -1px; - -moz-border-end: 1px solid red; + -moz-border-end: 1px solid #AAA; -moz-margin-end: 3px; } .urlbar-display { @@ -1413,18 +1413,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.3; } -#identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { - list-style-image: url("chrome://branding/content/icon64.png"); } - -#identity-popup-brandName { - font-weight: bold; - font-size: 1.25em; - margin-top: .5em; - margin-bottom: .5em; } - -#identity-popup-content-box { - max-width: 50ch; } - @media not all and (min-resolution: 1.1dppx) { #page-proxy-favicon { -moz-image-region: rect(0, 16px, 16px, 0); } @@ -1463,98 +1451,20 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #identity-box:hover:active > #page-proxy-favicon, #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 96px, 32px, 64px); } + -moz-image-region: rect(0, 96px, 32px, 64px); } } +#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon { + -moz-image-region: inherit; + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; + opacity: 1; } - #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { - list-style-image: url("chrome://branding/content/icon128.png"); - -moz-image-region: rect(0, 128px, 128px, 0); } } #page-proxy-favicon { margin-top: 1px; margin-bottom: 1px; -moz-margin-start: 3px; -moz-margin-end: 1px; } -/* Identity popup icons */ -#identity-popup-icon { - height: 64px; - width: 64px; - padding: 0; - list-style-image: url("chrome://browser/skin/identity.png"); - -moz-image-region: rect(0px, 64px, 64px, 0px); } - -#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(64px, 64px, 128px, 0px); } - -#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(128px, 64px, 192px, 0px); } - -/* Identity popup body text */ -.identity-popup-description { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 2px 0 4px; } - -.identity-popup-label { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 0; } - -#identity-popup-content-host, -#identity-popup-content-owner { - font-weight: bold; - max-width: 300px; } - -#identity-popup-content-host, -#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { - font-size: 140%; } - -#identity-popup-content-owner { - margin-bottom: 0 !important; } - -#identity-popup-content-verifier { - margin: 4px 0 2px; } - -#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption, -#identity-popup-content-box.verifiedDomain > #identity-popup-encryption { - margin-top: 10px; - -moz-margin-start: -18px; } - -#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon, -#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { - list-style-image: url("chrome://browser/skin/Secure.png"); } - -#identity-popup-help-icon { - -moz-appearance: none; - margin-left: 0px; - border: none; - background: none; - min-width: 0; - list-style-image: url("moz-icon://stock/gtk-dialog-question?size=16"); - cursor: pointer; } - -#identity-popup-help-icon > .button-box > .button-text { - display: none; } - -#identity-popup-help-icon > .button-box > .button-icon { - height: 16px; - width: 16px; } - -#identity-popup-help-icon:-moz-focusring { - outline: 1px dotted; - outline-offset: 1px; } - -#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; } - -#identity-popup-container { - min-width: 280px; - padding: 10px; } - -#identity-popup-button-container { - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 60%, transparent); - padding: 10px; - margin-top: 5px; } - .popup-notification-icon { width: 64px; height: 64px; @@ -1567,14 +1477,26 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://browser/skin/Push-64.png); } .popup-notification-icon[popupid="xpinstall-disabled"], -.popup-notification-icon[popupid="addon-progress"], -.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-blocked"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } + +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } + +.popup-notification-icon[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } + +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } + +#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } + .popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); - width: 32px; - height: 32px; } + list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } + +.popup-notification-icon[popupid="addon-install-restart"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } .popup-notification-icon[popupid="click-to-play-plugins"] { list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } @@ -1649,7 +1571,13 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://browser/skin/Push-16.png); } #addons-notification-icon { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); } + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); } + +#addons-notification-icon:hover { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); } + +#addons-notification-icon:hover:active { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); } .indexedDB-notification-icon, #indexedDB-notification-icon { @@ -1658,6 +1586,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #password-notification-icon { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } +#login-fill-notification-icon { + /* Temporary icon until the capture and fill doorhangers are unified. */ + list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); + transform: scaleX(-1); } + .webapps-notification-icon, #webapps-notification-icon { list-style-image: url(chrome://global/skin/icons/webapps-16.png); } @@ -1834,9 +1767,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #indexedDB-notification-icon { list-style-image: url(moz-icon://stock/gtk-dialog-question?size=16); } -#pointerLock-cancel { - margin: 0px; } - /* Translation infobar */ notification[value="translation"] .messageImage { list-style-image: url(chrome://browser/skin/translation-16.png); @@ -2042,11 +1972,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 14px, 14px, 0); } #urlbar-reload-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, rgba(102, 204, 255, 0.2), transparent); -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { - background-image: radial-gradient(circle closest-side, rgba(51, 187, 255, 0.1), transparent); -moz-image-region: rect(28px, 14px, 42px, 0); } #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2056,11 +1984,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 42px, 14px, 28px); } #urlbar-go-button:hover { - background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.2), transparent); -moz-image-region: rect(14px, 42px, 28px, 28px); } #urlbar-go-button:hover:active { - background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.1), transparent); -moz-image-region: rect(28px, 42px, 42px, 28px); } #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2070,11 +1996,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 28px, 14px, 14px); } #urlbar-stop-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.3), transparent); -moz-image-region: rect(14px, 28px, 28px, 14px); } #urlbar-stop-button:hover:active { - background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.1), transparent); -moz-image-region: rect(28px, 28px, 42px, 14px); } @media (min-resolution: 1.1dppx) { @@ -3362,6 +3286,34 @@ notification.pluginVulnerable .messageImage { .popup-notification-footer[popupid="bad-content"] { padding-top: 1em; } +#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { + /* Since we display a sliding subview that extends to the border, we cannot + * keep the default padding of arrow panels. We use the same padding in the + * individual content views instead. Since we removed the padding, we also + * have to ensure the contents are clipped to the border box. */ + padding: 0; + overflow: hidden; } + +#login-fill-mainview, +#login-fill-details { + padding: var(--panel-arrowcontent-padding); } + +#login-fill-doorhanger[inDetailView] > #login-fill-mainview { + transform: translateX(-14px); } + +#login-fill-mainview, +#login-fill-details { + transition: transform 150ms; } + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { + transform: translateX(105%); } + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { + transform: translateX(-105%); } + +#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { + background-color: rgba(24, 26, 27, 0.1); } + #login-fill-testing { color: #b33; font-weight: bold; } @@ -3370,14 +3322,34 @@ notification.pluginVulnerable .messageImage { border: 1px solid black; max-height: 20em; } +.login-fill-item[disabled] { + color: #888; + background-color: #fff; } + +.login-fill-item[disabled][selected] { + background-color: #eef; } + .login-hostname { margin: 4px; font-weight: bold; } +.login-fill-item.different-hostname > .login-hostname { + color: #888; + font-style: italic; } + .login-username { margin: 4px; color: #888; } +#login-fill-details { + padding: 4px; + background: var(--panel-arrowcontent-background); + color: var(--panel-arrowcontent-color); + background-clip: padding-box; + border-left: 1px solid rgba(24, 26, 27, 0.3); + box-shadow: 0 3px 5px rgba(24, 26, 27, 0.1), 0 0 7px rgba(24, 26, 27, 0.1); + -moz-margin-start: 38px; } + /* 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/. */ @@ -3547,10 +3519,6 @@ toolbar[brighttext] #downloads-indicator-counter { -moz-margin-end: 2px; } /* Social toolbar item */ -#social-undoactivation-button { - -moz-margin-start: 0; - /* override default label margin to match description margin */ } - .social-activation-icon { width: auto; height: auto; @@ -3736,7 +3704,6 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; - margin: -285px 0 0; overflow: hidden; } chatbar { @@ -4516,6 +4483,15 @@ notification.heartbeat { #context-bookmarkpage[disabled=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } +#context-bookmarkpage[starred=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } + +#context-bookmarkpage[starred=true][_moz-menuactive=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); } + +#context-bookmarkpage[starred=true][disabled=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); } + #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { diff --git a/arc-firefox-theme/chrome/browser/content-contextmenu.svg b/arc-firefox-theme/chrome/browser/content-contextmenu.svg index f3b4376..b72b247 100644 --- a/arc-firefox-theme/chrome/browser/content-contextmenu.svg +++ b/arc-firefox-theme/chrome/browser/content-contextmenu.svg @@ -2,72 +2,45 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview.svg b/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview.svg new file mode 100644 index 0000000..98c8f61 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/controlcenter/arrow-subview.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/arc-firefox-theme/chrome/browser/controlcenter/conn-not-secure.svg b/arc-firefox-theme/chrome/browser/controlcenter/conn-not-secure.svg new file mode 100644 index 0000000..d4ee83a --- /dev/null +++ b/arc-firefox-theme/chrome/browser/controlcenter/conn-not-secure.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/arc-firefox-theme/chrome/browser/controlcenter/conn-secure.svg b/arc-firefox-theme/chrome/browser/controlcenter/conn-secure.svg new file mode 100644 index 0000000..b82ee42 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/controlcenter/conn-secure.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/controlcenter/panel.css b/arc-firefox-theme/chrome/browser/controlcenter/panel.css new file mode 100644 index 0000000..a149803 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/controlcenter/panel.css @@ -0,0 +1,264 @@ +/* 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/. */ + +#identity-popup-securityView:not(.verifiedIdentity) > #identity-popup-content-owner, +#identity-popup-securityView:not(.verifiedIdentity):not(.verifiedDomain) > #identity-popup-content-verifier, +#identity-popup-securityView:not(.verifiedIdentity):not(.mixedContent) > #identity-popup-content-supplemental, +#identity-popup-security-content:not(.verifiedIdentity):not(.verifiedDomain) > .identity-popup-connection-secure, +#identity-popup-securityView:not(.verifiedIdentity):not(.verifiedDomain) > #identity-popup-securityView-header > .identity-popup-connection-secure, +#identity-popup-securityView:not(.unknownIdentity) > #identity-popup-securityView-header > .identity-popup-connection-not-secure, +#identity-popup-securityView:not(.chromeUI) > #identity-popup-securityView-header > .identity-popup-connection-internal, +#identity-popup-security-content:not(.unknownIdentity) > .identity-popup-connection-not-secure, +#identity-popup-securityView:not(.verifiedIdentity) > #identity-popup-securityView-connection, +#identity-popup-security-content.unknownIdentity:not(.mixedContent) + .identity-popup-expander, +#identity-popup-security-content:not(.chromeUI) > .identity-popup-connection-internal, +#identity-popup-security-content.chromeUI + .identity-popup-expander { + display: none; +} + +/* PANEL */ + +#identity-popup, +.panel-viewstack[viewtype="main"]:not([transitioning]) > .panel-mainview[panelid=identity-popup] > #identity-popup-mainView { + /* Tiny hack to ensure the panel shrinks back to its original + size after closing a subview that is bigger than the main view. */ + max-height: 0; +} + +.panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView menulist, +.panel-mainview[panelid=identity-popup][viewtype=subview] > #identity-popup-mainView button:not([panel-multiview-anchor]) { + -moz-user-focus: ignore; +} + +#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} + +.panel-mainview[panelid=identity-popup] { + min-width: 30em; +} + +#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews { + transform: translateX(100%); + box-shadow: none; +} + +#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) { + transform: translateX(-100%); +} + +#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews { + background: var(--panel-arrowcontent-background); + border-bottom-right-radius: 3.5px; + padding: 0; +} + +#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews:-moz-locale-dir(rtl) { + border-bottom-right-radius: 0; + border-bottom-left-radius: 3.5px; +} + +.identity-popup-section:not(:first-child) { + border-top: 1px solid ThreeDShadow; +} + +#identity-popup-securityView, +#identity-popup-security-content, +#identity-popup-permissions-content { + padding: 0.75em 0 1em; + -moz-padding-start: calc(2em + 24px); + -moz-padding-end: 1em; + background-repeat: no-repeat; + background-position: 1em 1em; + background-size: 24px auto; +} + +#identity-popup-securityView:-moz-locale-dir(rtl), +#identity-popup-security-content:-moz-locale-dir(rtl), +#identity-popup-permissions-content:-moz-locale-dir(rtl) { + background-position: calc(100% - 1em) 1em; +} + +/* EXPAND BUTTON */ + +.identity-popup-expander { + margin: 0; + padding: 4px 0; + min-width: auto; + width: 38px; + border: 0 none; + -moz-appearance: none; + background-image: url("chrome://browser/skin/controlcenter/arrow-subview.svg"), + linear-gradient(rgba(255,255,255,0.3), transparent); + background-size: 16px, auto; + background-position: center; + background-repeat: no-repeat; + background-color: transparent; +} + +.identity-popup-expander:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} + +.identity-popup-expander[panel-multiview-anchor] { + transition: background-color 250ms ease-in; + background-color: #0069d9; + background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png"), + linear-gradient(rgba(255,255,255,0.3), transparent); +} + +@media (min-resolution: 1.1dppx) { + .identity-popup-expander[panel-multiview-anchor] { + background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted@2x.png"), + linear-gradient(rgba(255,255,255,0.3), transparent); + } +} + +.identity-popup-expander > .button-box { + padding: 0; + -moz-appearance: none; + border: solid ThreeDShadow; + border-width: 0 0 0 1px; +} + +.identity-popup-expander:-moz-focusring > .button-box, +.identity-popup-expander[panel-multiview-anchor] > .button-box { + border: 0 none; +} + +.identity-popup-expander:hover { + background-color: hsla(210,4%,10%,.07); +} + +.identity-popup-expander:hover:active { + background-color: hsla(210,4%,10%,.12); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; +} + +/* CONTENT */ + +.identity-popup-text { + white-space: pre-wrap; + font-size: 110%; + margin: 0; +} + +.identity-popup-headline { + margin: 2px 0 4px; + font-size: 150%; +} + +/* SECURITY */ + +#identity-popup-securityView > .identity-popup-text:not(#identity-popup-content-owner) { + margin: 2px 0 4px; +} + +.identity-popup-connection-secure { + color: #418220; +} + +.identity-popup-connection-not-secure { + color: #d74345; +} + +#identity-popup-security-content.chromeUI { + background-image: url(chrome://branding/content/icon48.png); +} + +/* SECURITY SUBVIEW */ + +#identity-popup-securityView { + padding-bottom: 2em; + overflow: hidden; +} + +#identity-popup-securityView, +#identity-popup-security-content { + background-image: url(chrome://browser/skin/controlcenter/conn-not-secure.svg); +} + +#identity-popup-securityView.verifiedDomain, +#identity-popup-securityView.verifiedIdentity, +#identity-popup-security-content.verifiedDomain, +#identity-popup-security-content.verifiedIdentity { + background-image: url(chrome://browser/skin/controlcenter/conn-secure.svg); +} + +#identity-popup-securityView-header { + border-bottom: 1px solid ThreeDShadow; + padding-bottom: 1em; + margin-bottom: 1em; +} + +#identity-popup-content-owner { + font-weight: 700; +} + +#identity-popup-content-verifier { + color: Graytext; +} + +#identity-popup-content-owner, +#identity-popup-securityView > #identity-popup-securityView-connection.identity-popup-text { + margin-top: 1em; +} + +/* PERMISSIONS */ + +#identity-popup-permissions-content { + background-image: url(chrome://browser/skin/controlcenter/permissions.svg); +} + +#identity-popup-permission-list { + margin-top: 5px; +} + +.identity-popup-permission-label { + -moz-margin-start: 0; +} + +/* FOOTER BUTTONS */ + +#identity-popup-button-container { + background-color: hsla(210,4%,10%,.07); +} + +#identity-popup-more-info-button { + border: none; + border-top: 1px solid ThreeDShadow; + background: transparent; + -moz-appearance: none; + margin-top: 5px; + margin: 0; +} + +#identity-popup-more-info-button > .button-box { + -moz-appearance: none; + padding: 1em; +} + +#identity-popup-more-info-button:hover { + background-color: hsla(210,4%,10%,.07); +} + +#identity-popup-more-info-button:hover:active { + color: inherit; + background-color: hsla(210,4%,10%,.12); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; +} + +#identity-popup-more-info-button:-moz-focusring { + border-color: transparent; +} + +.identity-popup-expander:-moz-focusring, +#identity-popup-more-info-button { + padding: 1px; +} + +.identity-popup-expander:-moz-focusring > .button-box, +#identity-popup-more-info-button:-moz-focusring > .button-box { + outline: 1px -moz-dialogtext dotted; +} diff --git a/arc-firefox-theme/chrome/browser/controlcenter/permissions.svg b/arc-firefox-theme/chrome/browser/controlcenter/permissions.svg new file mode 100644 index 0000000..9a0cb2b --- /dev/null +++ b/arc-firefox-theme/chrome/browser/controlcenter/permissions.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css b/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css index f618e06..8937d70 100644 --- a/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css +++ b/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css @@ -12,6 +12,10 @@ +:root { + --panel-ui-exit-subview-gutter-width: 38px; +} + #PanelUI-popup #PanelUI-contents:empty { height: 128px; } @@ -101,7 +105,7 @@ border-left: 1px solid hsla(210,4%,10%,.3); box-shadow: 0 3px 5px hsla(210,4%,10%,.1), 0 0 7px hsla(210,4%,10%,.1); - -moz-margin-start: 38px; + -moz-margin-start: var(--panel-ui-exit-subview-gutter-width); } .panel-viewstack[viewtype="main"] > .panel-subviews { @@ -386,8 +390,10 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe { #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]), -#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label, +#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) { @@ -485,29 +491,50 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { margin: 0; } -#PanelUI-footer-inner { +#main-window[customizing] #PanelUI-footer-fxa > toolbarseparator { + display: none; +} + +#PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator, +#PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon, +#PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar { + display: none; +} + +#PanelUI-fxa-status { + display: flex; + flex: 1 1 0%; + width: 1px; +} + +#PanelUI-footer-inner, +#PanelUI-footer-fxa:not([hidden]) { display: flex; border-top: 1px solid hsla(210,4%,10%,.14); } -#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner { +#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner, +#PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa { position: relative; } -#PanelUI-footer-inner > toolbarseparator { +#PanelUI-footer-inner > toolbarseparator, +#PanelUI-footer-fxa > toolbarseparator { border: 0; border-left: 1px solid hsla(210,4%,10%,.14); margin: 7px 0 7px; -moz-appearance: none; } -#PanelUI-footer-inner:hover > toolbarseparator { +#PanelUI-footer-inner:hover > toolbarseparator, +#PanelUI-footer-fxa:hover > toolbarseparator { margin: 0; } #PanelUI-update-status, #PanelUI-help, -#PanelUI-fxa-status, +#PanelUI-fxa-label, +#PanelUI-fxa-icon, #PanelUI-customize, #PanelUI-quit { margin: 0; @@ -522,15 +549,16 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { -moz-box-orient: horizontal; } -#PanelUI-update-status, -#PanelUI-fxa-status { +#PanelUI-update-status { border-top: 1px solid hsla(210,4%,10%,.14); +} + +#PanelUI-update-status { border-bottom: 1px solid transparent; margin-bottom: -1px; } -#PanelUI-update-status > .toolbarbutton-text, -#PanelUI-fxa-status > .toolbarbutton-text { +#PanelUI-update-status > .toolbarbutton-text { width: 0; /* Fancy cropping solution for flexbox. */ } @@ -540,7 +568,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-update-status > .toolbarbutton-text, -#PanelUI-fxa-status > .toolbarbutton-text, +#PanelUI-fxa-label > .toolbarbutton-text, #PanelUI-customize > .toolbarbutton-text { margin: 0; padding: 0 6px; @@ -548,25 +576,37 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-help > .toolbarbutton-text, -#PanelUI-quit > .toolbarbutton-text { +#PanelUI-quit > .toolbarbutton-text, +#PanelUI-fxa-avatar > .toolbarbutton-text { display: none; } #PanelUI-update-status > .toolbarbutton-icon, -#PanelUI-fxa-status > .toolbarbutton-icon, +#PanelUI-fxa-label > .toolbarbutton-icon, +#PanelUI-fxa-icon > .toolbarbutton-icon, #PanelUI-customize > .toolbarbutton-icon, #PanelUI-help > .toolbarbutton-icon, #PanelUI-quit > .toolbarbutton-icon { -moz-margin-end: 0; } -#PanelUI-fxa-status, +#PanelUI-fxa-icon { + -moz-padding-start: 15px; + -moz-padding-end: 15px; +} + +#PanelUI-fxa-label, #PanelUI-customize { flex: 1; -moz-padding-start: 15px; -moz-border-start-style: none; } +#PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label, +#PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label { + -moz-padding-start: 0px; +} + #PanelUI-update-status { width: calc(22.35em + 30px); -moz-padding-start: 15px; @@ -577,16 +617,17 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { list-style-image: url(chrome://branding/content/icon16.png); } -#PanelUI-fxa-status { +#PanelUI-fxa-label, +#PanelUI-fxa-icon { list-style-image: url(chrome://browser/skin/sync-horizontalbar.png); } -#PanelUI-fxa-status[syncstatus="active"] { +#PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon { list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar.png); } -#PanelUI-fxa-status[fxastatus="migrate-signup"], -#PanelUI-fxa-status[fxastatus="migrate-verify"] { +#PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label, +#PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label { list-style-image: url(chrome://browser/skin/warning16.png); -moz-image-region: rect(0, 32px, 16px, 16px); } @@ -608,13 +649,50 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { list-style-image: url(chrome://browser/skin/menuPanel-exit.png); } -#PanelUI-fxa-status, +#PanelUI-fxa-label, +#PanelUI-fxa-icon, #PanelUI-customize, #PanelUI-help, #PanelUI-quit { -moz-image-region: rect(0, 16px, 16px, 0); } +#PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon, +#PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon { + display: none; +} + +#PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar { + display: none; +} + +#PanelUI-fxa-avatar[disabled], +#PanelUI-fxa-icon[disabled] { + display: none; +} + +#PanelUI-fxa-status[disabled] { + pointer-events: none; +} + +#PanelUI-fxa-avatar { + width: 32px; + height: 32px; + border-radius: 50%; + background-repeat: no-repeat; + background-position: 0 0; + background-size: contain; + align-self: center; + margin: 0px 7px; + padding: 0px; + border: 0px none; + -moz-margin-end: 0; +} + +#PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar { + list-style-image: url(chrome://browser/skin/fxa/default-profile-image.svg); +} + #PanelUI-customize:hover, #PanelUI-help:not([disabled]):hover, #PanelUI-quit:not([disabled]):hover { @@ -637,6 +715,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-fxa-status:not([disabled]):hover, +#PanelUI-fxa-icon:not([disabled]):hover, #PanelUI-help:not([disabled]):hover, #PanelUI-customize:hover, #PanelUI-quit:not([disabled]):hover { @@ -645,6 +724,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-fxa-status:not([disabled]):hover:active, +#PanelUI-fxa-icon:not([disabled]):hover:active, #PanelUI-help:not([disabled]):hover:active, #PanelUI-customize:hover:active, #PanelUI-quit:not([disabled]):hover:active { @@ -654,10 +734,26 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } #PanelUI-fxa-status:not([disabled]):hover, -#PanelUI-fxa-status:not([disabled]):hover:active { +#PanelUI-fxa-status:not([disabled]):hover:active, +#PanelUI-fxa-icon:not([disabled]):hover, +#PanelUI-fxa-icon:not([disabled]):hover:active { outline: none; } +#PanelUI-footer-fxa[fxastatus="error"] { + background-color: rgb(255, 236, 158); + border-top: 1px solid rgb(254, 212, 21); +} + +#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover { + background-color: #F9E79A; +} + +#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active { + background-color: #ECDB92; + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; +} + #PanelUI-update-status { color: black; } @@ -955,7 +1051,7 @@ toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button position: absolute; top: 0; height: 100%; - width: 38px; + width: var(--panel-ui-exit-subview-gutter-width); background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png), linear-gradient(rgba(255,255,255,0.3), transparent); background-repeat: no-repeat; @@ -972,14 +1068,14 @@ toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button toolbarbutton[panel-multiview-anchor="true"] { background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted.png), linear-gradient(rgba(255,255,255,0.3), transparent); - background-position: right calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center; + background-position: right calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center; background-repeat: no-repeat, repeat; } toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) { background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png), linear-gradient(rgba(255,255,255,0.3), transparent); - background-position: left calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center; + background-position: left calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center; } toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker, @@ -1386,16 +1482,17 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { list-style-image: url(chrome://branding/content/icon32.png); } - #PanelUI-fxa-status { + #PanelUI-fxa-label, + #PanelUI-fxa-icon { list-style-image: url(chrome://browser/skin/sync-horizontalbar@2x.png); } - #PanelUI-fxa-status[syncstatus="active"] { + #PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon { list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar@2x.png); } - #PanelUI-fxa-status[fxastatus="migrate-signup"], - #PanelUI-fxa-status[fxastatus="migrate-verify"] { + #PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label, + #PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label { list-style-image: url(chrome://browser/skin/warning16@2x.png); -moz-image-region: rect(0, 64px, 32px, 32px); } @@ -1416,7 +1513,8 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { list-style-image: url(chrome://browser/skin/menuPanel-exit@2x.png); } - #PanelUI-fxa-status, + #PanelUI-fxa-label, + #PanelUI-fxa-icon, #PanelUI-customize, #PanelUI-help, #PanelUI-quit { @@ -1424,7 +1522,8 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { } #PanelUI-update-status > .toolbarbutton-icon, - #PanelUI-fxa-status > .toolbarbutton-icon, + #PanelUI-fxa-label > .toolbarbutton-icon, + #PanelUI-fxa-icon > .toolbarbutton-icon, #PanelUI-customize > .toolbarbutton-icon, #PanelUI-help > .toolbarbutton-icon, #PanelUI-quit > .toolbarbutton-icon { @@ -1566,7 +1665,8 @@ menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) { .PanelUI-subView toolbarseparator, .PanelUI-subView menuseparator, .cui-widget-panelview menuseparator, -#PanelUI-footer-inner > toolbarseparator { +#PanelUI-footer-inner > toolbarseparator, +#PanelUI-footer-fxa > toolbarseparator { -moz-appearance: none !important; } diff --git a/arc-firefox-theme/chrome/browser/devedition.css b/arc-firefox-theme/chrome/browser/devedition.css index c795641..925d90a 100644 --- a/arc-firefox-theme/chrome/browser/devedition.css +++ b/arc-firefox-theme/chrome/browser/devedition.css @@ -57,10 +57,12 @@ --url-and-searchbar-color: #fff; --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg"); --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px); - --urlbar-dropmarker-active-region: rect(0px, 22px, 14px, 11px); + --urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px); + --urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px); --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg"); --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px); - --urlbar-dropmarker-active-2x-region: rect(0px, 22px, 14px, 11px); + --urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px); + --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px); --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon-inverted"); } @@ -334,7 +336,7 @@ searchbar:not([oneoffui]) .search-go-button { background-image: none; } -.tab-close-button[selected]:not(:hover) { +.tab-close-button[visuallyselected]:not(:hover) { background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64); } diff --git a/arc-firefox-theme/chrome/browser/devedition/search.svg b/arc-firefox-theme/chrome/browser/devedition/search.svg index 1d7f558..6bacdc0 100644 --- a/arc-firefox-theme/chrome/browser/devedition/search.svg +++ b/arc-firefox-theme/chrome/browser/devedition/search.svg @@ -2,40 +2,26 @@ - - - - - - - - - + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devedition/urlbar-history-dropmarker.svg b/arc-firefox-theme/chrome/browser/devedition/urlbar-history-dropmarker.svg index 7af3149..115fbf1 100644 --- a/arc-firefox-theme/chrome/browser/devedition/urlbar-history-dropmarker.svg +++ b/arc-firefox-theme/chrome/browser/devedition/urlbar-history-dropmarker.svg @@ -1,19 +1,22 @@ - - + + + - - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/add.svg b/arc-firefox-theme/chrome/browser/devtools/add.svg index af162e3..b8b93de 100644 --- a/arc-firefox-theme/chrome/browser/devtools/add.svg +++ b/arc-firefox-theme/chrome/browser/devtools/add.svg @@ -1,3 +1,9 @@ - - - + + + + + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg b/arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg new file mode 100644 index 0000000..ee84427 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css index 6cc0bdb..40efab7 100644 --- a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css +++ b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css @@ -1,3 +1,17 @@ +/* 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/. */ + +/* Animation-inspector specific theme variables */ + +.theme-dark { + --even-animation-timeline-background-color: rgba(255,255,255,0.03); +} + +.theme-light { + --even-animation-timeline-background-color: rgba(128,128,128,0.03); +} + html { height: 100%; } @@ -32,6 +46,13 @@ body { min-height: 20px; } +/* The main animations container */ + +#players { + height: calc(100% - 20px); + overflow: auto; +} + /* The error message, shown when an invalid/unanimated element is selected */ #error-message { @@ -44,12 +65,6 @@ body { display: none; } -/* The animation players container */ - -#players { - flex: 1; - overflow: auto; -} /* Element picker and toggle-all buttons */ @@ -99,6 +114,156 @@ body { } } +/* Animation timeline component */ + +.animation-timeline { + height: 100%; + overflow: hidden; + /* The timeline gets its background-image from a canvas element created in + /browser/devtools/animationinspector/utils.js drawGraphElementBackground + thanks to document.mozSetImageElement("time-graduations", canvas) + This is done so that the background can be built dynamically from script */ + background-image: -moz-element(#time-graduations); + background-repeat: repeat-y; + /* The animations are drawn 150px from the left edge so that animated nodes + can be displayed in a sidebar */ + background-position: 150px 0; + display: flex; + flex-direction: column; +} + +.animation-timeline .time-header { + margin-left: 150px; + height: 20px; + overflow: hidden; + position: relative; + border-bottom: 1px solid var(--theme-splitter-color); +} + +.animation-timeline .time-header .time-tick { + position: absolute; + top: 3px; +} + +.animation-timeline .animations { + width: 100%; + overflow-y: auto; + overflow-x: hidden; + margin: 0; + padding: 0; + list-style-type: none; +} + +/* Animation block widgets */ + +.animation-timeline .animation { + margin: 4px 0; + height: 20px; + position: relative; +} + +.animation-timeline .animation:nth-child(2n) { + background-color: var(--even-animation-timeline-background-color); +} + +.animation-timeline .animation .target { + width: 150px; + overflow: hidden; + height: 100%; +} + +.animation-timeline .animation-target { + background-color: transparent; +} + +.animation-timeline .animation .time-block { + position: absolute; + top: 0; + left: 150px; + right: 0; + height: 100%; +} + +/* Animation iterations */ + +.animation-timeline .animation .iterations { + position: relative; + height: 100%; + border: 1px solid var(--theme-highlight-lightorange); + box-sizing: border-box; + background: var(--theme-contrast-background); + /* Iterations are displayed with a repeating linear-gradient which size is + dynamically changed from JS */ + background-image: + linear-gradient(to right, + var(--theme-highlight-lightorange) 0, + var(--theme-highlight-lightorange) 1px, + transparent 1px, + transparent 2px); + background-repeat: repeat-x; + background-position: -1px 0; +} + +.animation-timeline .animation .iterations.infinite { + border-right-width: 0; +} + +.animation-timeline .animation .iterations.infinite::before, +.animation-timeline .animation .iterations.infinite::after { + content: ""; + position: absolute; + top: 0; + right: 0; + width: 0; + height: 0; + border-right: 4px solid var(--theme-body-background); + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; +} + +.animation-timeline .animation .iterations.infinite::after { + bottom: 0; + top: unset; +} + +.animation-timeline .animation .animation-title { + height: 1.5em; + width: 100%; + box-sizing: border-box; + overflow: hidden; +} + +.animation-timeline .animation .delay { + position: absolute; + top: 0; + height: 100%; + background-image: linear-gradient(to bottom, + transparent, + transparent 9px, + var(--theme-highlight-lightorange) 9px, + var(--theme-highlight-lightorange) 11px, + transparent 11px, + transparent); +} + +.animation-timeline .animation .delay::before { + position: absolute; + content: ""; + left: 0; + width: 2px; + height: 8px; + top: 50%; + margin-top: -4px; + background: var(--theme-highlight-lightorange); +} + +.animation-timeline .animation .name { + position: absolute; + z-index: 1; + padding: 2px; + white-space: nowrap; +} + /* Animation target node gutter, contains a preview of the dom node */ .animation-target { @@ -147,6 +312,17 @@ body { margin: 0 .5em; } +.animation-title .meta-data .compositor-icon { + display: none; + background-image: url("animation-fast-track.svg"); + background-repeat: no-repeat; + padding-left: 12px; + /* Make sure the icon is positioned above the timeline range input so that + its tooltip appears on hover */ + z-index: 1; + position: relative; +} + /* Timeline wiget */ .timeline { @@ -253,4 +429,4 @@ body { width: 50px; border-left: 1px solid var(--theme-splitter-color); background: var(--theme-toolbar-background); -} +} \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg index f1b5594..4a8e12a 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg @@ -1,12 +1,7 @@ - - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg index 21261cd..7876e46 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg @@ -1,13 +1,7 @@ - - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg index b0a414d..3fea1e4 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg @@ -1,80 +1,18 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg index 10e8d2b..d21764e 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg @@ -1,12 +1,7 @@ - - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg index 3d36871..9b98e8f 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg @@ -1,10 +1,7 @@ - - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg index 95c42a4..a0cca5c 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg @@ -1,30 +1,12 @@ - - - + - - - - - - - - - - + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg index 89e7c6f..d26e2e6 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg @@ -1,13 +1,7 @@ - - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/common.css b/arc-firefox-theme/chrome/browser/devtools/common.css index 9cbb98d..0a655c7 100644 --- a/arc-firefox-theme/chrome/browser/devtools/common.css +++ b/arc-firefox-theme/chrome/browser/devtools/common.css @@ -9,6 +9,11 @@ font-size: 80%; } +/* Bottom-docked toolbox minimize transition */ +.devtools-toolbox-bottom-iframe { + transition: margin-bottom .1s; +} + /* Splitters */ .devtools-horizontal-splitter { -moz-appearance: none; @@ -35,6 +40,11 @@ cursor: e-resize; } +.devtools-horizontal-splitter.disabled, +.devtools-side-splitter.disabled { + pointer-events: none; +} + .devtools-toolbox-side-iframe { min-width: 465px; } diff --git a/arc-firefox-theme/chrome/browser/devtools/computedview.css b/arc-firefox-theme/chrome/browser/devtools/computedview.css index b920d7b..f8b0d62 100644 --- a/arc-firefox-theme/chrome/browser/devtools/computedview.css +++ b/arc-firefox-theme/chrome/browser/devtools/computedview.css @@ -153,7 +153,7 @@ body { #root .devtools-toolbar { width: 100%; - display: -moz-box; + display: flex; } .link { @@ -183,9 +183,9 @@ body { .computedview-colorswatch { border-radius: 50%; - width: 1em; - height: 1em; - vertical-align: text-top; + width: 0.9em; + height: 0.9em; + vertical-align: middle; -moz-margin-end: 5px; display: inline-block; position: relative; diff --git a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css index 4068fb0..bfc0fa1 100644 --- a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css +++ b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css @@ -669,6 +669,7 @@ div.CodeMirror span.eval-text { .devtools-button { border: 0 solid var(--theme-splitter-color); background: var(--theme-toolbar-background); + color: var(--theme-body-color); margin: 0; padding: 0; min-width: 32px; @@ -719,6 +720,11 @@ div.CodeMirror span.eval-text { background-repeat: no-repeat; } +.devtools-button[disabled]::before, +.devtools-button:disabled::before { + opacity: 0.5; +} + @media (min-resolution: 1.25dppx) { .devtools-button::before { background-size: 32px; @@ -767,8 +773,8 @@ div.CodeMirror span.eval-text { /* Searchbox is a div container element for a search input element */ .devtools-searchbox { - display: -moz-box; - -moz-box-flex: 1; + display: flex; + flex: 1; position: relative; } @@ -1056,6 +1062,20 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/undock@2x.png"); } +#toolbox-dock-bottom-minimize { + /* Bug 1177463 - The minimize button is currently hidden until we agree on + the UI for it, and until bug 1173849 is fixed too. */ + display: none; +} + +#toolbox-dock-bottom-minimize > image { + background-image: url("chrome://browser/skin/devtools/dock-bottom-minimize@2x.png"); +} + +#toolbox-dock-bottom-minimize.minimized > image { + background-image: url("chrome://browser/skin/devtools/dock-bottom-maximize@2x.png"); +} + #toolbox-dock-window, #toolbox-dock-bottom, #toolbox-dock-side { diff --git a/arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png b/arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png new file mode 100644 index 0000000..feb4d78 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png b/arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png new file mode 100644 index 0000000..a82983c Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg b/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg index 09b65c7..7592790 100644 --- a/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg +++ b/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg @@ -1,3 +1,6 @@ - - - \ No newline at end of file + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg index e8ff440..fa893f4 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg @@ -1,4 +1,7 @@ - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg index fd8209d..1faebe4 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg @@ -1,4 +1,7 @@ - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg index 809e098..bf1fe2d 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg index 95be627..01d3625 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg @@ -1,7 +1,8 @@ - - - - - - + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg b/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg index 37dcab4..1f63b4f 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg @@ -2,16 +2,11 @@ - - - - - - - - - - - - + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filters.svg b/arc-firefox-theme/chrome/browser/devtools/filters.svg index 916028b..1f51d32 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filters.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filters.svg @@ -1,3 +1,7 @@ + + diff --git a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css index ff70d64..934a38e 100644 --- a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css +++ b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css @@ -9,8 +9,10 @@ scrollbar { padding: 2px; } +/* Scrollbar code will reset the margin to the correct side depending on + where layout actually puts the scrollbar */ scrollbar[orient="vertical"] { - -moz-margin-start: -10px; + margin-left: -10px; min-width: 10px; max-width: 10px; } diff --git a/arc-firefox-theme/chrome/browser/devtools/font-inspector.css b/arc-firefox-theme/chrome/browser/devtools/font-inspector.css index 30424df..2c4a365 100644 --- a/arc-firefox-theme/chrome/browser/devtools/font-inspector.css +++ b/arc-firefox-theme/chrome/browser/devtools/font-inspector.css @@ -3,6 +3,9 @@ } body { + display: flex; + flex-direction: column; + height: 100%; margin: 0; padding-bottom: 20px; } diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg index 7bd7028..c2accab 100644 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg @@ -1,4 +1,7 @@ - - - + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg index 9315d9e..18d3702 100644 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg @@ -1,4 +1,7 @@ - - - - \ No newline at end of file + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg index 93913c9..bca667a 100644 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg @@ -1,4 +1,7 @@ - - - + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg index e580b88..e83fa63 100755 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg @@ -1,4 +1,7 @@ - - - + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/layoutview.css b/arc-firefox-theme/chrome/browser/devtools/layoutview.css index 8027a4c..642e89c 100644 --- a/arc-firefox-theme/chrome/browser/devtools/layoutview.css +++ b/arc-firefox-theme/chrome/browser/devtools/layoutview.css @@ -1,16 +1,67 @@ /* 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/. */ + * file, You can obtain one at http://mozilla.org/MPL/2.0/ */ .theme-sidebar { box-sizing: border-box; } +body { + /* The view will grow bigger as the window gets resized, until 400px */ + max-width: 400px; + margin: 0px auto; + padding: 0; + /* "Contain" the absolutely positioned #main element */ + position: relative; +} + +/* Header: contains the position and size of the element */ + +#header { + box-sizing: border-box; + width: 100%; + padding: 4px 14px; + display: -moz-box; + vertical-align: top; +} + +#header:-moz-dir(rtl) { + -moz-box-direction: reverse; +} + +#header > span { + display: -moz-box; +} + +#element-size { + -moz-box-flex: 1; +} + +#element-size:-moz-dir(rtl) { + -moz-box-pack: end; +} + +@media (max-height: 228px) { + #header { + padding-top: 0; + padding-bottom: 0; + margin-top: 10px; + margin-bottom: 8px; + } +} + +/* Main: contains the box-model regions */ + #main { + position: absolute; + box-sizing: border-box; + /* The regions are semi-transparent, so the white background is partly + visible */ background-color: white; - border-color: hsla(210,100%,85%,0.7); - border-style: dotted; color: var(--theme-selection-color); + /* Make sure there is some space between the window's edges and the regions */ + margin: 0 14px 10px 14px; + width: calc(100% - 2 * 14px); } .margin, @@ -18,43 +69,271 @@ color: var(--theme-highlight-blue); } +/* Regions are 3 nested elements with wide borders and outlines */ + #content { - background-color: #87ceeb; - border-color: hsl(210,100%,85%); - border-style: dotted; + height: 25px; } -#padding, -#margins { +#margins, +#borders, +#padding { border-color: hsla(210,100%,85%,0.2); + border-width: 25px; + border-style: solid; outline: dotted 1px hsl(210,100%,85%); } -#padding { - background-color: #6a5acd; +#margins { + /* This opacity applies to all of the regions, since they are nested */ + opacity: .8; } -#borders { - background-color: #444444; - border-style: dotted; - border-color: hsl(210,100%,85%); +/* Respond to window size change by changing the size of the regions */ + +@media (max-height: 228px) { + #content { + height: 18px; + } + + #margins, + #borders, + #padding { + border-width: 18px; + } } +/* Regions colors */ + #margins { - background-color: #edff64; - /* This opacity applies to all of the regions, since they are nested. */ - opacity: .8; + border-color: #edff64; +} + +#borders { + border-color: #444444; +} + +#padding { + border-color: #6a5acd; +} + +#content { + background-color: #87ceeb; +} + +/* Editable region sizes are contained in absolutely positioned

*/ + +#main > p { + position: absolute; + pointer-events: none; } +#main > p { + margin: 0; + text-align: center; +} + +#main > p > span { + vertical-align: middle; + pointer-events: auto; +} + +/* Coordinates for the region sizes */ + +.top, +.bottom { + width: calc(100% - 2px); + text-align: center; +} + +.padding.top { + top: 55px; +} + +.padding.bottom { + bottom: 57px; +} + +.border.top { + top: 30px; +} + +.border.bottom { + bottom: 31px; +} + +.margin.top { + top: 5px; +} + +.margin.bottom { + bottom: 6px; +} + +.size, +.margin.left, +.margin.right, +.border.left, +.border.right, +.padding.left, +.padding.right { + top: 22px; + line-height: 132px; +} + +.size { + width: calc(100% - 2px); +} + +.margin.right, +.margin.left, +.border.left, +.border.right, +.padding.right, +.padding.left { + width: 25px; +} + +.padding.left { + left: 52px; +} + +.padding.right { + right: 51px; +} + +.border.left { + left: 26px; +} + +.border.right { + right: 26px; +} + +.margin.right { + right: 0; +} + +.margin.left { + left: 0; +} + +.rotate.left:not(.editing) { + transform: rotate(-90deg); +} + +.rotate.right:not(.editing) { + transform: rotate(90deg); +} + +/* Coordinates should be different when the window is small, because we make + the regions smaller then */ + +@media (max-height: 228px) { + .padding.top { + top: 37px; + } + + .padding.bottom { + bottom: 38px; + } + + .border.top { + top: 19px; + } + + .border.bottom { + bottom: 20px; + } + + .margin.top { + top: 1px; + } + + .margin.bottom { + bottom: 2px; + } + + .size, + .margin.left, + .margin.right, + .border.left, + .border.right, + .padding.left, + .padding.right { + line-height: 80px; + } + + .margin.right, + .margin.left, + .border.left, + .border.right, + .padding.right, + .padding.left { + width: 21px; + } + + .padding.left { + left: 35px; + } + + .padding.right { + right: 35px; + } + + .border.left { + left: 16px; + } + + .border.right { + right: 17px; + } +} + +/* Legend, displayed inside regions */ + +.legend { + position: absolute; + margin: 5px 6px; + z-index: 1; +} + +.legend[data-box="margin"] { + color: var(--theme-highlight-blue); +} + +@media (max-height: 228px) { + .legend { + margin: 2px 6px; + } +} + +/* Editable fields */ + .editable { border: 1px dashed transparent; + -moz-user-select: text; } .editable:hover { - border-bottom-color: hsl(0,0%,50%); + border-bottom-color: hsl(0, 0%, 50%); } .styleinspector-propertyeditor { - border: 1px solid #CCC; + border: 1px solid #ccc; padding: 0; } + +/* Make sure the content size doesn't appear as editable like the other sizes */ + +.size > span { + cursor: default; +} + +/* Hide all values when the view is inactive */ + +body.inactive > #header > #element-position, +body.inactive > #header > #element-size, +body.inactive > #main > p { + visibility: hidden; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/light-theme.css b/arc-firefox-theme/chrome/browser/devtools/light-theme.css index ac6a511..ea8b1fe 100644 --- a/arc-firefox-theme/chrome/browser/devtools/light-theme.css +++ b/arc-firefox-theme/chrome/browser/devtools/light-theme.css @@ -667,6 +667,7 @@ div.CodeMirror span.eval-text { .devtools-button { border: 0 solid var(--theme-splitter-color); background: var(--theme-toolbar-background); + color: var(--theme-body-color); margin: 0; padding: 0; min-width: 32px; @@ -717,6 +718,11 @@ div.CodeMirror span.eval-text { background-repeat: no-repeat; } +.devtools-button[disabled]::before, +.devtools-button:disabled::before { + opacity: 0.5; +} + @media (min-resolution: 1.25dppx) { .devtools-button::before { background-size: 32px; @@ -765,8 +771,8 @@ div.CodeMirror span.eval-text { /* Searchbox is a div container element for a search input element */ .devtools-searchbox { - display: -moz-box; - -moz-box-flex: 1; + display: flex; + flex: 1; position: relative; } @@ -1054,6 +1060,20 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/undock@2x.png"); } +#toolbox-dock-bottom-minimize { + /* Bug 1177463 - The minimize button is currently hidden until we agree on + the UI for it, and until bug 1173849 is fixed too. */ + display: none; +} + +#toolbox-dock-bottom-minimize > image { + background-image: url("chrome://browser/skin/devtools/dock-bottom-minimize@2x.png"); +} + +#toolbox-dock-bottom-minimize.minimized > image { + background-image: url("chrome://browser/skin/devtools/dock-bottom-maximize@2x.png"); +} + #toolbox-dock-window, #toolbox-dock-bottom, #toolbox-dock-side { diff --git a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css index 96ba494..92f2efc 100644 --- a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css +++ b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css @@ -7,6 +7,15 @@ * 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.theme-dark { + --table-splitter-color: rgba(255,255,255,0.15); + --table-zebra-background: rgba(255,255,255,0.05); +} +:root.theme-light { + --table-splitter-color: rgba(0,0,0,0.15); + --table-zebra-background: rgba(0,0,0,0.05); +} + #requests-menu-empty-notice { margin: 0; padding: 12px; @@ -33,7 +42,6 @@ margin: 0; } - /* Network requests table */ #requests-menu-toolbar { @@ -49,26 +57,9 @@ padding: 3px; } -.theme-dark .requests-menu-header:not(:last-child), -.theme-dark .requests-menu-subitem:not(:last-child) { - -moz-border-end: 1px solid rgba(0,0,0,0.2); - box-shadow: 1px 0 0 rgba(128,128,128,0.15); -} - -.theme-dark .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), -.theme-dark .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { - box-shadow: -1px 0 0 rgba(128,128,128,0.15); -} - -.theme-light .requests-menu-header:not(:last-child), -.theme-light .requests-menu-subitem:not(:last-child) { - -moz-border-end: 1px solid rgba(128,128,128,0.25); - box-shadow: 1px 0 0 transparent; -} - -.theme-light .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), -.theme-light .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { - box-shadow: -1px 0 0 transparent; +.requests-menu-header:not(:last-child), +.requests-menu-subitem:not(:last-child) { + -moz-border-end: 1px solid var(--table-splitter-color); } .requests-menu-header-button { @@ -138,12 +129,8 @@ -moz-margin-end: 4px; } -.theme-dark .requests-menu-icon { - outline: 1px solid rgba(0,0,0,0.2); -} - -.theme-light .requests-menu-icon { - outline: 1px solid rgba(128,128,128,0.25); +.requests-menu-icon { + outline: 1px solid var(--table-splitter-color); } .requests-menu-file { @@ -164,10 +151,6 @@ -moz-image-region: rect(0px, 32px, 16px, 16px); } -.requests-security-state-icon:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} - .security-state-insecure { list-style-image: url(chrome://browser/skin/identity-icons-generic.png); } @@ -219,80 +202,42 @@ label.requests-menu-status-code { -moz-margin-end: -3em !important; } -.theme-dark box.requests-menu-status:not([code]) { - background-color: rgba(95, 115, 135, 1); /* dark grey */ +box.requests-menu-status:not([code]) { + background-color: var(--theme-content-color2); } -.theme-light box.requests-menu-status:not([code]) { - background-color: rgba(143, 161, 178, 1); /* grey */ -} - -.theme-dark box.requests-menu-status[code="cached"] { - border: 2px solid rgba(95, 115, 135, 1); /* dark grey */ +box.requests-menu-status[code="cached"] { + border: 2px solid var(--theme-content-color2); background-color: transparent; } -.theme-light box.requests-menu-status[code="cached"] { - border: 2px solid rgba(143, 161, 178, 1); /* grey */ - background-color: transparent; -} - -.theme-dark box.requests-menu-status[code^="1"] { - background-color: rgba(70, 175, 227, 1); /* light blue */ -} - -.theme-light box.requests-menu-status[code^="1"] { - background-color: rgba(0, 136, 204, 1); /* light blue */ +box.requests-menu-status[code^="1"] { + background-color: var(---theme-highlight-blue); } -.theme-dark box.requests-menu-status[code^="2"] { - background-color: rgba(112, 191, 83, 1); /* green */ -} - -.theme-light box.requests-menu-status[code^="2"] { - background-color: rgba(44, 187, 15, 1); /* green */ +box.requests-menu-status[code^="2"] { + background-color: var(--theme-highlight-green); } /* 3xx are triangles */ -.theme-dark box.requests-menu-status[code^="3"] { - background-color: transparent; - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 10px solid rgba(217, 155, 40, 1); /* light orange */ - border-radius: 0; -} - -.theme-light box.requests-menu-status[code^="3"] { +box.requests-menu-status[code^="3"] { background-color: transparent; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-bottom: 10px solid rgba(217, 126, 0, 1); /* light orange */ + border-bottom: 10px solid var(--theme-highlight-lightorange); border-radius: 0; } /* 4xx and 5xx are squares - error codes */ -.theme-dark box.requests-menu-status[code^="4"] { - background-color: rgba(235, 83, 104, 1); /* red */ - border-radius: 0; /* squares */ -} - -.theme-light box.requests-menu-status[code^="4"] { - background-color: rgba(237, 38, 85, 1); /* red */ +box.requests-menu-status[code^="4"] { + background-color: var(--theme-highlight-red); border-radius: 0; /* squares */ } -.theme-dark box.requests-menu-status[code^="5"] { - background-color: rgba(223, 128, 255, 1); /* pink? */ - border-radius: 0; - transform: rotate(45deg); -} - -.theme-light box.requests-menu-status[code^="5"] { - background-color: rgba(184, 46, 229, 1); /* pink! */ +box.requests-menu-status[code^="5"] { + background-color: var(--theme-highlight-pink); border-radius: 0; transform: rotate(45deg); } @@ -433,17 +378,26 @@ label.requests-menu-status-code { } /* SideMenuWidget */ +#network-table .side-menu-widget-empty-text, +#network-table .side-menu-widget-container { + background-color: var(--theme-body-background); +} + +#network-table .side-menu-widget-item { + border-top-color: transparent; + border-bottom-color: transparent; +} .side-menu-widget-item-contents { padding: 0px; } -.theme-dark .side-menu-widget-item:not(.selected)[odd] { - background: rgba(255,255,255,0.05); +.side-menu-widget-item:not(.selected)[odd] { + background-color: var(--table-zebra-background); } -.theme-light .side-menu-widget-item:not(.selected)[odd] { - background: rgba(128,128,128,0.05); +.side-menu-widget-item:not(.selected):hover { + background-color: var(--theme-selection-background-semitransparent); } /* Network request details */ @@ -486,11 +440,18 @@ label.requests-menu-status-code { /* Network request details tabpanels */ +.tabpanel-content { + background-color: var(--theme-sidebar-background); +} + .theme-dark .tabpanel-content { - background-color: var(--theme-toolbar-background); color: var(--theme-selection-color); } +#headers-tabpanel { + background-color: var(--theme-toolbar-background); +} + /* Summary tabpanel */ .tabpanel-summary-container { @@ -628,16 +589,9 @@ label.requests-menu-status-code { /* Footer */ -.theme-dark #requests-menu-footer { - border-top: 1px solid rgba(0,0,0,0.2); - box-shadow: 0 1px 0 rgba(128,128,128,0.15) inset; - background-color: var(--theme-toolbar-background); -} - -.theme-light #requests-menu-footer { - border-top: 1px solid rgba(128,128,128,0.25); - box-shadow: 0 1px 0 transparent inset; +#requests-menu-footer { background-color: var(--theme-toolbar-background); + border-top: 1px solid var(--table-splitter-color); } .requests-menu-footer-button, @@ -664,14 +618,12 @@ label.requests-menu-status-code { .theme-dark .requests-menu-footer-spacer:not(:first-child), .theme-dark .requests-menu-footer-button:not(:first-child) { - -moz-border-start: 1px solid rgba(128,128,128,0.15); - box-shadow: -1px 0 0 rgba(0,0,0,0.2); + -moz-border-start: 1px solid var(--table-splitter-color); } .theme-light .requests-menu-footer-spacer:not(:first-child), .theme-light .requests-menu-footer-button:not(:first-child) { - -moz-border-start: 1px solid transparent; - box-shadow: -1px 0 0 rgba(128,128,128,0.25); + -moz-border-start: 1px solid var(--table-splitter-color); } .requests-menu-footer-button { @@ -683,22 +635,13 @@ label.requests-menu-status-code { background: rgba(0,0,0,0.10); } -.theme-dark .requests-menu-footer-button:hover:active { - background-color: rgba(29,79,115,0.4); /* Select Highlight Blue at 40% opacity */ -} - -.theme-light .requests-menu-footer-button:hover:active { - background-color: rgba(76,158,217,0.4); /* Select Highlight Blue at 40% opacity */ +.requests-menu-footer-button:hover:active { + background-color: var(--theme-selection-background-semitransparent); } -.theme-dark .requests-menu-footer-button:not(:active)[checked] { - background-color: rgba(29,79,115,1); /* Select Highlight Blue */ - color: rgba(245,247,250,1); /* Light foreground text */ -} - -.theme-light .requests-menu-footer-button:not(:active)[checked] { - background-color: rgba(76,158,217,1); /* Select Highlight Blue */ - color: rgba(245,247,250,1); /* Light foreground text */ +.requests-menu-footer-button:not(:active)[checked] { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); } .requests-menu-footer-label { @@ -778,7 +721,7 @@ label.requests-menu-status-code { } #network-statistics-charts { - background-color: var(--theme-toolbar-background); + background-color: var(--theme-sidebar-background); } #network-statistics-charts .pie-chart-container { diff --git a/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg b/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg index 3004e04..a115938 100644 --- a/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg +++ b/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg @@ -1,42 +1,45 @@ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/performance.css b/arc-firefox-theme/chrome/browser/devtools/performance.css index 50c375c..1187fd8 100644 --- a/arc-firefox-theme/chrome/browser/devtools/performance.css +++ b/arc-firefox-theme/chrome/browser/devtools/performance.css @@ -10,6 +10,7 @@ /* CSS Variables specific to this panel that aren't defined by the themes */ .theme-dark { --cell-border-color: rgba(255,255,255,0.15); + --cell-border-color-light: rgba(255,255,255,0.1); --focus-cell-border-color: rgba(255,255,255,0.5); --row-alt-background-color: rgba(29,79,115,0.15); --row-hover-background-color: rgba(29,79,115,0.25); @@ -17,6 +18,7 @@ .theme-light { --cell-border-color: rgba(0,0,0,0.15); + --cell-border-color-light: rgba(0,0,0,0.1); --focus-cell-border-color: rgba(0,0,0,0.3); --row-alt-background-color: rgba(76,158,217,0.1); --row-hover-background-color: rgba(76,158,217,0.2); @@ -24,19 +26,10 @@ /* Toolbar */ -#performance-toolbar > tabs, -#performance-toolbar { - -moz-border-end-color: var(--theme-splitter-color); -} - #performance-toolbar-control-other { -moz-padding-end: 5px; } -#performance-toolbar-controls-detail-views > toolbarbutton { - min-width: 0; -} - #performance-toolbar-controls-detail-views .toolbarbutton-text { -moz-padding-start: 4px; -moz-padding-end: 8px; @@ -64,128 +57,142 @@ border-radius: 1px; } -/* Recording Notice */ +/* Details panel buttons */ -#performance-view .notice-container { - font-size: 120%; - background-color: var(--theme-toolbar-background); - color: var(--theme-body-color); - padding-bottom: 20vh; +#select-waterfall-view { + list-style-image: url(performance-icons.svg#details-waterfall); } -#performance-view .notice-container button { - min-width: 30px; - min-height: 28px; - margin: 0; +#select-js-calltree-view, +#select-memory-calltree-view { + list-style-image: url(performance-icons.svg#details-call-tree); } -#performance-view .notice-container vbox { - text-align: center; +#select-js-flamegraph-view, +#select-memory-flamegraph-view { + list-style-image: url(performance-icons.svg#details-flamegraph); } -.console-profile-command { - font-family: monospace; - margin: 3px 2px; +#select-optimizations-view { + list-style-image: url(profiler-stopwatch.svg); } -#performance-view .realtime-message { - opacity: 0.5; - display: block; +/* Recording buttons */ + +#main-record-button { + list-style-image: url(profiler-stopwatch.svg); } -#performance-view toolbarbutton.record-button { - padding: 5px; +#main-record-button[checked] { + list-style-image: url(profiler-stopwatch-checked.svg); } -#performance-view toolbarbutton.record-button[checked], -#performance-view toolbarbutton.record-button[checked] { - color: var(--theme-selection-color); - background: var(--theme-selection-background); +#main-record-button .button-icon { + margin: 0; } -#performance-view .realtime-disabled-message, -#performance-view .realtime-disabled-on-e10s-message { +#main-record-button .button-text { display: none; - /* This label does not want to wrap naturally (based on some combination of - it's parents and flex). Quick and dirty way to force it to wrap -> don't - let it get bigger than half the screen size */ - max-width: 60vw; } -#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message { - display: block; - opacity: 0.5; +.notice-container .record-button { + padding: 5px !important; +} +.notice-container .record-button[checked], +.notice-container .record-button[checked] { + color: var(--theme-selection-color) !important; + background: var(--theme-selection-background) !important; } -#performance-view[e10s="unsupported"] .realtime-disabled-message { - display: block; + +.record-button[locked] { + pointer-events: none; opacity: 0.5; } -#details-pane-container .buffer-status-message, -#details-pane-container .buffer-status-message-full { - display: none; -} +/* Sidebar & recording items */ -#details-pane-container[buffer-status="in-progress"] .buffer-status-message { - display: block; - opacity: 0.5; +.recording-item { + padding: 4px; } -#details-pane-container[buffer-status="full"] .buffer-status-message { - display: block; - color: var(--theme-highlight-red); - font-weight: bold; - opacity: 1; +.recording-item-title { + font-size: 110%; } -#details-pane-container[buffer-status="full"] .buffer-status-message-full { - display: block; +.recording-item-footer { + padding-top: 4px; + font-size: 90%; } -/* Overview Panel */ +.recording-item-save { + text-decoration: underline; + cursor: pointer; +} -#main-record-button { - list-style-image: url(profiler-stopwatch.svg); +.recording-item-duration, +.recording-item-save { + color: var(--theme-body-color-alt); } -#main-record-button[checked] { - list-style-image: url(profiler-stopwatch-checked.svg); +#recordings-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; } -#main-record-button[locked] { - pointer-events: none; +/* Recording notices */ + +.notice-container { + font-size: 120%; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color); + padding-bottom: 20vh; } -#main-record-button .button-icon { - margin: 0; +.console-profile-command { + font-family: monospace; + margin: 3px 2px; } -#main-record-button .button-text { +.realtime-disabled-message, +.realtime-disabled-on-e10s-message { display: none; } -/* Details Panel */ +#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message { + display: initial; + opacity: 0.5; -#select-waterfall-view { - list-style-image: url(performance-icons.svg#details-waterfall); +} +#performance-view[e10s="unsupported"] .realtime-disabled-message { + display: initial; + opacity: 0.5; } -#select-js-calltree-view, -#select-memory-calltree-view { - list-style-image: url(performance-icons.svg#details-call-tree); +.buffer-status-message, +.buffer-status-message-full { + display: none; } -#select-js-flamegraph-view, -#select-memory-flamegraph-view { - list-style-image: url(performance-icons.svg#details-flamegraph); +#details-pane-container[buffer-status="in-progress"] .buffer-status-message { + display: initial; + opacity: 0.5; +} + +#details-pane-container[buffer-status="full"] .buffer-status-message { + display: initial; + color: var(--theme-highlight-red); + font-weight: bold; + opacity: 1; +} + +#details-pane-container[buffer-status="full"] .buffer-status-message-full { + display: initial; } /* Profile call tree */ .call-tree-cells-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); overflow: auto; } @@ -257,7 +264,7 @@ background-color: var(--theme-tab-toolbar-background); } -.call-tree-item:last-child:not(:focus) { +.call-tree-item:last-child { border-bottom: 1px solid var(--cell-border-color); } @@ -273,7 +280,7 @@ background-color: var(--theme-selection-background); } -.call-tree-item:focus label { +.call-tree-item:focus description { color: var(--theme-selection-color) !important; } @@ -320,119 +327,131 @@ color: var(--theme-content-color2); } -.call-tree-zoom { - -moz-appearance: none; - background-color: transparent; - background-position: center; - background-repeat: no-repeat; - background-size: 11px; - min-width: 11px; - -moz-margin-start: 8px !important; - cursor: zoom-in; - opacity: 0; +.call-tree-category { + transform: scale(0.75); + transform-origin: center right; } -.theme-dark .call-tree-zoom { - background-image: url(magnifying-glass.png); -} +/** + * Waterfall ticks header + */ -.theme-light .call-tree-zoom { - background-image: url(magnifying-glass-light.png); +.waterfall-header-ticks { + overflow: hidden; } -@media (min-resolution: 1.25dppx) { - .theme-dark .call-tree-zoom { - background-image: url(magnifying-glass@2x.png); - } - - .theme-light .call-tree-zoom { - background-image: url(magnifying-glass-light@2x.png); - } +.waterfall-header-name { + padding: 2px 4px; + font-size: 90%; } -.call-tree-item:hover .call-tree-zoom { - transition: opacity 0.3s ease-in; - opacity: 1; +.waterfall-header-tick { + width: 100px; + font-size: 9px; + transform-origin: left center; + color: var(--theme-body-color); } -.call-tree-item:hover .call-tree-zoom:hover { - opacity: 0; +.waterfall-header-tick:not(:first-child) { + -moz-margin-start: -100px !important; /* Don't affect layout. */ } -.call-tree-category { - transform: scale(0.75); - transform-origin: center right; +.waterfall-background-ticks { + /* Background created on a in js. */ + /* @see browser/devtools/timeline/widgets/waterfall.js */ + background-image: -moz-element(#waterfall-background); + background-repeat: repeat-y; + background-position: -1px center; } /** - * Details Waterfall Styles + * Markers waterfall breakdown */ -.waterfall-list-contents { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); +#waterfall-breakdown { overflow-x: hidden; overflow-y: auto; } -.waterfall-header-contents { - overflow-x: hidden; +.theme-light .waterfall-tree-item:not([level="0"]) { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 2px, + rgba(0,0,0,0.025) 2px, + rgba(0,0,0,0.025) 4px + ); } -.waterfall-background-ticks { - /* Background created on a in js. */ - /* @see browser/devtools/timeline/widgets/waterfall.js */ - background-image: -moz-element(#waterfall-background); - background-repeat: repeat-y; - background-position: -1px center; +.theme-dark .waterfall-tree-item:not([level="0"]) { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 2px, + rgba(255,255,255,0.05) 2px, + rgba(255,255,255,0.05) 4px + ); } -.waterfall-marker-container[is-spacer] { - pointer-events: none; +.theme-light .waterfall-tree-item[expandable] .waterfall-marker-bullet, +.theme-light .waterfall-tree-item[expandable] .waterfall-marker-bar { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 5px, + rgba(255,255,255,0.35) 5px, + rgba(255,255,255,0.35) 10px + ); } -.theme-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) { - background-color: rgba(255,255,255,0.03); +.theme-dark .waterfall-tree-item[expandable] .waterfall-marker-bullet, +.theme-dark .waterfall-tree-item[expandable] .waterfall-marker-bar { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 5px, + rgba(0,0,0,0.35) 5px, + rgba(0,0,0,0.35) 10px + ); } -.theme-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) { - background-color: rgba(128,128,128,0.03); +.waterfall-tree-item[expanded], +.waterfall-tree-item:not([level="0"]) + .waterfall-tree-item[level="0"] { + box-shadow: 0 -1px var(--cell-border-color-light); } -.theme-dark .waterfall-marker-container:hover { - background-color: rgba(255,255,255,0.1) !important; +.waterfall-tree-item:nth-child(2n) > .waterfall-marker { + background-color: var(--row-alt-background-color); } -.theme-light .waterfall-marker-container:hover { - background-color: rgba(128,128,128,0.1) !important; +.waterfall-tree-item:hover { + background-color: var(--row-hover-background-color); } -.waterfall-marker-item { - overflow: hidden; +.waterfall-tree-item:last-child { + border-bottom: 1px solid var(--cell-border-color); } -.waterfall-sidebar { - -moz-border-end: 1px solid var(--theme-splitter-color); +.waterfall-tree-item:focus { + background-color: var(--theme-selection-background); } -.waterfall-marker-container:hover > .waterfall-sidebar { - background-color: transparent; +.waterfall-tree-item:focus description { + color: var(--theme-selection-color) !important; } -.waterfall-header-name { - padding: 2px 4px; - font-size: 90%; -} +/** + * Marker left sidebar + */ -.waterfall-header-tick { - width: 100px; - font-size: 9px; - transform-origin: left center; - color: var(--theme-body-color); +.waterfall-sidebar { + -moz-border-end: 1px solid var(--cell-border-color); } -.waterfall-header-tick:not(:first-child) { - -moz-margin-start: -100px !important; /* Don't affect layout. */ +.waterfall-tree-item > .waterfall-sidebar:hover, +.waterfall-tree-item:hover > .waterfall-sidebar, +.waterfall-tree-item:focus > .waterfall-sidebar { + background: transparent; } .waterfall-marker-bullet { @@ -448,18 +467,30 @@ padding-bottom: 1px !important; } +/** + * Marker timebar + */ + +.waterfall-marker { + overflow: hidden; +} + .waterfall-marker-bar { height: 9px; transform-origin: left center; border-radius: 1px; } -.waterfall-marker-container.selected > .waterfall-sidebar, -.waterfall-marker-container.selected > .waterfall-marker-item { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); +.waterfall-marker > .theme-twisty { + /* Don't affect layout. */ + width: 14px; + -moz-margin-end: -14px; } +/** + * Marker details view + */ + #waterfall-details { -moz-padding-start: 8px; -moz-padding-end: 8px; @@ -468,12 +499,33 @@ min-width: 50px; } +#waterfall-details > * { + padding-top: 3px; +} + .marker-details-bullet { width: 8px; height: 8px; border-radius: 1px; } +.marker-details-labelname { + -moz-padding-end: 4px; +} + +.marker-details-type { + font-size: 1.2em; + font-weight: bold; +} + +.marker-details-duration { + font-weight: bold; +} + +/** + * Marker colors + */ + menuitem.marker-color-graphs-purple:before, .marker-color-graphs-purple { background-color: var(--theme-graphs-purple); @@ -499,53 +551,6 @@ menuitem.marker-color-graphs-blue:before, background-color: var(--theme-graphs-blue); } -#waterfall-details > * { - padding-top: 3px; -} - -.marker-details-labelname { - -moz-padding-end: 4px; -} - -.marker-details-type { - font-size: 1.2em; - font-weight: bold; -} - -.marker-details-duration { - font-weight: bold; -} - -/* Recording items */ - -.recording-item { - padding: 4px; -} - -.recording-item-title { - font-size: 110%; -} - -.recording-item-footer { - padding-top: 4px; - font-size: 90%; -} - -.recording-item-save { - text-decoration: underline; - cursor: pointer; -} - -.recording-item-duration, -.recording-item-save { - color: var(--theme-body-color-alt); -} - -#recordings-list .selected label { - /* Text inside a selected item should not be custom colored. */ - color: inherit !important; -} - /** * JIT View */ @@ -640,33 +645,59 @@ menuitem.marker-color-graphs-blue:before, cursor: pointer; } -#jit-optimizations-view .opt-icon::before { +.opt-icon::before { content: ""; - background-image: url(chrome://browser/skin/devtools/webconsole.png); + background-image: url(chrome://browser/skin/devtools/webconsole.svg); background-repeat: no-repeat; - background-size: 48px 40px; - margin: 5px 6px 0 0; - width: 8px; - height: 8px; - max-height: 8px; + background-size: 72px 60px; + /* show grey "i" bubble by default */ + background-position: -36px -36px; + width: 12px; + height: 12px; display: inline-block; + + max-height: 12px; +} + +#jit-optimizations-view .opt-icon::before { + margin: 5px 6px 0 0; +} +description.opt-icon { + margin: 0px 0px 0px 0px; +} +description.opt-icon::before { + margin: 1px 4px 0px 0px; +} +.theme-light .opt-icon::before { + background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons); +} +.opt-icon[severity=warning]::before { + background-position: -24px -24px; +} +.opt-icon[type=linkable]::before { + cursor: pointer; } -#jit-optimizations-view .opt-icon[severity=warning]::before { - background-position: -16px -16px; +ul.frames-list { + list-style-type: none; + padding: 0px; + margin: 0px; } -@media (min-resolution: 1.25dppx) { - #jit-optimizations-view .opt-icon::before { - background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); - } +ul.frames-list li { + cursor: pointer; +} + +ul.frames-list li.selected { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); } /** * Configurable Options * - * Elements can be tagged with a class and visibility is controlled via a preference being - * applied or removed. + * Elements can be tagged with a class and visibility is controlled via a + * preference being applied or removed. */ /** @@ -674,21 +705,21 @@ menuitem.marker-color-graphs-blue:before, */ menuitem.experimental-option::before { content: ""; - background-image: url(chrome://browser/skin/devtools/webconsole.png); + background-image: url(chrome://browser/skin/devtools/webconsole.svg); background-repeat: no-repeat; - background-size: 48px 40px; - margin: 2px 5px 0 0; - width: 8px; - height: 8px; - max-height: 8px; + background-size: 72px 60px; + width: 12px; + height: 12px; display: inline-block; - background-position: -16px -16px; + + background-position: -24px -24px; + margin: 2px 5px 0 0; + max-height: 12px; } -@media (min-resolution: 1.25dppx) { - menuitem.experimental-option::before { - background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); - } +.theme-light menuitem.experimental-option::before { + background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons); } + #performance-options-menupopup:not(.experimental-enabled) .experimental-option, #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before { display: none; diff --git a/arc-firefox-theme/chrome/browser/devtools/power.svg b/arc-firefox-theme/chrome/browser/devtools/power.svg index f675e30..d3a3284 100644 --- a/arc-firefox-theme/chrome/browser/devtools/power.svg +++ b/arc-firefox-theme/chrome/browser/devtools/power.svg @@ -10,5 +10,5 @@ The above copyright notice and this permission notice shall be included in all c The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software. --> - + diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg index f682354..abe68dc 100644 --- a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg +++ b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg @@ -1,14 +1,17 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg index e9fe8f9..690fc7d 100644 --- a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg +++ b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg @@ -1,14 +1,17 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler.css b/arc-firefox-theme/chrome/browser/devtools/profiler.css deleted file mode 100644 index 8f127cd..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/profiler.css +++ /dev/null @@ -1,400 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -/* vim:set ts=2 sw=2 sts=2 et: */ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -/* CSS Variables specific to this panel that aren't defined by the themes */ -.theme-dark { - --cell-border-color: rgba(255,255,255,0.15); - --focus-cell-border-color: rgba(0,0,0,0.3); - --row-alt-background-color: rgba(29,79,115,0.15); - --row-hover-background-color: rgba(29,79,115,0.25); - --tab-hover-background-color: rgba(0,0,0,0.3); -} - -.theme-light { - --cell-border-color: rgba(0,0,0,0.15); - --focus-cell-border-color: rgba(255,255,255,0.5); - --row-alt-background-color: rgba(76,158,217,0.1); - --row-hover-background-color: rgba(76,158,217,0.2); - --tab-hover-background-color: rgba(255,255,255,0.8); -} - -/* Reload and waiting notices */ - -.notice-container { - margin-top: -50vh; - font-size: 120%; - background-color: var(--theme-toolbar-background); - color: var(--theme-body-color-alt); -} - -#empty-notice button, -#recording-notice button { - min-width: 30px; - min-height: 28px; - margin: 0; - list-style-image: url(profiler-stopwatch.svg); -} - -#empty-notice button[checked], -#recording-notice button[checked] { - list-style-image: url(profiler-stopwatch-checked.svg); -} - -#empty-notice button .button-text, -#recording-notice button .button-text { - display: none; -} - -.theme-dark #loading-notice { - font-size: 250%; - color: rgba(255,255,255,0.2); -} - -.theme-light #loading-notice { - font-size: 250%; - color: rgba(0,0,0,0.2); -} - -/* Recordings pane */ - -#recordings-pane > tabs, -#recordings-pane .devtools-toolbar { - -moz-border-end-width: 1px; -} - -#recordings-pane > tabs, -#recordings-pane .devtools-toolbar { - -moz-border-end-color: var(--theme-splitter-color); -} - -#record-button { - list-style-image: url(profiler-stopwatch.svg); -} - -#record-button[checked] { - list-style-image: url(profiler-stopwatch-checked.svg); -} - -#record-button[locked] { - pointer-events: none; -} - -/* Recording items */ - -.recording-item { - padding: 4px; -} - -.recording-item-title { - font-size: 110%; -} - -.recording-item-footer { - padding-top: 4px; - font-size: 90%; -} - -.recording-item-save { - text-decoration: underline; - cursor: pointer; -} - -.recording-item-duration, -.recording-item-save { - color: var(--theme-body-color-alt); -} - -#recordings-list .selected label { - /* Text inside a selected item should not be custom colored. */ - color: inherit !important; -} - -/* Profile pane */ - -#profile-content tabs { - -moz-box-align: stretch; - height: 24px; - font: inherit; -} - -#profile-content tab { - -moz-box-flex: 0; - background-color: transparent; - border: none; - border-radius: 0; - padding: 0; - text-shadow: none; - transition-duration: 0.25s; - transition-timing-function: ease-in-out; - transition-property: opacity, transform; -} - -#profile-content tab { - color: var(--theme-body-color); -} - -#profile-content tab:not([selected]) { - cursor: pointer; -} - -#profile-content tab[covered] { - opacity: 0; - transform: translateY(100%); -} - -#profile-content tab { - -moz-appearance: none; - -moz-border-end: 1px solid var(--theme-splitter-color); -} - -#profile-content tab:hover { - background-color: var(--tab-hover-background-color); -} - -#profile-content tab[selected] { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -#profile-content tabpanel { - -moz-box-orient: vertical; - transform: translateZ(1px); /* Make sure the tabpanel appears above the tab */ -} - -#profile-newtab-button { - -moz-appearance: none; - background-color: transparent; - background-position: 4px 2px; - background-size: 54px 20px; - min-width: 26px; - margin: 0; - border: none; - cursor: pointer; -} - -.theme-dark #profile-newtab-button { - background-color: rgba(112,191,83,0.2); -} - -.theme-light #profile-newtab-button { - background-color: rgba(44,187,15,0.2); -} - -.theme-dark #profile-newtab-button { - background-image: url(newtab-inverted.png); -} - -.theme-light #profile-newtab-button { - background-image: url(newtab.png); -} - -@media (min-resolution: 1.25dppx) { - .theme-dark #profile-newtab-button { - background-image: url(newtab-inverted@2x.png); - } - - .theme-light #profile-newtab-button { - background-image: url(newtab@2x.png); - } -} - -#profile-newtab-button:hover { - background-position: 40px 2px; -} - -#profile-newtab-button:hover:active { - background-position: 22px 2px; -} - -/* Profile call tree */ - -.call-tree-headers-container { - border-top: 1px solid var(--theme-splitter-color); -} - -.call-tree-cells-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); - overflow: auto; -} - -.call-tree-cells-container[categories-hidden] .call-tree-category { - display: none; -} - -.call-tree-header[type="duration"], -.call-tree-cell[type="duration"], -.call-tree-header[type="self-duration"], -.call-tree-cell[type="self-duration"] { - width: 9em; -} - -.call-tree-header[type="percentage"], -.call-tree-cell[type="percentage"], -.call-tree-header[type="self-percentage"], -.call-tree-cell[type="self-percentage"] { - width: 6em; -} - -.call-tree-header[type="samples"], -.call-tree-cell[type="samples"] { - width: 5em; -} - -.call-tree-header[type="function"], -.call-tree-cell[type="function"] { - -moz-box-flex: 1; -} - -.call-tree-header, -.call-tree-cell { - -moz-box-align: center; - overflow: hidden; - padding: 1px 4px; - color: var(--theme-body-color); -} - -.call-tree-header:not(:last-child), -.call-tree-cell:not(:last-child) { - -moz-border-end-width: 1px; - -moz-border-end-style: solid; -} - -.call-tree-header, -.call-tree-cell { - -moz-border-end-color: var(--cell-border-color); -} - -.call-tree-header:not(:last-child) { - text-align: center; -} - -.call-tree-cell:not(:last-child) { - text-align: end; -} - -.call-tree-header { - background-color: var(--theme-tab-toolbar-background); -} - -.call-tree-item:last-child:not(:focus) { - border-bottom: 1px solid var(--cell-border-color); -} - -.call-tree-item:nth-child(2n) { - background-color: var(--row-alt-background-color); -} - -.call-tree-item:hover { - background-color: var(--row-hover-background-color); -} - -.call-tree-item:focus { - background-color: var(--theme-selection-background); -} - -.call-tree-item:focus label { - color: var(--theme-selection-color) !important; -} - -.call-tree-item:focus .call-tree-cell { - -moz-border-end-color: var(--focus-cell-border-color); -} - -.call-tree-item:not([origin="content"]) .call-tree-name, -.call-tree-item:not([origin="content"]) .call-tree-url, -.call-tree-item:not([origin="content"]) .call-tree-line, -.call-tree-item:not([origin="content"]) .call-tree-column { - /* Style chrome and non-JS nodes differently. */ - opacity: 0.6; -} - -.call-tree-url { - -moz-margin-start: 4px !important; - cursor: pointer; -} - -.call-tree-url:hover { - text-decoration: underline; -} - -.call-tree-url { - color: var(--theme-highlight-blue); -} - -.call-tree-line { - color: var(--theme-highlight-orange); -} - -.call-tree-column { - color: var(--theme-highlight-orange); - opacity: 0.6; -} - -.call-tree-host { - -moz-margin-start: 8px !important; - font-size: 90%; - color: var(--theme-content-color2); -} - -.call-tree-name[value=""], -.call-tree-url[value=""], -.call-tree-line[value=""], -.call-tree-column[value=""], -.call-tree-host[value=""] { - display: none; -} - -.call-tree-zoom { - -moz-appearance: none; - background-color: transparent; - background-position: center; - background-repeat: no-repeat; - background-size: 11px; - min-width: 11px; - -moz-margin-start: 8px !important; - cursor: zoom-in; - opacity: 0; -} - -.theme-dark .call-tree-zoom { - background-image: url(magnifying-glass.png); -} - -.theme-light .call-tree-zoom { - background-image: url(magnifying-glass-light.png); -} - -@media (min-resolution: 1.25dppx) { - .theme-dark .call-tree-zoom { - background-image: url(magnifying-glass@2x.png); - } - - .theme-light .call-tree-zoom { - background-image: url(magnifying-glass-light@2x.png); - } -} - -.call-tree-item:hover .call-tree-zoom { - transition: opacity 0.3s ease-in; - opacity: 1; -} - -.call-tree-item:hover .call-tree-zoom:hover { - opacity: 0; -} - -.call-tree-category { - transform: scale(0.75); - transform-origin: center right; -} - -#profile-content tab label { - margin-bottom: 4px; -} diff --git a/arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg b/arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg new file mode 100644 index 0000000..830d5fa --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/ruleview.css b/arc-firefox-theme/chrome/browser/devtools/ruleview.css index 8c2e3d1..c38224c 100644 --- a/arc-firefox-theme/chrome/browser/devtools/ruleview.css +++ b/arc-firefox-theme/chrome/browser/devtools/ruleview.css @@ -16,15 +16,15 @@ } .ruleview-rule-source { - -moz-padding-start: 5px; text-align: end; float: right; -moz-user-select: none; + margin-bottom: 2px; } -.ruleview-rule-source, .ruleview-rule-source > label { cursor: pointer; + margin: 0; } .ruleview-rule-source[unselectable], @@ -57,7 +57,11 @@ padding: 2px 4px; } -/* User agent styles are not editable, display them differently */ +/** + * Display rules that don't match the current selected element and uneditable + * user agent styles differently + */ +.ruleview-rule[unmatched=true], .ruleview-rule[uneditable=true] { background: var(--theme-tab-toolbar-background); } @@ -158,9 +162,9 @@ .ruleview-swatch { cursor: pointer; border-radius: 50%; - width: 1em; - height: 1em; - vertical-align: text-top; + width: 0.9em; + height: 0.9em; + vertical-align: middle; -moz-margin-end: 5px; display: inline-block; position: relative; @@ -262,3 +266,39 @@ .ruleview-selectorhighlighter.highlighted { background-position: -16px 0; } + +#ruleview-add-rule-button::before { + background-image: url("chrome://browser/skin/devtools/add.svg"); + background-size: cover; +} + +#pseudo-class-panel-toggle::before { + background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class"); + background-size: cover; +} +#pseudo-class-panel-toggle[checked]::before { + background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked"); + filter: none !important; +} + +/** + * These buttons are using opacity instead of background color to indicate + * the state + */ +#ruleview-add-rule-button, +#pseudo-class-panel-toggle { + opacity: 0.8; +} + +#ruleview-add-rule-button:not([disabled]):hover, +#pseudo-class-panel-toggle:hover, +#pseudo-class-panel-toggle[checked] { + opacity: 1; +} + +#ruleview-add-rule-button, +#pseudo-class-panel-toggle, +#pseudo-class-panel-toggle:hover, +#pseudo-class-panel-toggle[checked]::before { + background-color: transparent !important; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg index 77779e8..422a7ce 100644 --- a/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg +++ b/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg @@ -2,20 +2,14 @@ - + - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg index fc65d21..a8f9fd8 100644 --- a/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg +++ b/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg @@ -2,20 +2,14 @@ - + - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg index 205b744..066ef44 100644 --- a/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg +++ b/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg @@ -2,20 +2,14 @@ - + - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg b/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg index e050d20..1919e2c 100644 --- a/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg +++ b/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg @@ -2,36 +2,25 @@ - - - - - - - - + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg b/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg index ae294f6..998f21b 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg b/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg index 128e6e8..655d482 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg @@ -1,7 +1,10 @@ - - - - - - + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg b/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg index 5a8cbb8..45ec67f 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg @@ -1,9 +1,12 @@ - - - - - - - - + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-network.svg b/arc-firefox-theme/chrome/browser/devtools/tool-network.svg index bec394d..8e232d6 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-network.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-network.svg @@ -1,36 +1,39 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-options.svg b/arc-firefox-theme/chrome/browser/devtools/tool-options.svg index 62a6d75..2885ef9 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-options.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-options.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg b/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg index eff1673..0882cca 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg @@ -1,14 +1,17 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg b/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg index d8e1bdd..8441af3 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg @@ -1,14 +1,17 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg b/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg index ad2133a..c1e8e08 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg @@ -1,6 +1,9 @@ - - - - - + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg b/arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg new file mode 100644 index 0000000..e4e239a --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg b/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg index 7f5013b..8c2c291 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg @@ -1,7 +1,10 @@ - - - - - - + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg b/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg index ac1f5c7..e123f45 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg @@ -1,6 +1,9 @@ - - - - - + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg b/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg index 59d9d90..cd317de 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg @@ -1,3 +1,6 @@ - + + - \ No newline at end of file + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg b/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg index 0739e82..f62307d 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.css b/arc-firefox-theme/chrome/browser/devtools/webconsole.css index 7b89259..d875c23 100644 --- a/arc-firefox-theme/chrome/browser/devtools/webconsole.css +++ b/arc-firefox-theme/chrome/browser/devtools/webconsole.css @@ -27,10 +27,11 @@ a { box-sizing: border-box; } +.message > .prefix, .message > .timestamp { flex: none; color: GrayText; - margin: 4px 6px 0 0; + margin: 3px 6px 0 0; } .message > .indent { @@ -47,19 +48,17 @@ a { .message > .icon::before { content: ""; - background-image: url(chrome://browser/skin/devtools/webconsole.png); - background-position: 8px 8px; + background-image: url(chrome://browser/skin/devtools/webconsole.svg); + background-position: 12px 12px; background-repeat: no-repeat; - background-size: 48px 40px; - width: 8px; - height: 8px; + background-size: 72px 60px; + width: 12px; + height: 12px; display: inline-block; } -@media (min-resolution: 1.25dppx) { - .message > .icon::before { - background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); - } +.theme-light .message > .icon::before { + background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons); } .message > .message-body-wrapper { @@ -231,7 +230,7 @@ a { } .message[category=network][severity=error] > .icon::before { - background-position: -8px 0; + background-position: -12px 0; } .message[category=network] > .message-body { @@ -288,11 +287,11 @@ a { } .message[category=cssparser][severity=error] > .icon::before { - background-position: -8px -8px; + background-position: -12px -12px; } .message[category=cssparser][severity=warn] > .icon::before { - background-position: -16px -8px; + background-position: -24px -12px; } /* JS styles */ @@ -306,11 +305,11 @@ a { } .message[category=exception][severity=error] > .icon::before { - background-position: -8px -16px; + background-position: -12px -24px; } .message[category=exception][severity=warn] > .icon::before { - background-position: -16px -16px; + background-position: -24px -24px; } /* Web Developer styles */ @@ -325,15 +324,15 @@ a { .message[category=console][severity=error] > .icon::before, .message[category=output][severity=error] > .icon::before { - background-position: -8px -24px; + background-position: -12px -36px; } .message[category=console][severity=warn] > .icon::before { - background-position: -16px -24px; + background-position: -24px -36px; } .message[category=console][severity=info] > .icon::before { - background-position: -24px -24px; + background-position: -36px -36px; } /* Input and output styles */ @@ -343,11 +342,11 @@ a { } .message[category=input] > .icon::before { - background-position: -32px -24px; + background-position: -48px -36px; } .message[category=output] > .icon::before { - background-position: -40px -24px; + background-position: -60px -36px; } /* JSTerm Styles */ @@ -414,11 +413,11 @@ a { } .message[category=security][severity=error] > .icon::before { - background-position: -8px -32px; + background-position: -12px -48px; } .message[category=security][severity=warn] > .icon::before { - background-position: -16px -32px; + background-position: -24px -48px; } .navigation-marker { diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.png b/arc-firefox-theme/chrome/browser/devtools/webconsole.png deleted file mode 100644 index 8aee790..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/webconsole.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.svg b/arc-firefox-theme/chrome/browser/devtools/webconsole.svg new file mode 100644 index 0000000..6c21e54 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/webconsole.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png b/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png deleted file mode 100644 index 2d5e97f..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/widgets.css b/arc-firefox-theme/chrome/browser/devtools/widgets.css index 0ef2f9f..17a96ad 100644 --- a/arc-firefox-theme/chrome/browser/devtools/widgets.css +++ b/arc-firefox-theme/chrome/browser/devtools/widgets.css @@ -1018,10 +1018,6 @@ /* Bar graph widget */ -.bar-graph-widget-canvas { - background: #f7f7f7; -} - .bar-graph-widget-legend { position: absolute; top: 4px; diff --git a/arc-firefox-theme/chrome/browser/drm-icon.svg b/arc-firefox-theme/chrome/browser/drm-icon.svg index 3ae6a57..bd7c7ba 100644 --- a/arc-firefox-theme/chrome/browser/drm-icon.svg +++ b/arc-firefox-theme/chrome/browser/drm-icon.svg @@ -1,6 +1,8 @@ - + + - - - - - - - - + + + + - - + - - + - - - - + + + - - - - + + + - - - - + + + - - - - + + + - - - - + + + - - - - + + + - - + - diff --git a/arc-firefox-theme/chrome/browser/newtab/newTab.css b/arc-firefox-theme/chrome/browser/newtab/newTab.css index 67dbf81..81042b4 100644 --- a/arc-firefox-theme/chrome/browser/newtab/newTab.css +++ b/arc-firefox-theme/chrome/browser/newtab/newTab.css @@ -152,7 +152,6 @@ } /* TITLES */ -#newtab-intro-what, .newtab-sponsored, .newtab-title, .newtab-suggested { @@ -236,7 +235,6 @@ width: 16px; } -#newtab-intro-panel, .newtab-title { font-family: sans-serif; } diff --git a/arc-firefox-theme/chrome/browser/preferences/aboutPermissions.css b/arc-firefox-theme/chrome/browser/preferences/aboutPermissions.css index 1de69ff..a7eaff1 100644 --- a/arc-firefox-theme/chrome/browser/preferences/aboutPermissions.css +++ b/arc-firefox-theme/chrome/browser/preferences/aboutPermissions.css @@ -2,13 +2,16 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -@import url("chrome://global/skin/inContentUI.css"); +@import url("chrome://global/skin/in-content/common.css"); +#permissions-content { + padding-top: 48px; + -moz-padding-end: 0; /* no padding to move the scroll bar to the edge */ +} /* sites box */ #sites-box { - padding: 10px; width: 25em; } @@ -39,13 +42,17 @@ /* permissions box */ #permissions-box { - padding-top: 10px; + -moz-padding-start: 10px; +} + +#permissions-list { overflow-y: auto; + padding-top: 5px; + -moz-padding-end: 44px; } #site-description { font-size: 125%; - -moz-margin-start: 6px; /* to match button margin */ } #site-label { @@ -57,7 +64,15 @@ #defaults-description { font-size: 125%; font-weight: bold; - -moz-margin-start: 6px; +} + +#header-deck { + -moz-margin-end: 44px; +} + +#site-header, +#defaults-header { + margin-bottom: 1px; } .pref-item { @@ -109,11 +124,16 @@ .pref-title { font-size: 125%; + -moz-margin-start: 4px; margin-bottom: 0; font-weight: bold; } .pref-menulist { - margin-left: 6px; - margin-right: 6px; + min-width: 10em; + } + +#cookies-label, +#passwords-label { + -moz-margin-start: 4px; /* align with the menulists */ } diff --git a/arc-firefox-theme/chrome/browser/preferences/in-content/default-profile-image.svg b/arc-firefox-theme/chrome/browser/preferences/in-content/default-profile-image.svg deleted file mode 100644 index c38dec5..0000000 --- a/arc-firefox-theme/chrome/browser/preferences/in-content/default-profile-image.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/preferences/in-content/icons.svg b/arc-firefox-theme/chrome/browser/preferences/in-content/icons.svg index b74eb6d..2d0b671 100644 --- a/arc-firefox-theme/chrome/browser/preferences/in-content/icons.svg +++ b/arc-firefox-theme/chrome/browser/preferences/in-content/icons.svg @@ -1,7 +1,8 @@ - + + - + - - + + - + - + - + - + - + - + - - + + diff --git a/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css b/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css index 0a19818..28f5fc3 100644 --- a/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css +++ b/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css @@ -9,7 +9,6 @@ padding: 0; font: message-box; font-size: 1.25rem; - line-height: 22px; } * { @@ -221,7 +220,7 @@ description > html|a { border-radius: 50%; border-width: 5px; border-color: red; - background-image: url(chrome://browser/skin/preferences/in-content/default-profile-image.svg); + background-image: url(chrome://browser/skin/fxa/default-profile-image.svg); background-size: contain; cursor: pointer; -moz-margin-end: 15px; @@ -322,15 +321,17 @@ description > html|a { #dialogTitle { text-align: center; + -moz-user-select: none; } .close-icon { background-color: transparent !important; border: none; box-shadow: none; - height: 18px; padding: 0; - min-width: 18px; + height: auto; + min-height: 16px; + min-width: 0; } #dialogBox > .groupbox-body { @@ -387,6 +388,19 @@ description > html|a { to { opacity: 1; } } +/** + * Sync + */ + +#fxaDeviceName { + margin: 14px 0px; +} + +#fxaSyncComputerName.plain { + background-color: transparent; + opacity: 1; +} + .treecol-sortdirection { /* override the Linux only toolkit rule */ -moz-appearance: none; diff --git a/arc-firefox-theme/chrome/browser/readerMode.svg b/arc-firefox-theme/chrome/browser/readerMode.svg index 3d024ea..9293d1d 100644 --- a/arc-firefox-theme/chrome/browser/readerMode.svg +++ b/arc-firefox-theme/chrome/browser/readerMode.svg @@ -1,34 +1,29 @@ - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/readinglist/icons.svg b/arc-firefox-theme/chrome/browser/readinglist/icons.svg index 6aa0159..f6bb404 100644 --- a/arc-firefox-theme/chrome/browser/readinglist/icons.svg +++ b/arc-firefox-theme/chrome/browser/readinglist/icons.svg @@ -2,55 +2,42 @@ - - + - - - - - - - - - - + + + + + + diff --git a/arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg b/arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg index 0a24a67..58b18c9 100644 --- a/arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg +++ b/arc-firefox-theme/chrome/browser/readinglist/readinglist-icon.svg @@ -1,5 +1,8 @@ - + + diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss index 23675f2..358422c 100644 --- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss +++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss @@ -37,7 +37,6 @@ $darker_asset_path_2: if($darker=='true', 'dark', $asset_path); --verified-identity-box-backgroundcolor: transparent; } - #menubar-items { -moz-box-orient: vertical; /* for flex hack */ } @@ -1688,7 +1687,7 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { } //#urlbar { -// background-color: $entry_bg; +// background-color: -moz-field; //} .urlbar-textbox-container { @@ -1742,9 +1741,9 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { -moz-box-align: center; } -.urlbar-icon { - //padding: 0 3px; -} +//.urlbar-icon { +// padding: 0 3px; +//} #urlbar-search-splitter { -moz-appearance: none; @@ -1752,14 +1751,14 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { //-moz-margin-start: -4px; } -#urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox { - //-moz-margin-start: 0; -} +//#urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox { +// -moz-margin-start: 0; +//} #urlbar-display-box { margin-top: -1px; margin-bottom: -1px; - -moz-border-end: 1px solid red; + -moz-border-end: 1px solid #AAA; -moz-margin-end: 3px; } @@ -1920,21 +1919,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box opacity: 0.3; } -#identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { - list-style-image: url("chrome://branding/content/icon64.png"); -} - -#identity-popup-brandName { - font-weight: bold; - font-size: 1.25em; - margin-top: .5em; - margin-bottom: .5em; -} - -#identity-popup-content-box { - max-width: 50ch; -} - @media not all and (min-resolution: 1.1dppx) { #page-proxy-favicon { -moz-image-region: rect(0, 16px, 16px, 0); @@ -1988,11 +1972,14 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #identity-box[open=true] > #page-proxy-favicon { -moz-image-region: rect(0, 96px, 32px, 64px); } +} - #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { - list-style-image: url("chrome://branding/content/icon128.png"); - -moz-image-region: rect(0, 128px, 128px, 0); - } +#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon { + -moz-image-region: inherit; + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; + opacity: 1; } #page-proxy-favicon { @@ -2002,129 +1989,48 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box -moz-margin-end: 1px; } -/* Identity popup icons */ -#identity-popup-icon { - height: 64px; - width: 64px; - padding: 0; - list-style-image: url("chrome://browser/skin/identity.png"); - -moz-image-region: rect(0px, 64px, 64px, 0px); -} - -#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(64px, 64px, 128px, 0px); -} - -#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(128px, 64px, 192px, 0px); -} - -/* Identity popup body text */ -.identity-popup-description { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 2px 0 4px; -} - -.identity-popup-label { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 0; -} - -#identity-popup-content-host , -#identity-popup-content-owner { - font-weight: bold; - max-width: 300px; -} - -#identity-popup-content-host , -#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { - font-size: 140%; -} - -#identity-popup-content-owner { - margin-bottom: 0 !important; -} - -#identity-popup-content-verifier { - margin: 4px 0 2px; -} - -#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption , -#identity-popup-content-box.verifiedDomain > #identity-popup-encryption { - margin-top: 10px; - -moz-margin-start: -18px; -} - -#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon , -#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { - list-style-image: url("chrome://browser/skin/Secure.png"); -} - -#identity-popup-help-icon { - -moz-appearance: none; - margin-left: 0px; - border: none; - background: none; - min-width: 0; - list-style-image: url("moz-icon://stock/gtk-dialog-question?size=16"); - cursor: pointer; -} -#identity-popup-help-icon > .button-box > .button-text { - display: none; +.popup-notification-icon { + width: 64px; + height: 64px; + -moz-margin-end: 10px; } -#identity-popup-help-icon > .button-box > .button-icon { - height: 16px; - width: 16px; +.popup-notification-icon[popupid="geolocation"] { + list-style-image: url(chrome://browser/skin/Geolocation-64.png); } -#identity-popup-help-icon:-moz-focusring { - outline: 1px dotted; - outline-offset: 1px; +.popup-notification-icon[popupid="push"] { + list-style-image: url(chrome://browser/skin/Push-64.png); } -#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; +.popup-notification-icon[popupid="xpinstall-disabled"], +.popup-notification-icon[popupid="addon-install-blocked"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } -#identity-popup-container { - min-width: 280px; - padding: 10px; +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } -#identity-popup-button-container { - background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent); - padding: 10px; - margin-top: 5px; +.popup-notification-icon[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } - -.popup-notification-icon { - width: 64px; - height: 64px; - -moz-margin-end: 10px; +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } -.popup-notification-icon[popupid="geolocation"] { - list-style-image: url(chrome://browser/skin/Geolocation-64.png); +#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } -.popup-notification-icon[popupid="push"] { - list-style-image: url(chrome://browser/skin/Push-64.png); +.popup-notification-icon[popupid="addon-install-complete"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } -.popup-notification-icon[popupid="xpinstall-disabled"], -.popup-notification-icon[popupid="addon-progress"], -.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="addon-install-restart"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } .popup-notification-icon[popupid="click-to-play-plugins"] { @@ -2222,7 +2128,15 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box } #addons-notification-icon { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); +} + +#addons-notification-icon:hover { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); +} + +#addons-notification-icon:hover:active { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); } .indexedDB-notification-icon, @@ -2234,6 +2148,12 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } +#login-fill-notification-icon { + /* Temporary icon until the capture and fill doorhangers are unified. */ + list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); + transform: scaleX(-1); +} + .webapps-notification-icon, #webapps-notification-icon { list-style-image: url(chrome://global/skin/icons/webapps-16.png); @@ -2457,10 +2377,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(moz-icon://stock/gtk-dialog-question?size=16); } -#pointerLock-cancel { - margin: 0px; -} - /* Translation infobar */ notification[value="translation"] .messageImage { @@ -2719,12 +2635,10 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- } #urlbar-reload-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, hsla(200,100%,70%,.2), transparent); -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { - background-image: radial-gradient(circle closest-side, hsla(200,100%,60%,.1), transparent); -moz-image-region: rect(28px, 14px, 42px, 0); } @@ -2737,12 +2651,10 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- } #urlbar-go-button:hover { - background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.2), transparent); -moz-image-region: rect(14px, 42px, 28px, 28px); } #urlbar-go-button:hover:active { - background-image: radial-gradient(circle closest-side, hsla(110,70%,50%,.1), transparent); -moz-image-region: rect(28px, 42px, 42px, 28px); } @@ -2755,12 +2667,10 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- } #urlbar-stop-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.3), transparent); -moz-image-region: rect(14px, 28px, 28px, 14px); } #urlbar-stop-button:hover:active { - background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.1), transparent); -moz-image-region: rect(28px, 28px, 42px, 14px); } @@ -4416,6 +4326,41 @@ notification.pluginVulnerable .messageImage { .popup-notification-footer[popupid="bad-content"] { padding-top: 1em; } +#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { + /* Since we display a sliding subview that extends to the border, we cannot + * keep the default padding of arrow panels. We use the same padding in the + * individual content views instead. Since we removed the padding, we also + * have to ensure the contents are clipped to the border box. */ + padding: 0; + overflow: hidden; +} + +#login-fill-mainview, +#login-fill-details { + padding: var(--panel-arrowcontent-padding); +} + +#login-fill-doorhanger[inDetailView] > #login-fill-mainview { + transform: translateX(-14px); +} + +#login-fill-mainview, +#login-fill-details { + transition: transform 150ms; +} + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { + transform: translateX(105%); +} + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { + transform: translateX(-105%); +} + +#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { + background-color: hsla(210,4%,10%,.1); +} + #login-fill-testing { color: #b33; font-weight: bold; @@ -4426,16 +4371,41 @@ notification.pluginVulnerable .messageImage { max-height: 20em; } +.login-fill-item[disabled] { + color: #888; + background-color: #fff; +} + +.login-fill-item[disabled][selected] { + background-color: #eef; +} + .login-hostname { margin: 4px; font-weight: bold; } +.login-fill-item.different-hostname > .login-hostname { + color: #888; + font-style: italic; +} + .login-username { margin: 4px; color: #888; } +#login-fill-details { + padding: 4px; + background: var(--panel-arrowcontent-background); + color: var(--panel-arrowcontent-color); + background-clip: padding-box; + border-left: 1px solid hsla(210,4%,10%,.3); + box-shadow: 0 3px 5px hsla(210,4%,10%,.1), + 0 0 7px hsla(210,4%,10%,.1); + -moz-margin-start: 38px; +} + /* 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/. */ @@ -4642,10 +4612,6 @@ toolbar[brighttext] #downloads-indicator-counter { /* Social toolbar item */ -#social-undoactivation-button { - -moz-margin-start: 0; /* override default label margin to match description margin */ -} - .social-activation-icon { width: auto; height: auto; @@ -4875,7 +4841,6 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; - margin: -285px 0 0; overflow: hidden; } @@ -5842,6 +5807,18 @@ notification.heartbeat { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } +#context-bookmarkpage[starred=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); +} + +#context-bookmarkpage[starred=true][_moz-menuactive=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); +} + +#context-bookmarkpage[starred=true][disabled=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); +} + #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css index 1a8a7af..63eb7bb 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css @@ -1313,7 +1313,7 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #urlbar-display-box { margin-top: -1px; margin-bottom: -1px; - -moz-border-end: 1px solid red; + -moz-border-end: 1px solid #AAA; -moz-margin-end: 3px; } .urlbar-display { @@ -1413,18 +1413,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.3; } -#identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { - list-style-image: url("chrome://branding/content/icon64.png"); } - -#identity-popup-brandName { - font-weight: bold; - font-size: 1.25em; - margin-top: .5em; - margin-bottom: .5em; } - -#identity-popup-content-box { - max-width: 50ch; } - @media not all and (min-resolution: 1.1dppx) { #page-proxy-favicon { -moz-image-region: rect(0, 16px, 16px, 0); } @@ -1463,98 +1451,20 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #identity-box:hover:active > #page-proxy-favicon, #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 96px, 32px, 64px); } + -moz-image-region: rect(0, 96px, 32px, 64px); } } +#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon { + -moz-image-region: inherit; + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; + opacity: 1; } - #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { - list-style-image: url("chrome://branding/content/icon128.png"); - -moz-image-region: rect(0, 128px, 128px, 0); } } #page-proxy-favicon { margin-top: 1px; margin-bottom: 1px; -moz-margin-start: 3px; -moz-margin-end: 1px; } -/* Identity popup icons */ -#identity-popup-icon { - height: 64px; - width: 64px; - padding: 0; - list-style-image: url("chrome://browser/skin/identity.png"); - -moz-image-region: rect(0px, 64px, 64px, 0px); } - -#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(64px, 64px, 128px, 0px); } - -#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(128px, 64px, 192px, 0px); } - -/* Identity popup body text */ -.identity-popup-description { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 2px 0 4px; } - -.identity-popup-label { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 0; } - -#identity-popup-content-host, -#identity-popup-content-owner { - font-weight: bold; - max-width: 300px; } - -#identity-popup-content-host, -#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { - font-size: 140%; } - -#identity-popup-content-owner { - margin-bottom: 0 !important; } - -#identity-popup-content-verifier { - margin: 4px 0 2px; } - -#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption, -#identity-popup-content-box.verifiedDomain > #identity-popup-encryption { - margin-top: 10px; - -moz-margin-start: -18px; } - -#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon, -#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { - list-style-image: url("chrome://browser/skin/Secure.png"); } - -#identity-popup-help-icon { - -moz-appearance: none; - margin-left: 0px; - border: none; - background: none; - min-width: 0; - list-style-image: url("moz-icon://stock/gtk-dialog-question?size=16"); - cursor: pointer; } - -#identity-popup-help-icon > .button-box > .button-text { - display: none; } - -#identity-popup-help-icon > .button-box > .button-icon { - height: 16px; - width: 16px; } - -#identity-popup-help-icon:-moz-focusring { - outline: 1px dotted; - outline-offset: 1px; } - -#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; } - -#identity-popup-container { - min-width: 280px; - padding: 10px; } - -#identity-popup-button-container { - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 60%, transparent); - padding: 10px; - margin-top: 5px; } - .popup-notification-icon { width: 64px; height: 64px; @@ -1567,14 +1477,26 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://browser/skin/Push-64.png); } .popup-notification-icon[popupid="xpinstall-disabled"], -.popup-notification-icon[popupid="addon-progress"], -.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-blocked"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } + +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } + +.popup-notification-icon[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } + +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } + +#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } + .popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); - width: 32px; - height: 32px; } + list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } + +.popup-notification-icon[popupid="addon-install-restart"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } .popup-notification-icon[popupid="click-to-play-plugins"] { list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } @@ -1649,7 +1571,13 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://browser/skin/Push-16.png); } #addons-notification-icon { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); } + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); } + +#addons-notification-icon:hover { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); } + +#addons-notification-icon:hover:active { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); } .indexedDB-notification-icon, #indexedDB-notification-icon { @@ -1658,6 +1586,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #password-notification-icon { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } +#login-fill-notification-icon { + /* Temporary icon until the capture and fill doorhangers are unified. */ + list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); + transform: scaleX(-1); } + .webapps-notification-icon, #webapps-notification-icon { list-style-image: url(chrome://global/skin/icons/webapps-16.png); } @@ -1834,9 +1767,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #indexedDB-notification-icon { list-style-image: url(moz-icon://stock/gtk-dialog-question?size=16); } -#pointerLock-cancel { - margin: 0px; } - /* Translation infobar */ notification[value="translation"] .messageImage { list-style-image: url(chrome://browser/skin/translation-16.png); @@ -2042,11 +1972,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 14px, 14px, 0); } #urlbar-reload-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, rgba(102, 204, 255, 0.2), transparent); -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { - background-image: radial-gradient(circle closest-side, rgba(51, 187, 255, 0.1), transparent); -moz-image-region: rect(28px, 14px, 42px, 0); } #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2056,11 +1984,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 42px, 14px, 28px); } #urlbar-go-button:hover { - background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.2), transparent); -moz-image-region: rect(14px, 42px, 28px, 28px); } #urlbar-go-button:hover:active { - background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.1), transparent); -moz-image-region: rect(28px, 42px, 42px, 28px); } #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2070,11 +1996,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 28px, 14px, 14px); } #urlbar-stop-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.3), transparent); -moz-image-region: rect(14px, 28px, 28px, 14px); } #urlbar-stop-button:hover:active { - background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.1), transparent); -moz-image-region: rect(28px, 28px, 42px, 14px); } @media (min-resolution: 1.1dppx) { @@ -3362,6 +3286,34 @@ notification.pluginVulnerable .messageImage { .popup-notification-footer[popupid="bad-content"] { padding-top: 1em; } +#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { + /* Since we display a sliding subview that extends to the border, we cannot + * keep the default padding of arrow panels. We use the same padding in the + * individual content views instead. Since we removed the padding, we also + * have to ensure the contents are clipped to the border box. */ + padding: 0; + overflow: hidden; } + +#login-fill-mainview, +#login-fill-details { + padding: var(--panel-arrowcontent-padding); } + +#login-fill-doorhanger[inDetailView] > #login-fill-mainview { + transform: translateX(-14px); } + +#login-fill-mainview, +#login-fill-details { + transition: transform 150ms; } + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { + transform: translateX(105%); } + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { + transform: translateX(-105%); } + +#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { + background-color: rgba(24, 26, 27, 0.1); } + #login-fill-testing { color: #b33; font-weight: bold; } @@ -3370,14 +3322,34 @@ notification.pluginVulnerable .messageImage { border: 1px solid black; max-height: 20em; } +.login-fill-item[disabled] { + color: #888; + background-color: #fff; } + +.login-fill-item[disabled][selected] { + background-color: #eef; } + .login-hostname { margin: 4px; font-weight: bold; } +.login-fill-item.different-hostname > .login-hostname { + color: #888; + font-style: italic; } + .login-username { margin: 4px; color: #888; } +#login-fill-details { + padding: 4px; + background: var(--panel-arrowcontent-background); + color: var(--panel-arrowcontent-color); + background-clip: padding-box; + border-left: 1px solid rgba(24, 26, 27, 0.3); + box-shadow: 0 3px 5px rgba(24, 26, 27, 0.1), 0 0 7px rgba(24, 26, 27, 0.1); + -moz-margin-start: 38px; } + /* 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/. */ @@ -3547,10 +3519,6 @@ toolbar[brighttext] #downloads-indicator-counter { -moz-margin-end: 2px; } /* Social toolbar item */ -#social-undoactivation-button { - -moz-margin-start: 0; - /* override default label margin to match description margin */ } - .social-activation-icon { width: auto; height: auto; @@ -3736,7 +3704,6 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; - margin: -285px 0 0; overflow: hidden; } chatbar { @@ -4516,6 +4483,15 @@ notification.heartbeat { #context-bookmarkpage[disabled=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } +#context-bookmarkpage[starred=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } + +#context-bookmarkpage[starred=true][_moz-menuactive=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); } + +#context-bookmarkpage[starred=true][disabled=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); } + #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css index fa3a898..a9adffc 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css @@ -1313,7 +1313,7 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #urlbar-display-box { margin-top: -1px; margin-bottom: -1px; - -moz-border-end: 1px solid red; + -moz-border-end: 1px solid #AAA; -moz-margin-end: 3px; } .urlbar-display { @@ -1413,18 +1413,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.3; } -#identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { - list-style-image: url("chrome://branding/content/icon64.png"); } - -#identity-popup-brandName { - font-weight: bold; - font-size: 1.25em; - margin-top: .5em; - margin-bottom: .5em; } - -#identity-popup-content-box { - max-width: 50ch; } - @media not all and (min-resolution: 1.1dppx) { #page-proxy-favicon { -moz-image-region: rect(0, 16px, 16px, 0); } @@ -1463,98 +1451,20 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #identity-box:hover:active > #page-proxy-favicon, #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 96px, 32px, 64px); } + -moz-image-region: rect(0, 96px, 32px, 64px); } } +#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon { + -moz-image-region: inherit; + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; + opacity: 1; } - #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { - list-style-image: url("chrome://branding/content/icon128.png"); - -moz-image-region: rect(0, 128px, 128px, 0); } } #page-proxy-favicon { margin-top: 1px; margin-bottom: 1px; -moz-margin-start: 3px; -moz-margin-end: 1px; } -/* Identity popup icons */ -#identity-popup-icon { - height: 64px; - width: 64px; - padding: 0; - list-style-image: url("chrome://browser/skin/identity.png"); - -moz-image-region: rect(0px, 64px, 64px, 0px); } - -#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(64px, 64px, 128px, 0px); } - -#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(128px, 64px, 192px, 0px); } - -/* Identity popup body text */ -.identity-popup-description { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 2px 0 4px; } - -.identity-popup-label { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 0; } - -#identity-popup-content-host, -#identity-popup-content-owner { - font-weight: bold; - max-width: 300px; } - -#identity-popup-content-host, -#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { - font-size: 140%; } - -#identity-popup-content-owner { - margin-bottom: 0 !important; } - -#identity-popup-content-verifier { - margin: 4px 0 2px; } - -#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption, -#identity-popup-content-box.verifiedDomain > #identity-popup-encryption { - margin-top: 10px; - -moz-margin-start: -18px; } - -#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon, -#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { - list-style-image: url("chrome://browser/skin/Secure.png"); } - -#identity-popup-help-icon { - -moz-appearance: none; - margin-left: 0px; - border: none; - background: none; - min-width: 0; - list-style-image: url("moz-icon://stock/gtk-dialog-question?size=16"); - cursor: pointer; } - -#identity-popup-help-icon > .button-box > .button-text { - display: none; } - -#identity-popup-help-icon > .button-box > .button-icon { - height: 16px; - width: 16px; } - -#identity-popup-help-icon:-moz-focusring { - outline: 1px dotted; - outline-offset: 1px; } - -#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; } - -#identity-popup-container { - min-width: 280px; - padding: 10px; } - -#identity-popup-button-container { - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 60%, transparent); - padding: 10px; - margin-top: 5px; } - .popup-notification-icon { width: 64px; height: 64px; @@ -1567,14 +1477,26 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://browser/skin/Push-64.png); } .popup-notification-icon[popupid="xpinstall-disabled"], -.popup-notification-icon[popupid="addon-progress"], -.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-blocked"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } + +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } + +.popup-notification-icon[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } + +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } + +#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } + .popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); - width: 32px; - height: 32px; } + list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } + +.popup-notification-icon[popupid="addon-install-restart"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } .popup-notification-icon[popupid="click-to-play-plugins"] { list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } @@ -1649,7 +1571,13 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://browser/skin/Push-16.png); } #addons-notification-icon { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); } + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); } + +#addons-notification-icon:hover { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); } + +#addons-notification-icon:hover:active { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); } .indexedDB-notification-icon, #indexedDB-notification-icon { @@ -1658,6 +1586,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #password-notification-icon { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } +#login-fill-notification-icon { + /* Temporary icon until the capture and fill doorhangers are unified. */ + list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); + transform: scaleX(-1); } + .webapps-notification-icon, #webapps-notification-icon { list-style-image: url(chrome://global/skin/icons/webapps-16.png); } @@ -1834,9 +1767,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #indexedDB-notification-icon { list-style-image: url(moz-icon://stock/gtk-dialog-question?size=16); } -#pointerLock-cancel { - margin: 0px; } - /* Translation infobar */ notification[value="translation"] .messageImage { list-style-image: url(chrome://browser/skin/translation-16.png); @@ -2042,11 +1972,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 14px, 14px, 0); } #urlbar-reload-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, rgba(102, 204, 255, 0.2), transparent); -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { - background-image: radial-gradient(circle closest-side, rgba(51, 187, 255, 0.1), transparent); -moz-image-region: rect(28px, 14px, 42px, 0); } #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2056,11 +1984,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 42px, 14px, 28px); } #urlbar-go-button:hover { - background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.2), transparent); -moz-image-region: rect(14px, 42px, 28px, 28px); } #urlbar-go-button:hover:active { - background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.1), transparent); -moz-image-region: rect(28px, 42px, 42px, 28px); } #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2070,11 +1996,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 28px, 14px, 14px); } #urlbar-stop-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.3), transparent); -moz-image-region: rect(14px, 28px, 28px, 14px); } #urlbar-stop-button:hover:active { - background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.1), transparent); -moz-image-region: rect(28px, 28px, 42px, 14px); } @media (min-resolution: 1.1dppx) { @@ -3362,6 +3286,34 @@ notification.pluginVulnerable .messageImage { .popup-notification-footer[popupid="bad-content"] { padding-top: 1em; } +#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { + /* Since we display a sliding subview that extends to the border, we cannot + * keep the default padding of arrow panels. We use the same padding in the + * individual content views instead. Since we removed the padding, we also + * have to ensure the contents are clipped to the border box. */ + padding: 0; + overflow: hidden; } + +#login-fill-mainview, +#login-fill-details { + padding: var(--panel-arrowcontent-padding); } + +#login-fill-doorhanger[inDetailView] > #login-fill-mainview { + transform: translateX(-14px); } + +#login-fill-mainview, +#login-fill-details { + transition: transform 150ms; } + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { + transform: translateX(105%); } + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { + transform: translateX(-105%); } + +#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { + background-color: rgba(24, 26, 27, 0.1); } + #login-fill-testing { color: #b33; font-weight: bold; } @@ -3370,14 +3322,34 @@ notification.pluginVulnerable .messageImage { border: 1px solid black; max-height: 20em; } +.login-fill-item[disabled] { + color: #888; + background-color: #fff; } + +.login-fill-item[disabled][selected] { + background-color: #eef; } + .login-hostname { margin: 4px; font-weight: bold; } +.login-fill-item.different-hostname > .login-hostname { + color: #888; + font-style: italic; } + .login-username { margin: 4px; color: #888; } +#login-fill-details { + padding: 4px; + background: var(--panel-arrowcontent-background); + color: var(--panel-arrowcontent-color); + background-clip: padding-box; + border-left: 1px solid rgba(24, 26, 27, 0.3); + box-shadow: 0 3px 5px rgba(24, 26, 27, 0.1), 0 0 7px rgba(24, 26, 27, 0.1); + -moz-margin-start: 38px; } + /* 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/. */ @@ -3547,10 +3519,6 @@ toolbar[brighttext] #downloads-indicator-counter { -moz-margin-end: 2px; } /* Social toolbar item */ -#social-undoactivation-button { - -moz-margin-start: 0; - /* override default label margin to match description margin */ } - .social-activation-icon { width: auto; height: auto; @@ -3736,7 +3704,6 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; - margin: -285px 0 0; overflow: hidden; } chatbar { @@ -4516,6 +4483,15 @@ notification.heartbeat { #context-bookmarkpage[disabled=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } +#context-bookmarkpage[starred=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } + +#context-bookmarkpage[starred=true][_moz-menuactive=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); } + +#context-bookmarkpage[starred=true][disabled=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); } + #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.css b/arc-firefox-theme/chrome/browser/sass/browser-light.css index e78c95e..9f57fa2 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-light.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css @@ -1313,7 +1313,7 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { #urlbar-display-box { margin-top: -1px; margin-bottom: -1px; - -moz-border-end: 1px solid red; + -moz-border-end: 1px solid #AAA; -moz-margin-end: 3px; } .urlbar-display { @@ -1413,18 +1413,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.3; } -#identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { - list-style-image: url("chrome://branding/content/icon64.png"); } - -#identity-popup-brandName { - font-weight: bold; - font-size: 1.25em; - margin-top: .5em; - margin-bottom: .5em; } - -#identity-popup-content-box { - max-width: 50ch; } - @media not all and (min-resolution: 1.1dppx) { #page-proxy-favicon { -moz-image-region: rect(0, 16px, 16px, 0); } @@ -1463,98 +1451,20 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #identity-box:hover:active > #page-proxy-favicon, #identity-box[open=true] > #page-proxy-favicon { - -moz-image-region: rect(0, 96px, 32px, 64px); } + -moz-image-region: rect(0, 96px, 32px, 64px); } } +#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon { + -moz-image-region: inherit; + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; + opacity: 1; } - #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon { - list-style-image: url("chrome://branding/content/icon128.png"); - -moz-image-region: rect(0, 128px, 128px, 0); } } #page-proxy-favicon { margin-top: 1px; margin-bottom: 1px; -moz-margin-start: 3px; -moz-margin-end: 1px; } -/* Identity popup icons */ -#identity-popup-icon { - height: 64px; - width: 64px; - padding: 0; - list-style-image: url("chrome://browser/skin/identity.png"); - -moz-image-region: rect(0px, 64px, 64px, 0px); } - -#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(64px, 64px, 128px, 0px); } - -#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(128px, 64px, 192px, 0px); } - -/* Identity popup body text */ -.identity-popup-description { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 2px 0 4px; } - -.identity-popup-label { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 0; } - -#identity-popup-content-host, -#identity-popup-content-owner { - font-weight: bold; - max-width: 300px; } - -#identity-popup-content-host, -#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { - font-size: 140%; } - -#identity-popup-content-owner { - margin-bottom: 0 !important; } - -#identity-popup-content-verifier { - margin: 4px 0 2px; } - -#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption, -#identity-popup-content-box.verifiedDomain > #identity-popup-encryption { - margin-top: 10px; - -moz-margin-start: -18px; } - -#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon, -#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { - list-style-image: url("chrome://browser/skin/Secure.png"); } - -#identity-popup-help-icon { - -moz-appearance: none; - margin-left: 0px; - border: none; - background: none; - min-width: 0; - list-style-image: url("moz-icon://stock/gtk-dialog-question?size=16"); - cursor: pointer; } - -#identity-popup-help-icon > .button-box > .button-text { - display: none; } - -#identity-popup-help-icon > .button-box > .button-icon { - height: 16px; - width: 16px; } - -#identity-popup-help-icon:-moz-focusring { - outline: 1px dotted; - outline-offset: 1px; } - -#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; } - -#identity-popup-container { - min-width: 280px; - padding: 10px; } - -#identity-popup-button-container { - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 60%, transparent); - padding: 10px; - margin-top: 5px; } - .popup-notification-icon { width: 64px; height: 64px; @@ -1567,14 +1477,26 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://browser/skin/Push-64.png); } .popup-notification-icon[popupid="xpinstall-disabled"], -.popup-notification-icon[popupid="addon-progress"], -.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-blocked"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } + +.popup-notification-icon[popupid="addon-progress"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg); } + +.popup-notification-icon[popupid="addon-install-failed"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg); } + +.popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg); } + +#addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg); } + .popup-notification-icon[popupid="addon-install-complete"] { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png); - width: 32px; - height: 32px; } + list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg); } + +.popup-notification-icon[popupid="addon-install-restart"] { + list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg); } .popup-notification-icon[popupid="click-to-play-plugins"] { list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png); } @@ -1649,7 +1571,13 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box list-style-image: url(chrome://browser/skin/Push-16.png); } #addons-notification-icon { - list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png); } + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); } + +#addons-notification-icon:hover { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover); } + +#addons-notification-icon:hover:active { + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active); } .indexedDB-notification-icon, #indexedDB-notification-icon { @@ -1658,6 +1586,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #password-notification-icon { list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); } +#login-fill-notification-icon { + /* Temporary icon until the capture and fill doorhangers are unified. */ + list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png); + transform: scaleX(-1); } + .webapps-notification-icon, #webapps-notification-icon { list-style-image: url(chrome://global/skin/icons/webapps-16.png); } @@ -1834,9 +1767,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box #indexedDB-notification-icon { list-style-image: url(moz-icon://stock/gtk-dialog-question?size=16); } -#pointerLock-cancel { - margin: 0px; } - /* Translation infobar */ notification[value="translation"] .messageImage { list-style-image: url(chrome://browser/skin/translation-16.png); @@ -2042,11 +1972,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 14px, 14px, 0); } #urlbar-reload-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, rgba(102, 204, 255, 0.2), transparent); -moz-image-region: rect(14px, 14px, 28px, 0); } #urlbar-reload-button:not([disabled]):hover:active { - background-image: radial-gradient(circle closest-side, rgba(51, 187, 255, 0.1), transparent); -moz-image-region: rect(28px, 14px, 42px, 0); } #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2056,11 +1984,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 42px, 14px, 28px); } #urlbar-go-button:hover { - background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.2), transparent); -moz-image-region: rect(14px, 42px, 28px, 28px); } #urlbar-go-button:hover:active { - background-image: radial-gradient(circle closest-side, rgba(68, 217, 38, 0.1), transparent); -moz-image-region: rect(28px, 42px, 42px, 28px); } #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { @@ -2070,11 +1996,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: rect(0, 28px, 14px, 14px); } #urlbar-stop-button:not([disabled]):hover { - background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.3), transparent); -moz-image-region: rect(14px, 28px, 28px, 14px); } #urlbar-stop-button:hover:active { - background-image: radial-gradient(circle closest-side, rgba(255, 138, 128, 0.1), transparent); -moz-image-region: rect(28px, 28px, 42px, 14px); } @media (min-resolution: 1.1dppx) { @@ -3362,6 +3286,34 @@ notification.pluginVulnerable .messageImage { .popup-notification-footer[popupid="bad-content"] { padding-top: 1em; } +#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { + /* Since we display a sliding subview that extends to the border, we cannot + * keep the default padding of arrow panels. We use the same padding in the + * individual content views instead. Since we removed the padding, we also + * have to ensure the contents are clipped to the border box. */ + padding: 0; + overflow: hidden; } + +#login-fill-mainview, +#login-fill-details { + padding: var(--panel-arrowcontent-padding); } + +#login-fill-doorhanger[inDetailView] > #login-fill-mainview { + transform: translateX(-14px); } + +#login-fill-mainview, +#login-fill-details { + transition: transform 150ms; } + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { + transform: translateX(105%); } + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { + transform: translateX(-105%); } + +#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { + background-color: rgba(24, 26, 27, 0.1); } + #login-fill-testing { color: #b33; font-weight: bold; } @@ -3370,14 +3322,34 @@ notification.pluginVulnerable .messageImage { border: 1px solid black; max-height: 20em; } +.login-fill-item[disabled] { + color: #888; + background-color: #fff; } + +.login-fill-item[disabled][selected] { + background-color: #eef; } + .login-hostname { margin: 4px; font-weight: bold; } +.login-fill-item.different-hostname > .login-hostname { + color: #888; + font-style: italic; } + .login-username { margin: 4px; color: #888; } +#login-fill-details { + padding: 4px; + background: var(--panel-arrowcontent-background); + color: var(--panel-arrowcontent-color); + background-clip: padding-box; + border-left: 1px solid rgba(24, 26, 27, 0.3); + box-shadow: 0 3px 5px rgba(24, 26, 27, 0.1), 0 0 7px rgba(24, 26, 27, 0.1); + -moz-margin-start: 38px; } + /* 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/. */ @@ -3547,10 +3519,6 @@ toolbar[brighttext] #downloads-indicator-counter { -moz-margin-end: 2px; } /* Social toolbar item */ -#social-undoactivation-button { - -moz-margin-start: 0; - /* override default label margin to match description margin */ } - .social-activation-icon { width: auto; height: auto; @@ -3736,7 +3704,6 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; - margin: -285px 0 0; overflow: hidden; } chatbar { @@ -4516,6 +4483,15 @@ notification.heartbeat { #context-bookmarkpage[disabled=true] { list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); } +#context-bookmarkpage[starred=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); } + +#context-bookmarkpage[starred=true][_moz-menuactive=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); } + +#context-bookmarkpage[starred=true][disabled=true] { + list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); } + #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { diff --git a/arc-firefox-theme/chrome/browser/search-history-icon.svg b/arc-firefox-theme/chrome/browser/search-history-icon.svg index be66d39..213694a 100644 --- a/arc-firefox-theme/chrome/browser/search-history-icon.svg +++ b/arc-firefox-theme/chrome/browser/search-history-icon.svg @@ -2,31 +2,21 @@ - - - - - - - + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/searchbar.css b/arc-firefox-theme/chrome/browser/searchbar.css index 02c8a01..4627bba 100644 --- a/arc-firefox-theme/chrome/browser/searchbar.css +++ b/arc-firefox-theme/chrome/browser/searchbar.css @@ -119,7 +119,7 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon -moz-box-align: center; } -.search-panel-current-engine:not([showonlysettings]) { +.search-panel-current-engine { border-bottom: 1px solid #ccc; } @@ -131,8 +131,17 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon color: #666; } +.search-panel-tree[collapsed=true] + .search-panel-header { + border-top: none; +} + +.search-panel-header > label { + margin-top: 2px !important; + margin-bottom: 1px !important; +} + .search-panel-current-input > label { - margin: 0 0 !important; + margin: 2px 0 1px !important; } .search-panel-input-value { @@ -159,7 +168,7 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon } .searchbar-engine-one-off-item:not(.last-row) { - box-sizing: padding-box; + box-sizing: content-box; border-bottom: 1px solid #ccc; } diff --git a/arc-firefox-theme/chrome/browser/session-restore.svg b/arc-firefox-theme/chrome/browser/session-restore.svg index aadee35..f545a33 100644 --- a/arc-firefox-theme/chrome/browser/session-restore.svg +++ b/arc-firefox-theme/chrome/browser/session-restore.svg @@ -1,12 +1,13 @@ - - - - - - - \ No newline at end of file + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/social/chat-icons.svg b/arc-firefox-theme/chrome/browser/social/chat-icons.svg index 272fe5b..a11bc65 100644 --- a/arc-firefox-theme/chrome/browser/social/chat-icons.svg +++ b/arc-firefox-theme/chrome/browser/social/chat-icons.svg @@ -2,44 +2,34 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/syncProgress.css b/arc-firefox-theme/chrome/browser/syncProgress.css deleted file mode 100644 index d7aa599..0000000 --- a/arc-firefox-theme/chrome/browser/syncProgress.css +++ /dev/null @@ -1,46 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -@import url(chrome://global/skin/inContentUI.css); - -:root { - height: 100%; - width: 100%; - padding: 0; -} - -body { - margin: 0; - padding: 0 2em; -} - -#floatingBox { - margin: 4em auto; - max-width: 40em; - min-width: 23em; - padding: 1em 1.5em; - position: relative; - text-align: center; -} - -#successLogo { - margin: 1em 2em; -} - -#loadingText { - margin: 2em 6em; -} - -#progressBar { - margin: 2em 10em; -} - -#uploadProgressBar{ - width: 100%; -} - -#bottomRow { - margin-top: 2em; - padding: 0; - text-align: end; -} diff --git a/arc-firefox-theme/chrome/browser/tab-crashed.svg b/arc-firefox-theme/chrome/browser/tab-crashed.svg index 9a656eb..41470df 100644 --- a/arc-firefox-theme/chrome/browser/tab-crashed.svg +++ b/arc-firefox-theme/chrome/browser/tab-crashed.svg @@ -1,16 +1,13 @@ - - - - - - - \ No newline at end of file + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/crashed.svg b/arc-firefox-theme/chrome/browser/tabbrowser/crashed.svg index 013e2b9..85f3d85 100644 --- a/arc-firefox-theme/chrome/browser/tabbrowser/crashed.svg +++ b/arc-firefox-theme/chrome/browser/tabbrowser/crashed.svg @@ -1,11 +1,14 @@ - - - - - + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/loading.png b/arc-firefox-theme/chrome/browser/tabbrowser/loading.png index 55f25e5..a2f9b79 100644 Binary files a/arc-firefox-theme/chrome/browser/tabbrowser/loading.png and b/arc-firefox-theme/chrome/browser/tabbrowser/loading.png differ diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-end.svg b/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-end.svg index ba68a06..72c2544 100644 --- a/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-end.svg +++ b/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-end.svg @@ -1,23 +1,14 @@ - - + - - + @@ -43,7 +32,6 @@ -
diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-start.svg b/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-start.svg index 383b5d4..2b8845e 100644 --- a/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-start.svg +++ b/arc-firefox-theme/chrome/browser/tabbrowser/tab-selected-start.svg @@ -1,23 +1,14 @@ - - + - - + @@ -43,7 +32,6 @@ -
diff --git a/arc-firefox-theme/chrome/browser/update-badge.svg b/arc-firefox-theme/chrome/browser/update-badge.svg index 6a4c2a0..3b692e5 100644 --- a/arc-firefox-theme/chrome/browser/update-badge.svg +++ b/arc-firefox-theme/chrome/browser/update-badge.svg @@ -1,3 +1,6 @@ + - \ No newline at end of file + diff --git a/arc-firefox-theme/chrome/browser/welcome-back.svg b/arc-firefox-theme/chrome/browser/welcome-back.svg index 38610cb..2fbea04 100644 --- a/arc-firefox-theme/chrome/browser/welcome-back.svg +++ b/arc-firefox-theme/chrome/browser/welcome-back.svg @@ -1,17 +1,13 @@ - - - - - - - \ No newline at end of file + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/global/aboutSupport.css b/arc-firefox-theme/chrome/global/aboutSupport.css index 71ef7a7..61f5305 100644 --- a/arc-firefox-theme/chrome/global/aboutSupport.css +++ b/arc-firefox-theme/chrome/global/aboutSupport.css @@ -3,15 +3,12 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ html { - background-color: -moz-Field; - color: -moz-FieldText; - font: message-box; + --aboutSupport-table-background: #ebebeb; + background-color: var(--in-content-page-background); } body { - width: 90%; - margin-left: 5%; - margin-right: 5%; + margin: 40px 48px; } .page-subtitle { @@ -26,19 +23,24 @@ body { font-weight: bold; } +button { + -moz-margin-start: 0; + -moz-margin-end: 8px; +} + table { - background-color: -moz-Dialog; - color: -moz-DialogText; + background-color: var(--aboutSupport-table-background); + color: var(--in-content-text-color); font: message-box; text-align: start; width: 100%; - border: 1px solid ThreeDShadow; + border: 1px solid var(--in-content-border-color); border-spacing: 0px; } th, td { - border: 1px dotted ThreeDShadow; - padding: 3px; + border: 1px solid var(--in-content-border-color); + padding: 4px; } thead th { @@ -47,8 +49,8 @@ thead th { th { text-align: start; - background-color: Highlight; - color: HighlightText; + background-color: var(--in-content-table-header-background); + color: var(--in-content-selected-text); } th.column { @@ -58,7 +60,7 @@ th.column { td { text-align: start; - border-top: 1px dotted ThreeDShadow; + border-color: var(--in-content-table-border-dark-color); } .prefs-table { @@ -79,9 +81,9 @@ td { } #action-box { - background-color: -moz-Dialog; - border: 1px solid ThreeDShadow; - color: -moz-DialogText; + background-color: var(--aboutSupport-table-background); + border: 1px solid var(--in-content-border-color); + color: var(--in-content-text-color); float: right; margin-top: 2em; margin-bottom: 20px; diff --git a/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal-themed.svg b/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal-themed.svg index 1939867..29e9c3d 100644 --- a/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal-themed.svg +++ b/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal-themed.svg @@ -2,12 +2,7 @@ - - - - + + + diff --git a/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal.svg b/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal.svg index dae4639..40ffa25 100644 --- a/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal.svg +++ b/arc-firefox-theme/chrome/global/arrow/panelarrow-horizontal.svg @@ -2,12 +2,7 @@ - - - - + + + diff --git a/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical-themed.svg b/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical-themed.svg index a2d3a95..0bd6073 100644 --- a/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical-themed.svg +++ b/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical-themed.svg @@ -2,12 +2,7 @@ - - - - + + + diff --git a/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical.svg b/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical.svg index 4e559ed..8048693 100644 --- a/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical.svg +++ b/arc-firefox-theme/chrome/global/arrow/panelarrow-vertical.svg @@ -2,12 +2,7 @@ - - - - + + + diff --git a/arc-firefox-theme/chrome/global/icons/autocomplete-search.svg b/arc-firefox-theme/chrome/global/icons/autocomplete-search.svg index 50c77a5..5da904d 100644 --- a/arc-firefox-theme/chrome/global/icons/autocomplete-search.svg +++ b/arc-firefox-theme/chrome/global/icons/autocomplete-search.svg @@ -2,32 +2,21 @@ - - - - - - - + + + + + + + diff --git a/arc-firefox-theme/chrome/global/icons/close.svg b/arc-firefox-theme/chrome/global/icons/close.svg index 375a412..042ecbf 100644 --- a/arc-firefox-theme/chrome/global/icons/close.svg +++ b/arc-firefox-theme/chrome/global/icons/close.svg @@ -1,104 +1,76 @@ - - - + + - - + - - + - - - - - - - diff --git a/arc-firefox-theme/chrome/global/icons/panelarrow-horizontal.svg b/arc-firefox-theme/chrome/global/icons/panelarrow-horizontal.svg index 6f794b7..1c4c6bc 100644 --- a/arc-firefox-theme/chrome/global/icons/panelarrow-horizontal.svg +++ b/arc-firefox-theme/chrome/global/icons/panelarrow-horizontal.svg @@ -2,12 +2,7 @@ - - - - + + + diff --git a/arc-firefox-theme/chrome/global/icons/panelarrow-vertical.svg b/arc-firefox-theme/chrome/global/icons/panelarrow-vertical.svg index 3d79e18..073d021 100644 --- a/arc-firefox-theme/chrome/global/icons/panelarrow-vertical.svg +++ b/arc-firefox-theme/chrome/global/icons/panelarrow-vertical.svg @@ -2,12 +2,7 @@ - - - - + + + diff --git a/arc-firefox-theme/chrome/global/icons/warning.svg b/arc-firefox-theme/chrome/global/icons/warning.svg index 0082970..bde2da1 100644 --- a/arc-firefox-theme/chrome/global/icons/warning.svg +++ b/arc-firefox-theme/chrome/global/icons/warning.svg @@ -1,12 +1,13 @@ - - - - - - - \ No newline at end of file + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/global/in-content/check-partial.svg b/arc-firefox-theme/chrome/global/in-content/check-partial.svg index b46a731..e436abf 100644 --- a/arc-firefox-theme/chrome/global/in-content/check-partial.svg +++ b/arc-firefox-theme/chrome/global/in-content/check-partial.svg @@ -1,11 +1,8 @@ - + + - + - \ No newline at end of file + diff --git a/arc-firefox-theme/chrome/global/in-content/check.svg b/arc-firefox-theme/chrome/global/in-content/check.svg index 9fb2223..1f9f99c 100644 --- a/arc-firefox-theme/chrome/global/in-content/check.svg +++ b/arc-firefox-theme/chrome/global/in-content/check.svg @@ -1,11 +1,8 @@ - + + - + - \ No newline at end of file + diff --git a/arc-firefox-theme/chrome/global/in-content/common.css b/arc-firefox-theme/chrome/global/in-content/common.css index 0b02360..dc3d018 100644 --- a/arc-firefox-theme/chrome/global/in-content/common.css +++ b/arc-firefox-theme/chrome/global/in-content/common.css @@ -5,13 +5,50 @@ @namespace html "http://www.w3.org/1999/xhtml"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; +*|*:root { + --in-content-page-color: #424e5a; + --in-content-page-background: #fbfbfb; + --in-content-text-color: #333; + --in-content-selected-text: #fff; + --in-content-header-border-color: #c8c8c8; + --in-content-box-background: #fff; + --in-content-box-background-odd: #f3f6fa; + --in-content-box-background-hover: #ebebeb; + --in-content-box-background-active: #dadada; + --in-content-box-border-color: #c1c1c1; + --in-content-item-hover: rgba(0,149,221,0.25); + --in-content-item-selected: #0095dd; + --in-content-border-highlight: #ff9500; + --in-content-border-focus: #0095dd; + --in-content-border-color: #c1c1c1; + --in-content-category-text: #c1c1c1; + --in-content-category-border-focus: 1px dotted #fff; + --in-content-category-text-selected: #f2f2f2; + --in-content-category-background: #424f5a; + --in-content-category-background-hover: #5e6972; + --in-content-category-background-active: #343f48; + --in-content-tab-color: #424f5a; + --in-content-link-color: #0095dd; + --in-content-link-color-hover: #178ce5; + --in-content-link-color-active: #ff9500; + --in-content-link-color-visited: #551a8b; + --in-content-primary-button-background: #0095dd; + --in-content-primary-button-background-hover: #008acb; + --in-content-primary-button-background-active: #006b9d; + --in-content-table-border-dark-color: #d1d1d1; + --in-content-table-header-background: #0095dd; + --in-content-help-button-background: #ffcb00; + --in-content-help-button-background-hover: #f4c200; + --in-content-help-button-background-active: #eaba00; +} + html|body, xul|page, xul|window { font: message-box; -moz-appearance: none; - background-color: #fbfbfb; - color: #424e5a; + background-color: var(--in-content-page-background); + color: var(--in-content-page-color); } html|body { @@ -24,14 +61,14 @@ html|h1 { font-size: 2.5em; font-weight: lighter; line-height: 1.2; - color: #333; + color: var(--in-content-text-color); margin: 0; margin-bottom: .5em; } html|hr { border-style: solid none none none; - border-color: #c1c1c1; + border-color: var(--in-content-border-color); } xul|caption { @@ -91,9 +128,9 @@ xul|tabpanels { xul|tabs { margin-bottom: 15px; - border-top: 1px solid #c1c1c1; - border-bottom: 1px solid #c1c1c1; - background-color: #fbfbfb; + border-top: 1px solid var(--in-content-box-border-color); + border-bottom: 1px solid var(--in-content-box-border-color); + background-color: var(--in-content-page-background); } xul|*.tabs-left, @@ -106,20 +143,20 @@ xul|tab { margin-top: 0; padding: 4px 20px; min-height: 44px; - color: #424f5a; - background-color: #fbfbfb; + color: var(--in-content-tab-color); + background-color: var(--in-content-page-background); border-width: 0; transition: background-color 50ms ease 0s; } xul|tab:hover { - background-color: #ebebeb; + background-color: var(--in-content-box-background-hover); } xul|tab[selected] { - background-color: #ebebeb; + background-color: var(--in-content-box-background-hover); padding-bottom: 0; /* compensate the 4px border */ - border-bottom: 4px solid #ff9500; + border-bottom: 4px solid var(--in-content-border-highlight); } xul|*.tab-text { @@ -142,29 +179,28 @@ xul|colorpicker[type="button"], xul|menulist { -moz-appearance: none; height: 30px; - color: #333; - line-height: 20px; - border: 1px solid #c1c1c1; + color: var(--in-content-text-color); + border: 1px solid var(--in-content-box-border-color); -moz-border-top-colors: none !important; -moz-border-right-colors: none !important; -moz-border-bottom-colors: none !important; -moz-border-left-colors: none !important; border-radius: 2px; - background-color: #fbfbfb; + background-color: var(--in-content-page-background); } html|button:enabled:hover, xul|button:not([disabled="true"]):hover, xul|colorpicker[type="button"]:not([disabled="true"]):hover, xul|menulist:not([disabled="true"]):hover { - background-color: #ebebeb; + background-color: var(--in-content-box-background-hover); } html|button:enabled:hover:active, xul|button:not([disabled="true"]):hover:active, xul|colorpicker[type="button"]:not([disabled="true"]):hover:active, xul|menulist[open="true"]:not([disabled="true"]) { - background-color: #dadada; + background-color: var(--in-content-box-background-active); } html|button:disabled, @@ -176,19 +212,19 @@ xul|menulist[disabled="true"] { } *|button.primary { - background-color: #0095dd; + background-color: var(--in-content-primary-button-background); border-color: transparent; - color: #fff; + color: var(--in-content-selected-text); } html|button.primary:enabled:hover, xul|button.primary:not([disabled="true"]):hover { - background-color: #008acb; + background-color: var(--in-content-primary-button-background-hover); } html|button.primary:enabled:hover:active, xul|button.primary:not([disabled="true"]):hover:active { - background-color: #006b9d; + background-color: var(--in-content-primary-button-background-active); } xul|colorpicker[type="button"] { @@ -222,19 +258,19 @@ xul|*.help-button { min-width: 30px; border-radius: 2px; border-width: 0; - background-color: #ffcb00; + background-color: var(--in-content-help-button-background); background-image: none; box-shadow: none; list-style-image: url("chrome://global/skin/in-content/help-glyph.svg"); } xul|*.help-button:not([disabled="true"]):hover { - background-color: #f4c200; + background-color: var(--in-content-help-button-background-hover); background-image: none; } xul|*.help-button:not([disabled="true"]):hover:active { - background-color: #eaba00; + background-color: var(--in-content-help-button-background-active); background-image: none; } @@ -311,9 +347,9 @@ xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker xul|menulist > xul|menupopup, xul|button[type="menu"] > xul|menupopup { -moz-appearance: none; - border: 1px solid #c1c1c1; + border: 1px solid var(--in-content-box-border-color); border-radius: 2px; - background-color: #fff; + background-color: var(--in-content-box-background); } xul|menulist > xul|menupopup xul|menu, @@ -322,7 +358,7 @@ xul|button[type="menu"] > xul|menupopup xul|menu, xul|button[type="menu"] > xul|menupopup xul|menuitem { -moz-appearance: none; font-size: 1em; - color: #333; + color: var(--in-content-text-color); padding-top: 0.2em; padding-bottom: 0.2em; -moz-padding-start: 10px; @@ -333,16 +369,16 @@ xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive=" xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"], xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"], xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] { - color: #333; - background-color: rgba(0,149,221,0.25); + color: var(--in-content-text-color); + background-color: var(--in-content-item-hover); } xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"], xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"], xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"], xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] { - color: #fff; - background-color: #0095dd; + color: var(--in-content-selected-text); + background-color: var(--in-content-item-selected); } xul|menulist > xul|menupopup > xul|menu[disabled="true"], @@ -360,7 +396,7 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator { -moz-appearance: none; margin: 0; padding: 0; - border-top: 1px solid #c1c1c1; + border-top: 1px solid var(--in-content-box-border-color); border-bottom: none; } @@ -369,22 +405,22 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator { *|textbox { -moz-appearance: none; height: 30px; - color: #333; + color: var(--in-content-text-color); line-height: 20px; padding-right: 10px; padding-left: 10px; - border: 1px solid #c1c1c1; + border: 1px solid var(--in-content-box-border-color); -moz-border-top-colors: none !important; -moz-border-right-colors: none !important; -moz-border-bottom-colors: none !important; -moz-border-left-colors: none !important; border-radius: 2px; - background-color: #fff; + background-color: var(--in-content-box-background); } html|textbox:focus, xul|textbox[focused] { - border-color: #0095dd; + border-color: var(--in-content-border-focus); } html|textbox:disabled, @@ -397,25 +433,25 @@ xul|textbox[disabled="true"] { html|a, .text-link, .inline-link { - color: #0095dd; + color: var(--in-content-link-color); text-decoration: none; } html|a:hover, .text-link:hover, .inline-link:hover { - color: #178ce5; + color: var(--in-content-link-color-hover); text-decoration: underline; } html|a:visited { - color: #551a8b; + color: var(--in-content-link-color-visited); } html|a:hover:active, .text-link:hover:active, .inline-link:hover:active { - color: #ff9500; + color: var(--in-content-link-color-active); text-decoration: none; } @@ -448,7 +484,7 @@ html|input[type="checkbox"] + html|label:before { width: 23px; height: 23px; border-radius: 2px; - border: 1px solid #c1c1c1; + border: 1px solid var(--in-content-box-border-color); -moz-margin-end: 10px; background-color: #f1f1f1; /* !important needed to override toolkit checked !important rule */ @@ -460,7 +496,7 @@ html|input[type="checkbox"] + html|label:before { xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { - border-color: #0095dd; + border-color: var(--in-content-border-focus); } xul|*.checkbox-check[checked] { @@ -493,7 +529,7 @@ xul|*.radio-check { -moz-appearance: none; width: 23px; height: 23px; - border: 1px solid #c1c1c1; + border: 1px solid var(--in-content-box-border-color); border-radius: 50%; -moz-margin-end: 10px; background-color: #f1f1f1; @@ -502,7 +538,7 @@ xul|*.radio-check { } xul|radio:not([disabled="true"]):hover > xul|*.radio-check { - border-color: #0095dd; + border-color: var(--in-content-border-focus); } xul|*.radio-check[selected] { @@ -523,7 +559,7 @@ xul|*.radio-label-box { xul|*#categories { -moz-appearance: none; - background-color: #424f5a; + background-color: var(--in-content-category-background); padding-top: 39px; margin: 0; border-width: 0; @@ -531,7 +567,7 @@ xul|*#categories { xul|*.category { -moz-appearance: none; - color: #c1c1c1; + color: var(--in-content-category-text); -moz-border-end-width: 0; -moz-padding-start: 15px; -moz-padding-end: 21px; @@ -540,19 +576,19 @@ xul|*.category { } xul|*.category:hover { - background-color: #5e6972; + background-color: var(--in-content-category-background-hover); } xul|*.category[selected] { - background-color: #343f48; - color: #f2f2f2; + background-color: var(--in-content-category-background-active); + color: var(--in-content-category-text-selected); -moz-padding-start: 11px; /* compensate the 4px border */ - -moz-border-start: solid 4px #ff9500; + -moz-border-start: solid 4px var(--in-content-border-highlight); } xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] { - border-top: 1px #ffffff dotted; - border-bottom: 1px #ffffff dotted; + border-top: var(--in-content-category-border-focus); + border-bottom: var(--in-content-category-border-focus); } *|*.category-name { @@ -572,7 +608,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur /* header */ *|*.header { - border-bottom: 1px solid #c8c8c8; + border-bottom: 1px solid var(--in-content-header-border-color); -moz-margin-end: 4px; /* add the 4px end-margin of other elements */ margin-bottom: 15px; padding-bottom: 15px; @@ -636,9 +672,9 @@ xul|richlistbox, xul|listbox { -moz-appearance: none; -moz-margin-start: 0; - background-color: #fff; - border: 1px solid #c1c1c1; - color: #333; + background-color: var(--in-content-box-background); + border: 1px solid var(--in-content-box-border-color); + color: var(--in-content-text-color); } xul|treechildren::-moz-tree-row, @@ -652,13 +688,13 @@ xul|listbox xul|listitem { xul|treechildren::-moz-tree-row(hover), xul|listbox xul|listitem:hover { - background-color: rgba(0,149,221,0.25); + background-color: var(--in-content-item-hover); } xul|treechildren::-moz-tree-row(selected), xul|listbox xul|listitem[selected="true"] { - background-color: #0095dd; - color: #fff; + background-color: var(--in-content-item-selected); + color: var(--in-content-selected-text); } /* Trees */ @@ -666,20 +702,21 @@ xul|listbox xul|listitem[selected="true"] { xul|tree { -moz-appearance: none; font-size: 1em; - border: 1px solid #c1c1c1; + border: 1px solid var(--in-content-box-border-color); + background-color: var(--in-content-box-background); margin: 0; } xul|tree:-moz-focusring, xul|richlistbox:-moz-focusring { - border: 1px dotted #0095dd; + border: 1px dotted var(--in-content-border-focus); } xul|listheader, xul|treecols { -moz-appearance: none; border: none; - border-bottom: 1px solid #c1c1c1; + border-bottom: 1px solid var(--in-content-border-color); padding: 0; } @@ -687,15 +724,15 @@ xul|treecol:not([hideheader="true"]), xul|treecolpicker { -moz-appearance: none; border: none; - background-color: #ebebeb; + background-color: var(--in-content-box-background-hover); color: #808080; padding: 5px 10px; } xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover, xul|treecolpicker:hover { - background-color: #dadada; - color: #333; + background-color: var(--in-content-box-background-active); + color: var(--in-content-text-color); } xul|treecol:not([hideheader="true"]):not(:first-child), @@ -722,11 +759,11 @@ xul|treechildren::-moz-tree-row { /* Color needs to be set on tree cell in order to be applied */ xul|treechildren::-moz-tree-cell-text { - color: #333; + color: var(--in-content-text-color); } xul|treechildren::-moz-tree-cell-text(selected) { - color: #fff; + color: var(--in-content-selected-text); } xul|tab[visuallyselected] { @@ -803,6 +840,13 @@ xul|*.radio-label-box { -moz-appearance: none; } +/* Override OS-theme-based color to make it visible + on dark color themes. */ +xul|radio:not([disabled="true"]):hover, +xul|checkbox:not([disabled="true"]):hover { + color: var(--in-content-text-color); +} + xul|*.numberbox-input-box { -moz-appearance: none; border-width: 0; @@ -816,3 +860,20 @@ xul|*.inline-link:-moz-focusring { xul|spinbuttons { -moz-appearance: none; } + +xul|treechildren::-moz-tree-row(multicol, odd) { + background-color: var(--in-content-box-background-odd); +} + +/* These rules are duplicated from common.inc.css + * because above -moz-tree-row(multicol, odd) rule + * overrides also hover/selected states. + */ +xul|treechildren::-moz-tree-row(hover) { + background-color: var(--in-content-item-hover); +} + +xul|treechildren::-moz-tree-row(selected) { + background-color: var(--in-content-item-selected); +} + diff --git a/arc-firefox-theme/chrome/global/in-content/dropdown.svg b/arc-firefox-theme/chrome/global/in-content/dropdown.svg index a757585..458eb0b 100644 --- a/arc-firefox-theme/chrome/global/in-content/dropdown.svg +++ b/arc-firefox-theme/chrome/global/in-content/dropdown.svg @@ -1,6 +1,8 @@ - + + - - + + diff --git a/arc-firefox-theme/chrome/global/in-content/help-glyph.svg b/arc-firefox-theme/chrome/global/in-content/help-glyph.svg index 6f9ffb3..012bef4 100644 --- a/arc-firefox-theme/chrome/global/in-content/help-glyph.svg +++ b/arc-firefox-theme/chrome/global/in-content/help-glyph.svg @@ -1,8 +1,7 @@ - - + + + diff --git a/arc-firefox-theme/chrome/global/in-content/info-pages.css b/arc-firefox-theme/chrome/global/in-content/info-pages.css index 6a6bd08..fcecbd8 100644 --- a/arc-firefox-theme/chrome/global/in-content/info-pages.css +++ b/arc-firefox-theme/chrome/global/in-content/info-pages.css @@ -1,9 +1,10 @@ + @import url("chrome://global/skin/in-content/common.css"); /* Body and container */ body { display: flex; flex-direction: column; - box-sizing: padding-box; + box-sizing: border-box; min-height: 100vh; padding-top: 0; padding-bottom: 0; diff --git a/arc-firefox-theme/chrome/global/in-content/radio.svg b/arc-firefox-theme/chrome/global/in-content/radio.svg index ca926b7..97826bc 100644 --- a/arc-firefox-theme/chrome/global/in-content/radio.svg +++ b/arc-firefox-theme/chrome/global/in-content/radio.svg @@ -1,6 +1,8 @@ - + + - + diff --git a/arc-firefox-theme/chrome/global/inContentUI.css b/arc-firefox-theme/chrome/global/inContentUI.css deleted file mode 100644 index afcef92..0000000 --- a/arc-firefox-theme/chrome/global/inContentUI.css +++ /dev/null @@ -1,41 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -/* - * The default namespace for this file is XUL. Be sure to prefix rules that - * are applicable to both XUL and HTML with '*|'. - */ -@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -@namespace html url("http://www.w3.org/1999/xhtml"); - -/* Page background */ -*|*:root { - -moz-appearance: none; - padding: 18px; - background-color: Window; - background-image: /* Texture */ - url("chrome://global/skin/inContentUI/background-texture.png"); - color: WindowText; -} - -/* Use the new in-content colors for #contentAreaDownloadsView. After landing - of bug 989469 the colors can be moved to *|*:root */ -*|*#contentAreaDownloadsView { - background: #f1f1f1; - color: #424e5a; -} - -html|html { - font: message-box; -} - -/* Content */ -*|*.main-content { - /* Needed to allow the radius to clip the inner content, see bug 595656 */ - overflow: hidden; - background-color: -moz-Field; - color: -moz-FieldText; - border: 1px solid ThreeDShadow; - border-radius: 5px; -} diff --git a/arc-firefox-theme/chrome/global/inContentUI/background-texture.png b/arc-firefox-theme/chrome/global/inContentUI/background-texture.png deleted file mode 100644 index 0d3cacd..0000000 Binary files a/arc-firefox-theme/chrome/global/inContentUI/background-texture.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/global/media/TopLevelVideoDocument.css b/arc-firefox-theme/chrome/global/media/TopLevelVideoDocument.css index 3060bf8..760cdcd 100644 --- a/arc-firefox-theme/chrome/global/media/TopLevelVideoDocument.css +++ b/arc-firefox-theme/chrome/global/media/TopLevelVideoDocument.css @@ -4,6 +4,7 @@ body { background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); + background-color: rgb(33,33,33); /* Average color of that ^ image. */ } video { diff --git a/arc-firefox-theme/chrome/global/media/videoClickToPlayButton.svg b/arc-firefox-theme/chrome/global/media/videoClickToPlayButton.svg index f118afb..f7ca6b6 100644 --- a/arc-firefox-theme/chrome/global/media/videoClickToPlayButton.svg +++ b/arc-firefox-theme/chrome/global/media/videoClickToPlayButton.svg @@ -1,79 +1,30 @@ - - + - - - - + + + + - + - - + + - - + + - - + + - - - - - + + + + + diff --git a/arc-firefox-theme/chrome/global/menu.css b/arc-firefox-theme/chrome/global/menu.css index a49b781..61de49d 100644 --- a/arc-firefox-theme/chrome/global/menu.css +++ b/arc-firefox-theme/chrome/global/menu.css @@ -12,6 +12,7 @@ menu, menuitem, +menucaption, .splitmenu-menuitem { -moz-appearance: menuitem; -moz-box-align: center; @@ -68,6 +69,7 @@ menuitem.spell-suggestion { /* ::::: menu/menuitems in menulist popups ::::: */ menulist > menupopup > menuitem, +menulist > menupopup > menucaption, menulist > menupopup > menu { padding: 1px 5px; max-width: none; @@ -92,6 +94,12 @@ menulist > menupopup > menu { font-weight: inherit; } +menucaption > .menu-text, +menucaption > .menu-iconic-text { + -moz-margin-start: 0 !important; + font-weight: bold; +} + .menu-description { font-style: italic; color: GrayText; @@ -149,6 +157,7 @@ menulist > menupopup > menu { menulist > menupopup > menuitem > .menu-iconic-left, +menulist > menupopup > menucaption > .menu-iconic-left, menulist > menupopup > menu > .menu-iconic-left { display: none; } diff --git a/arc-firefox-theme/chrome/global/menu/shared-menu-check-active.svg b/arc-firefox-theme/chrome/global/menu/shared-menu-check-active.svg index 8ef2c40..ba8a7c9 100644 --- a/arc-firefox-theme/chrome/global/menu/shared-menu-check-active.svg +++ b/arc-firefox-theme/chrome/global/menu/shared-menu-check-active.svg @@ -1,6 +1,7 @@ - - - + + + diff --git a/arc-firefox-theme/chrome/global/menu/shared-menu-check-black.svg b/arc-firefox-theme/chrome/global/menu/shared-menu-check-black.svg index 74ee2c8..f388f81 100644 --- a/arc-firefox-theme/chrome/global/menu/shared-menu-check-black.svg +++ b/arc-firefox-theme/chrome/global/menu/shared-menu-check-black.svg @@ -1,6 +1,7 @@ - - - + + + diff --git a/arc-firefox-theme/chrome/global/menu/shared-menu-check-hover.svg b/arc-firefox-theme/chrome/global/menu/shared-menu-check-hover.svg index d52d3d6..b8c8ec3 100644 --- a/arc-firefox-theme/chrome/global/menu/shared-menu-check-hover.svg +++ b/arc-firefox-theme/chrome/global/menu/shared-menu-check-hover.svg @@ -1,6 +1,7 @@ - - - + + + diff --git a/arc-firefox-theme/chrome/global/notification.css b/arc-firefox-theme/chrome/global/notification.css index 2eb2abf..4c5d27e 100644 --- a/arc-firefox-theme/chrome/global/notification.css +++ b/arc-firefox-theme/chrome/global/notification.css @@ -84,6 +84,11 @@ notification[type="critical"] { margin-top: 17px; } +.popup-notification-closebutton { + -moz-margin-end: -10px; + margin-top: -6px; +} + .popup-notification-menubutton > .button-menubutton-button[disabled] { opacity: 0.5; } diff --git a/arc-firefox-theme/chrome/global/popup.css b/arc-firefox-theme/chrome/global/popup.css index 1c5bc50..63c8d86 100644 --- a/arc-firefox-theme/chrome/global/popup.css +++ b/arc-firefox-theme/chrome/global/popup.css @@ -4,6 +4,14 @@ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +/* ::::: Variables ::::: */ +.panel-arrowcontent { + --panel-arrowcontent-padding: 10px; + --panel-arrowcontent-background: -moz-Dialog; + --panel-arrowcontent-color: -moz-DialogText; + --panel-arrowcontent-border: 1px solid ThreeDShadow; +} + /* ::::: menupopup ::::: */ menupopup, @@ -32,10 +40,10 @@ panel[type="arrow"][side="right"] { } .panel-arrowcontent { - padding: 10px; - color: -moz-DialogText; - background: -moz-Dialog; - border: 1px solid ThreeDShadow; + padding: var(--panel-arrowcontent-padding); + color: var(--panel-arrowcontent-color); + background: var(--panel-arrowcontent-background); + border: var(--panel-arrowcontent-border); } .panel-arrow[side="top"], diff --git a/arc-firefox-theme/chrome/global/reader/RM-Add-24x24.svg b/arc-firefox-theme/chrome/global/reader/RM-Add-24x24.svg index 66551ef..2071381 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Add-24x24.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Add-24x24.svg @@ -1,6 +1,7 @@ - - + + + diff --git a/arc-firefox-theme/chrome/global/reader/RM-Close-24x24.svg b/arc-firefox-theme/chrome/global/reader/RM-Close-24x24.svg index b0674b2..e57a475 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Close-24x24.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Close-24x24.svg @@ -2,30 +2,24 @@ - + - - - + - - \ No newline at end of file + diff --git a/arc-firefox-theme/chrome/global/reader/RM-Delete-24x24.svg b/arc-firefox-theme/chrome/global/reader/RM-Delete-24x24.svg index 6010fbe..0ed3983 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Delete-24x24.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Delete-24x24.svg @@ -1,6 +1,7 @@ - - + + + diff --git a/arc-firefox-theme/chrome/global/reader/RM-Minus-24x24.svg b/arc-firefox-theme/chrome/global/reader/RM-Minus-24x24.svg index 9da7e03..e85a397 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Minus-24x24.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Minus-24x24.svg @@ -1,39 +1,7 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + diff --git a/arc-firefox-theme/chrome/global/reader/RM-Plus-24x24.svg b/arc-firefox-theme/chrome/global/reader/RM-Plus-24x24.svg index 249912a..f3a98dd 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Plus-24x24.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Plus-24x24.svg @@ -1,39 +1,7 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + diff --git a/arc-firefox-theme/chrome/global/reader/RM-Reading-List-24x24.svg b/arc-firefox-theme/chrome/global/reader/RM-Reading-List-24x24.svg index 1f21efd..b43a8b8 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Reading-List-24x24.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Reading-List-24x24.svg @@ -1,46 +1,12 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + diff --git a/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-24x24.svg b/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-24x24.svg index a25429a..8a5a212 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-24x24.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-24x24.svg @@ -1,23 +1,8 @@ - - - - - + + + + diff --git a/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-Arrow.svg b/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-Arrow.svg index 9094d8a..837392f 100644 --- a/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-Arrow.svg +++ b/arc-firefox-theme/chrome/global/reader/RM-Type-Controls-Arrow.svg @@ -1,42 +1,8 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + diff --git a/arc-firefox-theme/chrome/global/reader/pocket.svg b/arc-firefox-theme/chrome/global/reader/pocket.svg index 63b22fa..d93fd6a 100644 --- a/arc-firefox-theme/chrome/global/reader/pocket.svg +++ b/arc-firefox-theme/chrome/global/reader/pocket.svg @@ -1,7 +1,8 @@ - + + - - + + diff --git a/arc-firefox-theme/chrome/mozapps/extensions/category-extensions.png b/arc-firefox-theme/chrome/mozapps/extensions/category-extensions.png deleted file mode 100644 index 2ae95a5..0000000 Binary files a/arc-firefox-theme/chrome/mozapps/extensions/category-extensions.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/mozapps/extensions/category-themes.png b/arc-firefox-theme/chrome/mozapps/extensions/category-themes.png deleted file mode 100644 index cde1c78..0000000 Binary files a/arc-firefox-theme/chrome/mozapps/extensions/category-themes.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/mozapps/extensions/extensions.css b/arc-firefox-theme/chrome/mozapps/extensions/extensions.css index c91607c..30b1ab6 100644 --- a/arc-firefox-theme/chrome/mozapps/extensions/extensions.css +++ b/arc-firefox-theme/chrome/mozapps/extensions/extensions.css @@ -347,10 +347,18 @@ .list { -moz-appearance: none; margin: 0; - border-color: transparent; + border-width: 0 !important; background-color: transparent; } +.list > scrollbox > .scrollbox-innerbox { + border: 1px dotted transparent; +} + +.list:-moz-focusring > scrollbox > .scrollbox-innerbox { + border-color: #0095dd; +} + .addon { color: #444; border-bottom: 1px solid #c1c1c1; diff --git a/arc-firefox-theme/chrome/mozapps/extensions/utilities.svg b/arc-firefox-theme/chrome/mozapps/extensions/utilities.svg index fd91100..6792871 100644 --- a/arc-firefox-theme/chrome/mozapps/extensions/utilities.svg +++ b/arc-firefox-theme/chrome/mozapps/extensions/utilities.svg @@ -1,11 +1,8 @@ - + + - + -- cgit v1.2.3