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

chrome/content/zotero-platform/mac/overlay.css

@@ -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;

chrome/content/zotero/browser.js

@@ -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();
+		Components.utils.import("resource:///modules/CustomizableUI.jsm");
-		if (state != tab.CAPTURE_STATE_DISABLED) {
+		var buttons = getSaveButtons();
-			Zotero_Browser.statusImage.src = tab.getCaptureIcon();
+		if (buttons.length) {
-			Zotero_Browser.statusImage.tooltipText = tab.getCaptureTooltip();
+			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) {
-				Zotero_Browser.statusImage.classList.add('translate');
+					button.classList.add('translate');
-			}
-			else {
-				Zotero_Browser.statusImage.classList.remove('translate');
-			}
-			Zotero_Browser.statusImage.hidden = false;
 					
-			if (state == tab.CAPTURE_STATE_TRANSLATABLE) {
+					// Show guidance panel if necessary
-				Zotero_Browser.statusImage.addEventListener("load", function() {
+					
+					if (placement.area == 'nav-bar') {
+						button.addEventListener("load", function() {
 							document.getElementById("zotero-status-image-guidance").show();
-				}, false);
+						});
 					}
 					// TODO: Different guidance for web pages?
-		} else {
+				}
-			Zotero_Browser.statusImage.hidden = true;
+				else {
+					button.classList.remove('translate');
+				}
+				button.removeAttribute('disabled');
+			}
 		}
 		
 		// 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,16 +502,13 @@ 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;
 		
+		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];
 				
-			var menuitem = document.createElement("menuitem");
+				let menuitem = document.createElement("menuitem");
 				menuitem.setAttribute("label",
 					Zotero.getString("ingester.saveToZoteroUsing", translator.label));
 				menuitem.setAttribute("image", (translator.itemType === "multiple"
@@ -492,7 +523,7 @@ var Zotero_Browser = new function() {
 			
 			popup.appendChild(document.createElement("menuseparator"));
 			
-		var menuitem = document.createElement("menuitem");
+			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");
@@ -513,6 +544,37 @@ var Zotero_Browser = new function() {
 					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);
+		}
+	}
 	
 	/**
 	 * Translates using the specified translation instance. setTranslator() must already
@@ -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 + ')');
+		text += ' (' + this.page.translators[0].label + ')';
-		return Zotero.localeJoin(arr, '');
+		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 () {

chrome/content/zotero/icon.js

@@ -27,42 +27,159 @@
 
 Components.utils.import("resource:///modules/CustomizableUI.jsm");
 
-var buttonID = 'zotero-toolbar-button';
+var comboButtonsID = 'zotero-toolbar-buttons';
-CustomizableUI.createWidget({
+
-	id: buttonID,
+CustomizableUI.addListener({
-	label: "Zotero",
+	onWidgetAdded: function (id, area, position) {
-	tooltiptext: "Zotero",
+		if (id == comboButtonsID) {
-	defaultArea: CustomizableUI.AREA_NAVBAR,
+			var item = document.getElementById(id);
-	onCommand: function () {
+			// Element may not exist yet if it was added to the panel
-		ZoteroOverlay.toggleDisplay();
+			if (item) {
-	},
+				updateItemForArea(item, area);
-	onCreated: function (node) {
+			}
-		if (Zotero && Zotero.initialized) {
-			// TODO: move to strings
-			let str = 'Zotero';
-			let key = Zotero.Keys.getKeyForCommand('openZotero');
-			if (key) {
-				str += ' ('
-					+ (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")+
+			var shortcut = Zotero.getString(
-								   Zotero.Prefs.get("keys.openZotero");
+					Zotero.isMac ? "general.keys.cmdShift" : "general.keys.ctrlShift"
-					document.getElementById("zotero-toolbar-button-guidance").show(null, Zotero.getString(property, shortcut));
+				) + 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: comboButtonsID,
+	type: 'custom',
+	label: 'zotero',
+	tooltiptext: "Zotero",
+	defaultArea: CustomizableUI.AREA_NAVBAR,
+	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 (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) {
+			text = 'Zotero';
+			let key = Zotero.Keys.getKeyForCommand('openZotero');
+			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
+				+ ')';
+			}
+			
 		}
 		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';
+				let src = 'chrome://zotero/locale/zotero.properties';
-				var localeService = Components.classes['@mozilla.org/intl/nslocaleservice;1'].
+				let localeService = Components.classes['@mozilla.org/intl/nslocaleservice;1']
-						getService(Components.interfaces.nsILocaleService);
+					.getService(Components.interfaces.nsILocaleService);
-				var appLocale = localeService.getApplicationLocale();
+				let appLocale = localeService.getApplicationLocale();
-				var stringBundleService = Components.classes["@mozilla.org/intl/stringbundle;1"]
+				let stringBundleService = Components.classes["@mozilla.org/intl/stringbundle;1"]
 					.getService(Components.interfaces.nsIStringBundleService);
-				var stringBundle = stringBundleService.createBundle(src, appLocale);
+				let stringBundle = stringBundleService.createBundle(src, appLocale);
+				text = stringBundle.GetStringFromName('startupError');
+			}
+		}
+		break;
 	
-				var errMsg = stringBundle.GetStringFromName('startupError');
+	case 'save':
+		text = Zotero.getString('ingester.saveToZotero');
+	}
+	return text;
 }
 
-			node.setAttribute('tooltiptext', errMsg);
+/**
-			node.setAttribute('error', 'true');
+ * 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]);
 	}
 }
-});

chrome/content/zotero/overlay.xul

@@ -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"

chrome/content/zotero/xpcom/zotero.js

@@ -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();

chrome/skin/default/zotero/zotero.css

@@ -22,17 +22,54 @@
 }
 
 /*
-  Toolbar icons
+ *
+ * Toolbar icons
+ *
  */
-#zotero-toolbar-button {
+#zotero-toolbar-main-button {
 	list-style-image: url("chrome://zotero/skin/zotero-z-16px-australis.svg");
 }
 
-#zotero-toolbar-button[cui-areatype="menu-panel"],
+#zotero-toolbar-main-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #zotero-toolbar-button {
+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"]
 {