Bug 1442296 - Adapt input and button styling inside popups to look better with themes. draft
authorDylan Stokes <stokesdy@msu.edu>
Thu, 29 Mar 2018 22:13:44 -0400
changeset 785827 663df471747b2a58868af7c6b205f7cd75e642a9
parent 785586 cc0d7de218cb0c260c8ba0cf6637845ad2222f49
push id107327
push userbmo:stokesdy@msu.edu
push dateFri, 20 Apr 2018 17:57:27 +0000
bugs1442296
milestone61.0a1
Bug 1442296 - Adapt input and button styling inside popups to look better with themes. MozReview-Commit-ID: 5gVCkhQ91Q3
browser/themes/osx/browser.css
browser/themes/osx/jar.mn
browser/themes/osx/panel-expander-closed.png
browser/themes/osx/panel-expander-closed@2x.png
browser/themes/osx/panel-expander-open.png
browser/themes/osx/panel-expander-open@2x.png
browser/themes/shared/browser.inc.css
browser/themes/shared/places/tree-icons.inc.css
browser/themes/windows/browser.css
browser/themes/windows/places/editBookmark.css
toolkit/themes/osx/global/tree.css
toolkit/themes/shared/icons/arrow-up-12.svg
toolkit/themes/shared/jar.inc.mn
toolkit/themes/windows/global/tree.css
--- 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;