From 4868095820971ace907a92fc022f0e627dac1012 Mon Sep 17 00:00:00 2001
From: Dan Stillman <dstillman@zotero.org>
Date: Wed, 24 Jun 2015 20:01:01 -0400
Subject: [PATCH] Guidance panel for new save icon

For new installations, a panel will show for the Z icon with a ">"
button to go to a second panel for the save icon. For existing
installations, a panel will show just for the save icon. In both cases,
the panels are non-auto-hiding but are dismissed if clicked on or when a
new content page is loaded.

There's also a new close button, but it's not enabled currently. Might
be useful for panels with embedded links where an accidental click on
the panel alone shouldn't close the panel (like the Firefox customize
mode wizard).
---
 .../content/zotero/bindings/guidancepanel.xml | 185 ++++++++++++++----
 chrome/content/zotero/bindings/itembox.xml    |   8 +-
 chrome/content/zotero/browser.js              |   8 -
 chrome/content/zotero/icon.js                 |   7 +-
 chrome/content/zotero/overlay.xul             |   9 +-
 chrome/locale/en-US/zotero/zotero.properties  |   2 +-
 .../default/zotero/bindings/guidancepanel.css |  51 +++++
 .../default/zotero/chevron-left_808080_32.png | Bin 0 -> 347 bytes
 .../zotero/chevron-right_808080_32.png        | Bin 0 -> 353 bytes
 chrome/skin/default/zotero/overlay.css        |  10 -
 10 files changed, 215 insertions(+), 65 deletions(-)
 create mode 100644 chrome/skin/default/zotero/bindings/guidancepanel.css
 create mode 100644 chrome/skin/default/zotero/chevron-left_808080_32.png
 create mode 100644 chrome/skin/default/zotero/chevron-right_808080_32.png

diff --git a/chrome/content/zotero/bindings/guidancepanel.xml b/chrome/content/zotero/bindings/guidancepanel.xml
index 12f40106a6..5a925e7503 100644
--- a/chrome/content/zotero/bindings/guidancepanel.xml
+++ b/chrome/content/zotero/bindings/guidancepanel.xml
@@ -29,71 +29,130 @@
 		  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 	
 	<binding id="guidancepanel">
+		<resources>
+			<stylesheet src="chrome://zotero/skin/bindings/guidancepanel.css"/>
+		</resources>
+		
 		<implementation>
+			<!--
+			  @param {Object} [options]
+			  @param {String} [options.text] - Text to use in place of firstRunGuidance.<about>
+			  @param {DOMElement} [options.forEl] - Anchor node
+			  @param {Boolean} [options.force] - Show even if already shown, and don't update
+			                                     firstRunGuidanceShown.<about> pref
+			-->
 			<method name="show">
