Bug 1087618 - Part 1 : Introduce new tree styling. r=jaws

browser/themes/shared/incontentprefs/preferences.inc.css

@@ -141,86 +141,8 @@ treecol {
   -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 {
@@ -234,8 +156,7 @@ treecol {
 }
 
 .actionsMenu {
-  height: 40px;
-  max-height: 40px;
+  min-height: 36px;
 }
 
 .actionsMenu > menupopup > menuitem {

toolkit/themes/shared/in-content/common.inc.css

@@ -166,6 +166,22 @@ xul|menulist[disabled="true"] {
   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;
@@ -561,3 +577,78 @@ 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");
+  }
+}