From b599f8c57ad74c4b273879c27fc9006dbce61537 Mon Sep 17 00:00:00 2001
From: Richard Marti <richard.marti@gmail.com>
Date: Mon, 5 May 2014 22:54:57 +0200
Subject: [PATCH] Bug 989890 - Port the help button to in-content prefs. r=jaws

---
 .../preferences/in-content/advanced.xul       |  10 +--
 .../preferences/in-content/preferences.js     |   8 +++
 .../preferences/in-content/preferences.xul    |  67 +++++++++++++-----
 .../browser/preferences/preferences.dtd       |   4 +-
 browser/themes/linux/jar.mn                   |   2 +
 browser/themes/osx/jar.mn                     |   2 +
 .../shared/incontentprefs/help-glyph.png      | Bin 0 -> 280 bytes
 .../shared/incontentprefs/help-glyph@2x.png   | Bin 0 -> 500 bytes
 .../shared/incontentprefs/preferences.css     |  42 +++++++++++
 browser/themes/windows/jar.mn                 |   4 ++
 10 files changed, 116 insertions(+), 23 deletions(-)
 create mode 100644 browser/themes/shared/incontentprefs/help-glyph.png
 create mode 100644 browser/themes/shared/incontentprefs/help-glyph@2x.png

diff --git a/browser/components/preferences/in-content/advanced.xul b/browser/components/preferences/in-content/advanced.xul
index 2f4d0c369ca4..b242c9369182 100644
--- a/browser/components/preferences/in-content/advanced.xul
+++ b/browser/components/preferences/in-content/advanced.xul
@@ -138,13 +138,13 @@
         onselect="gAdvancedPane.tabSelectionChanged();">
 
   <tabs id="tabsElement">
-    <tab id="generalTab" label="&generalTab.label;" helpTopic="prefs-advanced-general"/>
+    <tab id="generalTab" label="&generalTab.label;"/>
 #ifdef MOZ_DATA_REPORTING
-    <tab id="dataChoicesTab" label="&dataChoicesTab.label;" helpTopic="prefs-advanced-data-choices"/>
+    <tab id="dataChoicesTab" label="&dataChoicesTab.label;"/>
 #endif
-    <tab id="networkTab" label="&networkTab.label;" helpTopic="prefs-advanced-network"/>
-    <tab id="updateTab" label="&updateTab.label;"  helpTopic="prefs-advanced-update"/>
-    <tab id="encryptionTab" label="&certificateTab.label;" helpTopic="prefs-advanced-encryption"/>
+    <tab id="networkTab" label="&networkTab.label;"/>
+    <tab id="updateTab" label="&updateTab.label;"/>
+    <tab id="encryptionTab" label="&certificateTab.label;"/>
   </tabs>
 
   <tabpanels flex="1">
diff --git a/browser/components/preferences/in-content/preferences.js b/browser/components/preferences/in-content/preferences.js
index 7630cca7a1d1..80a6058e40af 100644
--- a/browser/components/preferences/in-content/preferences.js
+++ b/browser/components/preferences/in-content/preferences.js
@@ -58,3 +58,11 @@ function search(aQuery, aAttribute) {
     element.hidden = (attributeValue != aQuery);
   }
 }
+
+function helpButtonCommand() {
+  let pane = history.state;
+  let categories = document.getElementById("categories");
+  let helpTopic = categories.querySelector(".category[value=" + pane + "]")
+                            .getAttribute("helpTopic");
+  openHelpLink(helpTopic);
+}
diff --git a/browser/components/preferences/in-content/preferences.xul b/browser/components/preferences/in-content/preferences.xul
index 1321a41e58cc..399a24159f50 100644
--- a/browser/components/preferences/in-content/preferences.xul
+++ b/browser/components/preferences/in-content/preferences.xul
@@ -78,53 +78,81 @@
 
     <!-- category list -->
     <richlistbox id="categories">
-      <richlistitem id="category-general" class="category" align="center"
-                    value="paneGeneral" tooltiptext="&paneGeneral.title;">
+      <richlistitem id="category-general"
+                    class="category"
+                    value="paneGeneral"
+                    helpTopic="prefs-main"
+                    tooltiptext="&paneGeneral.title;"
+                    align="center">
         <image class="category-icon"/>
         <label class="category-name" flex="1" value="&paneGeneral.title;"/>
       </richlistitem>
 
