Update icons to Zotero 7 style

- Stop generating greyscale icons for Safari, since Safari now supports
  colored toolbar button images
- Generate pngs from svg for toolbar using rsvg-convert since toolbars
  do not support svgs
- Update Zotero submodule (for new icons)
- Update utilities submodule (for zoteroTypeSchemaData.json)

build.sh

@@ -33,6 +33,11 @@ Options
  -p PLATFORMS        platform(s) (b=browserExt, s=safari; defaults to all)
  -v VERSION          use version VERSION
  -d                  build for debugging (enable translator tester, don't minify)
+
+rsvg-convert is required
+
+brew install librsvg
+sudo apt install librsvg2-bin
 DONE
 	exit 1
 }
@@ -112,14 +117,15 @@ EXTENSION_SKIN_DIR="$SRCDIR/zotero/chrome/skin/default/zotero"
 
 SAFARI_EXT="$DISTDIR/Zotero_Connector-$VERSION.safariextz"
 
-ICONS="$EXTENSION_SKIN_DIR/treeitem*png $EXTENSION_SKIN_DIR/treesource-collection.png $EXTENSION_SKIN_DIR/zotero-new-z-16px.png  \
-    $SRCDIR/common/images/*"
+ITEM_IMAGES="$EXTENSION_SKIN_DIR/item-type/16/light/*[!2x].svg"
+COLLECTION_IMAGES="$EXTENSION_SKIN_DIR/collection-tree/16/light/collection.svg \
+		$EXTENSION_SKIN_DIR/collection-tree/16/light/library.svg"
+COLLECTION_WHITE_IMAGES="$EXTENSION_SKIN_DIR/collection-tree/16/white/collection.svg \
+		$EXTENSION_SKIN_DIR/collection-tree/16/white/library.svg"
+CONNECTOR_COMMON_IMAGES="$SRCDIR/common/images/*"
 IMAGES="$EXTENSION_SKIN_DIR/progress_arcs.png \
 	$EXTENSION_SKIN_DIR/cross.png \
-	$EXTENSION_SKIN_DIR/tick.png $EXTENSION_SKIN_DIR/[email protected] \
-	$EXTENSION_SKIN_DIR/spinner-16px.png $EXTENSION_SKIN_DIR/[email protected] \
-	$EXTENSION_SKIN_DIR/treesource-library.png"
-PREFS_IMAGES="$EXTENSION_SKIN_DIR/prefs-general.png $EXTENSION_SKIN_DIR/prefs-advanced.png $EXTENSION_SKIN_DIR/prefs-proxies.png"
+	$EXTENSION_SKIN_DIR/tick.png $EXTENSION_SKIN_DIR/[email protected]"
 
 LIBS=()
 
