Bug 1349744 - Move help button to the bottom-left of the preferences per spec. r=mconley
authorJared Wein <jwein@mozilla.com>
Wed, 19 Apr 2017 15:42:06 -0400
changeset 353889 e057f7f9bc3ce9eccbca1fd906bc4dd56ce33ca9
parent 353888 cb6fe1a794271e17e06582b9a3a36af6c71f7a7d
child 353890 572fdb501218dc01499fef30efe460d401c76c28
push id41111
push userjwein@mozilla.com
push dateWed, 19 Apr 2017 22:18:15 +0000
treeherderautoland@e057f7f9bc3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs1349744, 1357841
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1349744 - Move help button to the bottom-left of the preferences per spec. r=mconley Due to bug 1357841 we cannot put the help button as low as the spec desired (14px from the bottom). However the patch will reduce the bottom offset when the height of the window is low so as not to waste space. Ian Ferguson <xfergusi@gmail.com> contributed substantially to this patch. MozReview-Commit-ID: 4Dxa30RmSBZ
browser/components/preferences/in-content/advanced.xul
browser/components/preferences/in-content/applications.xul
browser/components/preferences/in-content/containers.xul
browser/components/preferences/in-content/findInPage.js
browser/components/preferences/in-content/main.xul
browser/components/preferences/in-content/preferences.js
browser/components/preferences/in-content/preferences.xul
browser/components/preferences/in-content/privacy.xul
browser/components/preferences/in-content/searchResults.xul
browser/components/preferences/in-content/sync.xul
browser/locales/en-US/chrome/browser/preferences/preferences.dtd
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/components/preferences/in-content/advanced.xul
+++ b/browser/components/preferences/in-content/advanced.xul
@@ -42,17 +42,16 @@
   <stringbundle id="bundleBrand" src="chrome://branding/locale/brand.properties"/>
 #endif
 
 <hbox id="header-advanced"
       class="header"
       hidden="true"
       data-category="paneAdvanced">
   <label class="header-name" flex="1">&paneUpdates.title;</label>
-  <html:a class="help-button" target="_blank" aria-label="&helpButton.label;"></html:a>
 </hbox>
 
 <!-- Update -->
 <groupbox id="updateApp" data-category="paneAdvanced" hidden="true">
   <caption><label>&updateApplication.label;</label></caption>
   <description>&updateApplication.description;</description>
   <hbox align="start">
     <vbox flex="1">
--- a/browser/components/preferences/in-content/applications.xul
+++ b/browser/components/preferences/in-content/applications.xul
@@ -59,17 +59,16 @@
   <key key="&focusSearch2.key;" modifiers="accel" id="focusSearch2" oncommand=";"/>
 </keyset>
 
 <hbox id="header-applications"
       class="header"
       hidden="true"
       data-category="paneApplications">
   <label class="header-name" flex="1">&paneFilesApplications.title;</label>
-  <html:a class="help-button" target="_blank" aria-label="&helpButton.label;"></html:a>
 </hbox>
 
 <vbox id="applicationsContent"
       data-category="paneApplications"
       hidden="true"
       flex="1">
 
   <!--Downloads-->
--- a/browser/components/preferences/in-content/containers.xul
+++ b/browser/components/preferences/in-content/containers.xul
@@ -21,18 +21,16 @@
   <label class="text-link" id="backContainersLink" value="&backLink.label;" />
 </hbox>
 
 <hbox id="header-containers"
       class="header"
       hidden="true"
       data-category="paneContainers">
   <label class="header-name" flex="1">&paneContainers.title;</label>
-  <button class="help-button"
-          aria-label="&helpButton.label;"/>
 </hbox>
 
 <!-- Containers -->
 <groupbox id="browserContainersGroup" data-category="paneContainers" hidden="true">
   <vbox id="browserContainersbox">
 
     <richlistbox id="containersView" orient="vertical" persist="lastSelectedType"
                  flex="1">
--- a/browser/components/preferences/in-content/findInPage.js
+++ b/browser/components/preferences/in-content/findInPage.js
@@ -226,22 +226,19 @@ var gSearchResultsPane = {
 
       if (!resultsFound) {
         let noResultsEl = document.querySelector(".no-results-message");
         noResultsEl.hidden = false;
 
         let strings = this.strings;
         document.getElementById("sorry-message").textContent =
           strings.getFormattedString("searchResults.sorryMessage", [query]);
-
         let brandName = document.getElementById("bundleBrand").getString("brandShortName");
         document.getElementById("need-help").innerHTML =
           strings.getFormattedString("searchResults.needHelp", [brandName]);
-
-        document.getElementById("need-help-link").setAttribute("href", getHelpLinkURL("search"));
       }
     } else {
       this.searchResultsCategory.hidden = true;
       document.getElementById("sorry-message").textContent = "";
       // Going back to General when cleared
       gotoPref("paneGeneral");
     }
   },
