commit 2a2a1ac8da14983ff682c46e0d8426cb2590ec41 Author: Kathy Brade <brade@pearlcrescent.com> Date: Tue Jul 31 13:54:26 2018 -0400 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 | 6 ++++-- src/chrome/skin/network-settings.css | 26 +++++++------------------ 2 files changed, 11 insertions(+), 21 deletions(-) diff --git a/src/chrome/content/network-settings-overlay.xul b/src/chrome/content/network-settings-overlay.xul index 3d42c15..35b9fc7 100644 --- a/src/chrome/content/network-settings-overlay.xul +++ b/src/chrome/content/network-settings-overlay.xul @@ -98,8 +98,10 @@ <radio id="bridgeRadioDefault" label="&torsettings.useBridges.default;" selected="true" oncommand="onBridgeTypeRadioChange()"/> - <button class="helpButton" - oncommand="onOpenHelp('bridgeHelpContent')"/> + <vbox pack="center"> + <button class="helpButton" + oncommand="onOpenHelp('bridgeHelpContent')"/> + </vbox> <spacer style="width: 3em"/> <menulist id="defaultBridgeType" sizetopopup="always" placeholder="&torsettings.useBridges.default.placeholder;"> diff --git a/src/chrome/skin/network-settings.css b/src/chrome/skin/network-settings.css index 9a02493..c6a9f0b 100644 --- a/src/chrome/skin/network-settings.css +++ b/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,