@@ -157,11 +163,7 @@ echo -n "Building connectors..."
 
 function copyResources {
 	browser="$1"
-	if [ "$browser" == "safari" ]; then
-		browser_builddir="$BUILD_DIR/safari"
-	else
-		browser_builddir="$BUILD_DIR/$browser"
-	fi
+	browser_builddir="$BUILD_DIR/$browser"
 	browser_srcdir="$SRCDIR/$browser"
 
 	# Copy common files
@@ -254,47 +256,57 @@ function copyResources {
 	fi
 }
 
+function makeToolbarIcons {
+	browser="$1"
+	icon_dir="$BUILD_DIR/$browser/images/toolbar"
+
+	# Check for rsvg-convert
+	if ! command -v rsvg-convert --version &> /dev/null ; then
+		echo ""
+		echo "rsvg-convert is not available"
+		usage
+	fi
+
+	set -e
+	for f in $ITEM_IMAGES $COLLECTION_IMAGES
+	do
+		rsvg-convert $f -w 32 -h 32 -o "$icon_dir/"`basename $f .svg`".png"
+		if [ "$browser" == "browserExt" ]; then
+			rsvg-convert $f -w 16 -h 16 -o "$icon_dir/"`basename $f .svg`"@16.png"
+			rsvg-convert $f -w 48 -h 48 -o "$icon_dir/"`basename $f .svg`"@48.png"
+		fi
+	done
+	set +e
+}
+
 if [[ $BUILD_BROWSER_EXT == 1 ]]; then
 	# Copy images for Chrome
 	rm -rf "$BUILD_DIR/browserExt/images"
 	mkdir "$BUILD_DIR/browserExt/images"
-	cp $ICONS $IMAGES $PREFS_IMAGES "$BUILD_DIR/browserExt/images"
-	cp "$CWD/icons/Icon-16.png" "$CWD/icons/Icon-48.png" "$CWD/icons/Icon-96.png" "$CWD/icons/Icon-128.png" "$BUILD_DIR/browserExt"
+	cp -r $ITEM_IMAGES $COLLECTION_IMAGES $CONNECTOR_COMMON_IMAGES $IMAGES "$BUILD_DIR/browserExt/images"
+	cp $CWD/icons/* "$BUILD_DIR/browserExt"
+	for f in $COLLECTION_WHITE_IMAGES
+	do
+	  cp $f "$BUILD_DIR/browserExt/images/"`basename $f .svg`"-white.svg"
+  done
 
 	copyResources 'browserExt'
+	makeToolbarIcons 'browserExt'
 fi
 
 if [[ $BUILD_SAFARI == 1 ]]; then
-	#
-	# Make alpha images
-	#
-	# ImageMagick 7 changes how channels work, so the same command doesn't work properly. Until we
-	# figure out an equivalent command for ImageMagick 7, continue using version 6 from homebrew.
-	IMAGEMAGICK_CONVERT=/usr/local/opt/imagemagick@6/bin/convert
 	rm -rf "$BUILD_DIR/safari/images"
 	mkdir "$BUILD_DIR/safari/images"
-	mkdir "$BUILD_DIR/safari/images/toolbar"
-	set +e
-	$IMAGEMAGICK_CONVERT -version | grep "ImageMagick 6" > /dev/null 2>&1
-	RETVAL=$?
-	set -e
-	if [ $RETVAL == 0 ]; then
-		cp $ICONS $IMAGES $PREFS_IMAGES "$BUILD_DIR/safari/images"
-		for f in $ICONS
-		do
-			$IMAGEMAGICK_CONVERT $f -grayscale Rec709Luminance "$BUILD_DIR/safari/images/toolbar/"`basename $f`
-		done
-	else
-		echo
-		echo "ImageMagick 6 not installed; not creating monochrome Safari icons"
-		cp $ICONS "$BUILD_DIR/safari/images"
-		cp $ICONS "$BUILD_DIR/safari/images/toolbar"
-		cp $IMAGES $PREFS_IMAGES "$BUILD_DIR/safari/images"
-	fi
+	cp -r $ITEM_IMAGES $COLLECTION_IMAGES $CONNECTOR_COMMON_IMAGES $IMAGES "$BUILD_DIR/safari/images"
 	cp "$CWD/icons/Icon-32.png" "$CWD/icons/Icon-48.png" "$CWD/icons/Icon-64.png" \
 		"$BUILD_DIR/safari"
+	for f in $COLLECTION_WHITE_IMAGES
+	do
+	  cp $f "$BUILD_DIR/safari/images/"`basename $f .svg`"-white.svg"
+  done
 
 	copyResources 'safari'
+	makeToolbarIcons 'safari'
 fi
 
 # Make separate Chrome, Chrome Manifest v3 and Firefox directories
@@ -323,35 +335,11 @@ if [[ $BUILD_BROWSER_EXT == 1 ]]; then
 
 	# Chrome modifications
 
-	# Use larger icons where available in Chrome, which actually wants 19px icons
-	# 2x
-	for img in "$BUILD_DIR"/chrome/images/*2x.png; do
-		cp $img `echo $img | sed 's/@2x//'`
-	done
-	## 2.5x
-	for img in "$BUILD_DIR"/chrome/images/*48px.png; do
-		cp $img `echo $img | sed 's/@48px//'`
-	done
-
 	# Remove the 'applications' property used by Firefox from the manifest
 	pushd $BUILD_DIR/chrome > /dev/null
 	cat manifest.json | jq '. |= del(.applications)' > manifest.json-tmp
 	mv manifest.json-tmp manifest.json
 	popd > /dev/null
-
-	# Chrome Manifest V3 modifications
-	rsync -a $BUILD_DIR/chrome/images/ $BUILD_DIR/manifestv3/images/
-
-	# Firefox modifications
-
-	# TEMP: Copy 2x icons to 1x until getImageSrc() is updated to detect HiDPI
-	for img in "$BUILD_DIR"/firefox/images/*2x.png; do
-		cp $img `echo $img | sed 's/@2x//'`
-	done
-	## 2.5x
-	for img in "$BUILD_DIR"/firefox/images/*48px.png; do
-		cp $img `echo $img | sed 's/@48px//'`
-	done
 
 fi
 

src/browserExt/background.js

@@ -732,10 +732,10 @@ Zotero.Connector_Browser = new function() {
 		Zotero.Connector.checkIsOnline().then(function(isOnline) {
 			var icon, title;
 			if (isOnline) {
-				icon = "images/zotero-new-z-16px.png";
+				icon = "images/zotero-z-32px.png";
 				title = "Zotero is Online";
 			} else {
-				icon = "images/zotero-z-16px-offline.png";
+				icon = "images/zotero-z-32px-offline.png";
 				title = "Zotero is Offline";
 			}
 			if (typeof message === 'string') {
@@ -762,14 +762,22 @@ Zotero.Connector_Browser = new function() {
 		}
 		browser.action.enable(tabID);
 	}
+
+	function getHiDPIImagePaths(imageSrc) {
+		return {
+			32: imageSrc,
+			16: imageSrc.replace('.png', '@16.png'),
+			48: imageSrc.replace('.png', '@48.png'),
+		}
+	}
 
 	function _showTranslatorIcon(tab, translator) {
 		var itemType = translator.itemType;
 
 		browser.action.setIcon({
-			tabId:tab.id,
-			path:(itemType === "multiple"
-				? "images/treesource-collection.png"
+			tabId: tab.id,
+			path: getHiDPIImagePaths(itemType === "multiple"
+				? "images/toolbar/collection.png"
 				: Zotero.ItemTypes.getImageSrc(itemType))
 		});
 
@@ -782,7 +790,7 @@ Zotero.Connector_Browser = new function() {
 	function _showWebpageIcon(tab) {
 		browser.action.setIcon({
 			tabId: tab.id,
-			path: Zotero.ItemTypes.getImageSrc("webpage-gray")
+			path: getHiDPIImagePaths(Zotero.ItemTypes.getImageSrc("webpage-gray"))
 		});
 		let withSnapshot = Zotero.Connector.isOnline ? Zotero.Connector.automaticSnapshots :
 			Zotero.Prefs.get('automaticSnapshots');
@@ -793,7 +801,7 @@ Zotero.Connector_Browser = new function() {
 	this._showPDFIcon = function(tab) {
 		browser.action.setIcon({
 			tabId: tab.id,
-			path: browser.runtime.getURL('images/pdf.png')
+			path: getHiDPIImagePaths('images/toolbar/attachment-pdf.png')
 		});
 		browser.action.setTitle({
 			tabId: tab.id,
@@ -911,7 +919,7 @@ Zotero.Connector_Browser = new function() {
 
 
 	function _showMessageButton(tab) {
-		var icon = `${Zotero.platform}/zotero-z-32px-australis.png`;
+		var icon = `zotero-z-32px-offline.png`;
 		browser.action.setIcon({
 			tabId: tab.id,
 			path: `images/${icon}`

src/browserExt/manifest-v3.json

@@ -6,9 +6,9 @@
 	"default_locale": "en",
 	"action": {
 		"default_icon": {
-			"16": "images/treeitem-webpage-gray.png",
-			"32": "images/treeitem-webpage-gray@2x.png",
-			"48": "images/treeitem-webpage-gray@48px.png"
+			"16": "images/toolbar/webpage-gray@16.png",
+			"32": "images/toolbar/webpage-gray.png",
+			"48": "images/toolbar/webpage-gray@48.png"
 		},
 		"default_title": "Save to Zotero"
 	},
@@ -70,7 +70,9 @@
 	"homepage_url": "https://www.zotero.org/",
 	"icons": {
 		"16": "Icon-16.png",
+		"32": "Icon-32.png",
 		"48": "Icon-48.png",
+		"64": "Icon-64.png",
 		"96": "Icon-96.png",
 		"128": "Icon-128.png"
 	},

src/browserExt/manifest.json

@@ -6,9 +6,9 @@
 	"default_locale": "en",
 	"browser_action": {
 		"default_icon": {
-			"16": "images/treeitem-webpage-gray.png",
-			"32": "images/treeitem-webpage-gray@2x.png",
-			"48": "images/treeitem-webpage-gray@48px.png"
+			"16": "images/toolbar/webpage-gray@16.png",
+			"32": "images/toolbar/webpage-gray.png",
+			"48": "images/toolbar/webpage-gray@48.png"
 		},
 		"default_title": "Save to Zotero"
 	},
@@ -56,7 +56,9 @@
 	"homepage_url": "https://www.zotero.org/",
 	"icons": {
 		"16": "Icon-16.png",
+		"32": "Icon-32.png",
 		"48": "Icon-48.png",
+		"64": "Icon-64.png",
 		"96": "Icon-96.png",
 		"128": "Icon-128.png"
 	},

src/common/cachedTypes.js

@@ -79,9 +79,17 @@ Zotero.Connector_Types = new function() {
 
 			this.getImageSrc = function(idOrName) {
 				var itemType = Zotero.Connector_Types["itemTypes"][idOrName];
-				var icon = itemType ? itemType[6]/* icon */ : "treeitem-"+idOrName+".png";
+				var icon = itemType ? itemType[6]/* icon */ : idOrName + '.svg';
+				icon = icon.replace('@2x', '');
+				if (Zotero.isBackground) {
+					// SVG not supported in toolbar
+					icon = 'images/toolbar/' + icon.replace('.svg', '.png');
+				}
+				else {
+					icon = 'images/' + icon;
+				}
 
-				return Zotero.getExtensionURL("images/" + icon);
+				return Zotero.getExtensionURL(icon);
 			};
 		}
 