--- a/browser/components/preferences/in-content/main.xul
+++ b/browser/components/preferences/in-content/main.xul
@@ -198,17 +198,16 @@
 #endif
 </preferences>
 
 <hbox id="header-general"
       class="header"
       hidden="true"
       data-category="paneGeneral">
   <label class="header-name" flex="1">&paneGeneral.title;</label>
-  <html:a class="help-button" target="_blank" aria-label="&helpButton.label;"></html:a>
 </hbox>
 
 <!-- Startup -->
 <groupbox id="startupGroup"
           data-category="paneGeneral"
           hidden="true">
   <caption><label>&startup.label;</label></caption>
 
--- a/browser/components/preferences/in-content/preferences.js
+++ b/browser/components/preferences/in-content/preferences.js
@@ -81,39 +81,45 @@ function init_all() {
   init_dynamic_padding();
 
   var initFinished = new CustomEvent("Initialized", {
     "bubbles": true,
     "cancelable": true
   });
   document.dispatchEvent(initFinished);
 
-  categories = categories.querySelectorAll("richlistitem.category");
-  for (let category of categories) {
-    let name = internalPrefCategoryNameToFriendlyName(category.value);
-    let helpSelector = `#header-${name} > .help-button`;
-    let helpButton = document.querySelector(helpSelector);
-    helpButton.setAttribute("href", getHelpLinkURL(category.getAttribute("helpTopic")));
-  }
-
   // Wait until initialization of all preferences are complete before
   // notifying observers that the UI is now ready.
   Services.obs.notifyObservers(window, "advanced-pane-loaded");
 }
 
 // Make the space above the categories list shrink on low window heights
 function init_dynamic_padding() {
   let categories = document.getElementById("categories");
   let catPadding = Number.parseInt(getComputedStyle(categories)
                                      .getPropertyValue("padding-top"));
-  let fullHeight = categories.lastElementChild.getBoundingClientRect().bottom;
+  let helpButton = document.querySelector(".help-button");
+  let helpButtonCS = getComputedStyle(helpButton);
+  let helpHeight = Number.parseInt(helpButtonCS.height);
+  let helpBottom = Number.parseInt(helpButtonCS.bottom);
+  // Reduce the padding to account for less space, but due
+  // to bug 1357841, the status panel will overlap the link.
+  const reducedHelpButtonBottomFactor = .75;
+  let reducedHelpButtonBottom = helpBottom * reducedHelpButtonBottomFactor;
+  let fullHelpHeight = helpHeight + reducedHelpButtonBottom;
+  let fullHeight = categories.lastElementChild.getBoundingClientRect().bottom +
+                   fullHelpHeight;
   let mediaRule = `
   @media (max-height: ${fullHeight}px) {
     #categories {
       padding-top: calc(100vh - ${fullHeight - catPadding}px);
+      padding-bottom: ${fullHelpHeight}px;
+    }
+    .help-button {
+      bottom: ${reducedHelpButtonBottom / 2}px;
     }
   }
   `;
   let mediaStyle = document.createElementNS("http://www.w3.org/1999/xhtml", "html:style");
   mediaStyle.setAttribute("type", "text/css");
   mediaStyle.appendChild(document.createCDATASection(mediaRule));
   document.documentElement.appendChild(mediaStyle);
 }
