Toolbar button and icon overhaul

- New 2x toolbar button shapes and other icons from @johanneskrtek --
  this HiDPI-ifies basically all graphics other than a few remaining item
  type icons
- Use the Mac search dropmarker for all menu buttons, since it's wider
  and more pleasant. Reduce menu button padding slightly to compensate.
- Better toolbar button state for inactive window and pressed state
- Fix dropmarker overlap in tag selector icon

Closes #347, Better/retina-style OS X toolbar icons
Closes #1339, Create new button PNGs for macOS

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

@@ -107,22 +107,37 @@
 	margin-left: 7px;
 }
 
-@media (min-resolution: 1.5dppx) {
-	#zotero-pane .toolbarbutton-icon {
-		max-width: 28px;
-	}
-	
 #zotero-tb-sync-stop .toolbarbutton-icon,
 #zotero-tb-sync-error .toolbarbutton-icon {
 	width: 16px;
 }
+
+.zotero-tb-button > .toolbarbutton-icon {
+	max-width: 31px;
 }
 
-.zotero-tb-button, .zotero-tb-button:first-child, .zotero-tb-button:last-child {
+.zotero-tb-button,
+.zotero-tb-button:first-child,
+.zotero-tb-button:last-child {
   -moz-margin-start: 0 !important;
   -moz-margin-end: 3px !important;
   -moz-padding-end: 10px !important;
-  background: url("chrome://zotero/skin/mac/menubutton-end.png") right center no-repeat;
+  background: url("chrome://zotero/skin/mac/menubutton-end.png") right center/auto 24px no-repeat;
+}
+
+.zotero-tb-button[type=menu] {
+	-moz-padding-end: 8px !important;
+}
+
+.zotero-tb-button > .toolbarbutton-icon {
+	background: url("chrome://zotero/skin/mac/menubutton-start.png") left center/auto 24px no-repeat;
+	padding: 4px 4px 4px 11px;
+}
+
+/* For menu buttons, decrease left padding by 1px */
+.zotero-tb-button[type=menu] > .toolbarbutton-icon {
+	-moz-padding-start: 9px;
+	max-width: 29px;
 }
 
 #zotero-collections-toolbar {
@@ -130,12 +145,23 @@
 }
 
 .zotero-tb-button:-moz-window-inactive {
-	opacity: 0.7;
+	opacity: 0.5;
+}
+
+.zotero-tb-button:-moz-window-inactive > .toolbarbutton-icon {
+	background: url("chrome://zotero/skin/mac/menubutton-start-inactive-window.png") left center/auto 24px no-repeat;
+}
+
+/* Use a darker background when inactive so the button itself doesn't get too dark at 50% */
+.zotero-tb-button:-moz-window-inactive,
+.zotero-tb-button:-moz-window-inactive:first-child,
+.zotero-tb-button:-moz-window-inactive:last-child {
+	background: url("chrome://zotero/skin/mac/menubutton-end-inactive-window.png") right center/auto 24px no-repeat;
 }
 
 .zotero-tb-button[open="true"],
 .zotero-tb-button:not([disabled="true"]):hover:active {
-  background: url("chrome://zotero/skin/mac/menubutton-end-pressed.png") right center no-repeat;
+  background: url("chrome://zotero/skin/mac/menubutton-end-pressed.png") right center/auto 24px no-repeat;
 }
 
 .zotero-tb-button > menupopup {
@@ -143,17 +169,9 @@
   margin-top: -4px;
 }
 
-.zotero-tb-button > .toolbarbutton-icon {
+#zotero-tb-search-menu-button {
-  /*-moz-binding: url('chrome://zotero-platform/content/zoterotbbutton.xml#zotero-tb-button');*/
+	margin: -6px 0 -6px -16px;
-  background: url("chrome://zotero/skin/mac/menubutton-start.png") left center no-repeat;
+	padding: 6px 0 6px 15px;
-  padding: 5px 1px 5px 11px;
-}
-
-#zotero-tb-search-menu-button
-{
-	margin: -6px -2px -6px -16px;
-	padding: 6px 2px 6px 14px;
-	list-style-image: url("chrome://zotero/skin/mac/searchbar-dropmarker.png");
 }
 
 #zotero-tb-sync > .toolbarbutton-icon {
