Bug 26985: Help button icons missing

The image we previously used has been removed from Firefox, so use
ESR 60's new help button image instead. Background shading is used
for the hover and active states.

src/chrome/content/network-settings-overlay.xul

@@ -98,8 +98,10 @@
             <radio id="bridgeRadioDefault"
                    label="&torsettings.useBridges.default;" selected="true"
                    oncommand="onBridgeTypeRadioChange()"/>
+            <vbox pack="center">
               <button class="helpButton"
                       oncommand="onOpenHelp('bridgeHelpContent')"/>
+            </vbox>
             <spacer style="width: 3em"/>
             <menulist id="defaultBridgeType" sizetopopup="always"
                   placeholder="&torsettings.useBridges.default.placeholder;">

src/chrome/skin/network-settings.css

@@ -133,8 +133,9 @@ wizard.os-mac #bridgeList {
 
 /* reuse Mozilla's help button from the Firefox hamburger menu */
 .helpButton {
-  list-style-image: url(chrome://browser/skin/menuPanel-help.png);
-  -moz-image-region: rect(0, 16px, 16px, 0);
+  background: url('chrome://global/skin/icons/help.svg') no-repeat center center;
+  background-size: 16px 16px;
+  cursor: pointer;
   -moz-appearance: none;
   height: 16px;
   width: 16px;
@@ -152,26 +153,13 @@ wizard.os-mac #bridgeList {
 }
 
 .helpButton:hover {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
+  background-color: rgba(12, 12, 13, 0.1);
+  border-radius: 50%;
 }
 
 .helpButton:hover:active {
-  -moz-image-region: rect(0, 48px, 16px, 32px);
-}
-
-@media (min-resolution: 8.1dppx) {
-  .helpButton {
-    list-style-image: url(chrome://browser/skin/menuPanel-help@2x.png);
-    -moz-image-region: rect(0, 32px, 32px, 0);
-  }
-
-  .helpButton:hover {
-    -moz-image-region: rect(0, 64px, 32px, 32px);
-  }
-
-  .helpButton:hover:active {
-    -moz-image-region: rect(0, 96px, 32px, 64px);
-  }
+  background-color: rgba(12, 12, 13, 0.15);
+  border-radius: 50%;
 }
 
 #progressContent[isShowingReconfigure] description,