-      <richlistitem id="category-content" class="category" align="center"
-                    value="paneContent" tooltiptext="&paneContent.title;">
+      <richlistitem id="category-content"
+                    class="category"
+                    value="paneContent"
+                    helpTopic="prefs-content"
+                    tooltiptext="&paneContent.title;"
+                    align="center">
         <image class="category-icon"/>
         <label class="category-name" flex="1" value="&paneContent.title;"/>
       </richlistitem>
 
-      <richlistitem id="category-application" class="category" align="center"
-                    value="paneApplications" tooltiptext="&paneApplications.title;">
+      <richlistitem id="category-application"
+                    class="category"
+                    value="paneApplications"
+                    helpTopic="prefs-applications"
+                    tooltiptext="&paneApplications.title;"
+                    align="center">
         <image class="category-icon"/>
         <label class="category-name" flex="1" value="&paneApplications.title;"/>
       </richlistitem>
 
-      <richlistitem id="category-privacy" class="category" align="center"
-                    value="panePrivacy" tooltiptext="&panePrivacy.title;">
+      <richlistitem id="category-privacy"
+                    class="category"
+                    value="panePrivacy"
+                    helpTopic="prefs-privacy"
+                    tooltiptext="&panePrivacy.title;"
+                    align="center">
         <image class="category-icon"/>
         <label class="category-name" flex="1" value="&panePrivacy.title;"/>
       </richlistitem>
 
-      <richlistitem id="category-security" class="category" align="center"
-                    value="paneSecurity" tooltiptext="&paneSecurity.title;">
+      <richlistitem id="category-security"
+                    class="category"
+                    value="paneSecurity"
+                    helpTopic="prefs-security"
+                    tooltiptext="&paneSecurity.title;"
+                    align="center">
         <image class="category-icon"/>
         <label class="category-name" flex="1" value="&paneSecurity.title;"/>
       </richlistitem>
 
 #ifdef MOZ_SERVICES_SYNC
-      <richlistitem id="category-sync" class="category" align="center"
-                    value="paneSync" tooltiptext="&paneSync.title;">
+      <richlistitem id="category-sync"
+                    class="category"
+                    value="paneSync"
+                    helpTopic="prefs-weave"
+                    tooltiptext="&paneSync.title;"
+                    align="center">
         <image class="category-icon"/>
         <label class="category-name" flex="1" value="&paneSync.title;"/>
       </richlistitem>
 #endif
 
-      <richlistitem id="category-advanced" class="category" align="center"
-                    value="paneAdvanced" tooltiptext="&paneAdvanced.title;">
+      <richlistitem id="category-advanced"
+                    class="category"
+                    value="paneAdvanced"
+                    helpTopic="prefs-advanced-general"
+                    tooltiptext="&paneAdvanced.title;"
+                    align="center">
         <image class="category-icon"/>
         <label class="category-name" flex="1" value="&paneAdvanced.title;"/>
       </richlistitem>
     </richlistbox>
 
-    <box class="main-content" flex="1">
-      <prefpane flex="1" id="mainPrefPane">
+    <vbox class="main-content" flex="1">
+      <prefpane id="mainPrefPane">
 #include main.xul
 #include privacy.xul
 #include advanced.xul
@@ -135,7 +163,12 @@
 #include sync.xul
 #endif
       </prefpane>
-    </box>
+      <hbox pack="end">
+        <button class="help-button"
+                aria-label="&helpButton.label;"
+                oncommand="helpButtonCommand();"/>
+      </hbox>
+    </vbox>
 
   </hbox>
 </page>
diff --git a/browser/locales/en-US/chrome/browser/preferences/preferences.dtd b/browser/locales/en-US/chrome/browser/preferences/preferences.dtd
index 41cfc0cf23e3..0cbb24577cd5 100644
--- a/browser/locales/en-US/chrome/browser/preferences/preferences.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/preferences.dtd
@@ -22,4 +22,6 @@
 <!-- LOCALIZATION NOTE (paneSync.title): This should match syncBrand.shortName.label in ../syncBrand.dtd -->
 <!ENTITY  paneSync.title          "Sync">
 <!ENTITY  buttonForward.tooltip   "Go forward one page">
-<!ENTITY  buttonBack.tooltip      "Go back one page">
\ No newline at end of file
+<!ENTITY  buttonBack.tooltip      "Go back one page">
+
+<!ENTITY  helpButton.label        "Help">
diff --git a/browser/themes/linux/jar.mn b/browser/themes/linux/jar.mn
index 051a49769432..002e0ec27b64 100644
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -140,6 +140,8 @@ browser.jar:
   skin/classic/browser/preferences/in-content/icons@2x.png    (../shared/incontentprefs/icons@2x.png)
   skin/classic/browser/preferences/in-content/header.png      (../shared/incontentprefs/header.png)
   skin/classic/browser/preferences/in-content/header@2x.png   (../shared/incontentprefs/header@2x.png)
