diff --git a/config.json b/config.json index 912848cc..02810452 100644 --- a/config.json +++ b/config.json @@ -1,7 +1,7 @@ { "version": "35.1", - "min-version": "37.0", - "max-version": "40.0a1", + "min-version": "38.0", + "max-version": "41.0a1", "theme": { "xpi": "gnome-firefox-theme.xpi" }, diff --git a/theme/chrome-37/.empty b/theme/chrome-38/.empty similarity index 100% rename from theme/chrome-37/.empty rename to theme/chrome-38/.empty diff --git a/theme/shared/browser/aboutSessionRestore.css b/theme/shared/browser/aboutSessionRestore.css index a23f50c1..6f4036fd 100644 --- a/theme/shared/browser/aboutSessionRestore.css +++ b/theme/shared/browser/aboutSessionRestore.css @@ -1,43 +1,12 @@ -html { - height: 100%; -} - -body { - height: 100%; - text-align: center; -} - -#errorPageContainer { -/* background-image: url("moz-icon://stock/gtk-dialog-warning?size=dialog");*/ - display: -moz-box; - width: -moz-available; - height: 70%; - -moz-box-orient: vertical; - text-align: start; -} - -#errorShortDesc > p { - margin-top: 0.4em; - margin-bottom: 0; -} - -#errorLongContent, #errorTrailerDesc { - display: -moz-box; - -moz-box-flex: 1; - -moz-box-orient: vertical; -} - -#tabList { - margin-top: 2.5em; - width: 100%; - min-height: 12em; +.title { + background-image: url("chrome://browser/skin/session-restore.svg"); } treechildren::-moz-tree-image(icon), treechildren::-moz-tree-image(noicon) { padding-right: 2px; - margin: 0px 2px; + margin: 0 2px; width: 16px; height: 16px; } @@ -48,33 +17,17 @@ treechildren::-moz-tree-image(noicon) { treechildren::-moz-tree-image(container, noicon) { list-style-image: url("chrome://browser/skin/aboutSessionRestore-window-icon.png"); } -treechildren::-moz-tree-image(checked) { - list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); -} -treechildren::-moz-tree-image(partial) { - list-style-image: url("chrome://global/skin/checkbox/cbox-check-dis.gif"); -} -/* undo odd row highlighting from tree.css */ -treechildren::-moz-tree-row(odd) { - background-color: transparent; -} -treechildren::-moz-tree-row(odd, selected, focus) { - background-color: Highlight; -} - -/* highlight "windows" instead */ -treechildren::-moz-tree-row(alternate) { - background-color: -moz-oddtreerow; +treechildren::-moz-tree-image(checked) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check"); } -treechildren::-moz-tree-row(alternate, selected) { - background-color: Highlight; +treechildren::-moz-tree-image(checked, selected) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted"); } -#buttons { - -moz-margin-start: 80px; /* same as #errorLongContent in netError.css */ +treechildren::-moz-tree-image(partial) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial"); } -#buttons > button { - margin-top: 2em; - -moz-margin-start: 5px; +treechildren::-moz-tree-image(partial, selected) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial-inverted"); } diff --git a/theme/shared/browser/aboutTabCrashed.css b/theme/shared/browser/aboutTabCrashed.css index 09be985f..2ef767eb 100644 --- a/theme/shared/browser/aboutTabCrashed.css +++ b/theme/shared/browser/aboutTabCrashed.css @@ -1,108 +1,11 @@ -body { - background-color: rgb(241, 244, 248); - margin-top: 2em; - font: message-box; - font-size: 100%; -} - -p { - font-size: .8em; -} +/* 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/. */ -#error-box { - background: url('chrome://global/skin/icons/information-24.png') no-repeat left 4px; - -moz-padding-start: 30px; +.title { + background-image: url("chrome://browser/skin/tab-crashed.svg"); } -#error-box:-moz-locale-dir(rtl) { - background-position: right 4px; -} - -#main-error-msg { - color: #4b4b4b; +#reportSent { font-weight: bold; } - -#report-box { - text-align: center; - width: 75%; - margin: 0 auto; - display: none; -} - -.crashDumpAvailable #report-box { - display: block; -} - -#button-box { - text-align: center; - width: 75%; - margin: 0 auto; -} - -@media all and (min-width: 300px) { - #error-box { - max-width: 50%; - margin: 0 auto; - background-image: url('chrome://global/skin/icons/information-32.png'); - min-height: 36px; - -moz-padding-start: 38px; - } - - button { - width: auto !important; - min-width: 150px; - } -} - -@media all and (min-width: 780px) { - #error-box { - max-width: 30%; - } -} - -button { - font: message-box; - font-size: 0.6875em; - -moz-appearance: none; - -moz-user-select: none; - width: 100%; - margin: 2px 0; - padding: 2px 6px; - line-height: 1.2; - background-color: hsla(210,30%,95%,.1); - background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)); - background-clip: padding-box; - border: 1px solid hsla(210,15%,25%,.4); - border-color: hsla(210,15%,25%,.3) hsla(210,15%,25%,.35) hsla(210,15%,25%,.4); - border-radius: 3px; - box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, - 0 0 0 1px hsla(0,0%,100%,.3) inset, - 0 1px 0 hsla(0,0%,100%,.1); - - transition-property: background-color, border-color, box-shadow; - transition-duration: 150ms; - transition-timing-function: ease; - -} - -button:hover { - background-color: hsla(210,30%,95%,.8); - border-color: hsla(210,15%,25%,.45) hsla(210,15%,25%,.5) hsla(210,15%,25%,.55); - box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset, - 0 0 0 1px hsla(0,0%,100%,.3) inset, - 0 1px 0 hsla(0,0%,100%,.1), - 0 0 3px hsla(210,15%,25%,.1); - transition-property: background-color, border-color, box-shadow; - transition-duration: 150ms; - transition-timing-function: ease; -} - -button:hover:active { - background-color: hsla(210,15%,25%,.2); - box-shadow: 0 1px 1px hsla(210,15%,25%,.2) inset, - 0 0 2px hsla(210,15%,25%,.4) inset; - transition-property: background-color, border-color, box-shadow; - transition-duration: 10ms; - transition-timing-function: linear; -} diff --git a/theme/shared/browser/aboutWelcomeBack.css b/theme/shared/browser/aboutWelcomeBack.css index dd79400b..eb0b7a90 100644 --- a/theme/shared/browser/aboutWelcomeBack.css +++ b/theme/shared/browser/aboutWelcomeBack.css @@ -2,9 +2,12 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -#errorPageContainer { - background-image: url("chrome://global/skin/icons/information-64.png"); - height: auto; +.title { + background-image: url("chrome://browser/skin/welcome-back.svg"); +} + +.radioRestoreContainer:not(:last-child) { + margin-bottom: 0.2em; } /* tablist starts out hidden, but JS may make it visible in response to @@ -18,25 +21,31 @@ display: -moz-box; } -.radioRestoreContainer { - display: flex; +treechildren::-moz-tree-image(icon), +treechildren::-moz-tree-image(noicon) { + padding-right: 2px; + margin: 0 2px; + width: 16px; + height: 16px; } -.radioRestoreButton { - flex: 0 0 auto; +treechildren::-moz-tree-image(noicon) { + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); } - -.radioRestoreButton:-moz-focusring { - outline: 1px dotted black; +treechildren::-moz-tree-image(container, noicon) { + list-style-image: url("chrome://browser/skin/aboutSessionRestore-window-icon.png"); } -.radioChooseLabel { - flex: 1 1 auto; +treechildren::-moz-tree-image(checked) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check"); +} +treechildren::-moz-tree-image(checked, selected) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted"); } -/* We want errorTrailerDesc to have the same padding-top as errorShortDesc - has padding-bottom -*/ -#errorTrailerDesc { - padding-top: 1em; +treechildren::-moz-tree-image(partial) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial"); } +treechildren::-moz-tree-image(partial, selected) { + list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial-inverted"); +} \ No newline at end of file diff --git a/theme/shared/browser/browser.css b/theme/shared/browser/browser.css index 2ea508f0..ca3d26a4 100644 --- a/theme/shared/browser/browser.css +++ b/theme/shared/browser/browser.css @@ -581,6 +581,11 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png"); } +#menu_readingList, +#BMB_readingList { + list-style-image: url("chrome://browser/skin/readinglist/readinglist-icon.svg"); +} + #menu_openDownloads { list-style-image: url("chrome://browser/skin/Toolbar-small.png"); -moz-image-region: rect(0px 16px 16px 0px); @@ -596,6 +601,7 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { list-style-image: url("moz-icon://stock/gtk-info?size=menu"); } +#placesContext_open\:newprivatewindow, #privateBrowsingItem { list-style-image: url("chrome://browser/skin/Privacy-16.png"); } @@ -1618,7 +1624,6 @@ toolbarpaletteitem[place="palette"] > :-moz-any(#edit-controls, #zoom-controls) } .popup-notification-icon[popupid="indexedDB-permissions-prompt"], -.popup-notification-icon[popupid="indexedDB-quota-prompt"], .popup-notification-icon[popupid*="offline-app-requested"], .popup-notification-icon[popupid="offline-app-usage"] { list-style-image: url(chrome://global/skin/icons/question-64.png); @@ -1964,6 +1969,16 @@ notification[value="translation"][state="translating"] .messageImage { /* */ +/* Loop/ Hello browser styles */ + +notification[value="loop-sharing-notification"] .button-menubutton-button { + min-width: 0; +} + +notification[value="loop-sharing-notification"] .messageImage { + list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png); +} + #treecolAutoCompleteImage { max-width: 36px; } @@ -2137,6 +2152,58 @@ richlistitem[selected="true"][type~="action"][actiontype="switchtab"] > .ac-url- opacity: .5; } +/* Reading List button */ + +#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { + opacity: 0; + width: 0px; +} + +#readinglist-addremove-button { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage"); + -moz-image-region: rect(0, 14px, 14px, 0); + transition: width 150ms ease-in-out, opacity 150ms ease-in-out 150ms; + opacity: 1; + width: 20px; +} + +#readinglist-addremove-button:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); +} + +#readinglist-addremove-button:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); +} + +#readinglist-addremove-button[already-added="true"] { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); +} + +#readinglist-addremove-button[already-added="true"]:hover { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); +} + +#readinglist-addremove-button[already-added="true"]:active { + list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); +} + +/* Reader mode button */ + +#reader-mode-button { + list-style-image: url("chrome://browser/skin/readerMode.svg"); + -moz-image-region: rect(0, 16px, 16px, 0); +} + +#reader-mode-button:hover, +#reader-mode-button[readeractive]:hover { + -moz-image-region: rect(0, 32px, 16px, 16px); +} + +#reader-mode-button:hover:active, +#reader-mode-button[readeractive] { + -moz-image-region: rect(0, 48px, 16px, 32px); +} + /* social share panel */ .social-share-frame { @@ -2396,16 +2463,16 @@ richlistitem[selected="true"][type~="action"][actiontype="switchtab"] > .ac-url- } */ -#TabsToolbar toolbarbutton { - -moz-appearance: none; - margin-bottom: 2px; +/* +:root { + --tab-toolbar-navbar-overlap: 1px; + --tab-min-height: 31px; } -#TabsToolbar > toolbarbutton toolbarbutton { - background: transparent !important; - border: none !important; - box-shadow: none !important; +#tabbrowser-tabs { + min-height: var(--tab-min-height); } +*/ .tabbrowser-tabs { -moz-margin-start: 0; @@ -2417,6 +2484,17 @@ richlistitem[selected="true"][type~="action"][actiontype="switchtab"] > .ac-url- z-index: auto; } +#TabsToolbar toolbarbutton { + -moz-appearance: none; + margin-bottom: 2px; +} + +#TabsToolbar > toolbarbutton toolbarbutton { + background: transparent !important; + border: none !important; + box-shadow: none !important; +} + /* put some space between the newtab-button and regular tabs and align it vetically with the close button*/ .tabs-newtab-button { margin-top: 2px; @@ -2629,14 +2707,18 @@ richlistitem[selected="true"][type~="action"][actiontype="switchtab"] > .ac-url- list-style-image: url(chrome://mozapps/skin/places/defaultFavicon.png); } -/* Handle a case where the last separator in a customized tab bar with a - separated new tab button causes the width of the tab to extend and causes - jittering with a small tab curve width (Bug 1111091). */ -/* -#TabsToolbar[currentset]:not([currentset*="tabbrowser-tabs,new-tab-button"]) #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after { - -moz-margin-start: -3px; - -moz-margin-end: 0; -*/ +.tab-icon-overlay { + width: 16px; + height: 16px; + margin-top: 10px; + -moz-margin-start: -16px; + display: none; +} + +.tab-icon-overlay[crashed] { + display: -moz-box; + list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); +} .tab-throbber[busy] { list-style-image: url(chrome://browser/skin/tabbrowser/connecting.png); @@ -2843,46 +2925,6 @@ richlistitem[selected="true"][type~="action"][actiontype="switchtab"] > .ac-url- filter: url(chrome://browser/skin/symbolic-icons-colors.svg#white); } -/* Tab Overflow */ - -/* -.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]), -.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) { - background-image: url(chrome://browser/skin/tabbrowser/tab-overflow-indicator.png); - background-size: 100% 100%; - width: 14px; - margin-bottom: 1px; - pointer-events: none; - position: relative; - z-index: 3; -} - -.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl), -.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) { - transform: scaleX(-1); -} - -.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) { - -moz-margin-start: -2px; - -moz-margin-end: -12px; -} - -.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) { - -moz-margin-start: -12px; - -moz-margin-end: -2px; -} - -.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed], -.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] { - opacity: 0; -} - -.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator, -.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator { - transition: opacity 150ms ease; -} -*/ - /* */ /* @@ -4210,6 +4252,17 @@ chatbox { list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed"); } +#eme-notification-icon[firstplay=true] { + animation: emeTeachingMoment 0.2s linear 0s 5 normal; +} + +@keyframes emeTeachingMoment { + 0% {transform: translateX(0); } + 25% {transform: translateX(3px) } + 75% {transform: translateX(-3px) } + 100% { transform: translateX(0); } +} + /* Customization mode */ #main-window[customizing] #navigator-toolbox { @@ -4891,61 +4944,17 @@ toolbarpaletteitem[place="toolbar"] { background-color: rgb(105,173,61); } -.SearchHighlight { - -moz-margin-end: 6px; - font-size: 110%; - width: 225px; -} - -.SearchHighlight label, -.SearchHighlight description { - color: #535353; - margin: 0 0 8px 0; - padding: 0; -} - -.SearchHighlightTitle { - font-weight: bold; -} - -.SearchHighlight .dot { - width: 7px; - height: 7px; - background-image: -moz-image-rect(url("chrome://browser/skin/dots.png"), 0, 100%, 100%, 9); - background-size: 7px; - background-position: center center; - background-repeat: no-repeat; - -moz-margin-end: 2px; -} - -.SearchHighlight .dot.filled { - background-image: -moz-image-rect(url("chrome://browser/skin/dots.png"), 0, 7, 100%, 0); -} - -.SearchHighlight button { - margin: 0; - /* On some platforms clicking the button will steal focus from the search box - causing the popup to close. */ - -moz-user-focus: ignore; -} - -@media not all and (max-resolution: 1dppx) { - .SearchHighlight .dot { - background-image: -moz-image-rect(url("chrome://browser/skin/dots@2x.png"), 0, 100%, 100%, 18); - } - - .SearchHighlight .dot.filled { - background-image: -moz-image-rect(url("chrome://browser/skin/dots@2x.png"), 0, 14, 100%, 0); - } -} - /* Notification overrides for Heartbeat UI */ notification.heartbeat { background-color: #F1F1F1; - box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.35); + border-bottom: 1px solid #C1C1C1; + height: 40px; } +/* In themes/osx/global/notification.css the close icon is inverted because notifications + on OSX are usually dark. Heartbeat is light, so override that behaviour. */ + @keyframes pulse-onshow { 0% { opacity: 0; @@ -4980,17 +4989,17 @@ notification.heartbeat { .messageText.heartbeat { color: #333333; - font-weight: normal; - font-family: "Lucida Grande", Segoe, Ubuntu; - font-size: 14px; - line-height: 16px; text-shadow: none; + -moz-margin-start: 0px; + /* The !important is required to override OSX default style. */ + -moz-margin-end: 12px !important; } .messageImage.heartbeat { - width: 36px; - height: 36px; - -moz-margin-end: 10px; + width: 24px; + height: 24px; + -moz-margin-start: 8px; + -moz-margin-end: 8px; } .messageImage.heartbeat.pulse-onshow { @@ -5007,9 +5016,25 @@ notification.heartbeat { animation-timing-function: linear; } +/* Learn More link styles */ +.heartbeat > .text-link { + color: #0095DD; + -moz-margin-start: 0px; +} + +.heartbeat > .text-link:hover { + color: #008ACB; + text-decoration: none; +} + +.heartbeat > .text-link:hover:active { + color: #006B9D; +} + /* Heartbeat UI Rating Star Classes */ .heartbeat > #star-rating-container { display: -moz-box; + margin-bottom: 4px; } .heartbeat > #star-rating-container > #star5 { @@ -5031,16 +5056,15 @@ notification.heartbeat { .heartbeat > #star-rating-container > .star-x { background: url("chrome://browser/skin/heartbeat-star-off.svg"); cursor: pointer; - width: 24px; - height: 24px; + /* Overrides the -moz-margin-end for all platforms defined in the .plain class */ + -moz-margin-end: 4px !important; + width: 16px; + height: 16px; } .heartbeat > #star-rating-container > .star-x:hover, .heartbeat > #star-rating-container > .star-x:hover ~ .star-x { background: url("chrome://browser/skin/heartbeat-star-lit.svg"); - cursor: pointer; - width: 24px; - height: 24px; } #UITourHighlight { diff --git a/theme/shared/browser/customizableui/panelUIOverlay.css b/theme/shared/browser/customizableui/panelUIOverlay.css index 52f7cec9..8c1e5e38 100644 --- a/theme/shared/browser/customizableui/panelUIOverlay.css +++ b/theme/shared/browser/customizableui/panelUIOverlay.css @@ -94,6 +94,12 @@ background-position: 100% 0, calc(100% - 1px) 0, calc(100% - 2px) 0; } +#PanelUI-menu-button[update-status="succeeded"] .toolbarbutton-badge::after { + content: url(chrome://browser/skin/update-badge.svg); + background-color: #74BF43; + height: 10px; +} + .panel-subviews { padding: 4px; background-clip: padding-box; diff --git a/theme/shared/browser/devedition.css b/theme/shared/browser/devedition.css index 23f4e92e..272118b5 100644 --- a/theme/shared/browser/devedition.css +++ b/theme/shared/browser/devedition.css @@ -5,7 +5,8 @@ there are overrides for each platform in their devedition.css files. */ :root { - --space-above-tabbar: 1px; + --tab-toolbar-navbar-overlap: 0px; + --space-above-tabbar: 0px; --toolbarbutton-text-shadow: none; --panel-ui-button-background-size: 1px calc(100% - 1px); --panel-ui-button-background-position: 1px 0px; @@ -30,9 +31,9 @@ --tab-separator-color: #474C50; --tab-selection-color: #f5f7fa; --tab-selection-background-color: #1a4666; - --tab-selection-box-shadow: 0 2px 0 #d7f1ff inset, - 0 8px 3px -5px #2b82bf inset, - 0 -1px 0 rgba(0,0,0,.2) inset; + --tab-selection-box-shadow: 0 2px 0 #D7F1FF inset, + 0 -2px 0 rgba(0,0,0,.05) inset, + 0 -1px 0 rgba(0,0,0,.3) inset; --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, rgba(0,0,0,0.4) 16%, transparent 70%); /* Toolbar buttons */ @@ -90,9 +91,9 @@ --tab-separator-color: #C6C6C7; --tab-selection-color: #f5f7fa; --tab-selection-background-color: #4c9ed9; - --tab-selection-box-shadow: 0 2px 0 #d7f1ff inset, - 0 8px 3px -5px #319BDB inset, - 0 -1px 0 #2A7CB1 inset; + --tab-selection-box-shadow: 0 2px 0 #9FDFFF inset, + 0 -2px 0 rgba(0,0,0,.05) inset, + 0 -1px 0 rgba(0,0,0,.2) inset; --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, transparent 16%); @@ -154,7 +155,8 @@ /* End override @tabCurveHalfWidth@ and @tabCurveWidth@ */ #urlbar ::-moz-selection, -#navigator-toolbox .searchbar-textbox ::-moz-selection { +#navigator-toolbox .searchbar-textbox ::-moz-selection, +.browserContainer > findbar ::-moz-selection { background-color: var(--chrome-selection-background-color); color: var(--chrome-selection-color); } @@ -175,10 +177,20 @@ #navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar), .browserContainer > findbar, #browser-bottombox { - background: var(--chrome-secondary-background-color) !important; + background-color: var(--chrome-secondary-background-color) !important; color: var(--chrome-color); } +.browserContainer > findbar { + background-image: none; +} + +/* Default findbar text color doesn't look good - Bug 1125677 */ +.browserContainer > findbar .findbar-find-status, +.browserContainer > findbar .found-matches { + color: inherit; +} + #navigator-toolbox .toolbarbutton-1, .browserContainer > findbar .findbar-button, #PlacesToolbar toolbarbutton.bookmark-item { @@ -225,9 +237,10 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper { /* Nav bar specific stuff */ #nav-bar { margin-top: 0 !important; - border: none !important; + border-top: none !important; + border-bottom: none !important; border-radius: 0 !important; - box-shadow: 0 1px var(--chrome-nav-bar-separator-color) inset !important; + box-shadow: 0 -1px var(--chrome-nav-bar-separator-color) !important; background-image: none !important; } @@ -238,11 +251,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper { padding-bottom: 0; } -/* No extra border when customizing since the nav bar doesn't have one */ -#main-window[customize-entered] #customization-container { - border: none; -} - /* Use smaller back button icon */ #back-button { -moz-image-region: rect(0, 54px, 18px, 36px); @@ -258,13 +266,23 @@ searchbar:not([oneoffui]) .search-go-button { visibility: hidden; } +/* Make the tab splitter 1px wide with a solid background. */ #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after, .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before, #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after { - background-image: linear-gradient(to top, var(--tab-separator-color), var(--tab-separator-color)); - background-position: 1px 0; - background-repeat: no-repeat; - background-size: 1px 100%; + background: var(--tab-separator-color); + width: 1px; + -moz-margin-start: 0; + -moz-margin-end: -1px; +} + +/* For the last tab separator, use margin-start of -1px to prevent jittering + due to the ::after element causing the width of the tab to extend, which + causes an overflow and makes it disappear, which removes the overflow and + causes it to reappear, etc, etc. */ +#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after { + -moz-margin-start: -1px; + -moz-margin-end: 0; } .tabbrowser-arrowscrollbox > .scrollbutton-down, @@ -282,11 +300,9 @@ searchbar:not([oneoffui]) .search-go-button { /* We normally rely on other tab elements for pointer events, but this theme hides those so we need it set here instead */ pointer-events: auto; - background-color: var(--tab-background-color); } .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content { - /* The -2px in `calc` is the height of `tabToolbarNavbarOverlap` plus a 1px offset from the center */ background-image: var(--pinned-tab-glow); background-position: center; background-size: 100%; @@ -309,14 +325,6 @@ searchbar:not([oneoffui]) .search-go-button { width: 36px; } -/* Override @tabToolbarNavbarOverlap@ */ -#TabsToolbar .toolbarbutton-1, -.tabbrowser-arrowscrollbox > .scrollbutton-up, -.tabbrowser-arrowscrollbox > .scrollbutton-down { - margin-bottom: 0; -} - -#TabsToolbar > #new-tab-button:hover, .tabs-newtab-button:hover { /* Important needed because !important is used in browser.css */ background-color: var(--tab-hover-background-color) !important; diff --git a/theme/shared/browser/devtools/animationinspector.css b/theme/shared/browser/devtools/animationinspector.css index 395fb73c..c632d912 100644 --- a/theme/shared/browser/devtools/animationinspector.css +++ b/theme/shared/browser/devtools/animationinspector.css @@ -1,25 +1,65 @@ +html { + height: 100%; +} + body { margin: 0; padding: 0; + display : flex; + flex-direction: column; + height: 100%; + overflow: hidden; + color: var(--theme-content-color3); +} + +/* The top toolbar, containing the toggle-all button */ + +#toolbar { + border-bottom: 1px solid var(--theme-splitter-color); + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + height: 20px; +} + +#toolbar .label { + padding: 1px 4px; +} + +#toggle-all { + border-width: 0px 1px; + min-height: 20px; } /* The error message, shown when an invalid/unanimated element is selected */ #error-message { - margin-top: 10%; + padding-top: 10%; text-align: center; + flex: 1; + overflow: auto; /* The error message is hidden by default */ display: none; } -/* Element picker button */ +/* The animation players container */ + +#players { + flex: 1; + overflow: auto; +} + +/* Element picker and toggle-all buttons */ -#element-picker { +#element-picker, +#toggle-all { position: relative; } -#element-picker::before { +#element-picker::before, +#toggle-all::before { content: ""; display: block; width: 16px; @@ -31,23 +71,45 @@ body { background-image: url("chrome://browser/skin/devtools/command-pick.png"); } +#toggle-all::before { + background-image: url("debugger-pause.png"); +} + #element-picker[checked]::before { background-position: -48px 0; filter: none; /* Icon is blue when checked, don't invert for light theme */ } +#toggle-all.paused::before { + background-image: url("debugger-play.png"); +} + @media (min-resolution: 2dppx) { #element-picker::before { background-image: url("chrome://browser/skin/devtools/command-pick@2x.png"); background-size: 64px; } + + #toggle-all::before { + background-image: url("debugger-pause@2x.png"); + } + + #toggle-all.paused::before { + background-image: url("debugger-play@2x.png"); + } +} + +/* Disabled playerWidget when the animation has ended */ + +.finished { + pointer-events: none; + opacity: .5; } /* Animation title gutter, contains the name, duration, iteration */ .animation-title { background-color: var(--theme-toolbar-background); - color: var(--theme-content-color3); border-bottom: 1px solid var(--theme-splitter-color); padding: 1px 4px; word-wrap: break-word; @@ -91,7 +153,8 @@ body { background-image: url(debugger-pause.png); } -.paused .timeline .toggle::before { +.paused .timeline .toggle::before, +.finished .timeline .toggle::before { background-image: url(debugger-play.png); } @@ -100,7 +163,8 @@ body { background-image: url(debugger-pause@2x.png); } - .paused .timeline .toggle::before { + .paused .timeline .toggle::before, + .finished .timeline .toggle::before { background-image: url(debugger-play@2x.png); } } diff --git a/theme/shared/browser/devtools/canvasdebugger.css b/theme/shared/browser/devtools/canvasdebugger.css index d9f15b46..24b191c3 100644 --- a/theme/shared/browser/devtools/canvasdebugger.css +++ b/theme/shared/browser/devtools/canvasdebugger.css @@ -116,14 +116,8 @@ pointer-events: none; } -.snapshot-item-footer[saving]::before { - display: inline-block; - content: ""; - background: url("chrome://global/skin/icons/loading_16.png") center no-repeat; - width: 16px; - height: 16px; +.snapshot-item-footer.devtools-throbber::before { margin-top: -2px; - -moz-margin-end: 4px; } #snapshots-list .selected label { diff --git a/theme/shared/browser/devtools/dark-theme.css b/theme/shared/browser/devtools/dark-theme.css index 61fc3fb4..1f90b493 100644 --- a/theme/shared/browser/devtools/dark-theme.css +++ b/theme/shared/browser/devtools/dark-theme.css @@ -191,7 +191,8 @@ .theme-toolbar, .devtools-toolbar, -.devtools-sidebar-tabs > tabs, +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs, .CodeMirror-dialog { /* General toolbar styling */ color: var(--theme-body-color-alt); background-color: var(--theme-toolbar-background); @@ -405,7 +406,8 @@ div.CodeMirror span.eval-text { /* Toolbars */ .devtools-toolbar, -.devtools-sidebar-tabs > tabs { +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs { -moz-appearance: none; padding: 0; border-width: 0; @@ -806,19 +808,30 @@ div.CodeMirror span.eval-text { color: var(--theme-body-color); } -.devtools-sidebar-tabs > tabs { +.devtools-sidebar-tabs tabs { position: static; font: inherit; margin-bottom: 0; overflow: hidden; } -.devtools-sidebar-tabs > tabs > .tabs-right, -.devtools-sidebar-tabs > tabs > .tabs-left { +.devtools-sidebar-alltabs { + margin: 0; + border-width: 0 0 1px 0; + -moz-border-start-width: 1px; + border-style: solid; +} + +.devtools-sidebar-alltabs dropmarker { display: none; } -.devtools-sidebar-tabs > tabs > tab { +.devtools-sidebar-tabs tabs > .tabs-right, +.devtools-sidebar-tabs tabs > .tabs-left { + display: none; +} + +.devtools-sidebar-tabs tabs > tab { -moz-appearance: none; /* We want to match the height of a toolbar with a toolbarbutton * First, we need to replicated the padding of toolbar (4px), @@ -839,70 +852,70 @@ div.CodeMirror span.eval-text { text-shadow: none; } -.devtools-sidebar-tabs > tabs > tab:first-child { +.devtools-sidebar-tabs tabs > tab:first-child { -moz-border-start-width: 0; } -.theme-dark .devtools-sidebar-tabs > tabs > tab { +.theme-dark .devtools-sidebar-tabs tabs > tab { border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; } -.theme-dark .devtools-sidebar-tabs > tabs > tab:hover { +.theme-dark .devtools-sidebar-tabs tabs > tab:hover { background: hsla(206,37%,4%,.2); border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; } -.theme-dark .devtools-sidebar-tabs > tabs > tab:hover:active { +.theme-dark .devtools-sidebar-tabs tabs > tab:hover:active { background: hsla(206,37%,4%,.4); border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; } -.theme-dark .devtools-sidebar-tabs > tabs > tab[selected] + tab { +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab { border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } -.theme-dark .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover { +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: hsla(206,37%,4%,.2); border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } -.theme-dark .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover:active { +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { background: hsla(206,37%,4%,.4); border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } -.theme-dark .devtools-sidebar-tabs > tabs > tab[selected], -.theme-dark .devtools-sidebar-tabs > tabs > tab[selected]:hover:active { +.theme-dark .devtools-sidebar-tabs tabs > tab[selected], +.theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #1d4f73; border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } -.theme-light .devtools-sidebar-tabs > tabs > tab { +.theme-light .devtools-sidebar-tabs tabs > tab { border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } -.theme-light .devtools-sidebar-tabs > tabs > tab:hover { +.theme-light .devtools-sidebar-tabs tabs > tab:hover { background: #ddd; border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } -.theme-light .devtools-sidebar-tabs > tabs > tab:hover:active { +.theme-light .devtools-sidebar-tabs tabs > tab:hover:active { background: #ddd; border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } -.theme-light .devtools-sidebar-tabs > tabs > tab[selected] + tab { +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab { border-image: linear-gradient(#aaa, #aaa); } -.theme-light .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover { +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: #ddd; border-image: linear-gradient(#aaa, #aaa); } -.theme-light .devtools-sidebar-tabs > tabs > tab[selected], -.theme-light .devtools-sidebar-tabs > tabs > tab[selected]:hover:active { +.theme-light .devtools-sidebar-tabs tabs > tab[selected], +.theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #4c9ed9; border-image: linear-gradient(#aaa, #aaa); @@ -1124,7 +1137,7 @@ div.CodeMirror span.eval-text { -moz-box-align: center; min-width: 32px; min-height: 24px; - max-width: 127px; + max-width: 110px; margin: 0; padding: 0; border-style: solid; @@ -1269,8 +1282,7 @@ div.CodeMirror span.eval-text { .theme-light .scrollbutton-up > .toolbarbutton-icon, .theme-light .scrollbutton-down > .toolbarbutton-icon, .theme-light #black-boxed-message-button .button-icon, -.theme-light #profiling-notice-button .button-icon, -.theme-light #canvas-debugging-empty-notice-button .button-icon, +.theme-light .notice-container button .button-icon, .theme-light #requests-menu-perf-notice-button .button-icon, .theme-light #requests-menu-network-summary-button .button-icon, .theme-light .event-tooltip-debugger-icon, @@ -1284,7 +1296,8 @@ div.CodeMirror span.eval-text { .theme-light .devtools-tab[icon-invertable][selected] > image, .theme-light .devtools-tab[icon-invertable][highlighted] > image, .theme-light #record-snapshot[checked] > image, -.theme-light #profiler-start[checked] > image { +.theme-light #profiler-start[checked] > image, +.theme-light .notice-container button[checked] .button-icon { filter: none !important; } @@ -1315,3 +1328,25 @@ div.CodeMirror span.eval-text { border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */ } +/* Throbbers */ +.devtools-throbber::before { + content: ""; + display: inline-block; + vertical-align: bottom; + -moz-margin-end: 0.5em; + width: 1em; + height: 1em; + border: 2px solid currentColor; + border-right-color: transparent; + border-radius: 50%; + animation: 1.1s linear throbber-spin infinite; +} + +@keyframes throbber-spin { + from { + transform: none; + } + to { + transform: rotate(360deg); + } +} diff --git a/theme/shared/browser/devtools/filters.svg b/theme/shared/browser/devtools/filters.svg index 69c6bc3e..916028be 100644 --- a/theme/shared/browser/devtools/filters.svg +++ b/theme/shared/browser/devtools/filters.svg @@ -13,4 +13,15 @@ + + + + + + + + + + + diff --git a/theme/shared/browser/devtools/light-theme.css b/theme/shared/browser/devtools/light-theme.css index 87be9ea6..b13e6829 100644 --- a/theme/shared/browser/devtools/light-theme.css +++ b/theme/shared/browser/devtools/light-theme.css @@ -194,7 +194,8 @@ .theme-toolbar, .devtools-toolbar, -.devtools-sidebar-tabs > tabs, +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs, .CodeMirror-dialog { /* General toolbar styling */ color: var(--theme-body-color-alt); background-color: var(--theme-toolbar-background); @@ -403,7 +404,8 @@ div.CodeMirror span.eval-text { /* Toolbars */ .devtools-toolbar, -.devtools-sidebar-tabs > tabs { +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs { -moz-appearance: none; padding: 0; border-width: 0; @@ -804,19 +806,30 @@ div.CodeMirror span.eval-text { color: var(--theme-body-color); } -.devtools-sidebar-tabs > tabs { +.devtools-sidebar-tabs tabs { position: static; font: inherit; margin-bottom: 0; overflow: hidden; } -.devtools-sidebar-tabs > tabs > .tabs-right, -.devtools-sidebar-tabs > tabs > .tabs-left { +.devtools-sidebar-alltabs { + margin: 0; + border-width: 0 0 1px 0; + -moz-border-start-width: 1px; + border-style: solid; +} + +.devtools-sidebar-alltabs dropmarker { display: none; } -.devtools-sidebar-tabs > tabs > tab { +.devtools-sidebar-tabs tabs > .tabs-right, +.devtools-sidebar-tabs tabs > .tabs-left { + display: none; +} + +.devtools-sidebar-tabs tabs > tab { -moz-appearance: none; /* We want to match the height of a toolbar with a toolbarbutton * First, we need to replicated the padding of toolbar (4px), @@ -837,70 +850,70 @@ div.CodeMirror span.eval-text { text-shadow: none; } -.devtools-sidebar-tabs > tabs > tab:first-child { +.devtools-sidebar-tabs tabs > tab:first-child { -moz-border-start-width: 0; } -.theme-dark .devtools-sidebar-tabs > tabs > tab { +.theme-dark .devtools-sidebar-tabs tabs > tab { border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; } -.theme-dark .devtools-sidebar-tabs > tabs > tab:hover { +.theme-dark .devtools-sidebar-tabs tabs > tab:hover { background: hsla(206,37%,4%,.2); border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; } -.theme-dark .devtools-sidebar-tabs > tabs > tab:hover:active { +.theme-dark .devtools-sidebar-tabs tabs > tab:hover:active { background: hsla(206,37%,4%,.4); border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; } -.theme-dark .devtools-sidebar-tabs > tabs > tab[selected] + tab { +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab { border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } -.theme-dark .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover { +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: hsla(206,37%,4%,.2); border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } -.theme-dark .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover:active { +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { background: hsla(206,37%,4%,.4); border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } -.theme-dark .devtools-sidebar-tabs > tabs > tab[selected], -.theme-dark .devtools-sidebar-tabs > tabs > tab[selected]:hover:active { +.theme-dark .devtools-sidebar-tabs tabs > tab[selected], +.theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #1d4f73; border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } -.theme-light .devtools-sidebar-tabs > tabs > tab { +.theme-light .devtools-sidebar-tabs tabs > tab { border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } -.theme-light .devtools-sidebar-tabs > tabs > tab:hover { +.theme-light .devtools-sidebar-tabs tabs > tab:hover { background: #ddd; border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } -.theme-light .devtools-sidebar-tabs > tabs > tab:hover:active { +.theme-light .devtools-sidebar-tabs tabs > tab:hover:active { background: #ddd; border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } -.theme-light .devtools-sidebar-tabs > tabs > tab[selected] + tab { +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab { border-image: linear-gradient(#aaa, #aaa); } -.theme-light .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover { +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: #ddd; border-image: linear-gradient(#aaa, #aaa); } -.theme-light .devtools-sidebar-tabs > tabs > tab[selected], -.theme-light .devtools-sidebar-tabs > tabs > tab[selected]:hover:active { +.theme-light .devtools-sidebar-tabs tabs > tab[selected], +.theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #4c9ed9; border-image: linear-gradient(#aaa, #aaa); @@ -1122,7 +1135,7 @@ div.CodeMirror span.eval-text { -moz-box-align: center; min-width: 32px; min-height: 24px; - max-width: 127px; + max-width: 110px; margin: 0; padding: 0; border-style: solid; @@ -1267,8 +1280,7 @@ div.CodeMirror span.eval-text { .theme-light .scrollbutton-up > .toolbarbutton-icon, .theme-light .scrollbutton-down > .toolbarbutton-icon, .theme-light #black-boxed-message-button .button-icon, -.theme-light #profiling-notice-button .button-icon, -.theme-light #canvas-debugging-empty-notice-button .button-icon, +.theme-light .notice-container button .button-icon, .theme-light #requests-menu-perf-notice-button .button-icon, .theme-light #requests-menu-network-summary-button .button-icon, .theme-light .event-tooltip-debugger-icon, @@ -1282,7 +1294,8 @@ div.CodeMirror span.eval-text { .theme-light .devtools-tab[icon-invertable][selected] > image, .theme-light .devtools-tab[icon-invertable][highlighted] > image, .theme-light #record-snapshot[checked] > image, -.theme-light #profiler-start[checked] > image { +.theme-light #profiler-start[checked] > image, +.theme-light .notice-container button[checked] .button-icon { filter: none !important; } @@ -1313,3 +1326,25 @@ div.CodeMirror span.eval-text { border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */ } +/* Throbbers */ +.devtools-throbber::before { + content: ""; + display: inline-block; + vertical-align: bottom; + -moz-margin-end: 0.5em; + width: 1em; + height: 1em; + border: 2px solid currentColor; + border-right-color: transparent; + border-radius: 50%; + animation: 1.1s linear throbber-spin infinite; +} + +@keyframes throbber-spin { + from { + transform: none; + } + to { + transform: rotate(360deg); + } +} diff --git a/theme/shared/browser/devtools/netmonitor.css b/theme/shared/browser/devtools/netmonitor.css index 508949db..1724759f 100644 --- a/theme/shared/browser/devtools/netmonitor.css +++ b/theme/shared/browser/devtools/netmonitor.css @@ -177,6 +177,11 @@ list-style-image: url(chrome://browser/skin/identity-icons-https.png); } +.security-state-weak { + cursor: pointer; + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); +} + .security-state-broken { cursor: pointer; list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); @@ -192,6 +197,11 @@ width: 8em; } +.requests-menu-transferred { + text-align: center; + width: 8em; +} + /* Network requests table: status codes */ box.requests-menu-status { @@ -484,6 +494,7 @@ label.requests-menu-status-code { } .tabpanel-summary-value { + color: inherit; -moz-padding-start: 3px; } @@ -568,8 +579,19 @@ label.requests-menu-status-code { overflow: auto; } -#security-error-message { - white-space: pre-wrap; +.security-warning-icon { + background-image: url(alerticon-warning.png); + background-size: 13px 12px; + -moz-margin-start: 5px; + vertical-align: top; + width: 13px; + height: 12px; +} + +@media (min-resolution: 2dppx) { + .security-warning-icon { + background-image: url(alerticon-warning@2x.png); + } } /* Custom request form */ diff --git a/theme/shared/browser/devtools/performance-icons.svg b/theme/shared/browser/devtools/performance-icons.svg index 2a9292d8..8bea9976 100644 --- a/theme/shared/browser/devtools/performance-icons.svg +++ b/theme/shared/browser/devtools/performance-icons.svg @@ -27,16 +27,16 @@ - - - - + + + + - - - - - + + + + + diff --git a/theme/shared/browser/devtools/performance.css b/theme/shared/browser/devtools/performance.css index 8ad74d20..198e56a1 100644 --- a/theme/shared/browser/devtools/performance.css +++ b/theme/shared/browser/devtools/performance.css @@ -29,31 +29,65 @@ -moz-border-end-color: var(--theme-splitter-color); } +#performance-toolbar-controls-detail-views > toolbarbutton { + min-width: 0; +} + +#performance-toolbar-controls-detail-views .toolbarbutton-text { + -moz-padding-start: 4px; + -moz-padding-end: 8px; +} + +/* Recording Notice */ + +#performance-view .notice-container { + font-size: 120%; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color); + padding-bottom: 20vh; +} + +#performance-view .notice-container button { + min-width: 30px; + min-height: 28px; + margin: 0; +} + /* Overview Panel */ -#record-button { +.record-button { list-style-image: url(profiler-stopwatch.svg); } -#record-button[checked] { +.record-button[checked] { list-style-image: url(profiler-stopwatch-checked.svg); } -#record-button[locked] { +.record-button[locked] { pointer-events: none; } +.record-button .button-icon { + margin: 0; +} + +.record-button .button-text { + display: none; +} + /* Details Panel */ #select-waterfall-view { list-style-image: url(performance-icons.svg#details-waterfall); } -#select-calltree-view { +#select-js-calltree-view, +#select-memory-calltree-view { list-style-image: url(performance-icons.svg#details-call-tree); } -#select-flamegraph-view { +#select-js-flamegraph-view, +#select-memory-flamegraph-view { list-style-image: url(performance-icons.svg#details-flamegraph); } @@ -65,27 +99,42 @@ overflow: auto; } +.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="allocations"], +.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="self-allocations"], .call-tree-cells-container[categories-hidden] .call-tree-category { display: none; } +.call-tree-header { + font-size: 90%; + padding-top: 2px !important; + padding-bottom: 2px !important; +} + .call-tree-header[type="duration"], .call-tree-cell[type="duration"], .call-tree-header[type="self-duration"], .call-tree-cell[type="self-duration"] { - width: 9em; + width: 6vw; } .call-tree-header[type="percentage"], .call-tree-cell[type="percentage"], .call-tree-header[type="self-percentage"], .call-tree-cell[type="self-percentage"] { - width: 6em; + width: 5vw; } .call-tree-header[type="samples"], .call-tree-cell[type="samples"] { - width: 5em; + width: 4.5vw; +} + +.call-tree-header[type="allocations"], +.call-tree-cell[type="allocations"], +.call-tree-header[type="self-allocations"], +.call-tree-cell[type="self-allocations"] { + width: 7vw; } .call-tree-header[type="function"], @@ -146,7 +195,8 @@ .call-tree-item:not([origin="content"]) .call-tree-name, .call-tree-item:not([origin="content"]) .call-tree-url, -.call-tree-item:not([origin="content"]) .call-tree-line { +.call-tree-item:not([origin="content"]) .call-tree-line, +.call-tree-item:not([origin="content"]) .call-tree-column { /* Style chrome and non-JS nodes differently. */ opacity: 0.6; } @@ -168,14 +218,21 @@ color: var(--theme-highlight-orange); } +.call-tree-column { + color: var(--theme-highlight-orange); + opacity: 0.6; +} + .call-tree-host { -moz-margin-start: 8px !important; font-size: 90%; color: var(--theme-content-color2); } +.call-tree-name[value=""], .call-tree-url[value=""], .call-tree-line[value=""], +.call-tree-column[value=""], .call-tree-host[value=""] { display: none; } @@ -280,7 +337,8 @@ } .waterfall-header-name { - padding: 4px; + padding: 2px 4px; + font-size: 90%; } .waterfall-header-tick { @@ -365,3 +423,33 @@ .marker-details-duration { font-weight: bold; } + +/* Recording items */ + +.recording-item { + padding: 4px; +} + +.recording-item-title { + font-size: 110%; +} + +.recording-item-footer { + padding-top: 4px; + font-size: 90%; +} + +.recording-item-save { + text-decoration: underline; + cursor: pointer; +} + +.recording-item-duration, +.recording-item-save { + color: var(--theme-body-color-alt); +} + +#recordings-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; +} diff --git a/theme/shared/browser/devtools/power.svg b/theme/shared/browser/devtools/power.svg new file mode 100644 index 00000000..28889519 --- /dev/null +++ b/theme/shared/browser/devtools/power.svg @@ -0,0 +1,14 @@ + + + + diff --git a/theme/shared/browser/devtools/profiler.css b/theme/shared/browser/devtools/profiler.css index ebad7880..2e29fe83 100644 --- a/theme/shared/browser/devtools/profiler.css +++ b/theme/shared/browser/devtools/profiler.css @@ -224,6 +224,8 @@ overflow: auto; } +.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="allocations"], +.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="self-allocations"], .call-tree-cells-container[categories-hidden] .call-tree-category { display: none; } @@ -309,7 +311,8 @@ .call-tree-item:not([origin="content"]) .call-tree-name, .call-tree-item:not([origin="content"]) .call-tree-url, -.call-tree-item:not([origin="content"]) .call-tree-line { +.call-tree-item:not([origin="content"]) .call-tree-line, +.call-tree-item:not([origin="content"]) .call-tree-column { /* Style chrome and non-JS nodes differently. */ opacity: 0.6; } @@ -327,19 +330,25 @@ color: var(--theme-highlight-blue); } - .call-tree-line { color: var(--theme-highlight-orange); } +.call-tree-column { + color: var(--theme-highlight-orange); + opacity: 0.6; +} + .call-tree-host { -moz-margin-start: 8px !important; font-size: 90%; color: var(--theme-content-color2); } +.call-tree-name[value=""], .call-tree-url[value=""], .call-tree-line[value=""], +.call-tree-column[value=""], .call-tree-host[value=""] { display: none; } diff --git a/theme/shared/browser/devtools/shadereditor.css b/theme/shared/browser/devtools/shadereditor.css index 90441a0c..3d01e207 100644 --- a/theme/shared/browser/devtools/shadereditor.css +++ b/theme/shared/browser/devtools/shadereditor.css @@ -22,15 +22,6 @@ font-size: 110%; } -#waiting-notice::before { - display: inline-block; - content: ""; - background: url("chrome://global/skin/icons/loading_16.png") center no-repeat; - width: 16px; - height: 16px; - -moz-margin-end: 6px; -} - /* Shaders pane */ #shaders-pane { diff --git a/theme/shared/browser/devtools/splitview.css b/theme/shared/browser/devtools/splitview.css index 55f51f2c..9710c38b 100644 --- a/theme/shared/browser/devtools/splitview.css +++ b/theme/shared/browser/devtools/splitview.css @@ -4,10 +4,13 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.loading .splitview-nav-container { - background-image: url(chrome://global/skin/icons/loading_16.png); - background-repeat: no-repeat; - background-position: center center; +.splitview-nav-container .devtools-throbber { + display: none; + text-align: center; +} + +.loading .splitview-nav-container .devtools-throbber { + display: block; } .theme-dark .splitview-nav-container { diff --git a/theme/shared/browser/devtools/webaudioeditor.css b/theme/shared/browser/devtools/webaudioeditor.css index 21f4d8dc..de0e21e0 100644 --- a/theme/shared/browser/devtools/webaudioeditor.css +++ b/theme/shared/browser/devtools/webaudioeditor.css @@ -21,15 +21,6 @@ font-size: 110%; } -#waiting-notice::before { - display: inline-block; - content: ""; - background: url("chrome://global/skin/icons/loading_16.png") center no-repeat; - width: 16px; - height: 16px; - -moz-margin-end: 6px; -} - /* Context Graph */ svg { overflow: hidden; @@ -85,13 +76,47 @@ g.edgePath.param-connection { .nodes rect { stroke: var(--theme-tab-toolbar-background); +} +.theme-light rect { + fill: var(--theme-tab-toolbar-background); +} +.theme-dark rect { fill: var(--theme-toolbar-background); } +/** + * Bypassed Nodes + */ + +.theme-light .nodes g.bypassed rect { + fill: url(chrome://browser/skin/devtools/filters.svg#bypass-light); +} +.theme-dark .nodes g.bypassed rect { + fill: url(chrome://browser/skin/devtools/filters.svg#bypass-dark); +} +.nodes g.bypassed.selected rect { + stroke: var(--theme-selection-background); +} + +/* +.nodes g.bypassed text { + opacity: 0.8; +} +*/ + +/** + * Selected Nodes + */ .nodes g.selected rect { fill: var(--theme-selection-background); } +/* Don't style bypassed nodes text different because it'd be illegible in light-theme */ +.theme-light g.selected:not(.bypassed) text { + fill: var(--theme-toolbar-background); +} + + /* Text in nodes and edges */ text { cursor: default; /* override the "text" cursor */ @@ -104,9 +129,6 @@ text { fill: var(--theme-body-color-alt); } -.theme-light g.selected text { - fill: var(--theme-toolbar-background); -} .nodes text { cursor: pointer; @@ -116,6 +138,12 @@ text { * Inspector Styles */ +/* hide the variables view scope title as its redundant, + * because there's only one scope displayed. */ +.variables-view-scope > .title { + display: none; +} + #web-audio-inspector-title { margin: 6px; } @@ -149,6 +177,20 @@ text { -moz-image-region: rect(0px,32px,16px,16px); } +/** + * Automation Styles + */ + +#automation-param-toolbar .automation-param-button[selected] { + color: var(--theme-selection-color); + background-color: var(--theme-selection-background); +} + +#automation-graph { + overflow: hidden; + -moz-box-flex: 1; +} + @media (min-resolution: 2dppx) { #inspector-pane-toggle { list-style-image: url(debugger-collapse@2x.png); @@ -168,6 +210,32 @@ text { } } +/** + * Inspector toolbar + */ + +#audio-node-toolbar .bypass { + list-style-image: url(power.svg); +} + +#audio-node-toolbar toolbarbutton[disabled] { + opacity: 0.5; + background-color: transparent; +} + +.theme-dark #audio-node-toolbar toolbarbutton[checked] { + background-color: #1d4f73; /* Select Highlight Blue */ +} +.theme-light #audio-node-toolbar toolbarbutton[checked] { + background-color: #4c9ed9; /* Select Highlight Blue */ +} + +/* don't invert checked buttons so we can have white icons on light theme */ +#audio-node-toolbar toolbarbutton[checked] > .toolbarbutton-icon { + filter: none; +} + + /** * Responsive Styles * `.devtools-responsive-container` takes care of most of diff --git a/theme/shared/browser/devtools/webconsole.css b/theme/shared/browser/devtools/webconsole.css index 0b7a942a..ea875848 100644 --- a/theme/shared/browser/devtools/webconsole.css +++ b/theme/shared/browser/devtools/webconsole.css @@ -266,6 +266,17 @@ a { margin: 0 6px; } +.message[category=network] .xhr { + background-color: var(--theme-body-color-alt); + color: var(--theme-body-background); + border-radius: 3px; + font-weight: bold; + font-size: 10px; + padding: 2px; + line-height: 10px; + -moz-margin-end: 1ex; +} + /* CSS styles */ .webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before { background-image: linear-gradient(#2DC3F3, #00B6F0); diff --git a/theme/shared/browser/dots.png b/theme/shared/browser/dots.png deleted file mode 100644 index e856fd0a..00000000 Binary files a/theme/shared/browser/dots.png and /dev/null differ diff --git a/theme/shared/browser/dots@2x.png b/theme/shared/browser/dots@2x.png deleted file mode 100644 index 5b9089bd..00000000 Binary files a/theme/shared/browser/dots@2x.png and /dev/null differ diff --git a/theme/shared/browser/downloads/allDownloadsViewOverlay.css b/theme/shared/browser/downloads/allDownloadsViewOverlay.css index 3526e01d..323ead9d 100644 --- a/theme/shared/browser/downloads/allDownloadsViewOverlay.css +++ b/theme/shared/browser/downloads/allDownloadsViewOverlay.css @@ -48,27 +48,35 @@ /*** Button icons ***/ +.downloadButton.downloadConfirmBlock, .downloadButton.downloadCancel { -moz-image-region: rect(0px, 16px, 16px, 0px); } +richlistitem.download:hover > .downloadButton.downloadConfirmBlock, richlistitem.download:hover > .downloadButton.downloadCancel { -moz-image-region: rect(0px, 32px, 16px, 16px); } +richlistitem.download:hover > .downloadButton.downloadConfirmBlock:hover, richlistitem.download:hover > .downloadButton.downloadCancel:hover { -moz-image-region: rect(0px, 48px, 16px, 32px); } +richlistitem.download:hover > .downloadButton.downloadConfirmBlock:active, richlistitem.download:hover > .downloadButton.downloadCancel:active { -moz-image-region: rect(0px, 64px, 16px, 48px); } +richlistitem.download[selected] > .downloadButton.downloadConfirmBlock, richlistitem.download[selected] > .downloadButton.downloadCancel { -moz-image-region: rect(0px, 80px, 16px, 64px); } +richlistitem.download:hover[selected] > .downloadButton.downloadConfirmBlock, richlistitem.download:hover[selected] > .downloadButton.downloadCancel { -moz-image-region: rect(0px, 96px, 16px, 80px); } +richlistitem.download:hover[selected] > .downloadButton.downloadConfirmBlock:hover, richlistitem.download:hover[selected] > .downloadButton.downloadCancel:hover { -moz-image-region: rect(0px, 112px, 16px, 96px); } +richlistitem.download:hover[selected] > .downloadButton.downloadConfirmBlock:active, richlistitem.download:hover[selected] > .downloadButton.downloadCancel:active { -moz-image-region: rect(0px, 128px, 16px, 112px); } diff --git a/theme/shared/browser/downloads/downloads.css b/theme/shared/browser/downloads/downloads.css index 13dddcce..a8d01afd 100644 --- a/theme/shared/browser/downloads/downloads.css +++ b/theme/shared/browser/downloads/downloads.css @@ -197,6 +197,7 @@ richlistitem[type="download"][selected] { /*** Button icons ***/ +.downloadButton.downloadConfirmBlock, .downloadButton.downloadCancel { list-style-image: url("chrome://symbolic-icons/skin/close.svg"); } diff --git a/theme/shared/browser/pageInfo.css b/theme/shared/browser/pageInfo.css index 10e01641..a7822e83 100644 --- a/theme/shared/browser/pageInfo.css +++ b/theme/shared/browser/pageInfo.css @@ -15,7 +15,7 @@ #viewGroup > radio[selected="true"] { background-color: Highlight; - color: HighlightText; + color: HighlightText; } #topBar { @@ -92,7 +92,7 @@ textbox[disabled] { -moz-margin-start: 5px; } -groupbox.collapsable caption .caption-icon { +groupbox.collapsable caption .caption-icon { width: 9px; height: 9px; background-repeat: no-repeat; @@ -106,22 +106,22 @@ groupbox.collapsable[closed="true"] { border: none; } -groupbox.collapsable[closed="true"] caption .caption-icon { +groupbox.collapsable[closed="true"] caption .caption-icon { background-image: url("chrome://global/skin/tree/twisty-clsd.png"); } -groupbox tree { +groupbox tree { margin: 0; border: none; } -groupbox.treebox .groupbox-body { +groupbox.treebox .groupbox-body { -moz-margin-start: 5px; -moz-margin-end: 1px; padding-top: 0; } -#securityBox description { +#securityBox description { -moz-margin-start: 10px; } @@ -161,7 +161,7 @@ treechildren::-moz-tree-cell-text(broken) { #mediaPreviewBox .inset { -moz-appearance: listbox; - margin-bottom: 0; + margin-bottom: 0; } /* Feeds Tab */ @@ -198,7 +198,7 @@ treechildren::-moz-tree-cell-text(broken) { -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow; } -.feedTitle { +.feedTitle { font-weight: bold; } @@ -247,14 +247,18 @@ treechildren::-moz-tree-cell-text(broken) { #securityPanel .header { font-size: 120%; } - + #securityPanel .fieldLabel { - margin: 2px 10px 3px 10px; + margin: 2px 10px 3px; } #securityPanel .fieldValue { font-weight: bold; - margin: 2px 10px 0px 10px; + margin: 2px 10px 3px; +} + +#securityPanel row { + -moz-box-align: center; } /* Icons for context menus */ diff --git a/theme/shared/browser/places/places.css b/theme/shared/browser/places/places.css index 9f897499..170d9929 100644 --- a/theme/shared/browser/places/places.css +++ b/theme/shared/browser/places/places.css @@ -209,6 +209,11 @@ menuitem[command="placesCmd_open:window"] { -moz-image-region: rect(0px 80px 16px 64px); } +#placesContext_open\:newprivatewindow, +menuitem[command="placesCmd_open:privatewindow"] { + list-style-image: url("chrome://browser/skin/Privacy-16.png"); +} + #placesContext_open\:newtab, menuitem[command="placesCmd_open:tab"] { list-style-image: url("chrome://browser/skin/Toolbar-small.png"); diff --git a/theme/shared/browser/preferences/in-content/icons.png b/theme/shared/browser/preferences/in-content/icons.png deleted file mode 100644 index e42a3f71..00000000 Binary files a/theme/shared/browser/preferences/in-content/icons.png and /dev/null differ diff --git a/theme/shared/browser/preferences/in-content/icons.svg b/theme/shared/browser/preferences/in-content/icons.svg new file mode 100644 index 00000000..b74eb6dc --- /dev/null +++ b/theme/shared/browser/preferences/in-content/icons.svg @@ -0,0 +1,129 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/theme/shared/browser/preferences/in-content/icons@2x.png b/theme/shared/browser/preferences/in-content/icons@2x.png deleted file mode 100644 index eea84f56..00000000 Binary files a/theme/shared/browser/preferences/in-content/icons@2x.png and /dev/null differ diff --git a/theme/shared/browser/preferences/in-content/preferences.css b/theme/shared/browser/preferences/in-content/preferences.css index 5877c058..c4f88846 100644 --- a/theme/shared/browser/preferences/in-content/preferences.css +++ b/theme/shared/browser/preferences/in-content/preferences.css @@ -28,12 +28,6 @@ treecol { display: none; } -@media (max-width: 800px) { - .category-name { - display: none; - } -} - /* header */ #header-advanced { @@ -43,6 +37,44 @@ treecol { /* General Pane */ +#startupTable { + border-collapse: collapse; +} + +#startupTable > tr > td { + padding: 0; /* remove the padding from html.css */ +} + +#startupTable > tr:not(:first-child) > td { + padding-top: 0.5em; /* add a spacing between the rows */ +} + +#startupTable > tr > .label-cell { + text-align: end; + width: 0; /* make the column as small as possible */ +>>>>>>> 3ba06d9... Upgrade to Firefox 38.0.1 +} + +#startupTable > tr > .label-cell > label { + white-space: nowrap; +} + +#startupTable > tr > .content-cell > menulist, +#startupTable > tr > .content-cell > textbox { + width: calc(100% - 8px); + margin-left: 4px; + margin-right: 4px; +} + +#startupTable > tr > .homepage-buttons { + display: flex; + flex-wrap: wrap; +} + +#startupTable > tr > .homepage-buttons > .content-cell-item { + flex-grow: 1; +} + #useFirefoxSync { font-size: 90%; -moz-margin-end: 8px !important; @@ -77,6 +109,10 @@ treecol { -moz-margin-start: 0; } +#handlersView { + height: 25em; +} + #handlersView > richlistitem { min-height: 36px !important; } @@ -103,6 +139,20 @@ treecol { -moz-margin-end: 8px !important; } +/* Collapse the non-active vboxes in decks to use only the height the + active vbox needs */ +#historyPane:not([selectedIndex="1"]) > #historyDontRememberPane, +#historyPane:not([selectedIndex="2"]) > #historyCustomPane, +#weavePrefsDeck:not([selectedIndex="1"]) > #hasAccount, +#weavePrefsDeck:not([selectedIndex="2"]) > #needsUpdate, +#weavePrefsDeck:not([selectedIndex="3"]) > #fxaDeterminingStatus, +#weavePrefsDeck:not([selectedIndex="4"]) > #noFxaAccount, +#weavePrefsDeck:not([selectedIndex="5"]) > #hasFxaAccount, +#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified, +#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected { + visibility: collapse; +} + /* XXX This style is for bug 740213 and should be removed once that bug has a solution. */ description > html|a { @@ -126,21 +176,23 @@ description > html|a { -moz-margin-start: 0; } -#advancedPrefs { - padding-bottom: 0; /* no padding needed in inContent prefs */ -} - #tabsElement { -moz-margin-end: 4px; /* add the 4px end-margin of other elements */ } +<<<<<<< HEAD #encryptionPanel { margin-top: 10px; } +======= +>>>>>>> 3ba06d9... Upgrade to Firefox 38.0.1 #telemetryLearnMore, #FHRLearnMore, #crashReporterLearnMore { + /* provide some margin between the links and the label text */ + /* !important is needed to override the rules defined in common.css */ + -moz-margin-start: 20px !important; /* center the links */ margin-top: 8px; margin-bottom: 8px; @@ -162,6 +214,10 @@ description > html|a { } } +#showUpdateHistory { + -moz-margin-start: 0; +} + /** * Dialog */ @@ -229,10 +285,26 @@ description > html|a { width: 66ch; } +.largeDialogContainer.doScroll { + overflow-y: auto; + -moz-box-flex: 1; +} + /** * End Dialog */ +/** + * Font dialog menulist fixes + */ + +#defaultFontType, +#serif, +#sans-serif, +#monospace { + min-width: 30ch; +} + /** * Sync migration */ diff --git a/theme/shared/browser/preferences/in-content/search.css b/theme/shared/browser/preferences/in-content/search.css index ebcd82ec..a203a4d8 100644 --- a/theme/shared/browser/preferences/in-content/search.css +++ b/theme/shared/browser/preferences/in-content/search.css @@ -2,6 +2,10 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + #defaultEngine { + -moz-margin-start: 0; + } + #defaultEngine > .menulist-label-box > .menulist-icon { height: 16px; } @@ -12,7 +16,7 @@ } #engineList { - margin: .5em 6px; + margin: .5em 0; } #engineList treechildren::-moz-tree-image(engineShown, checked) { @@ -43,3 +47,17 @@ height: 2px; -moz-margin-start: 0; } + +#engineShown { + min-width: 26px; +} + +#addEnginesBox { + margin-bottom: 1em; +} + +#removeEngineButton, +#restoreDefaultSearchEngines { + margin-right: 0; + margin-left: 0; +} diff --git a/theme/shared/browser/preferences/preferences.css b/theme/shared/browser/preferences/preferences.css index 201bc7ae..fd07c420 100644 --- a/theme/shared/browser/preferences/preferences.css +++ b/theme/shared/browser/preferences/preferences.css @@ -47,6 +47,7 @@ radio[pane=paneSync] { list-style-image: url("chrome://browser/skin/preferences/Options-sync.png") !important; } +/* These lines should be removed as part of fixing bug 1140495 */ label.small { font-size: smaller; } diff --git a/theme/shared/browser/reader-tour.png b/theme/shared/browser/reader-tour.png new file mode 100644 index 00000000..8e557e03 Binary files /dev/null and b/theme/shared/browser/reader-tour.png differ diff --git a/theme/shared/browser/readerMode.svg b/theme/shared/browser/readerMode.svg new file mode 100644 index 00000000..3d024ea3 --- /dev/null +++ b/theme/shared/browser/readerMode.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/theme/shared/browser/readinglist/icons.svg b/theme/shared/browser/readinglist/icons.svg new file mode 100644 index 00000000..6aa01592 --- /dev/null +++ b/theme/shared/browser/readinglist/icons.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/theme/shared/browser/readinglist/readinglist-icon.svg b/theme/shared/browser/readinglist/readinglist-icon.svg new file mode 100644 index 00000000..0a24a67c --- /dev/null +++ b/theme/shared/browser/readinglist/readinglist-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/theme/shared/browser/readinglist/sidebar.css b/theme/shared/browser/readinglist/sidebar.css new file mode 100644 index 00000000..27fc12be --- /dev/null +++ b/theme/shared/browser/readinglist/sidebar.css @@ -0,0 +1,148 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + + +:root, body { + overflow-x: hidden; +} + +body { + margin: 0; + font: message-box; + color: #333333; + -moz-user-select: none; + overflow: hidden; +} + +#emptyListInfo { + cursor: default; + padding: 3em 1em; + text-align: center; +} + +.item { + display: flex; + flex-flow: row; + cursor: pointer; + padding: 6px; + opacity: 0; + max-height: 0; + transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms; +} + +.item.active { + background: #FEFEFE; +} + +.item.selected { + background: #FDFDFD; +} + +.item-thumb-container { + min-width: 64px; + max-width: 64px; + min-height: 40px; + max-height: 40px; + border: 1px solid white; + box-shadow: 0px 1px 2px rgba(0,0,0,.35); + margin: 5px; + background-color: #ebebeb; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-image: url("chrome://branding/content/silhouette-40.svg"); +} + +.item-thumb-container.preview-available { + background-color: #fff; + background-size: cover; +} + +.item-summary-container { + display: flex; + flex-flow: column; + -moz-padding-start: 4px; + overflow: hidden; + flex-grow: 1; +} + +.item-title-lines { + display: flex; +} + +.item-title { + overflow: hidden; + max-height: 2.8em; + line-height: 1.4; + flex-grow: 1; +} + +.item-domain { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-height: 1.4em; + color: #0095DD; +} + +.item:hover .item-domain { + color: #008ACB; +} + +.item:not(:hover):not(.selected) .remove-button { + visibility: hidden; +} + +.remove-button { + padding: 0; + width: 16px; + height: 16px; + min-width: 16px; + min-height: 16px; + background-size: contain; + background-color: transparent; + border-width: 0; +} + +.item.visible { + opacity: 1; + max-height: 80px; + transition: max-height 250ms ease-in-out, opacity 250ms ease-in-out 250ms; +} + +html { + border: 1px solid ThreeDShadow; + background-color: -moz-Field; + color: -moz-FieldText; + box-sizing: border-box; +} + +.item { + -moz-padding-end: 0; +} + +.item.active { + background-color: -moz-cellhighlight; + color: -moz-cellhighlighttext; +} + +.item-title { + margin: 1px 0 0; +} + +.item-title, .item-domain { + -moz-margin-end: 6px; +} + +.remove-button { + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 16, 16, 0); +} + +.remove-button:hover { + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 32, 16, 16); +} + +.remove-button:hover:active { + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32); +} diff --git a/theme/shared/browser/session-restore.svg b/theme/shared/browser/session-restore.svg new file mode 100644 index 00000000..aadee35c --- /dev/null +++ b/theme/shared/browser/session-restore.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/theme/shared/browser/tab-crashed.svg b/theme/shared/browser/tab-crashed.svg new file mode 100644 index 00000000..9a656ebc --- /dev/null +++ b/theme/shared/browser/tab-crashed.svg @@ -0,0 +1,16 @@ + + + + + + + + \ No newline at end of file diff --git a/theme/shared/browser/tabbrowser/crashed.svg b/theme/shared/browser/tabbrowser/crashed.svg new file mode 100644 index 00000000..013e2b92 --- /dev/null +++ b/theme/shared/browser/tabbrowser/crashed.svg @@ -0,0 +1,11 @@ + + + + + + + + + diff --git a/theme/shared/browser/update-badge.svg b/theme/shared/browser/update-badge.svg new file mode 100644 index 00000000..6a4c2a00 --- /dev/null +++ b/theme/shared/browser/update-badge.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/theme/shared/browser/welcome-back.svg b/theme/shared/browser/welcome-back.svg new file mode 100644 index 00000000..38610cba --- /dev/null +++ b/theme/shared/browser/welcome-back.svg @@ -0,0 +1,17 @@ + + + + + + + + \ No newline at end of file diff --git a/theme/shared/global/aboutReader.css b/theme/shared/global/aboutReader.css index 630b26ab..2d6d3c5d 100644 --- a/theme/shared/global/aboutReader.css +++ b/theme/shared/global/aboutReader.css @@ -1,3 +1,557 @@ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +body { + padding: 64px 0; + max-width: 660px; + margin: 0 auto; +} + +@media (max-width: 785px) { + body { + padding-top: 64px; + -moz-padding-end: 0; + padding-bottom: 64px; + -moz-padding-start: 51px; + } +} + +body.loaded { + transition: color 0.4s, background-color 0.4s; +} + +.light, +.light-button { + color: #333333; + background-color: #ffffff; +} + +.dark, +.dark-button { + color: #eeeeee; + background-color: #333333; +} + +.sepia, +.sepia-button { + color: #333333; + background-color: #f0ece7; +} + +.sans-serif, +.sans-serif-button, +.sans-serif .remove-button { + font-family: Helvetica, Arial, sans-serif; +} + +.serif, +.serif-button, +.serif .remove-button { + font-family: Georgia, "Times New Roman", serif; +} + +.font-size1 { + font-size: 10px; +} + +.font-size2 { + font-size: 12px; +} + +.font-size3 { + font-size: 14px; +} + +.font-size4 { + font-size: 16px; +} + +.font-size5 { + font-size: 18px; +} + +.font-size6 { + font-size: 20px; +} + +.font-size7 { + font-size: 22px; +} + +.font-size8 { + font-size: 24px; +} + +.font-size9 { + font-size: 26px; +} + + +/* Loading/error message */ + +.message { + margin-top: 40px; + display: none; + text-align: center; + width: 100%; + font-size: 0.9em; +} + +/* Header */ + +.header { + text-align: start; + display: none; +} + +.domain { + font-size: 0.9em; + line-height: 1.48em; + padding-bottom: 4px; + font-family: Helvetica, Arial, sans-serif; + text-decoration: none; + border-bottom: 1px solid; + color: #0095dd; +} + +.light > .container > .header > .domain, +.sepia > .container > .header > .domain { + border-bottom-color: #333333; +} + +.dark > .container > .header > .domain { + border-bottom-color: #eeeeee; +} + +.header > h1 { + font-size: 1.33em; + line-height: 1.25em; + width: 100%; + margin: 30px 0; + padding: 0; +} + +.header > .credits { + font-size: 0.9em; + line-height: 1.48em; + margin: 0 0 30px 0; + padding: 0; + font-style: italic; +} + +/* Content */ + +#moz-reader-content { + display: none; + font-size: 1em; + line-height: 1.6em; +} + +.content h1, +.content h2, +.content h3 { + font-weight: bold; +} + +#moz-reader-content h1 { + font-size: 1.33em; + line-height: 1.25em; +} + +#moz-reader-content h2 { + font-size: 1.1em; + line-height: 1.51em; +} + +#moz-reader-content h3 { + font-size: 1em; + line-height: 1.66em; +} + +.content a { + text-decoration: underline; + font-weight: normal; +} + +.content a, +.content a:visited, +.content a:hover, +.content a:active { + color: #0095dd; +} + +.content * { + max-width: 100%; + height: auto; +} + +.content p, +.content code, +.content pre, +.content blockquote, +.content ul, +.content ol, +.content li, +.content figure, +.content .wp-caption { + margin: 0 0 30px 0; +} + +.content p > img:only-child, +.content p > a:only-child > img:only-child, +.content .wp-caption img, +.content figure img { + display: block; +} + +.content img[moz-reader-center] { + margin-left: auto; + margin-right: auto; +} + +#moz-reader-content .caption, +#moz-reader-content .wp-caption-text, +#moz-reader-content figcaption { + font-size: 0.9em; + line-height: 1.48em; + font-style: italic; +} + +.content code, +.content pre { + white-space: pre-wrap; +} + +.content blockquote { + padding: 0; + -moz-padding-start: 16px; +} + +.light > .container > .content blockquote, +.sepia > .container > .content blockquote { + -moz-border-start: 2px solid #333333; +} + +.dark > .container > .content blockquote { + -moz-border-start: 2px solid #eeeeee; +} +.dark *::-moz-selection { + background-color: #FFFFFF; + color: #0095DD; +} +.dark a::-moz-selection { + color: #DD4800; +} + +.content ul, +.content ol { + padding: 0; +} + +.content ul { + -moz-padding-start: 30px; + list-style: disc; +} + +.content ol { + -moz-padding-start: 30px; + list-style: decimal; +} + +/*======= Controls toolbar =======*/ + +.toolbar { + font-family: Helvetica, Arial, sans-serif; + position: fixed; + height: 100%; + top: 0; + left: 0; + margin: 0; + padding: 0; + list-style: none; + background-color: #fbfbfb; + -moz-user-select: none; + border-right: 1px solid #b5b5b5; +} + +.button { + display: block; + background-size: 24px 24px; + background-repeat: no-repeat; + color: #333; + background-color: #fbfbfb; + height: 40px; + padding: 0; +} + +.toolbar .button { + width: 40px; + background-position: center; + margin-right: -1px; + border-top: 0; + border-left: 0; + border-right: 1px solid #b5b5b5; + border-bottom: 1px solid #c1c1c1; +} + +.button[hidden] { + display: none; +} + +.dropdown { + text-align: center; + list-style: none; + margin: 0; + padding: 0; +} + +.dropdown li { + margin: 0; + padding: 0; +} + +/*======= Font style popup =======*/ + +.dropdown-popup { + min-width: 300px; + text-align: start; + position: absolute; + left: 48px; /* offset to account for toolbar width */ + z-index: 1000; + background-color: #fbfbfb; + visibility: hidden; + border-radius: 4px; + border: 1px 1px 0 1px solid #b5b5b5; + box-shadow: 0 1px 12px #666; +} + +.dropdown-popup > hr { + display: none; +} + +.open > .dropdown-popup { + visibility: visible; +} + +.dropdown-arrow { + position: absolute; + top: 30px; /* offset arrow from top of popup */ + left: -16px; + width: 24px; + height: 24px; + background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); + display: block; +} + +#font-type-buttons, +#font-size-buttons, +#color-scheme-buttons { + display: flex; + flex-direction: row; +} + +#font-type-buttons > button:first-child { + border-top-left-radius: 3px; +} +#font-type-buttons > button:last-child { + border-top-right-radius: 3px; +} +#color-scheme-buttons > button:first-child { + border-bottom-left-radius: 3px; +} +#color-scheme-buttons > button:last-child { + border-bottom-right-radius: 3px; +} + +#font-type-buttons > button, +#font-size-buttons > button, +#color-scheme-buttons > button { + text-align: center; + border: 0; +} + +#font-type-buttons > button, +#font-size-buttons > button { + width: 50%; + background-color: transparent; + border-left: 1px solid #B5B5B5; + border-bottom: 1px solid #B5B5B5; +} + +#color-scheme-buttons > button { + width: 33.33%; + font-size: 14px; +} + +#color-scheme-buttons > .dark-button { + margin-top: -1px; + height: 61px; +} + +#font-type-buttons > button:first-child, +#font-size-buttons > button:first-child { + border-left: 0; +} + +#font-type-buttons > button { + display: inline-block; + font-size: 62px; + height: 100px; +} + +#font-size-buttons > button, +#color-scheme-buttons > button { + height: 60px; +} + +#font-type-buttons > button:active:hover, +#font-type-buttons > button.selected, +#color-scheme-buttons > button:active:hover, +#color-scheme-buttons > button.selected { + box-shadow: inset 0 -3px 0 0 #fc6420; +} + +#font-type-buttons > button:active:hover, +#font-type-buttons > button.selected { + border-bottom: 1px solid #FC6420; +} + +/* Make the serif button content the same size as the sans-serif button content. */ +#font-type-buttons > button > .description { + color: #666; + font-size: 12px; + margin-top: -5px; +} + +/* Font sizes are different per-platform, so we need custom CSS to line them up. */ +#font-type-buttons > .sans-serif-button > .name { + margin-top: 5px; +} + +#font-type-buttons > .sans-serif-button > .description { + margin-top: -8px; +} + +#font-type-buttons > .serif-button > .name { + font-size: 70px; +} + +.button:hover, +#font-size-buttons > button:hover, +#font-type-buttons > button:hover { + background-color: #ebebeb; +} + +.dropdown.open, +.button:active, +#font-size-buttons > button:active, +#font-size-buttons > button.selected { + background-color: #dadada; +} + +/* Only used on Android */ +#font-size-sample { + display: none; +} + +.minus-button, +.plus-button { + background-color: transparent; + border: 0; + background-size: 18px 18px; + background-repeat: no-repeat; + background-position: center; +} + +.footer { + height: 64px; + background-color: #ebebeb; + position: absolute; + left: 0; + width: 100%; + text-align: center; + padding: 12px 0; + box-sizing: border-box; + box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset; +} + +.sepia .footer { + background-color: #dedad4; +} + +.remove-button { + background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); + margin: 0 auto; + border: 1px solid #c1c1c1; + background-position: 10px 7px; + padding-left: 42px; + padding-right: 10px; + border-radius: 2px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + font-size: 18px; +} + + +/*======= Toolbar icons =======*/ + +/* Android-only controls */ +.share-button { + display: none; +} + +.close-button { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close"); + height: 68px; + background-position: center 8px; +} + +.close-button:hover { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); + background-color: #d94141; + border-bottom: 1px solid #d94141; + border-right: 1px solid #d94141; +} + +.close-button:hover:active { + background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); + background-color: #AE2325; + border-bottom: 1px solid #AE2325; + border-right: 1px solid #AE2325; +} + +.style-button { + background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); +} + +.toggle-button.on { + background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); +} + +.toggle-button { + background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg"); +} + +.list-button { + background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg"); +} +.list-button.on { + background-color: #d9d9d9; +} + +.minus-button { + background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); +} + +.plus-button { + background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); +} + +@media print { + .toolbar { + display: none; + } + .footer { + display: none; + } +} diff --git a/theme/shared/global/aboutSupport.css b/theme/shared/global/aboutSupport.css index 1438ab0a..71ef7a76 100644 --- a/theme/shared/global/aboutSupport.css +++ b/theme/shared/global/aboutSupport.css @@ -78,7 +78,7 @@ td { overflow: hidden; } -#reset-box { +#action-box { background-color: -moz-Dialog; border: 1px solid ThreeDShadow; color: -moz-DialogText; @@ -89,10 +89,15 @@ td { -moz-margin-end: 0; padding: 16px; width: 30%; - visibility: hidden; } -#reset-box:-moz-dir(rtl) { +#action-box, +#reset-box, +#safe-mode-box { + display: none; +} + +#action-box:-moz-dir(rtl) { float: left; } @@ -100,7 +105,7 @@ td { margin-top: 0; } -#reset-box > button { +#action-box button { display: block; } diff --git a/theme/shared/global/config.css b/theme/shared/global/config.css index 841b9675..d20c9baf 100644 --- a/theme/shared/global/config.css +++ b/theme/shared/global/config.css @@ -2,9 +2,6 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -@import url("chrome://global/skin/"); -@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); - #warningScreen { font: 11pt cantarell; background-color: #f6f6f4; @@ -47,16 +44,18 @@ margin-top: 1.9em; } +#filterRow { + margin-top: 5px; +} + #showWarningNextTime { margin-top: 0.6em; color: grey; } -#exclam { - /* - list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=dialog"); - -moz-margin-end: 3em; - */ +#configTree { + margin-top: 5px; + margin-bottom: 5px; } #configTreeBody::-moz-tree-cell-text(user) { @@ -66,12 +65,3 @@ #configTreeBody::-moz-tree-cell-text(locked) { font-style: italic; } - -#configTree { - margin-top: 5px; - margin-bottom: 5px; -} - -#filterRow { - margin-top: 5px; -} diff --git a/theme/shared/global/icons/warning.svg b/theme/shared/global/icons/warning.svg new file mode 100644 index 00000000..00829703 --- /dev/null +++ b/theme/shared/global/icons/warning.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/theme/shared/global/in-content/check-partial.svg b/theme/shared/global/in-content/check-partial.svg new file mode 100644 index 00000000..b46a7319 --- /dev/null +++ b/theme/shared/global/in-content/check-partial.svg @@ -0,0 +1,31 @@ + + + + + + + + + + \ No newline at end of file diff --git a/theme/shared/global/in-content/common.css b/theme/shared/global/in-content/common.css index ace29455..e1b9fa38 100644 --- a/theme/shared/global/in-content/common.css +++ b/theme/shared/global/in-content/common.css @@ -6,7 +6,8 @@ @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; html|body, -xul|page { +xul|page, +xul|window { font: message-box; -moz-appearance: none; background-color: #eaeaea; @@ -76,6 +77,7 @@ xul|caption { margin: 0; } +xul|caption > xul|checkbox, xul|caption > xul|label { font-size: 1.1rem; font-weight: bold; @@ -117,7 +119,7 @@ xul|prefpane > xul|*.content-box { xul|groupbox { -moz-appearance: none; border: none; - margin: 15px 0; + margin: 15px 0 0; -moz-padding-start: 0; -moz-padding-end: 0; font-size: 1.0rem; @@ -252,7 +254,7 @@ xul|menulist > xul|*.menulist-label-box { padding-left: 10px !important; } -xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon { +xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] { -moz-margin-end: 5px; } @@ -436,23 +438,23 @@ xul|textbox[disabled="true"] { /* Links */ html|a, -xul|*.text-link, -xul|*.inline-link { +.text-link, +.inline-link { line-height: 22px; color: #0095dd; text-decoration: none; } html|a:hover, -xul|*.text-link:hover, -xul|*.inline-link:hover { - color: #4cb1ff; - text-decoration: none; +.text-link:hover, +.inline-link:hover { + color: #178ce5; + text-decoration: underline; } html|a:hover:active, -xul|*.text-link:hover:active, -xul|*.inline-link:hover:active { +.text-link:hover:active, +.inline-link:hover:active { color: #ff9500; text-decoration: none; } @@ -465,11 +467,29 @@ xul|*.inline-link:-moz-focusring { /* Checkboxes and radio buttons */ +/* Hide the actual checkbox */ +html|input[type="checkbox"] { + opacity: 0; + position: absolute; +} + +/* Create a box to style as the checkbox */ +html|input[type="checkbox"] + html|label:before { + display: inline-block; + content: ""; + vertical-align: middle; +} + +html|input[type="checkbox"] + html|label { + line-height: 0px; +} + xul|checkbox { -moz-margin-start: 0; } -xul|*.checkbox-check { +xul|*.checkbox-check, +html|input[type="checkbox"] + html|label:before { -moz-appearance: none; width: 23px; height: 23px; @@ -484,7 +504,8 @@ xul|*.checkbox-check { box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03); } -xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check { +xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, +html|input[type="checkbox"]:not(:disabled) + html|label:hover:before { border-color: #0095dd; } @@ -492,7 +513,12 @@ xul|*.checkbox-check[checked] { list-style-image: url("chrome://global/skin/in-content/check.svg#check"); } -xul|checkbox[disabled="true"] > xul|*.checkbox-check { +html|input[type="checkbox"]:checked + html|label:before { + background-image: url("chrome://global/skin/in-content/check.svg#check"), linear-gradient(#fff, rgba(255,255,255,0.8)) !important; +} + +xul|checkbox[disabled="true"] > xul|*.checkbox-check, +html|input[type="checkbox"]:disabled + html|label { opacity: 0.5; } @@ -505,6 +531,10 @@ xul|richlistitem > xul|*.checkbox-check { margin: 3px 6px; } +xul|radio { + -moz-margin-start: 0; +} + xul|*.radio-check { -moz-appearance: none; width: 23px; @@ -591,6 +621,7 @@ xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[cur font-weight: normal; line-height: 32px; margin: 0; + -moz-user-select: none; } /* File fields */ @@ -676,6 +707,11 @@ xul|tree { border: 1px solid #c1c1c1; } +xul|tree:-moz-focusring, +xul|richlistbox:-moz-focusring { + border: 1px dotted #0095dd; +} + xul|listheader, xul|treecols { -moz-appearance: none; @@ -693,7 +729,7 @@ xul|treecolpicker { padding: 5px 10px; } -xul|treecol:not([hideheader="true"]):hover, +xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover, xul|treecolpicker:hover { background-color: #dadada; color: #333; @@ -707,21 +743,15 @@ xul|treecolpicker { } xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { - list-style-image: url("chrome://global/skin/in-content/sorter.png"); - width: 12px; - height: 8px; + list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown"); + width: 18px; + height: 18px; } -xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="descending"] { +xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] { transform: scaleY(-1); } -@media (min-resolution: 2dppx) { - xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] { - list-style-image: url("chrome://global/skin/in-content/sorter@2x.png"); - } -} - /* This is the only way to increase the height of a tree row unfortunately */ xul|treechildren::-moz-tree-row { min-height: 2em; @@ -735,6 +765,7 @@ xul|treechildren::-moz-tree-cell-text { xul|treechildren::-moz-tree-cell-text(selected) { color: #fff; } + xul|tab[selected] { /* Override styles for tab[selected] from toolkit/themes/linux/global/tabbox.css */ @@ -744,6 +775,7 @@ xul|tab[selected] { } xul|button, +html|button, xul|colorpicker[type="button"], xul|menulist { margin: 2px 4px; @@ -793,7 +825,6 @@ xul|*.checkbox-check[checked] { xul|radio { -moz-binding: url("chrome://global/content/bindings/radio.xml#radio"); -moz-box-align: center; - -moz-margin-start: 0; } xul|*.radio-check { diff --git a/theme/shared/global/in-content/info-pages.css b/theme/shared/global/in-content/info-pages.css new file mode 100644 index 00000000..09838d32 --- /dev/null +++ b/theme/shared/global/in-content/info-pages.css @@ -0,0 +1,89 @@ +@import url("chrome://global/skin/in-content/common.css"); +/* Body and container */ +body { + display: flex; + box-sizing: padding-box; + min-height: 100vh; + padding-top: 0; + padding-bottom: 0; + -moz-padding-start: calc(48px + 4.6em); + -moz-padding-end: 48px; + align-items: center; + justify-content: center; +} + +.container { + min-width: 13em; + max-width: 52em; +} + +/* Typography */ +.title { + background-image: url("chrome://browser/skin/aboutNetError_info.svg"); + background-position: left 0; + background-repeat: no-repeat; + background-size: 1.6em; + -moz-margin-start: -2.3em; + -moz-padding-start: 2.3em; + font-size: 2.5em; +} + +.title:-moz-dir(rtl) { + background-position: right 0; +} + +.title-text { + border-bottom: 1px solid #C1C1C1; + font-size: inherit; + padding-bottom: 0.4em; +} + +@media (max-width: 675px) { + body { + padding: 0 48px; + } + + .title { + background-image: none !important; + -moz-padding-start: 0; + -moz-margin-start: 0; + } + + .title-text { + padding-top: 0; + } +} + +ul, ol { + margin: 0; + padding: 0; + -moz-margin-start: 1em; +} + +ul > li, ol > li { + margin-bottom: .5em; +} + +ul { + list-style: disc; +} + +/* Buttons */ +.button-container { + margin-top: 1.2em; +} + +.button-container > button { + min-width: 150px; +} + +.button-container > button:first-child { + -moz-margin-start: 0; +} + +/* Trees */ +tree { + min-height: 12em; + margin-top: 1.2em; + width: 100%; +} \ No newline at end of file diff --git a/theme/shared/global/in-content/sorter.png b/theme/shared/global/in-content/sorter.png deleted file mode 100644 index 41934733..00000000 Binary files a/theme/shared/global/in-content/sorter.png and /dev/null differ diff --git a/theme/shared/global/in-content/sorter@2x.png b/theme/shared/global/in-content/sorter@2x.png deleted file mode 100644 index 5e4d46d4..00000000 Binary files a/theme/shared/global/in-content/sorter@2x.png and /dev/null differ diff --git a/theme/shared/global/media/videoClickToPlayButton.svg b/theme/shared/global/media/videoClickToPlayButton.svg index 67ff4a78..f118afb0 100644 --- a/theme/shared/global/media/videoClickToPlayButton.svg +++ b/theme/shared/global/media/videoClickToPlayButton.svg @@ -46,58 +46,34 @@ height="1.25" color-interpolation-filters="sRGB" id="dropShadow"> - - - - - - - + + style="fill:#ffffff;" /> + style="filter:url(#dropShadow);" /> + style="fill:url(#arrowGradient);" /> + style="fill:url(#whiteGradient);" /> + style="fill:white;fill-opacity:.3;" /> + style="fill:white;fill-opacity:.8;" /> diff --git a/theme/shared/global/reader/RM-Add-24x24.svg b/theme/shared/global/reader/RM-Add-24x24.svg new file mode 100644 index 00000000..66551ef1 --- /dev/null +++ b/theme/shared/global/reader/RM-Add-24x24.svg @@ -0,0 +1,6 @@ + + + + diff --git a/theme/shared/global/reader/RM-Close-24x24.svg b/theme/shared/global/reader/RM-Close-24x24.svg new file mode 100644 index 00000000..b0674b2d --- /dev/null +++ b/theme/shared/global/reader/RM-Close-24x24.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/theme/shared/global/reader/RM-Delete-24x24.svg b/theme/shared/global/reader/RM-Delete-24x24.svg new file mode 100644 index 00000000..6010fbe7 --- /dev/null +++ b/theme/shared/global/reader/RM-Delete-24x24.svg @@ -0,0 +1,6 @@ + + + + diff --git a/theme/shared/global/reader/RM-Minus-24x24.svg b/theme/shared/global/reader/RM-Minus-24x24.svg new file mode 100644 index 00000000..9da7e03b --- /dev/null +++ b/theme/shared/global/reader/RM-Minus-24x24.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/theme/shared/global/reader/RM-Plus-24x24.svg b/theme/shared/global/reader/RM-Plus-24x24.svg new file mode 100644 index 00000000..249912a1 --- /dev/null +++ b/theme/shared/global/reader/RM-Plus-24x24.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/theme/shared/global/reader/RM-Reading-List-24x24.svg b/theme/shared/global/reader/RM-Reading-List-24x24.svg new file mode 100644 index 00000000..1f21efd5 --- /dev/null +++ b/theme/shared/global/reader/RM-Reading-List-24x24.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/theme/shared/global/reader/RM-Type-Controls-24x24.svg b/theme/shared/global/reader/RM-Type-Controls-24x24.svg new file mode 100644 index 00000000..a25429ad --- /dev/null +++ b/theme/shared/global/reader/RM-Type-Controls-24x24.svg @@ -0,0 +1,23 @@ + + + + + + + diff --git a/theme/shared/global/reader/RM-Type-Controls-Arrow.svg b/theme/shared/global/reader/RM-Type-Controls-Arrow.svg new file mode 100644 index 00000000..9094d8a3 --- /dev/null +++ b/theme/shared/global/reader/RM-Type-Controls-Arrow.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/theme/shared/mozapps/extensions/utilities.svg b/theme/shared/mozapps/extensions/utilities.svg new file mode 100644 index 00000000..fd911001 --- /dev/null +++ b/theme/shared/mozapps/extensions/utilities.svg @@ -0,0 +1,25 @@ + + + + + + + + +