@@ -168,7 +186,7 @@
 
 .zotero-tb-button[open="true"] > .toolbarbutton-icon,
 .zotero-tb-button:not([disabled="true"]):hover:active > .toolbarbutton-icon {
-  background: url("chrome://zotero/skin/mac/menubutton-start-pressed.png") left center no-repeat;
+  background: url("chrome://zotero/skin/mac/menubutton-start-pressed.png") left center/auto 24px no-repeat;
 }
 
 .zotero-tb-button > .toolbarbutton-text {
@@ -460,16 +478,6 @@ treechildren::-moz-tree-image {
 	list-style-image: url('chrome://zotero/skin/mac/toolbar-note-add.png');
 }
 
-@media (min-resolution: 1.5dppx) {
-	#zotero-tb-advanced-search {
-		list-style-image: url('chrome://zotero/skin/mac/toolbar-advanced-search@2x.png');
-	}
-	
-	#zotero-tb-note-add {
-		list-style-image: url('chrome://zotero/skin/mac/toolbar-note-add@2x.png');
-	}
-}
-
 #zotero-tb-actions-menu
 {
 	list-style-image: url('chrome://zotero/skin/mac/cog.png');
@@ -484,3 +492,16 @@ treechildren::-moz-tree-image {
 #zotero-collectionmenu > .menuitem-iconic > .menu-iconic-left, #zotero-itemmenu > .menuitem-iconic > .menu-iconic-left, #zotero-collectionmenu > .menu-iconic > .menu-iconic-left, #zotero-itemmenu > .menu-iconic > .menu-iconic-left {
 	display: none;
 }
+
+
+/* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */
+@media (min-resolution: 1.5dppx) {
+	.zotero-tb-button,.zotero-tb-button:first-child,.zotero-tb-button:last-child  { background: url("chrome://zotero/skin/mac/menubutton-end@2x.png") right center/auto 24px no-repeat; }
+	.zotero-tb-button > .toolbarbutton-icon  { background: url("chrome://zotero/skin/mac/menubutton-start@2x.png") left center/auto 24px no-repeat; }
+	.zotero-tb-button:-moz-window-inactive > .toolbarbutton-icon  { background: url("chrome://zotero/skin/mac/menubutton-start-inactive-window@2x.png") left center/auto 24px no-repeat; }
+	.zotero-tb-button:-moz-window-inactive,.zotero-tb-button:-moz-window-inactive:first-child,.zotero-tb-button:-moz-window-inactive:last-child  { background: url("chrome://zotero/skin/mac/menubutton-end-inactive-window@2x.png") right center/auto 24px no-repeat; }
+	.zotero-tb-button[open="true"],.zotero-tb-button:not([disabled="true"]):hover:active  { background: url("chrome://zotero/skin/mac/menubutton-end-pressed@2x.png") right center/auto 24px no-repeat; }
+	.zotero-tb-button[open="true"] > .toolbarbutton-icon,.zotero-tb-button:not([disabled="true"]):hover:active > .toolbarbutton-icon  { background: url("chrome://zotero/skin/mac/menubutton-start-pressed@2x.png") left center/auto 24px no-repeat; }
+	#zotero-tb-advanced-search { list-style-image: url('chrome://zotero/skin/mac/toolbar-advanced-search@2x.png'); }
+	#zotero-tb-note-add { list-style-image: url('chrome://zotero/skin/mac/toolbar-note-add@2x.png'); }
+}

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

@@ -188,23 +188,15 @@ toolbar:not([id="nav-bar"]) #zotero-toolbar-buttons separator {
 
 #zotero-tb-search-menu-button {
 	margin: 0 -1px 0 -4px;
+	padding: 5px 0 5px 5px;
 	border: 0;
 	background: transparent;
-	/* Mozilla file copied from chrome://browser/skin/mainwindow-dropdown-arrow.png
-	   for availability in Standalone */
-	list-style-image: url("chrome://zotero/skin/win/mainwindow-dropdown-arrow.png");
-	-moz-image-region: rect(0, 13px, 11px, 0);
 }
 
 #zotero-tb-search-menu-button .button-menu-dropmarker {
 	display: none;
 }
 