src/common/inject/inject.jsx

@@ -227,7 +227,7 @@ Zotero.Inject = new function() {
 							{
 								sessionID,
 								id: null,
-								iconSrc: Zotero.getExtensionURL("images/treeitem-note.png"),
+								iconSrc: Zotero.getExtensionURL("images/note.svg"),
 								title: Zotero.Utilities.cleanTags(note.note),
 								parentItem: item.id,
 								progress: 100,
@@ -255,14 +255,20 @@ Zotero.Inject = new function() {
 		return translate;
 	};
 
+	const CONTENT_TYPE_TO_ICON_NAME = {
+		"application/pdf": "attachment-pdf",
+		"application/epub+zip": "attachment-epub"
+	}
 	function determineAttachmentIcon(attachment) {
 		if(attachment.linkMode === "linked_url") {
 			return Zotero.ItemTypes.getImageSrc("attachment-web-link");
 		}
 		var contentType = attachment.contentType || attachment.mimeType;
-		return Zotero.ItemTypes.getImageSrc(
-			contentType === "application/pdf" ? "attachment-pdf" : "attachment-snapshot"
-		);
+		let iconName = "attachment-snapshot";
+		if (contentType in CONTENT_TYPE_TO_ICON_NAME) {
+			iconName = CONTENT_TYPE_TO_ICON_NAME[contentType];
+		}
+		return Zotero.ItemTypes.getImageSrc(iconName);
 	}
 
 	function determineAttachmentType(attachment) {

src/common/progressWindow/progressWindow.css

@@ -66,6 +66,20 @@ button:active {
 	vertical-align: -3px;
 }
 
+.ProgressWindow-targetIcon.library {
+	background-image: url("../images/library.svg");
+}
+.tree-node.focused .ProgressWindow-targetIcon.library {
+	background-image: url("../images/library-white.svg");
+}
+
+.ProgressWindow-targetIcon.collection {
+	background-image: url("../images/collection.svg");
+}
+.tree-node.focused .ProgressWindow-targetIcon.collection {
+	background-image: url("../images/collection-white.svg");
+}
+
 .ProgressWindow-disclosure {
 	border-radius: 3px;
 	margin-left: 6px;

src/common/ui/ProgressWindow.jsx

@@ -957,13 +957,11 @@ Zotero.UI.ProgressWindow = class ProgressWindow extends React.PureComponent {
 
 class TargetIcon extends React.Component {
 	render() {
-		var image = this.props.type == 'library'
-			? "treesource-library.png"
-			: "treesource-collection.png";
-		var style = {
-			backgroundImage: `url('${Zotero.UI.style.imageBase}${image}')`
-		};
-		return <div className="ProgressWindow-targetIcon" style={style} />;
+		var className = this.props.type == 'library'
+			? "library"
+			: "collection";
+		className += " ProgressWindow-targetIcon"
+		return <div className={className} />;
 	}
 }