Bug 1087618 - Part 1 : Introduce new tree styling. r=jaws
authorTim Nguyen <ntim.bugs@gmail.com>
Thu, 11 Dec 2014 09:18:00 +0100
changeset 219487 63527327468c592cd84145090add07db16258535
parent 219486 2a11e49c5a83df31fbf11eece225fcdeadbd64e5
child 219488 8132d858fefec2c174859d6e348226f416232d53
push idunknown
push userunknown
push dateunknown
reviewersjaws
bugs1087618
milestone37.0a1
Bug 1087618 - Part 1 : Introduce new tree styling. r=jaws
browser/themes/shared/incontentprefs/preferences.inc.css
toolkit/themes/shared/in-content/common.inc.css
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -136,111 +136,32 @@ treecol {
 #applicationsContent {
   padding: 15px 0;
 }
 
 #filter {
   -moz-margin-start: 0;
 }
 
-#handlersView {
-  -moz-appearance: none;
-  -moz-margin-start: 0;
-  font-size: 1.25rem;
-  line-height: 22px;
-  color: #333333;
-  border: 1px solid #C1C1C1;
-  border-radius: 2px;
-  background-color: #FBFBFB;
-  overflow-y: auto;
-  height: 500px;
-}
-
-#handlersView > listheader {
-  -moz-appearance: none;
-  border: 0;
-  padding: 0;
-}
-
-#typeColumn,
-#actionColumn {
-  -moz-appearance: none;
-  line-height: 20px;
-  color: #333333;
-  height: 36px;
-  padding: 0 10px;
-  background-color: #FBFBFB;
-  border: 1px solid #C1C1C1;
-  -moz-border-top-colors: none;
-  -moz-border-right-colors: none;
-  -moz-border-bottom-colors: none;
-  -moz-border-left-colors: none;
-}
-
-#typeColumn:-moz-locale-dir(ltr),
-#actionColumn:-moz-locale-dir(rtl) {
-  border-top-left-radius: 2px;
-}
-
-#typeColumn:-moz-locale-dir(rtl),
-#actionColumn:-moz-locale-dir(ltr) {
-  border-top-right-radius: 2px;
-}
-
-#typeColumn:hover,
-#actionColumn:hover {
-  border-color: #0095DD;
-}
-
-#typeColumn:hover:active,
-#actionColumn:hover:active {
-  padding: 0 10px;
-}
-
-#typeColumn > .treecol-sortdirection[sortDirection=ascending],
-#actionColumn > .treecol-sortdirection[sortDirection=ascending],
-#typeColumn > .treecol-sortdirection[sortDirection=descending],
-#actionColumn > .treecol-sortdirection[sortDirection=descending] {
-  -moz-appearance: none;
-  list-style-image: url("chrome://global/skin/in-content/sorter.png");
-}
-
-#typeColumn > .treecol-sortdirection[sortDirection=descending],
-#actionColumn > .treecol-sortdirection[sortDirection=descending] {
-  transform: scaleY(-1);
-}
-
-@media (min-resolution: 2dppx) {
-  #typeColumn > .treecol-sortdirection[sortDirection=ascending],
-  #actionColumn > .treecol-sortdirection[sortDirection=ascending],
-  #typeColumn > .treecol-sortdirection[sortDirection=descending],
-  #actionColumn > .treecol-sortdirection[sortDirection=descending] {
-    width: 12px;
-    height: 8px;
-    list-style-image: url("chrome://global/skin/in-content/sorter@2x.png");
-  }
-}
-
 #handlersView > richlistitem {
-  min-height: 40px !important;
+  min-height: 36px !important;
 }
 
 .typeIcon {
   -moz-margin-start: 10px !important;
   -moz-margin-end: 9px !important;
 }
 
 .actionIcon {
   -moz-margin-start: 11px !important;
   -moz-margin-end: 8px !important;
 }
 
 .actionsMenu {
-  height: 40px;
-  max-height: 40px;
+  min-height: 36px;
 }
 
 .actionsMenu > menupopup > menuitem {
   -moz-padding-start: 10px !important;
 }
 
 .actionsMenu > menupopup > menuitem > .menu-iconic-left {
   -moz-margin-end: 8px !important;
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -161,16 +161,32 @@ xul|menulist[open="true"]:not([disabled=
 html|button:disabled,
 xul|button[disabled="true"],
 xul|colorpicker[type="button"][disabled="true"],
 xul|menulist[disabled="true"] {
   cursor: not-allowed;
   opacity: 0.5;
 }
 
+*|button.primary {
+  background-color: #0095dd;
+  border-color: transparent;
+  color: #fff;
+}
+
+html|button.primary:enabled:hover,
+xul|button.primary:not([disabled="true"]):hover {
+  background-color: #008acb;
+}
+
+html|button.primary:enabled:hover:active,
+xul|button.primary:not([disabled="true"]):hover:active {
+  background-color: #006b9d;
+}
+
 xul|colorpicker[type="button"] {
   padding: 6px;
   width: 50px;
 }
 
 xul|button > xul|*.button-box,
 xul|menulist > xul|*.menulist-label-box {
   padding-right: 10px !important;
@@ -556,8 +572,83 @@ xul|filefield + xul|button:-moz-locale-d
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 xul|textbox + xul|button,
 xul|filefield + xul|button {
   -moz-border-start: none;
 }
+
+/* List boxes */
+
+xul|richlistbox,
+xul|listbox {
+  -moz-appearance: none;
+  border: 1px solid #c1c1c1;
+}
+
+xul|treechildren::-moz-tree-row,
+xul|listbox xul|listitem {
+  padding: 5px;
+  margin: 0;
+  border: none;
+  background-image: none;
+}
+
+xul|treechildren::-moz-tree-row(selected),
+xul|listbox xul|listitem[selected="true"] {
+  background-color: #f1f1f1;
+}
+
+/* Trees */
+
+xul|tree {
+  -moz-appearance: none;
+  font-size: 1em;
+  border: 1px solid #c1c1c1;
+}
+
+xul|listheader,
+xul|treecols {
+  -moz-appearance: none;
+  border: none;
+  border-bottom: 1px solid #c1c1c1;
+  padding: 0;
+}
+
+xul|treecol:not([hideheader="true"]),
+xul|treecolpicker {
+  -moz-appearance: none;
+  border: none;
+  background-color: #ebebeb;
+  color: #808080;
+  padding: 5px 10px;
+}
+
+xul|treecol:not([hideheader="true"]):hover,
+xul|treecolpicker:hover {
+  background-color: #dadada;
+  color: #333;
+}
+
+xul|treecol:not([hideheader="true"]):not(:first-child),
+xul|treecolpicker {
+  -moz-border-start-width: 1px;
+  -moz-border-start-style: solid;
+  border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
+}
+
+xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
+  list-style-image: url("chrome://global/skin/in-content/sorter.png");
+  width: 12px;
+  height: 8px;
+}
+
+xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="descending"] {
+  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");
+  }
+}
\ No newline at end of file