-#zotero-tb-search-menu-button:hover:active,
-#zotero-tb-search-menu-button[open="true"] {
-	-moz-image-region: rect(0, 26px, 11px, 13px);
-}
-
 #zotero-tb-search .textbox-search-icon {
 	visibility: hidden;
 }

chrome/content/zotero/bindings/itembox.xml

@@ -933,7 +933,7 @@
 					
 					// Switch to single-field mode
 					if (fieldMode == 1) {
-						button.style.backgroundImage = 'url("chrome://zotero/skin/textfield-dual.png")';
+						button.style.backgroundImage = `url("chrome://zotero/skin/textfield-dual${Zotero.hiDPISuffix}.png")`;
 						button.setAttribute('tooltiptext', Zotero.getString('pane.item.switchFieldMode.two'));
 						lastName.setAttribute('fieldMode', '1');
 						button.setAttribute('onclick', "document.getBindingParent(this).switchCreatorMode(Zotero.getAncestorByTagName(this, 'row'), 0, false, true)");
@@ -966,7 +966,7 @@
 					}
 					// Switch to two-field mode
 					else {
-						button.style.backgroundImage = 'url("chrome://zotero/skin/textfield-single.png")';
+						button.style.backgroundImage = `url("chrome://zotero/skin/textfield-single${Zotero.hiDPISuffix}.png")`;
 						button.setAttribute('tooltiptext', Zotero.getString('pane.item.switchFieldMode.one'));
 						lastName.setAttribute('fieldMode', '0');
 						button.setAttribute('onclick', "document.getBindingParent(this).switchCreatorMode(Zotero.getAncestorByTagName(this, 'row'), 1, false, true)");

chrome/content/zotero/bindings/tagselector.xml

@@ -1169,8 +1169,10 @@
 							oncommand="document.getBindingParent(this).handleKeyPress(); event.stopPropagation()"
 							onkeypress="if (event.keyCode == event.DOM_VK_ESCAPE) { document.getBindingParent(this).handleKeyPress(true); }"
 							tabindex="-1"/>
-						<toolbarbutton id="view-settings-menu" tooltiptext="&zotero.toolbar.actions.label;"
+						<toolbarbutton
-								image="chrome://zotero/skin/tag-selector-menu.png" type="menu">
+								id="view-settings-menu"
+								tooltiptext="&zotero.toolbar.actions.label;"
+								type="menu">
 							<menupopup id="view-settings-popup"
 									onpopupshowing="document.getBindingParent(this)._updateDeleteAutomaticMenuOption()"
 									onpopupshown="/*

chrome/content/zotero/zoteroPane.xul

@@ -552,7 +552,6 @@
 										id="zotero-items-column-hasAttachment" default-in="default" disabled-in="feed" 
 										class="treecol-image"
 										label="&zotero.tabs.attachments.label;"
-										src="chrome://zotero/skin/attach-small.png"
 										fixed="true"
 										zotero-persist="ordinal hidden sortActive sortDirection"/>
 									<splitter class="tree-splitter"/>

chrome/skin/default/zotero/bindings/tagselector.css

@@ -84,7 +84,17 @@ toolbarbutton.zotero-clicky
 	height:1em;
 }
 