@@ -157,16 +163,19 @@ function gotoPref(aCategory) {
   if (gLastHash == category && !subcategory)
     return;
   let item = categories.querySelector(".category[value=" + category + "]");
   if (!item) {
     category = kDefaultCategoryInternalName;
     item = categories.querySelector(".category[value=" + category + "]");
   }
 
+  let helpButton = document.querySelector(".help-button");
+  helpButton.setAttribute("href", getHelpLinkURL(item.getAttribute("helpTopic")));
+
   try {
     init_category_if_required(category);
   } catch (ex) {
     Cu.reportError("Error initializing preference category " + category + ": " + ex);
     throw ex;
   }
 
   let friendlyName = internalPrefCategoryNameToFriendlyName(category);
--- a/browser/components/preferences/in-content/preferences.xul
+++ b/browser/components/preferences/in-content/preferences.xul
@@ -163,16 +163,18 @@
 
     <keyset>
       <!-- Disable the findbar because it doesn't work properly.
            Remove this keyset once bug 1094240 ("disablefastfind" attribute
            broken in e10s mode) is fixed. -->
       <key key="&focusSearch1.key;" modifiers="accel" id="focusSearch1" oncommand=";"/>
     </keyset>
 
+    <html:a class="help-button" target="_blank" aria-label="&helpButton2.label;">&helpButton2.label;</html:a>
+
     <vbox class="main-content" flex="1">
       <hbox pack="end">
         <textbox type="search" id="searchInput" placeholder="&searchInput.label;" hidden="true"/>
       </hbox>
       <prefpane id="mainPrefPane">
 #include searchResults.xul
 #include main.xul
 #include privacy.xul
--- a/browser/components/preferences/in-content/privacy.xul
+++ b/browser/components/preferences/in-content/privacy.xul
@@ -172,17 +172,16 @@
 
 <stringbundle id="bundlePreferences" src="chrome://browser/locale/preferences/preferences.properties"/>
 
 <hbox id="header-privacy"
       class="header"
       hidden="true"
       data-category="panePrivacy">
   <label class="header-name" flex="1">&panePrivacySecurity.title;</label>
-  <html:a class="help-button" target="_blank" aria-label="&helpButton.label;"></html:a>
 </hbox>
 
 
 <!-- History -->
 <groupbox id="historyGroup" data-category="panePrivacy" hidden="true">
   <caption><label>&history.label;</label></caption>
   <hbox align="center">
     <label id="historyModeLabel"
--- a/browser/components/preferences/in-content/searchResults.xul
+++ b/browser/components/preferences/in-content/searchResults.xul
@@ -4,15 +4,14 @@
 
 <stringbundle id="searchResultBundle" src="chrome://browser/locale/preferences/preferences.properties"/>
 
 <hbox id="header-searchResults"
       class="header"
       hidden="true"
       data-category="paneSearchResults">
   <label class="header-name" flex="1">&paneSearchResults.title;</label>
-  <html:a class="help-button" target="_blank" aria-label="&helpButton.label;"></html:a>
 </hbox>
 
 <groupbox class="no-results-message" align="start" data-category="paneSearchResults" hidden="true">
   <label id="sorry-message"></label>
   <label id="need-help"></label>
 </groupbox>
--- a/browser/components/preferences/in-content/sync.xul
+++ b/browser/components/preferences/in-content/sync.xul
@@ -28,17 +28,16 @@
 <script type="application/javascript"
         src="chrome://browser/content/preferences/in-content/sync.js"/>
 
 <hbox id="header-sync"
       class="header"
       hidden="true"
       data-category="paneSync">
   <label class="header-name" flex="1">&paneSync1.title;</label>
-  <html:a class="help-button text-link" target="_blank" aria-label="&helpButton.label;"></html:a>
 </hbox>
 
 <deck id="weavePrefsDeck" data-category="paneSync" hidden="true">
   <vbox id="noFxaAccount">
     <hbox>
       <vbox id="fxaContentWrapper">
         <groupbox id="noFxaGroup">
           <vbox>
--- a/browser/locales/en-US/chrome/browser/preferences/preferences.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/preferences.dtd
@@ -18,11 +18,11 @@
 <!ENTITY  paneFilesApplications.title   "Files &amp; Applications">
 <!ENTITY  panePrivacySecurity.title     "Privacy &amp; Security">
 <!ENTITY  paneContainers.title          "Container Tabs">
 <!ENTITY  paneUpdates.title             "Updates">
 
 <!-- LOCALIZATION NOTE (paneSync1.title): This should match syncBrand.fxAccount.label in ../syncBrand.dtd -->
 <!ENTITY  paneSync1.title          "Firefox Account">
 
-<!ENTITY  helpButton.label        "Help">
+<!ENTITY  helpButton2.label        "&brandShortName; Support">
 
-<!ENTITY searchInput.label        "Search">
+<!ENTITY  searchInput.label        "Search">
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -96,16 +96,19 @@ treecol {
 #category-search-results > .category-icon {
   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#searchResults");
 }
 
 @media (max-width: 800px) {
   .category-name {
     display: none;
   }
+  .help-button {
+    font-size: 0 !important;
+  }
 }
 
 /* header */
 .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
@@ -559,8 +562,34 @@ description > html|a {
   }
   .iOSLink {
     background-image: url("chrome://browser/skin/fxa/ios@2x.png");
   }
   .fxaFirefoxLogo {
     list-style-image: url(chrome://browser/skin/fxa/logo@2x.png);
   }
 }
+
+.help-button {
+  position: fixed;
+  left: 0;
+  /* Needs to have enough gap from the bottom to not
+     get behind the status panel (bug 1357841). */
+  bottom: 2rem;
+  font-size: 13px;
+  line-height: 13px;
+  height: 14px;
+  background-position: 15px;
+  padding-inline-start: 35px;
+  white-space: nowrap;
+}
+
+.help-button:-moz-locale-dir(rtl) {
+  left: auto;
+  right: 0;
+  background-position: right 15px top 0;
+}
+
+.help-button:link,
+.help-button:visited {
+  color: var(--in-content-category-text);
+  text-decoration: none;
+}