Toolbar button overhaul

The address bar icon now lives in a new combo buttonset containing the main Z, "Save to Zotero", and a dropmarker for the former save-icon right-click menu (which we could conceivably use more heavily going forward now that it's more accessible). There's also a separate dedicated Save to Zotero (+ dropmarker) button, not shown by default, that can be swapped in for people who don't want the Z.

The tooltip for the save icon also now shows the keyboard shortcut (though that unfortunately makes for a lot of parentheses).

Known issues:

- Untested on ESR
- Untested on Linux
- Might need refinement on Windows
- Weird 1px horizontal area at bottom of save button that highlights dropmarker (at least on OS X)
- Probably needs a third button option with just the Z icon so that the main button and the save button can be placed separately (e.g., save button in toolbar, Z in panel)
- Combo buttonset needs an inactive single-icon state for the palette and either needs a state for the panel (which might need to span all three columns?) or if possible should just move the other two icons in and put itself back in the palette
- The absurd amount of time and CSS it took to get the toolbar icons looking right on OS X, since apparently no one has put a menu-button inside a combined toolbar button before
This commit is contained in:
Dan Stillman 2015-02-21 03:44:13 -05:00
parent 20d4ab2d0a
commit 9a87f15956
6 changed files with 440 additions and 124 deletions

View file

@ -1,3 +1,79 @@
/*
As of Fx36, the built-in Mac styles don't properly handle a menu-button within a combined
button, so we need this ungodly mess.
*/
#zotero-toolbar-buttons[cui-areatype="toolbar"] > separator,
#zotero-toolbar-save-button[cui-areatype="toolbar"]:not(:hover) > .toolbarbutton-menubutton-dropmarker::before,
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button {
box-shadow: none;
}
#zotero-toolbar-save-button[cui-areatype="toolbar"] {
margin-top: 3px !important;
margin-bottom: 3px !important;
border-right: 0;
border-width: 1px;
border-style: solid;
border-color: transparent;
}
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button,
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker {
border-width: 1px;
border-style: solid;
border-color: var(--toolbarbutton-hover-bordercolor) !important;
box-shadow: var(--toolbarbutton-hover-boxshadow) !important;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker::before {
background: none;
}
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button {
border-right: 1px solid transparent;
}
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker {
border-left: 1px solid transparent;
}
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker {
background: inherit;
}
#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker:hover {
background: var(--toolbarbutton-hover-background);
}
#zotero-toolbar-main-button[cui-areatype="toolbar"] {
margin-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding-right: 1px;
}
#zotero-toolbar-save-button[cui-areatype="toolbar"] {
margin-top: 3px;
margin-bottom: 3px;
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0 solid transparent;
}
#zotero-toolbar-main-button[cui-areatype="toolbar"] {
border-right: 1px solid transparent;
}
#zotero-toolbar-save-button[cui-areatype="toolbar"]:hover {
border-left: 0 solid transparent;
}
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button {
border-left: 1px solid transparent;
}
/* End toolbar icons */
#zotero-splitter
{
border-top: none;

View file

@ -53,7 +53,6 @@ var Zotero_Browser = new function() {
this.tabbrowser = null;
this.appcontent = null;
this.statusImage = null;
this.isScraping = false;
var _browserData = new Object();
@ -235,7 +234,6 @@ var Zotero_Browser = new function() {
function chromeLoad() {
this.tabbrowser = gBrowser;
this.appcontent = document.getElementById("appcontent");
this.statusImage = document.getElementById("zotero-status-image");
// this gives us onLocationChange, for updating when tabs are switched/created
gBrowser.tabContainer.addEventListener("TabClose",
@ -282,6 +280,7 @@ var Zotero_Browser = new function() {
function(e) { Zotero_Browser.resize(e) }, false);
}
/*
* An event handler called when a new document is loaded. Creates a new document
* object, and updates the status of the capture icon
@ -429,26 +428,32 @@ var Zotero_Browser = new function() {
function updateStatus() {
var tab = _getTabObject(Zotero_Browser.tabbrowser.selectedBrowser);
var state = tab.getCaptureState();
if (state != tab.CAPTURE_STATE_DISABLED) {
Zotero_Browser.statusImage.src = tab.getCaptureIcon();
Zotero_Browser.statusImage.tooltipText = tab.getCaptureTooltip();
if (state == tab.CAPTURE_STATE_TRANSLATABLE) {
Zotero_Browser.statusImage.classList.add('translate');
Components.utils.import("resource:///modules/CustomizableUI.jsm");
var buttons = getSaveButtons();
if (buttons.length) {
let state = tab.getCaptureState();
let icon = tab.getCaptureIcon();
let tooltiptext = tab.getCaptureTooltip();
for (let { button, placement } of buttons) {
button.image = icon;
button.tooltipText = tooltiptext;
if (state == tab.CAPTURE_STATE_TRANSLATABLE) {
button.classList.add('translate');
// Show guidance panel if necessary
if (placement.area == 'nav-bar') {
button.addEventListener("load", function() {
document.getElementById("zotero-status-image-guidance").show();
});
}
// TODO: Different guidance for web pages?
}
else {
button.classList.remove('translate');
}
button.removeAttribute('disabled');
}
else {
Zotero_Browser.statusImage.classList.remove('translate');
}
Zotero_Browser.statusImage.hidden = false;
if (state == tab.CAPTURE_STATE_TRANSLATABLE) {
Zotero_Browser.statusImage.addEventListener("load", function() {
document.getElementById("zotero-status-image-guidance").show();
}, false);
}
// TODO: Different guidance for web pages?
} else {
Zotero_Browser.statusImage.hidden = true;
}
// set annotation bar status
@ -460,6 +465,35 @@ var Zotero_Browser = new function() {
}
}
function getSaveButtons() {
Components.utils.import("resource:///modules/CustomizableUI.jsm");
var buttons = [];
var placement = CustomizableUI.getPlacementOfWidget("zotero-toolbar-buttons");
if (placement) {
let button = document.getElementById("zotero-toolbar-save-button");
if (button) {
buttons.push({
button: button,
placement: placement
});
}
}
placement = CustomizableUI.getPlacementOfWidget("zotero-toolbar-save-button-single");
if (placement) {
let button = document.getElementById("zotero-toolbar-save-button-single");
if (button) {
buttons.push({
button: button,
placement: placement
});
}
}
return buttons;
}
/**
* Called when status bar icon is right-clicked
*/
@ -468,50 +502,78 @@ var Zotero_Browser = new function() {
while(popup.hasChildNodes()) popup.removeChild(popup.lastChild);
var tab = _getTabObject(this.tabbrowser.selectedBrowser);
var translators = tab.page.translators;
// Don't show context menu for web page items, for now
// TODO: Show with/without snapshots option?
if (!translators) return;
for(var i=0, n=translators.length; i<n; i++) {
let translator = translators[i];
if (tab.getCaptureState() == tab.CAPTURE_STATE_TRANSLATABLE) {
let translators = tab.page.translators;
for (var i=0, n = translators.length; i < n; i++) {
let translator = translators[i];
let menuitem = document.createElement("menuitem");
menuitem.setAttribute("label",
Zotero.getString("ingester.saveToZoteroUsing", translator.label));
menuitem.setAttribute("image", (translator.itemType === "multiple"
? "chrome://zotero/skin/treesource-collection.png"
: Zotero.ItemTypes.getImageSrc(translator.itemType)));
menuitem.setAttribute("class", "menuitem-iconic");
menuitem.addEventListener("command", function(e) {
Zotero_Browser.scrapeThisPage(translator, e);
}, false);
popup.appendChild(menuitem);
}
var menuitem = document.createElement("menuitem");
menuitem.setAttribute("label",
Zotero.getString("ingester.saveToZoteroUsing", translator.label));
menuitem.setAttribute("image", (translator.itemType === "multiple"
? "chrome://zotero/skin/treesource-collection.png"
: Zotero.ItemTypes.getImageSrc(translator.itemType)));
popup.appendChild(document.createElement("menuseparator"));
let menuitem = document.createElement("menuitem");
menuitem.setAttribute("label", Zotero.getString("locate.libraryLookup.label"));
menuitem.setAttribute("tooltiptext", Zotero.getString("locate.libraryLookup.tooltip"));
menuitem.setAttribute("image", "chrome://zotero/skin/locate-library-lookup.png");
menuitem.setAttribute("class", "menuitem-iconic");
menuitem.addEventListener("command", function(e) {
Zotero_Browser.scrapeThisPage(translator, e);
}, false);
menuitem.addEventListener("command", _constructLookupFunction(tab, function(event, obj) {
var urls = [];
for each(var item in obj.newItems) {
var url = Zotero.OpenURL.resolve(item);
if(url) urls.push(url);
}
ZoteroPane.loadURI(urls, event);
}), false);
popup.appendChild(menuitem);
var locateEngines = Zotero.LocateManager.getVisibleEngines();
Zotero_LocateMenu.addLocateEngines(popup, locateEngines,
_constructLookupFunction(tab, function(e, obj) {
Zotero_LocateMenu.locateItem(e, obj.newItems);
}), true);
}
else {
let webPageIcon = tab.getCaptureIcon();
let automaticSnapshots = Zotero.Prefs.get('automaticSnapshots');
let snapshotEvent = {
shiftKey: !automaticSnapshots
};
let noSnapshotEvent = {
shiftKey: automaticSnapshots
};
let menuitem = document.createElement("menuitem");
menuitem.setAttribute("label", "Save to Zotero as Web Page (with snapshot)");
menuitem.setAttribute("image", webPageIcon);
menuitem.setAttribute("class", "menuitem-iconic");
menuitem.addEventListener("command", function (event) {
Zotero_Browser.scrapeThisPage(null, snapshotEvent);
event.stopPropagation();
});
popup.appendChild(menuitem);
menuitem = document.createElement("menuitem");
menuitem.setAttribute("label", "Save to Zotero as Web Page (without snapshot)");
menuitem.setAttribute("image", webPageIcon);
menuitem.setAttribute("class", "menuitem-iconic");
menuitem.addEventListener("command", function (event) {
Zotero_Browser.scrapeThisPage(null, noSnapshotEvent);
event.stopPropagation();
});
popup.appendChild(menuitem);
}
popup.appendChild(document.createElement("menuseparator"));
var menuitem = document.createElement("menuitem");
menuitem.setAttribute("label", Zotero.getString("locate.libraryLookup.label"));
menuitem.setAttribute("tooltiptext", Zotero.getString("locate.libraryLookup.tooltip"));
menuitem.setAttribute("image", "chrome://zotero/skin/locate-library-lookup.png");
menuitem.setAttribute("class", "menuitem-iconic");
menuitem.addEventListener("command", _constructLookupFunction(tab, function(event, obj) {
var urls = [];
for each(var item in obj.newItems) {
var url = Zotero.OpenURL.resolve(item);
if(url) urls.push(url);
}
ZoteroPane.loadURI(urls, event);
}), false);
popup.appendChild(menuitem);
var locateEngines = Zotero.LocateManager.getVisibleEngines();
Zotero_LocateMenu.addLocateEngines(popup, locateEngines,
_constructLookupFunction(tab, function(e, obj) {
Zotero_LocateMenu.locateItem(e, obj.newItems);
}), true);
}
/**
@ -838,9 +900,6 @@ Zotero_Browser.Tab.prototype.getCaptureIcon = function() {
var suffix = Zotero.hiRes ? "@2x" : "";
switch (this.getCaptureState()) {
case this.CAPTURE_STATE_DISABLED:
return false;
case this.CAPTURE_STATE_TRANSLATABLE:
var itemType = this.page.translators[0].itemType;
return (itemType === "multiple"
@ -856,21 +915,33 @@ Zotero_Browser.Tab.prototype.getCaptureIcon = function() {
Zotero_Browser.Tab.prototype.getCaptureTooltip = function() {
switch (this.getCaptureState()) {
case this.CAPTURE_STATE_DISABLED:
return '';
var text = Zotero.getString('ingester.saveToZotero');
break;
case this.CAPTURE_STATE_TRANSLATABLE:
var arr = [Zotero.getString('ingester.saveToZotero')];
var text = Zotero.getString('ingester.saveToZotero');
if (this.page.translators[0].itemType == 'multiple') {
arr.push('...');
text += '…';
}
arr.push (' ' , '(' + this.page.translators[0].label + ')');
return Zotero.localeJoin(arr, '');
text += ' (' + this.page.translators[0].label + ')';
break;
// TODO: Different captions for images, PDFs, etc.?
default:
return Zotero.getString('ingester.saveToZotero')
var text = Zotero.getString('ingester.saveToZotero')
+ " (" + Zotero.getString('itemTypes.webpage') + ")";
}
var key = Zotero.Keys.getKeyForCommand('saveToZotero');
if (key) {
// Add RLE mark in RTL mode to make shortcut render the right way
text += (Zotero.rtl ? ' \u202B' : ' ') + '('
+ (Zotero.isMac ? '⇧⌘' : Zotero.getString('general.keys.ctrlShift'))
+ key
+ ')';
}
return text;
}
Zotero_Browser.Tab.prototype.getCaptureCommand = function () {

View file

@ -27,42 +27,159 @@
Components.utils.import("resource:///modules/CustomizableUI.jsm");
var buttonID = 'zotero-toolbar-button';
var comboButtonsID = 'zotero-toolbar-buttons';
CustomizableUI.addListener({
onWidgetAdded: function (id, area, position) {
if (id == comboButtonsID) {
var item = document.getElementById(id);
// Element may not exist yet if it was added to the panel
if (item) {
updateItemForArea(item, area);
}
var isUpgrade = false;
try {
isUpgrade = Zotero.Prefs.get("firstRunGuidanceShown.saveIcon");
} catch(e) {}
var property = "firstRunGuidance.toolbarButton." + (isUpgrade ? "upgrade" : "new");
var shortcut = Zotero.getString(
Zotero.isMac ? "general.keys.cmdShift" : "general.keys.ctrlShift"
) + Zotero.Prefs.get("keys.openZotero");
document.getElementById("zotero-toolbar-button-guidance").show(
null, Zotero.getString(property, shortcut)
);
}
},
// Save icon in panel isn't in DOM until menu is shown once and therefore isn't updated
// on page loads, so update the icon status when the panel is first shown so that it
// doesn't remain disabled
onAreaNodeRegistered: function (area, node) {
if (area == CustomizableUI.AREA_PANEL) {
var placement = CustomizableUI.getPlacementOfWidget("zotero-toolbar-buttons")
var update = false;
if (placement && placement.area == CustomizableUI.AREA_PANEL) {
update = true;
}
else {
placement = CustomizableUI.getPlacementOfWidget("zotero-toolbar-save-button-single");
if (placement && placement.area == CustomizableUI.AREA_PANEL) {
update = true;
}
}
if (update) {
Zotero_Browser.updateStatus();
}
}
}
})
// Create the combo buttons, which go in the toolbar by default
CustomizableUI.createWidget({
id: buttonID,
label: "Zotero",
id: comboButtonsID,
type: 'custom',
label: 'zotero',
tooltiptext: "Zotero",
defaultArea: CustomizableUI.AREA_NAVBAR,
onCommand: function () {
ZoteroOverlay.toggleDisplay();
onBuild: function (document) {
const kNSXUL = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
var item = document.createElementNS(kNSXUL, "toolbaritem");
item.setAttribute("id", comboButtonsID);
// Set this as an attribute in addition to the property to make sure we can style correctly.
item.setAttribute("removable", "true");
item.classList.add("chromeclass-toolbar-additional");
item.classList.add("toolbaritem-combined-buttons");
item.classList.add("panel-wide-item");
['main', 'save'].map(button => {
return {
name: button,
id: getID(button),
tooltiptext: getTooltipText(button),
oncommand: getCommand(button)
};
}).forEach(function(attribs, index) {
if (index != 0) {
item.appendChild(document.createElementNS(kNSXUL, "separator"));
}
let button = document.createElementNS(kNSXUL, "toolbarbutton");
if (attribs.name == 'save') {
button.setAttribute('disabled', 'true');
button.setAttribute('type', 'menu-button');
let menupopup = document.createElementNS(kNSXUL, "menupopup");
menupopup.setAttribute('onpopupshowing', "Zotero_Browser.onStatusPopupShowing(event)");
button.appendChild(menupopup);
}
delete attribs.name;
setAttributes(button, attribs);
item.appendChild(button);
});
updateItemForArea(item, this.currentArea)
return item;
}
});
// Create the independent save button, which isn't shown by default
CustomizableUI.createWidget({
id: getID('save') + '-single',
label: Zotero.getString('ingester.saveToZotero'),
tooltiptext: getTooltipText('save'),
defaultArea: false,
onCommand: function (event) {
Zotero_Browser.scrapeThisPage(null, event);
},
onCreated: function (node) {
onCreated: function (button) {
const kNSXUL = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
button.setAttribute('disabled', 'true');
button.setAttribute('type', 'menu-button');
let menupopup = document.createElementNS(kNSXUL, "menupopup");
menupopup.setAttribute('onpopupshowing', "Zotero_Browser.onStatusPopupShowing(event)");
button.appendChild(menupopup);
}
});
function getID(button) {
switch (button) {
case 'main':
return "zotero-toolbar-main-button";
case 'save':
return "zotero-toolbar-save-button";
}
}
function getCommand(button) {
switch (button) {
case 'main':
return "ZoteroOverlay.toggleDisplay()";
case 'save':
return "Zotero_Browser.scrapeThisPage(null, event)";
}
}
function getTooltipText(button) {
var text;
switch (button) {
case 'main':
if (Zotero && Zotero.initialized) {
// TODO: move to strings
let str = 'Zotero';
text = 'Zotero';
let key = Zotero.Keys.getKeyForCommand('openZotero');
if (key) {
str += ' ('
+ (Zotero.isMac ? '⇧⌘' : Zotero.getString('general.keys.ctrlShift'))
+ key
// Add RLE mark in RTL mode to make shortcut render the right way
text += (Zotero.rtl ? ' \u202B' : ' ') + '('
+ (Zotero.isMac ? '⇧⌘' : Zotero.getString('general.keys.ctrlShift'))
+ key
+ ')';
}
node.setAttribute('tooltiptext', str);
var placement = CustomizableUI.getPlacementOfWidget(buttonID);
// If icon is in toolbar, show guidance panel if necessary
if (placement && placement.area == 'nav-bar') {
window.setTimeout(function() {
var isUpgrade = false;
try {
isUpgrade = Zotero.Prefs.get("firstRunGuidanceShown.saveIcon");
} catch(e) {}
var property = "firstRunGuidance.toolbarButton."+(isUpgrade ? "upgrade" : "new");
var shortcut = Zotero.getString(Zotero.isMac ? "general.keys.cmdShift" : "general.keys.ctrlShift")+
Zotero.Prefs.get("keys.openZotero");
document.getElementById("zotero-toolbar-button-guidance").show(null, Zotero.getString(property, shortcut));
});
}
}
else {
if (Zotero) {
@ -72,19 +189,42 @@ CustomizableUI.createWidget({
// Use defaults if necessary
if (!errMsg) {
// Get the stringbundle manually
var src = 'chrome://zotero/locale/zotero.properties';
var localeService = Components.classes['@mozilla.org/intl/nslocaleservice;1'].
getService(Components.interfaces.nsILocaleService);
var appLocale = localeService.getApplicationLocale();
var stringBundleService = Components.classes["@mozilla.org/intl/stringbundle;1"]
let src = 'chrome://zotero/locale/zotero.properties';
let localeService = Components.classes['@mozilla.org/intl/nslocaleservice;1']
.getService(Components.interfaces.nsILocaleService);
let appLocale = localeService.getApplicationLocale();
let stringBundleService = Components.classes["@mozilla.org/intl/stringbundle;1"]
.getService(Components.interfaces.nsIStringBundleService);
var stringBundle = stringBundleService.createBundle(src, appLocale);
var errMsg = stringBundle.GetStringFromName('startupError');
let stringBundle = stringBundleService.createBundle(src, appLocale);
text = stringBundle.GetStringFromName('startupError');
}
node.setAttribute('tooltiptext', errMsg);
node.setAttribute('error', 'true');
}
break;
case 'save':
text = Zotero.getString('ingester.saveToZotero');
}
});
return text;
}
/**
* Set various attributes that allow treeitem and subelements to be styled properly
*/
function updateItemForArea(item, area) {
var areaType = CustomizableUI.getAreaType(area);
var inPanel = area == CustomizableUI.AREA_PANEL;
var classes = inPanel ? "panel-combined-button" : "toolbarbutton-1 toolbarbutton-combined";
item.setAttribute("cui-areatype", areaType);
var buttons = item.getElementsByTagName('toolbarbutton');
for (let i = 0; i < buttons.length; i++) {
let button = buttons[i];
button.setAttribute("class", classes);
button.setAttribute("cui-areatype", areaType);
}
}
function setAttributes(elem, attrs) {
for (let i in attrs) {
elem.setAttribute(i, attrs[i]);
}
}

View file

@ -52,7 +52,9 @@
<stack id="zotero-pane-stack" persist="savedHeight" savedHeight="300" hidden="true"/>
<zoteroguidancepanel id="zotero-toolbar-button-guidance" about="toolbarButton" for="zotero-toolbar-button" position="bottomcenter topleft" delay="2000" foregroundonly="true" hidden="true"/>
<zoteroguidancepanel id="zotero-toolbar-button-guidance" about="toolbarButton" for="zotero-toolbar-main-button"
position="bottomcenter topleft" delay="2000" foregroundonly="true"/>
<zoteroguidancepanel id="zotero-status-image-guidance" about="saveIcon" for="zotero-toolbar-save-button" x="17"/>
<!-- Annotation Toolbar -->
<toolbar id="zotero-annotate-tb" crop="end" insertbefore="content" hidden="true">
@ -65,17 +67,6 @@
</vbox>
<!-- Scrape Code -->
<hbox id="urlbar-icons">
<popupset>
<menupopup id="zotero-status-image-context" onpopupshowing="Zotero_Browser.onStatusPopupShowing(event)"/>
</popupset>
<image src="chrome://zotero/skin/treeitem-book.png" id="zotero-status-image"
onclick="if(event.button === 0) Zotero_Browser.scrapeThisPage(null, event)" context="zotero-status-image-context"
position="1" hidden="true"/>
<zoteroguidancepanel id="zotero-status-image-guidance" about="saveIcon" for="zotero-status-image" x="8"/>
</hbox>
<menupopup id="menu_ToolsPopup">
<menuseparator id="zoteroSeparator" insertbefore="devToolsSeparator"/>
<menuitem id="tools-zotero" insertbefore="devToolsSeparator"

View file

@ -292,6 +292,7 @@ Components.utils.import("resource://gre/modules/Services.jsm");
else {
Zotero.dir = 'ltr';
}
Zotero.rtl = Zotero.dir == 'rtl';
// Make sure that Zotero Standalone is not running as root
if(Zotero.isStandalone && !Zotero.isWin) _checkRoot();

View file

@ -22,17 +22,54 @@
}
/*
Toolbar icons
*/
#zotero-toolbar-button {
*
* Toolbar icons
*
*/
#zotero-toolbar-main-button {
list-style-image: url("chrome://zotero/skin/zotero-z-16px-australis.svg");
}
#zotero-toolbar-button[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] > #zotero-toolbar-button {
#zotero-toolbar-main-button[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] #zotero-toolbar-main-button {
list-style-image: url("chrome://zotero/skin/zotero-z-32px-australis.svg");
}
#zotero-toolbar-save-button,
#zotero-toolbar-save-button-single {
list-style-image: url("chrome://zotero/skin/treeitem-webpage.png");
}
#zotero-toolbar-save-button[cui-areatype="menu-panel"],
#zotero-toolbar-save-button-single[cui-areatype="menu-panel"],
toolbarpaletteitem[place="palette"] #zotero-toolbar-save-button,
toolbarpaletteitem[place="palette"] #zotero-toolbar-save-button-single {
list-style-image: url("chrome://zotero/skin/treeitem-webpage@2x.png");
}
@media (min-resolution: 1.5dppx) {
#zotero-toolbar-save-button[cui-areatype="toolbar"],
#zotero-toolbar-save-button-single[cui-areatype="toolbar"] {
list-style-image: url("chrome://zotero/skin/treeitem-webpage@2x.png");
}
/* Necessary in Fx36 to keep 2x icon from being rendered at full size */
#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
#zotero-toolbar-save-button-single[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
width: 16px;
}
}
/* Show webpage icon in gray when no translators, except on hover */
#zotero-toolbar-save-button:not(:hover):not(.translate),
#zotero-toolbar-save-button-single:not(:hover):not(.translate),
#zotero-toolbar-save-button[disabled="true"],
#zotero-toolbar-save-button-single[disabled="true"] {
filter: grayscale(100%);
}
/* End toolbar icons */
/* Bindings */
textbox[multiline="true"][type="timed"]
{