+  skin/classic/browser/preferences/in-content/help-glyph.png  (../shared/incontentprefs/help-glyph.png)
+  skin/classic/browser/preferences/in-content/help-glyph@2x.png (../shared/incontentprefs/help-glyph@2x.png)
   skin/classic/browser/preferences/in-content/dropdown.png    (../shared/incontentprefs/dropdown.png)
   skin/classic/browser/preferences/in-content/dropdown@2x.png (../shared/incontentprefs/dropdown@2x.png)
   skin/classic/browser/preferences/in-content/sorter.png      (../shared/incontentprefs/sorter.png)
diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn
index af28ee7f82fc..fb55508e0235 100644
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -230,6 +230,8 @@ browser.jar:
   skin/classic/browser/preferences/in-content/icons@2x.png    (../shared/incontentprefs/icons@2x.png)
   skin/classic/browser/preferences/in-content/header.png      (../shared/incontentprefs/header.png)
   skin/classic/browser/preferences/in-content/header@2x.png   (../shared/incontentprefs/header@2x.png)
+  skin/classic/browser/preferences/in-content/help-glyph.png  (../shared/incontentprefs/help-glyph.png)
+  skin/classic/browser/preferences/in-content/help-glyph@2x.png (../shared/incontentprefs/help-glyph@2x.png)
   skin/classic/browser/preferences/in-content/sorter.png      (../shared/incontentprefs/sorter.png)
   skin/classic/browser/preferences/in-content/sorter@2x.png   (../shared/incontentprefs/sorter@2x.png)
   skin/classic/browser/preferences/in-content/dropdown.png    (../shared/incontentprefs/dropdown.png)
