Bug 1442296 - Adapt input and button styling inside popups to look better with themes.
MozReview-Commit-ID: 5gVCkhQ91Q3
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -330,21 +330,16 @@ html|input.urlbar-input {
}
.urlbar-display {
margin-top: 0;
margin-bottom: 0;
color: GrayText;
}
-#pageAction-urlbar-shareURL,
-#pageAction-panel-shareURL {
- list-style-image: url("chrome://browser/skin/share.svg");
-}
-
%include ../shared/urlbarSearchSuggestionsNotification.inc.css
/* ----- AUTOCOMPLETE ----- */
%include ../shared/autocomplete.inc.css
%include ../shared/urlbar-autocomplete.inc.css
:root {
@@ -409,48 +404,35 @@ html|input.urlbar-input {
#editBMPanel_rows > row:last-of-type {
margin-bottom: 0;
}
/**** Input elements ****/
#editBMPanel_rows > row > textbox,
#editBMPanel_rows > row > hbox > textbox {
- -moz-appearance: none;
- background: linear-gradient(#fafafa, #fff);
- background-clip: padding-box;
- border-radius: 3px;
- border: 1px solid rgba(0,0,0,.3) !important;
- box-shadow: inset 0 1px 1px 1px rgba(0,0,0,.05),
- 0 1px rgba(255,255,255,.3);
margin: 0;
padding: 3px 6px;
}
#editBMPanel_rows > row > textbox[focused="true"],
#editBMPanel_rows > row > hbox > textbox[focused="true"] {
border-color: -moz-mac-focusring !important;
box-shadow: var(--focus-ring-box-shadow);
}
/**** HUD style buttons ****/
.editBookmarkPanelHeaderButton,
.editBookmarkPanelBottomButton {
- @hudButton@
margin: 0;
min-width: 82px;
min-height: 22px;
}
-.editBookmarkPanelHeaderButton:hover:active,
-.editBookmarkPanelBottomButton:hover:active {
- @hudButtonPressed@
-}
-
.editBookmarkPanelHeaderButton:-moz-focusring,
.editBookmarkPanelBottomButton:-moz-focusring {
box-shadow: var(--focus-ring-box-shadow);
}
.editBookmarkPanelBottomButton[default="true"] {
background-color: #666;
}
@@ -463,103 +445,36 @@ html|input.urlbar-input {
margin-inline-start: 8px;
}
/* The following elements come from editBookmarkPanel.inc.xul. Styling that's
specific to the editBookmarkPanel should be in browser.css. Styling that
should be shared by all editBookmarkPanel.inc.xul consumers should be in
editBookmark.css. */
-#editBMPanel_newFolderBox {
- background: linear-gradient(#fff, #f2f2f2);
- background-origin: padding-box;
- background-clip: padding-box;
- border-radius: 0 0 3px 3px;
- border: 1px solid #a5a5a5;
- box-shadow: inset 0 1px rgba(255,255,255,.8),
- inset 0 0 1px rgba(255,255, 255,.25),
- 0 1px rgba(255,255,255,.3);
- margin: 0;
- padding: 0;
- height: 20px;
-}
-
-#editBMPanel_newFolderButton {
- -moz-appearance: none;
- border: 0 solid #a5a5a5;
- border-inline-end-width: 1px;
- padding: 0 9px;
- margin: 0;
- min-width: 21px;
- min-height: 20px;
- height: 20px;
- color: #fff;
- list-style-image: url("chrome://browser/skin/panel-plus-sign.png");
- position: relative;
-}
-
-#editBMPanel_newFolderButton:hover:active {
- background: linear-gradient(rgba(40,40,40,.9), rgba(70,70,70,.9));
- box-shadow: inset 0 0 3px rgba(0,0,0,.2), inset 0 1px 7px rgba(0,0,0,.4);
-}
-
-#editBMPanel_newFolderButton:-moz-focusring {
- box-shadow: var(--focus-ring-box-shadow);
-}
-
-#editBMPanel_newFolderButton .button-text {
- display: none;
-}
-
-#editBMPanel_folderMenuList {
- @hudButton@
- background-clip: padding-box;
- margin: 0;
- min-height: 22px;
- padding-top: 2px;
- padding-bottom: 1px;
- padding-inline-start: 8px;
- padding-inline-end: 4px;
-}
-
#editBMPanel_folderMenuList:-moz-focusring {
box-shadow: var(--focus-ring-box-shadow);
}
-#editBMPanel_folderMenuList[open="true"],
-#editBMPanel_folderMenuList:hover:active {
- @hudButtonPressed@
-}
-
#editBMPanel_folderMenuList > .menulist-dropmarker {
-moz-appearance: none;
display: -moz-box;
background-color: transparent;
border: 0;
margin: 0;
padding: 0;
padding-inline-end: 4px;
- width: 7px;
-}
-
-#editBMPanel_folderMenuList > .menulist-dropmarker > .dropmarker-icon {
- list-style-image: url("chrome://global/skin/icons/panel-dropmarker.png");
}
/**** folder tree and tag selector ****/
#editBMPanel_folderTree,
-#editBMPanel_tagsSelector {
- -moz-appearance: none;
- background: linear-gradient(#fafafa, #fff);
+#editBMPanel_tagsSelector,
+#editBMPanel_folderMenuList {
background-clip: padding-box;
- border-radius: 3px;
- border: 1px solid rgba(0,0,0,.3);
- box-shadow: inset 0 1px 1px 1px rgba(0,0,0,.05),
- 0 1px rgba(255,255,255,.3);
margin: 0;
}
#editBMPanel_folderTree:-moz-focusring,
#editBMPanel_tagsSelector:-moz-focusring {
border-color: -moz-mac-focusring;
box-shadow: var(--focus-ring-box-shadow);
}
@@ -567,72 +482,54 @@ html|input.urlbar-input {
#editBMPanel_folderTree {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
margin: 0 !important;
min-width: 27em;
position: relative;
+ border: 1px solid var(--arrowpanel-dimmed-further);
+ background: var(--arrowpanel-dimmed);
+}
+
+#editBookmarkPanel tree[type="places"] {
+ -moz-appearance: none;
+ color: inherit;
+ background: var(--arrowpanel-dimmed);
}
/**** expanders ****/
#editBookmarkPanel .expander-up,
#editBookmarkPanel .expander-down {
- @hudButton@
+ border: 1px solid var(--arrowpanel-dimmed-further);
+ color: inherit;
+ background: var(--arrowpanel-dimmed);
margin: 0;
margin-inline-start: 4px;
min-width: 27px;
min-height: 22px;
}
#editBookmarkPanel .expander-up:-moz-focusring,
#editBookmarkPanel .expander-down:-moz-focusring {
box-shadow: var(--focus-ring-box-shadow);
}
-#editBookmarkPanel .expander-up:hover:active,
-#editBookmarkPanel .expander-down:hover:active {
- @hudButtonPressed@
-}
-
-#editBookmarkPanel .expander-up {
- list-style-image: url("chrome://browser/skin/panel-expander-open.png");
-}
-
-#editBookmarkPanel .expander-down {
- list-style-image: url("chrome://browser/skin/panel-expander-closed.png");
-}
-
#editBookmarkPanel .expander-up > .button-box > .button-icon,
#editBookmarkPanel .expander-down > .button-box > .button-icon {
margin: 1px 0 0;
}
#editBookmarkPanel .expander-up > .button-box > .button-text,
#editBookmarkPanel .expander-down > .button-box > .button-text {
display: none;
}
-@media (min-resolution: 2dppx) {
- #editBookmarkPanel .expander-up {
- list-style-image: url("chrome://browser/skin/panel-expander-open@2x.png");
- }
-
- #editBookmarkPanel .expander-down {
- list-style-image: url("chrome://browser/skin/panel-expander-closed@2x.png");
- }
-
- #editBookmarkPanel .expander-up > .button-box > .button-icon,
- #editBookmarkPanel .expander-down > .button-box > .button-icon {
- width: 9px;
- }
-}
-
#editBMPanel_tagsField > .textbox-input-box > html|*.textbox-input::placeholder {
opacity: 1.0;
color: #bbb;
}
.editBMPanel_rowLabel {
text-align: end;
}
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -5,20 +5,16 @@
browser.jar:
% skin browser classic/1.0 %skin/classic/browser/
#include ../shared/jar.inc.mn
skin/classic/browser/sanitizeDialog.css
* skin/classic/browser/syncedtabs/sidebar.css (syncedtabs/sidebar.css)
* skin/classic/browser/browser.css
* skin/classic/browser/compacttheme.css
skin/classic/browser/subtle-pattern.png
- skin/classic/browser/panel-expander-closed.png
- skin/classic/browser/panel-expander-closed@2x.png
- skin/classic/browser/panel-expander-open.png
- skin/classic/browser/panel-expander-open@2x.png
skin/classic/browser/panel-plus-sign.png
skin/classic/browser/page-livemarks.png
* skin/classic/browser/pageInfo.css
* skin/classic/browser/searchbar.css
skin/classic/browser/slowStartup-16.png
skin/classic/browser/toolbarbutton-dropmarker.png
skin/classic/browser/toolbarbutton-dropmarker@2x.png
skin/classic/browser/webRTC-indicator.css
deleted file mode 100644
index e08c1636bb12768afc74c094437d8ed50ff73fe6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 0e7ded50f4143b22ec7ecbd831f33b07f8d3a339..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 596f0469cf83f8b9200f8457d7fe8e055d8817f9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 391337030cd9eef9b0deb9509653bc3d5d8e2c20..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -140,8 +140,77 @@
/* End private browsing and accessibility indicators */
/* Force background for datepicker popup to white so themes don't override it */
#DateTimePickerPanel[active="true"] > .panel-arrowcontainer > .panel-arrowbox,
#DateTimePickerPanel[active="true"] > .panel-arrowcontainer > .panel-arrowcontent {
--arrowpanel-background: #fff;
}
+
+#editBookmarkPanel button,
+panel[type=arrow] textbox,
+panel[type=arrow] menulist,
+#editBMPanel_tagsSelector,
+#editBMPanel_folderMenuList {
+ -moz-appearance: none;
+ border: 1px solid var(--arrowpanel-dimmed-further);
+ background: var(--arrowpanel-dimmed);
+ color: inherit;
+ border-radius: 2px;
+}
+
+#editBMPanel_folderTree {
+ -moz-appearance: none;
+ border: 1px solid var(--arrowpanel-dimmed-further);
+ background-color: var(--arrowpanel-dimmed);
+}
+
+panel[type=arrow] textbox {
+ background: transparent;
+}
+
+#editBookmarkPanel button:hover,
+panel[type=arrow] menulist:hover {
+ background: var(--arrowpanel-dimmed-further);
+}
+
+#editBookmarkPanel button:hover:active,
+panel[type=arrow] menulist:hover:active,
+panel[type=arrow] menulist[open]
+{
+ background: var(--arrowpanel-dimmed-even-further);
+}
+
+#editBookmarkPanel .expander-up,
+#editBookmarkPanel .expander-down,
+#editBookmarkPanel .menulist-dropmarker {
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#editBookmarkPanel .expander-up > .button-box > .button-icon,
+#editBookmarkPanel .expander-down > .button-box > .button-icon {
+ margin: 1px 0 0;
+}
+
+#editBookmarkPanel .expander-up {
+ list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg")
+}
+
+#editBookmarkPanel .menulist-dropmarker,
+#editBookmarkPanel .expander-down {
+ list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg")
+}
+
+#editBMPanel_folderMenuList > .menulist-dropmarker {
+ -moz-appearance: none;
+ display: -moz-box;
+ background-color: transparent;
+ border: 0;
+ margin: 0;
+ padding: 0;
+ padding-inline-end: 4px;
+}
+
+#editBookmarkPanel_folderMenuList {
+ padding-left: 5px;
+}
--- a/browser/themes/shared/places/tree-icons.inc.css
+++ b/browser/themes/shared/places/tree-icons.inc.css
@@ -1,15 +1,15 @@
/* 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/. */
treechildren:-moz-tree-image {
-moz-context-properties: fill, fill-opacity;
- fill: -moz-FieldText;
+ fill: currentColor;
fill-opacity: 0.7;
}
treechildren::-moz-tree-image(title) {
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
padding-inline-end: 2px;
margin: 0 2px;
width: 16px;
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1109,9 +1109,8 @@ panel[touchmode] .PanelUI-subView #appMe
#ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
#ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
/* Touch padding should follow the 11/12 ratio, where 12px is the default
font-size with 11px being the preferred padding size. */
padding-top: .9167em;
padding-bottom: .9167em;
}
-
--- a/browser/themes/windows/places/editBookmark.css
+++ b/browser/themes/windows/places/editBookmark.css
@@ -10,16 +10,17 @@
.folder-icon > .menu-iconic-left {
display: -moz-box;
}
.folder-icon {
list-style-image: url("chrome://global/skin/icons/folder-item.png") !important;
-moz-image-region: rect(0px, 32px, 16px, 16px) !important;
+ background-color: var(--arrowpanel-dimmed);
}
/**** expanders ****/
.expander-up,
.expander-down {
min-width: 0;
@@ -42,16 +43,17 @@
#editBookmarkPanelContent {
min-width: 23em;
}
#editBMPanel_folderTree {
margin-top: 2px;
margin-bottom: 2px;
+ color: inherit;
}
/* Hide the value column of the tag autocomplete popup
* leaving only the comment column visible. This is
* so that only the tag being edited is shown in the
* popup.
*/
#editBMPanel_tagsField #treecolAutoCompleteValue {
@@ -73,8 +75,12 @@
-moz-image-region: auto !important;
}
#editBMPanel_folderMenuList[selectedIndex="2"],
#editBMPanel_unfiledRootItem {
list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png") !important;
-moz-image-region: auto !important;
}
+
+#editBMPanel_chooseFolderSeparator {
+
+}
--- a/toolkit/themes/osx/global/tree.css
+++ b/toolkit/themes/osx/global/tree.css
@@ -26,16 +26,22 @@ tree {
/* ::::: tree rows ::::: */
treechildren::-moz-tree-row {
border-top: 1px solid transparent;
height: 18px;
background-color: -moz-field;
}
+#editBMPanel_folderTree treechildren::-moz-tree-row {
+ border-top: 1px solid transparent;
+ height: 18px;
+ background-color: transparent;
+}
+
treechildren::-moz-tree-row(multicol, odd) {
background-color: -moz-oddtreerow;
}
treechildren::-moz-tree-row(selected) {
background-color: -moz-mac-secondaryhighlight;
}
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/icons/arrow-up-12.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="context-fill">
+ <path d="M6 3a1 1 0 0 0-.707.293l-4 4a1 1 0 0 0 1.414 1.414L6 5.414l3.293 3.293a1 1 0 0 0 1.414-1.414l-4-4A1 1 0 0 0 6 3z"/>
+</svg>
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -38,16 +38,17 @@ toolkit.jar:
skin/classic/global/icons/info.svg (../../shared/incontent-icons/info.svg)
skin/classic/global/icons/input-clear.svg (../../shared/icons/input-clear.svg)
skin/classic/global/icons/loading.png (../../shared/icons/loading.png)
skin/classic/global/icons/loading@2x.png (../../shared/icons/loading@2x.png)
skin/classic/global/icons/spinner-arrow-down.svg (../../shared/icons/spinner-arrow-down.svg)
skin/classic/global/icons/spinner-arrow-up.svg (../../shared/icons/spinner-arrow-up.svg)
skin/classic/global/icons/arrow-dropdown-12.svg (../../shared/icons/arrow-dropdown-12.svg)
skin/classic/global/icons/arrow-dropdown-16.svg (../../shared/icons/arrow-dropdown-16.svg)
+ skin/classic/global/icons/arrow-up-12.svg (../../shared/icons/arrow-up-12.svg)
skin/classic/global/icons/warning.svg (../../shared/icons/warning.svg)
skin/classic/global/illustrations/about-rights.svg (../../shared/illustrations/about-rights.svg)
skin/classic/global/icons/blocked.svg (../../shared/incontent-icons/blocked.svg)
skin/classic/global/illustrations/about-license.svg (../../shared/illustrations/about-license.svg)
skin/classic/global/narrate.css (../../shared/narrate.css)
skin/classic/global/narrate/arrow.svg (../../shared/narrate/arrow.svg)
skin/classic/global/narrate/back.svg (../../shared/narrate/back.svg)
skin/classic/global/narrate/fast.svg (../../shared/narrate/fast.svg)
--- a/toolkit/themes/windows/global/tree.css
+++ b/toolkit/themes/windows/global/tree.css
@@ -348,16 +348,26 @@ treechildren::-moz-tree-cell-text(active
--treechildren-hoverBorder: var(--treechildren-hoverColor);
--treechildren-hoverBackground: rgb(229,243,255);
--treechildren-hoverCurrentBorder: var(--treechildren-currentColor);
--treechildren-hoverCurrentBackground: rgba(131,183,249,.16);
--treechildren-hoverSelectedBorder: var(--treechildren-focusColor);
--treechildren-hoverSelectedBackground: rgb(205,232,255);
}
+ #editBMPanel_folderTree treechildren::-moz-tree-row(current, focus) {
+ border-color: var(--treechildren-hoverBorder);
+ background-color: var(--arrowpanel-dimmed);
+ outline: var(--treechildren-outline);
+ }
+
+ #editBMPanel_folderTree treechildren::-moz-tree-row(hover, current) {
+ background-color: var(--arrowpanel-dimmed);
+ }
+
treechildren::-moz-tree-row {
height: 1.8em;
color: -moz-FieldText;
margin-inline-start: 1px;
margin-inline-end: 1px;
border-width: 1px;
border-color: transparent;
background-repeat: no-repeat;