-#view-settings-menu .toolbarbutton-menu-dropmarker
+#view-settings-menu {
-{
+	list-style-image: url(chrome://zotero/skin/tag-selector-menu.png);
-	margin-left: -12px !important;
+}
+
+#view-settings-menu .toolbarbutton-icon {
+	width: 16px;
+	margin-right: 12px; /* leave room for dropmarker */
+}
+
+
+/* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */
+@media (min-resolution: 1.5dppx) {
+	#view-settings-menu  { list-style-image: url(chrome://zotero/skin/tag-selector-menu@2x.png); }
 }

chrome/skin/default/zotero/overlay.css

@@ -62,6 +62,29 @@
 	min-width: 21px;
 }
 
+#zotero-items-column-hasAttachment {
+	list-style-image: url(chrome://zotero/skin/attach-small.png);
+}
+
+#zotero-items-column-hasAttachment .treecol-icon {
+	width: 13px;
+}
+
+#zotero-items-column-numNotes {
+	list-style-image: url(chrome://zotero/skin/treeitem-note-small.png);
+}
+
+#zotero-items-column-numNotes .treecol-icon {
+	width: 12px;
+}
+
+@media (min-resolution: 1.5dppx) {
+	.tree-columnpicker-icon {
+		list-style-image: url(chrome://zotero/skin/firefox/columnpicker@2x.gif);
+		width: 14px;
+	}
+}
+
 #zotero-items-column-numNotes {
 	text-align: center;
 }
@@ -324,6 +347,19 @@
 	margin-right: 2px;
 }
 
+.zotero-tb-button:hover:active {
+	mix-blend-mode: multiply;
+}
+
+.toolbarbutton-menu-dropmarker {
+	padding-inline-start: 0;
+	list-style-image: url('chrome://zotero/skin/searchbar-dropmarker.png');
+}
+
+.toolbarbutton-menu-dropmarker .dropmarker-icon {
+	width: 7px;
+}
+
 .zotero-tb-button[type="panel"] > dropmarker {
   display: none;
 }
@@ -643,13 +679,17 @@
 	width: 172px;
 }
 
-#zotero-tb-search-menu-button
+#zotero-tb-search-menu-button {
-{
 	margin: 0;
 	padding: 0;
 	-moz-appearance: none;
 	min-width: 0;
 	cursor: default;
+	list-style-image: url("chrome://zotero/skin/searchbar-dropmarker.png");
+}
+
+#zotero-tb-search-menu-button .button-icon {
+	width: 7px;
 }
 
 #zotero-splitter