-				<parameter name="forEl"/>
-				<parameter name="text"/>
+				<parameter name="options"/>
 				<body>
 				<![CDATA[
 					Components.utils.import("resource://gre/modules/Services.jsm");
 					if(!Zotero.Prefs.get("firstRunGuidance")) return;
-
-					var about = this.getAttribute("about"),
-						pref = "firstRunGuidanceShown."+about,
-						shown = false;
-					try {
-						shown = Zotero.Prefs.get(pref);
-					} catch(e) {};
-					if(shown) return;
+					
+					options = options || {};
+					let text = options.text;
+					let useLastText = options.useLastText || false;
+					let forEl = options.forEl || document.getElementById(this.getAttribute("for"));
+					let force = options.force || false;
+					
+					if (!forEl) return;
+					// Don't show two panels at once
+					if (Zotero.guidanceBeingShown) {
+						return;
+					}
+					
+					var about = this.getAttribute("about");
+					var pref = false;
+					if (about) {
+						pref = "firstRunGuidanceShown." + about;
+						let shown = false;
+						try {
+							shown = Zotero.Prefs.get(pref);
+						} catch(e) {};
+						if (shown && !force) {
+							return;
+						}
+					}
+					
+					Zotero.guidanceBeingShown = true;
 					
 					var x = this.getAttribute("x"),
 						y = this.getAttribute("y"),
 						position = this.getAttribute("position"),
 						panel = document.getAnonymousNodes(this)[0];
 					
-					if(!forEl) forEl = document.getElementById(this.getAttribute("for"));
-					if(!text) text = Zotero.getString("firstRunGuidance."+about);
-					text = text.split("\n");
-					var descriptionNode = panel.lastChild;
-					
-					while (descriptionNode.hasChildNodes()) {
-						descriptionNode.removeChild(descriptionNode.firstChild);
+					if (!useLastText) {
+						if (!text) {
+							text = Zotero.getString("firstRunGuidance." + about);
+						}
+						text = text.split("\n");
+						var descriptionNode = this.id('panel-description');
+						
+						while (descriptionNode.hasChildNodes()) {
+							descriptionNode.removeChild(descriptionNode.firstChild);
+						}
+						
+						while(text.length) {
+							var textLine = text.shift();
+							descriptionNode.appendChild(document.createTextNode(textLine));
+							if(text.length) descriptionNode.appendChild(document.createElementNS(
+								"http://www.w3.org/1999/xhtml", "br"));
+						}
 					}
 					
-					while(text.length) {
-						var textLine = text.shift();
-						descriptionNode.appendChild(document.createTextNode(textLine));
-						if(text.length) descriptionNode.appendChild(document.createElementNS(
-							"http://www.w3.org/1999/xhtml", "br"));
-					}
+					this.setAttribute(
+						"onpopuphidden",
+						"this.hidden = true; "
+							+ "Zotero.guidanceBeingShown = false; "
+							+ (this.getAttribute("onpopuphidden") || "")
+					);
 					
-					this.setAttribute('onpopuphidden', 'this.hidden = true');
+					this._initNavButton('back', options.back);
+					this._initNavButton('forward', options.forward);
 					
-					var me = this;
+					var self = this;
 					var f = function() {
-						if(me.hasAttribute("foregroundonly") && Services.ww.activeWindow != window) return;
-						me.hidden = false;
+						if (self.hasAttribute("foregroundonly") && Services.ww.activeWindow != window) return;
+						
+						// Hide panel if content page changes
+						if (self.getAttribute('hideonpagechange') == "true") {
+							let popupShownListener = function () {
+								self.removeEventListener("popupshown", popupShownListener);
+								
+								let appcontent = document.getElementById('appcontent');
+								let pageHideListener = function () {
+									appcontent.removeEventListener("pagehide", pageHideListener);
+									self.hide();
+								};
+								appcontent.addEventListener("pagehide", pageHideListener);
+							};
+							self.addEventListener("popupshown", popupShownListener);
+						}
+						
+						self.hidden = false;
 						panel.openPopup(forEl, position ? position : "after_start",
 							x ? parseInt(x, 10) : 0, y ? parseInt(y, 10) : 0, false, false, null);
-						Zotero.Prefs.set(pref, true);
+						if (pref) {
+							Zotero.Prefs.set(pref, true);
+						}
 					};
-
-					if(this.hasAttribute("delay")) {
+					
+					if(this.hasAttribute("delay") && !force) {
 						window.setTimeout(f, this.getAttribute("delay"));
 					} else {
 						f();
 					}
 
-					if(this.hasAttribute("noautohide")) {
-						var listener = function() {
+					if (this.hasAttribute("noautohide")) {
+						let listener = function () {
+							panel.removeEventListener("click", listener);
 							panel.hidePopup();
-							panel.removeEventListener("click", listener, false);
-						}
-						panel.addEventListener("click", listener, false);
+						};
+						panel.addEventListener("click", listener);
 					}
 				]]>
 				</body>
 			</method>
+			
 			<method name="hide">
 				<body>
 				<![CDATA[
@@ -101,12 +160,62 @@
 				]]>
 				</body>
 			</method>
+			
+			<method name="_initNavButton">
+				<parameter name="dir"/>
+				<parameter name="nextID"/>
+				<body><![CDATA[
+					if (!nextID) {
+						nextID = this.getAttribute(dir);
+					}
+					if (!nextID) {
+						return;
+					}
+					var nextElem = document.getElementById(nextID);
+					button = this.id(dir + '-button');
+					button.hidden = false;
+					var listener = function (event) {
+						button.removeEventListener("click", listener);
+						this.hide();
+						var data = {
+							force: true
+						};
+						// Point the next panel back to this one
+						data[dir == 'back' ? 'forward' : 'back'] = this.getAttribute('id');
+						// When going backwards, don't regenerate text
+						if (dir == 'back') {
+							data.useLastText = true;
+						}
+						nextElem.show(data);
+						event.stopPropagation();
+					}.bind(this);
+					button.addEventListener("click", listener);
+				]]></body>
+			</method>
+			
+			<method name="id">
+				<parameter name="id"/>
+				<body><![CDATA[
+					return document.getAnonymousNodes(this)[0].getElementsByAttribute('anonid', id)[0];
+				]]></body>
+			</method>
 		</implementation>
 		
 		<content>
-			<xul:panel orient="horizontal" style="max-width: 400px" type="arrow" align="top" xbl:inherits="noautohide">
-				<xul:image src="chrome://zotero/skin/zotero-new-z-48px.png" style="margin-right: 10px; width: 48px; height: 48px;"/>
-				<xul:description flex="1"></xul:description>
+			<xul:panel type="arrow" align="top" xbl:inherits="noautohide">
+				<xul:stack>
+					<xul:hbox align="center">
+						<xul:image src="chrome://zotero/skin/zotero-new-z-48px.png" style="margin-right: 10px; width: 48px; height: 48px;"/>
+						<xul:description anonid="panel-description" flex="1"></xul:description>
+					</xul:hbox>
+					<xul:hbox anonid="close-button-box">
+						<xul:toolbarbutton anonid="close-button" class="close-icon" hidden="true"/>
+					</xul:hbox>
+					<xul:hbox anonid="nav-buttons">
+						<xul:toolbarbutton anonid="back-button" oncommand="hide()" hidden="true"/>
+						<xul:toolbarbutton anonid="forward-button" oncommand="hide()" hidden="true"/>
+					</xul:hbox>
+				</xul:stack>
 			</xul:panel>
 		</content>
 	</binding>
diff --git a/chrome/content/zotero/bindings/itembox.xml b/chrome/content/zotero/bindings/itembox.xml
index 8c91b6b989..750476f1f9 100644
--- a/chrome/content/zotero/bindings/itembox.xml
+++ b/chrome/content/zotero/bindings/itembox.xml
@@ -1874,10 +1874,14 @@
 					if(field === 'creator') {
 						// Reset creator mode settings here so that flex attribute gets reset
 						this.switchCreatorMode(row, (otherFields.fieldMode ? 1 : 0), true);
-						
+						Zotero.debug("HERE");
 						if(Zotero.ItemTypes.getName(this.item.itemTypeID) === "bookSection") {
+						Zotero.debug("YES");
 							var creatorTypeLabels = document.getAnonymousNodes(this)[0].getElementsByClassName("creator-type-label");
-							document.getElementById("zotero-author-guidance").show(creatorTypeLabels[creatorTypeLabels.length-1]);
+							Zotero.debug(creatorTypeLabels[creatorTypeLabels.length-1] + "");
+							document.getElementById("zotero-author-guidance").show({
+								forEl: creatorTypeLabels[creatorTypeLabels.length-1]
+							});
 						}
 					}
 					
diff --git a/chrome/content/zotero/browser.js b/chrome/content/zotero/browser.js
index 35ee645617..594bbfcfb4 100644
--- a/chrome/content/zotero/browser.js
+++ b/chrome/content/zotero/browser.js
@@ -441,14 +441,6 @@ var Zotero_Browser = new function() {
 				button.tooltipText = tooltiptext;
 				if (state == tab.CAPTURE_STATE_TRANSLATABLE) {
 					button.classList.add('translate');
-					
-					// Show guidance panel if necessary
-					if (inToolbar) {
-						button.addEventListener("load", function() {
-							document.getElementById("zotero-status-image-guidance").show();
-						});
-					}
-					// TODO: Different guidance for web pages?
 				}
 				else {
 					button.classList.remove('translate');
diff --git a/chrome/content/zotero/icon.js b/chrome/content/zotero/icon.js
index de8708297f..f5f401fc1d 100644
--- a/chrome/content/zotero/icon.js
+++ b/chrome/content/zotero/icon.js
@@ -61,9 +61,10 @@ CustomizableUI.addListener({
 			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)
-			);
+			document.getElementById("zotero-main-button-guidance").show({
+				text: Zotero.getString(property, shortcut)
+			});
+			document.getElementById("zotero-save-button-guidance").show();
 		}
 		else if (id == getSingleID('save')) {
 			Zotero_Browser.updateStatus();
diff --git a/chrome/content/zotero/overlay.xul b/chrome/content/zotero/overlay.xul
index 8c08dd6440..f894ecc174 100644
--- a/chrome/content/zotero/overlay.xul
+++ b/chrome/content/zotero/overlay.xul
@@ -50,9 +50,12 @@
 		
 		<stack id="zotero-pane-stack" persist="savedHeight" savedHeight="300" 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"/>
+		<zoteroguidancepanel id="zotero-main-button-guidance" about="toolbarButton" for="zotero-toolbar-main-button"
+			position="bottomcenter topleft" delay="2000" foregroundonly="true" noautohide="true"
+			hideonpagechange="true" forward="zotero-save-button-guidance"/>
+		<zoteroguidancepanel id="zotero-save-button-guidance" about="saveButton" for="zotero-toolbar-save-button"
+			position="bottomcenter topleft" x="-8" delay="2000" foregroundonly="true" noautohide="true"
+			hideonpagechange="true"/>
 		
 		<!-- Annotation Toolbar -->
 		<toolbar id="zotero-annotate-tb" crop="end" insertbefore="content" hidden="true">
diff --git a/chrome/locale/en-US/zotero/zotero.properties b/chrome/locale/en-US/zotero/zotero.properties
index 90df692020..defa75cbc3 100644
--- a/chrome/locale/en-US/zotero/zotero.properties
+++ b/chrome/locale/en-US/zotero/zotero.properties
@@ -999,12 +999,12 @@ connector.error.title				= Zotero Connector Error
 connector.standaloneOpen			= Your database cannot be accessed because Zotero Standalone is currently open. Please view your items in Zotero Standalone.
 connector.loadInProgress			= Zotero Standalone was launched but is not accessible. If you experienced an error opening Zotero Standalone, restart Firefox.
 
-firstRunGuidance.saveIcon		= Zotero has found a reference on this page. Click this icon in the address bar to save the reference to your Zotero library.
 firstRunGuidance.authorMenu		= Zotero lets you specify editors and translators, too. You can turn an author into an editor or translator by selecting from this menu.
 firstRunGuidance.quickFormat	= Type a title or author to search for a reference.\n\nAfter you've made your selection, click the bubble or press Ctrl-\u2193 to add page numbers, prefixes, or suffixes. You can also include a page number along with your search terms to add it directly.\n\nYou can edit citations directly in the word processor document.
 firstRunGuidance.quickFormatMac	= Type a title or author to search for a reference.\n\nAfter you've made your selection, click the bubble or press Cmd-\u2193 to add page numbers, prefixes, or suffixes. You can also include a page number along with your search terms to add it directly.\n\nYou can edit citations directly in the word processor document.
 firstRunGuidance.toolbarButton.new = Click here to open Zotero, or use the %S keyboard shortcut.
 firstRunGuidance.toolbarButton.upgrade = The Zotero icon can now be found in the Firefox toolbar. Click the icon to open Zotero, or use the %S keyboard shortcut.
+firstRunGuidance.saveButton = Click this button to save any web page to your Zotero library. On some pages, Zotero will be able to save full details, including author and date.
 
 styles.bibliography		= Bibliography
 styles.editor.save		= Save Citation Style
diff --git a/chrome/skin/default/zotero/bindings/guidancepanel.css b/chrome/skin/default/zotero/bindings/guidancepanel.css
new file mode 100644
index 0000000000..97eb0acefe
--- /dev/null
+++ b/chrome/skin/default/zotero/bindings/guidancepanel.css
@@ -0,0 +1,51 @@
+stack {
+	max-width: 400px;
+	margin: 0;
+	padding: 0;
+}
+
+*[anonid=nav-buttons] {
+	-moz-box-align: end;
+	-moz-box-pack: end;
+}
+
+*[anonid=nav-buttons] > toolbarbutton {
+	width: 22px;
+	height: 22px;
+	border: 1px solid lightgray;
+	border-radius: 3px;
+	background-position: 5px 5px;
+	background-size: 10px;
+	background-repeat: no-repeat;
+	margin: 0;
+	margin-bottom: -7px;
+}
+
+*[anonid=nav-buttons] > toolbarbutton:hover {
+    border-color: var(--toolbarbutton-hover-bordercolor);
+    box-shadow: var(--toolbarbutton-hover-boxshadow);
+}
+
+*[anonid=nav-buttons] > toolbarbutton:active:hover {
+    border-color: var(--toolbarbutton-active-bordercolor);
+    box-shadow: var(--toolbarbutton-active-boxshadow);
+    transition-duration: 10ms;
+}
+
+*[anonid=back-button] {
+	background-image: url("chrome://zotero/skin/chevron-left_808080_32.png");
+}
+
+*[anonid=forward-button] {
+	margin-right: -16px;
+	background-image: url("chrome://zotero/skin/chevron-right_808080_32.png");
+}
+
+*[anonid=close-button-box] {
+	-moz-box-align: start;
+	-moz-box-pack: end;
+}
+
+*[anonid=close-button] {
+	margin: -16px -16px;
+}
diff --git a/chrome/skin/default/zotero/chevron-left_808080_32.png b/chrome/skin/default/zotero/chevron-left_808080_32.png
new file mode 100644
index 0000000000000000000000000000000000000000..60613178fdfb054ea94e08ee4d2bc47c17cb9ba6
GIT binary patch
literal 347
zcmV-h0i^zkP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80003ZNkl<Zc$~%8
zKS~2Z6oB#1AXaM;Fs*G0(G$c<JV5HC&ly}T7W{JwPmtCkLLg_5Xq`a%*xHF{c3}~B
z=DnTw%v8(5o9|c6&K?v+!9G{Vc)tvo0~_GtzX2KW3S0xHz(Rts0#xxq?cGU<IQItp
z75|Osc>zN4YIT8Q4}c{84UB=cH9#640n^Y%Z2)HRHUQJO7GNIN09@iyfLmMwaE-?R
zN5IT89s`^Kmy!9Glz0sA20TaRhrqoT0AM0O+@&C5fFA|o!2_T{+_phT4<a{&<|x)6
z9z6gWL@q_N`5bEyPaXgb;wFYjxsquRjW^@eOQ{601Xf;v7~&nc0=_%}O^A;&{uvrP
tGy>ESTcBTi4lYYTg~&An)_=$9wFA5`RETsGw8H=Z002ovPDHLkV1jU;h*|&u

literal 0
HcmV?d00001

diff --git a/chrome/skin/default/zotero/chevron-right_808080_32.png b/chrome/skin/default/zotero/chevron-right_808080_32.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c3b161c03b570bda5c8f058c14878bcb15c9be7
GIT binary patch
literal 353
zcmV-n0iOPeP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80003fNkl<Zc$~%7
zD^kNy6oBCmf<Pfz1%f4j;GwXEBG?9XksXk*0G=KgG#-Zr4GM*42GPbaCHJN|cep0z
zwEs6JZ6*tKUHi|om^rtDPh6mi1T1CDY~v2gIGSD$@f`t3ZD0%c(`a)BxD~XCHozJl
ze#OHPZGhE3;-QE(z!OG^&-X^8egosuh@8J+QAF-@pco<-Pz=!pPz2Ex5RRA!5Q>-=
z&;@Z>3IL~gNz4qfQUXxn3hRlvV|+yen)om=H^NEVK+gNXtoSt!GUDUZmv!AhXuK;R
zJWl>CsBnY*$T)c$C>AHZfy(4*HYgFNeFMegDZpOocna{0_mc4x-~*e}Yms;g0B<u8
zVR7=F1FzV?86I&S70(4Q*~D&SxH)~_2YR0$(+)rn@AIh900000NkvXXu0mjfZ4!_^

literal 0
HcmV?d00001

diff --git a/chrome/skin/default/zotero/overlay.css b/chrome/skin/default/zotero/overlay.css
index 22e8828849..089dc2db4b 100644
--- a/chrome/skin/default/zotero/overlay.css
+++ b/chrome/skin/default/zotero/overlay.css
@@ -1,13 +1,3 @@
-#zotero-status-image {
-	width: 16px;
-	height: 16px;
-	margin-right: 3px;
-}
-
-#zotero-status-image:not(.translate):not(:hover) {
-	filter: grayscale(100%);
-}
-
 #zotero-pane
 {
 	min-height: 32px; /* must match value in ZoteroPane.updateTagSelectorSize() */