diff --git a/browser/themes/shared/incontentprefs/help-glyph.png b/browser/themes/shared/incontentprefs/help-glyph.png
new file mode 100644
index 0000000000000000000000000000000000000000..4943f1bb509f4a56ea2d305bca57647114777d90
GIT binary patch
literal 280
zcmV+z0q6dSP)<h;3K|Lk000e1NJLTq000^Q000^Y1^@s6sY*=F0002rNkl<Zc-muN
z7zLwXC;%p!nXI6oz+q_P-eG9#ehP?x8riyi0P=V1S~*)%)gmJsk5xu?9{+)s+yt|2
z-OqyfK>E9`v5PJ>?P4~ta`6WF49aITv~hb1vP|FFHG^hBsb}G21hnWM$Ra%(H*=cA
z6)=7ZL2(2QN;|iuH1Ua%jr(S3T>Uh%acf{;&}O5FMTWL+dm-`So<q|NWMJ*m1xnU>
zHqIV2wMfm<N!q~L)k|DYkDI0z0psWlIF77c8)<40FcEAtwDI^0%sc5cFX*I<jk!jP
e`%y3oPyhfvgFh<X;N<K80000<MNUMnLSTa0|8~a!

literal 0
HcmV?d00001

diff --git a/browser/themes/shared/incontentprefs/help-glyph@2x.png b/browser/themes/shared/incontentprefs/help-glyph@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..b082dd31c46643d8baebdea55dcb50e2dcdedbe8
GIT binary patch
literal 500
zcmV<Q0So?#P)<h;3K|Lk000e1NJLTq001-q001-y1^@s6#dsU*0005INkl<Zc-rll
zze)o^5Qh^9DE`4tK`ep>BgCw^JxEM;FGRDqdmyNYZ{ZVI+KC|e2(~I(#>zqz8|?)x
z#ZnZp5Dn^_M)58YEpK!_*y<A4kD2}L+{I!9K@bE%5Crj$h^K|<!7Px-mDH>y^|s}B
zmt2}hUiMxr$J}$N&n#(b%+U+*ySB)iutH_flHQRo@Z$nGUeI=AWrkU)52|wYE1Aaf
zE9n0(l0sbQ-Ig17^zB>Kq`7M?r8gqmZm{Xi&y7O0m{1d6&Psxn^b{|fdPwLz+UE#1
z4Vyg9+A7=XIfTMaKuGH6Os3L}HUcf_t_6h3`o@oTw09Cz?;=<sQ$uNzOeQ=0yD1zB
zIq5E<lNm2434w9ilyGpKFtuA8CWdKfvHg~DE%Zr0V_kR-zi?;1xtE@DLaoM9sdiLt
z=FfA@<BqpAny-$a41usvBcAc{=Y&|k>Ois`ek_RWJ$f~aT5NNn=Haecfy7(R6iptr
zO;#EeoT|+O>LHX%cfD!MDe5`ADJS$&Sg7$W0cpyK$uuO}^}CFzL(3hYZaJR;+wO!H
qzOf-&^-@L>1VIo4K@bEHF<t?lDE6Y3xrmnl0000<MNUMnLSTYd;^Z;_

literal 0
HcmV?d00001

diff --git a/browser/themes/shared/incontentprefs/preferences.css b/browser/themes/shared/incontentprefs/preferences.css
index 7148010ade13..e38a39dd0a7b 100644
--- a/browser/themes/shared/incontentprefs/preferences.css
+++ b/browser/themes/shared/incontentprefs/preferences.css
@@ -53,7 +53,9 @@ groupbox {
   margin-top: 15px;
   margin-bottom: 15px;
   -moz-margin-start: 60px;
+  -moz-margin-end: 0;
   -moz-padding-start: 0;
+  -moz-padding-end: 0;
   font-size: 1.25rem;
 }
 
@@ -182,6 +184,46 @@ button[type="menu"] > .button-box > .button-menu-dropmarker {
   list-style-image: url("chrome://browser/skin/preferences/in-content/dropdown.png");
 }
 
+.help-button {
+  min-width: 30px;
+  border-radius: 2px;
+  border: 1px solid #C1C1C1;
+  background-color: #FFCB00;
+  background-image: none;
+  box-shadow: none;
+}
+
+.help-button:not([disabled="true"]):hover {
+  background-color: #F4C200;
+  background-image: none;
+}
+
+.help-button:not([disabled="true"]):hover:active {
+  background-color: #EABA00;
+  background-image: none;
+}
+
+.help-button > .button-box {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+
+.help-button > .button-box > .button-icon {
+  width: 26px;
+  height: 26px;
+  background-image: url("chrome://browser/skin/preferences/in-content/help-glyph.png");
+  background-position: center;
+}
+
+@media (min-resolution: 2dppx) {
+  .help-button > .button-box > .button-icon {
+    background-size: 26px 26px;
+    background-image: url("chrome://browser/skin/preferences/in-content/help-glyph@2x.png");
+  }
+}
+
 .spinbuttons-button {
   -moz-margin-start: 10px !important;
   -moz-margin-end: 2px !important;
diff --git a/browser/themes/windows/jar.mn b/browser/themes/windows/jar.mn
index e3a6607e7073..b7e78cf1bae7 100644
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -165,6 +165,8 @@ browser.jar:
         skin/classic/browser/preferences/in-content/icons@2x.png     (../shared/incontentprefs/icons@2x.png)
         skin/classic/browser/preferences/in-content/header.png       (../shared/incontentprefs/header.png)
         skin/classic/browser/preferences/in-content/header@2x.png    (../shared/incontentprefs/header@2x.png)
+        skin/classic/browser/preferences/in-content/help-glyph.png   (../shared/incontentprefs/help-glyph.png)
+        skin/classic/browser/preferences/in-content/help-glyph@2x.png (../shared/incontentprefs/help-glyph@2x.png)
         skin/classic/browser/preferences/in-content/sorter.png       (../shared/incontentprefs/sorter.png)
         skin/classic/browser/preferences/in-content/sorter@2x.png    (../shared/incontentprefs/sorter@2x.png)
         skin/classic/browser/preferences/in-content/dropdown.png     (../shared/incontentprefs/dropdown.png)
@@ -530,6 +532,8 @@ browser.jar:
         skin/classic/aero/browser/preferences/in-content/icons@2x.png    (../shared/incontentprefs/icons@2x.png)
         skin/classic/aero/browser/preferences/in-content/header.png      (../shared/incontentprefs/header.png)
         skin/classic/aero/browser/preferences/in-content/header@2x.png   (../shared/incontentprefs/header@2x.png)
+        skin/classic/aero/browser/preferences/in-content/help-glyph.png  (../shared/incontentprefs/help-glyph.png)
+        skin/classic/aero/browser/preferences/in-content/help-glyph@2x.png (../shared/incontentprefs/help-glyph@2x.png)
         skin/classic/aero/browser/preferences/in-content/sorter.png      (../shared/incontentprefs/sorter.png)
         skin/classic/aero/browser/preferences/in-content/sorter@2x.png   (../shared/incontentprefs/sorter@2x.png)
         skin/classic/aero/browser/preferences/in-content/dropdown.png    (../shared/incontentprefs/dropdown.png)