@@ -719,17 +759,22 @@
 
 /* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */
 @media (min-resolution: 1.5dppx) {
+	#zotero-items-column-hasAttachment  { list-style-image: url(chrome://zotero/skin/attach-small@2x.png); }
+	#zotero-items-column-numNotes  { list-style-image: url(chrome://zotero/skin/treeitem-note-small@2x.png); }
+	.toolbarbutton-menu-dropmarker  { list-style-image: url('chrome://zotero/skin/searchbar-dropmarker@2x.png'); }
 	#zotero-tb-collection-add { list-style-image: url('chrome://zotero/skin/toolbar-collection-add@2x.png'); }
 	.zotero-menuitem-new-feed { list-style-image: url('chrome://zotero/skin/toolbar-feed-add@2x.png'); }
 	#zotero-tb-library-add-menu { list-style-image: url('chrome://zotero/skin/library_add@2x.png'); }
 	#zotero-tb-actions-menu { list-style-image: url('chrome://zotero/skin/cog@2x.png'); }
 	#zotero-tb-add { list-style-image: url('chrome://zotero/skin/toolbar-item-add@2x.png'); }
+	#zotero-tb-lookup { list-style-image: url('chrome://zotero/skin/toolbar-lookup@2x.png'); }
 	#zotero-tb-attachment-add { list-style-image: url('chrome://zotero/skin/attach@2x.png'); }
 	#zotero-tb-note-add { list-style-image: url('chrome://zotero/skin/toolbar-note-add@2x.png'); }
 	#zotero-menuitem-note { list-style-image: url('chrome://zotero/skin/treeitem-note@2x.png'); }
 	.zotero-menuitem-new-saved-search { list-style-image: url('chrome://zotero/skin/treesource-search@2x.png'); }
 	.zotero-menuitem-show-duplicates { list-style-image: url('chrome://zotero/skin/treesource-duplicates@2x.png'); }
 	.zotero-menuitem-show-unfiled { list-style-image: url('chrome://zotero/skin/treesource-unfiled@2x.png'); }
+	.zotero-menuitem-sync  { list-style-image: url(chrome://zotero/skin/arrow_rotate_static@2x.png); }
 	.zotero-menuitem-new-collection { list-style-image: url('chrome://zotero/skin/toolbar-collection-add@2x.png'); }
 	.zotero-menuitem-edit-collection { list-style-image: url('chrome://zotero/skin/toolbar-collection-edit@2x.png'); }
 	.zotero-menuitem-edit-feed { list-style-image: url('chrome://zotero/skin/toolbar-feed-edit@2x.png'); }
@@ -745,7 +790,10 @@
 	.zotero-menuitem-create-report { list-style-image: url('chrome://zotero/skin/treeitem-report@2x.png'); }
 	#zotero-tb-advanced-search { list-style-image: url('chrome://zotero/skin/toolbar-advanced-search@2x.png'); }
 	#zotero-tb-locate { list-style-image: url('chrome://zotero/skin/toolbar-go-arrow@2x.png'); }
-	#zotero-tb-sync-stop { list-style-image: url(chrome://zotero/skin/control_stop_blue@2x.png); margin-right: 0; }
+	#zotero-tb-sync-stop { list-style-image: url(chrome://zotero/skin/control_stop_blue@2x.png); }
 	#zotero-tb-sync-error  { list-style-image: url(chrome://zotero/skin/error@2x.png); }
 	#zotero-tb-sync-error[state=warning]  { list-style-image: url(chrome://zotero/skin/warning@2x.png); }
+	#zotero-tb-sync  { list-style-image: url(chrome://zotero/skin/arrow_rotate_static@2x.png); }
+	#zotero-tb-sync[status=animate]  { list-style-image: url(chrome://zotero/skin/arrow_rotate_animated@2x.png); }
+	#zotero-tb-search-menu-button  { list-style-image: url("chrome://zotero/skin/searchbar-dropmarker@2x.png"); }
 }

chrome/skin/default/zotero/zotero.css

@@ -465,8 +465,10 @@ label.zotero-text-link {
 /* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */
 @media (min-resolution: 1.5dppx) {
 	#zotero-toolbar-save-button,#zotero-toolbar-save-button-single  { list-style-image: url("chrome://zotero/skin/treeitem-webpage@2x.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"); }
+	.zotero-clicky-minus  { background-image: url('chrome://zotero/skin/minus@2x.png') !important; }
+	.zotero-clicky-plus  { background-image: url('chrome://zotero/skin/plus@2x.png') !important; }
+	.zotero-clicky-minus:not([disabled=true]):active  { background-image: url('chrome://zotero/skin/minus-active@2x.png') !important; }
+	.zotero-clicky-plus:not([disabled=true]):active  { background-image: url('chrome://zotero/skin/plus-active@2x.png') !important; }
 	.zotero-scrape-popup-library { list-style-image: url('chrome://zotero/skin/treesource-library@2x.png'); }
 	.zotero-scrape-popup-collection { list-style-image: url('chrome://zotero/skin/treesource-collection@2x.png'); }
-	.zotero-spinner  { list-style-image: url(chrome://zotero/skin/spinner-14px@2x.png); height: 14px; width: 14px; margin-right: 2px; }
 }