Bug 1028252 - Allow toolbox command buttons to be text-only; r=bgrins

This commit is contained in:
Joe Walker 2014-06-25 14:03:26 +01:00
parent 71b3f631c8
commit b9deb5b96e
2 changed files with 25 additions and 7 deletions

View File

@ -107,9 +107,14 @@ let CommandUtils = {
}
if (command.buttonId != null) {
button.id = command.buttonId;
if (command.buttonClass != null) {
button.className = command.buttonClass;
}
}
if (command.buttonClass != null) {
button.className = command.buttonClass;
else {
button.setAttribute("text-as-image", "true");
button.setAttribute("label", command.name);
button.className = "devtools-toolbarbutton";
}
if (command.tooltipText != null) {
button.setAttribute("tooltiptext", command.tooltipText);

View File

@ -74,6 +74,12 @@
min-width: 32px;
}
#toolbox-buttons .devtools-toolbarbutton[text-as-image] {
-moz-padding-start: 5px;
-moz-padding-end: 5px;
min-width: inherit;
}
.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
display: none;
}
@ -124,7 +130,6 @@
color: #a9bacb; /* Body text - high contrast */
background-color: #343c45; /* Toolbars */
border-color: rgba(0, 0, 0, .4); /* Splitters */
color: inherit;
}
.theme-light .devtools-menulist,
.theme-light .devtools-toolbarbutton {
@ -134,28 +139,34 @@
}
/* Text-only buttons */
.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]) {
.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
background-color: rgba(170, 170, 170, .2); /* Splitter */
}
.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]) {
.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
background-color: rgba(0, 0, 0, .2); /* Splitter */
}
/* Button States */
.theme-dark .devtools-toolbarbutton:hover,
.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image]:hover,
.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover {
background: rgba(0, 0, 0, .3); /* Splitters */
}
.theme-light .devtools-toolbarbutton:hover,
.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image]:hover,
.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover {
background: rgba(170, 170, 170, .3); /* Splitters */
}
.theme-dark .devtools-toolbarbutton:hover:active,
.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image]:hover:active,
.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover:active {
background: rgba(0, 0, 0, .4); /* Splitters */
}
.theme-light .devtools-toolbarbutton:hover:active,
.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image]:hover:active,
.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover:active {
background: rgba(170, 170, 170, .4); /* Splitters */
}
@ -166,7 +177,8 @@
.theme-dark .devtools-toolbarbutton[open=true]:hover,
.theme-dark .devtools-toolbarbutton[open=true]:hover:active,
.theme-dark .devtools-toolbarbutton[checked=true],
.theme-dark .devtools-toolbarbutton[checked=true]:hover {
.theme-dark .devtools-toolbarbutton[checked=true]:hover,
.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
background: rgba(29, 79, 115, .7); /* Select highlight blue */
color: #f5f7fa;
}
@ -175,7 +187,8 @@
.theme-light .devtools-toolbarbutton[open=true]:hover,
.theme-light .devtools-toolbarbutton[open=true]:hover:active,
.theme-light .devtools-toolbarbutton[checked=true],
.theme-light .devtools-toolbarbutton[checked=true]:hover {
.theme-light .devtools-toolbarbutton[checked=true]:hover,
.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
background: rgba(76, 158, 217, .2); /* Select highlight blue */
}