Bug 1132678 - blockedPopupOptions should be accessible via mouse and keyboard, r=gijs,jaws
authorManraj Singh <manrajsinghgrover@gmail.com>
Sat, 28 Feb 2015 03:11:00 +0100
changeset 261780 2b22a22b1cc554ee439d4a999796c8d3f93af17e
parent 261779 7a4c862d6cf323cafd477359ee961caf0d13b16d
child 261781 99d7d283b44abd7664e88197bd469c2e08617147
push id830
push userraliiev@mozilla.com
push dateFri, 19 Jun 2015 19:24:37 +0000
treeherdermozilla-release@932614382a68 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgijs, jaws
bugs1132678
milestone39.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 1132678 - blockedPopupOptions should be accessible via mouse and keyboard, r=gijs,jaws
browser/base/content/browser.js
browser/base/content/browser.xul
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/windows/browser.css
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -456,21 +456,24 @@ function findChildShell(aDocument, aDocS
       return docShell;
   }
   return null;
 }
 
 var gPopupBlockerObserver = {
   _reportButton: null,
 
-  onReportButtonClick: function (aEvent)
+  onReportButtonEvent: function (aEvent)
   {
-    if (aEvent.button != 0 || aEvent.target != this._reportButton)
-      return;
-
+    if ((aEvent.type == "click" && aEvent.button != 0) ||
+        (aEvent.target != this._reportButton) ||
+        (aEvent.type == "keypress" && aEvent.charCode != Ci.nsIDOMKeyEvent.DOM_VK_SPACE &&
+         aEvent.keyCode != Ci.nsIDOMKeyEvent.DOM_VK_RETURN)) {
+      return; // We're only interested in left click and space and enter keypresses
+    }
     document.getElementById("blockedPopupOptions")
             .openPopup(this._reportButton, "after_end", 0, 2, false, false, aEvent);
   },
 
   handleEvent: function (aEvent)
   {
     if (aEvent.originalTarget != gBrowser.selectedBrowser)
       return;
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -817,21 +817,22 @@
                   <label id="identity-icon-label" class="plain" flex="1"/>
                   <label id="identity-icon-country-label" class="plain"/>
                 </hbox>
               </box>
               <box id="urlbar-display-box" align="center">
                 <label class="urlbar-display urlbar-display-switchtab" value="&urlbar.switchToTab.label;"/>
               </box>
               <hbox id="urlbar-icons">
-                <image id="page-report-button"
-                       class="urlbar-icon"
-                       hidden="true"
-                       tooltiptext="&pageReportIcon.tooltip;"
-                       onclick="gPopupBlockerObserver.onReportButtonClick(event);"/>
+                <toolbarbutton id="page-report-button"
+                               class="tabbable urlbar-icon"
+                               hidden="true"
+                               tooltiptext="&pageReportIcon.tooltip;"
+                               onclick="gPopupBlockerObserver.onReportButtonEvent(event);"
+                               onkeypress="gPopupBlockerObserver.onReportButtonEvent(event);"/>
                 <toolbarbutton id="reader-mode-button"
                                class="tabbable"
                                hidden="true"
                                onclick="ReaderParent.handleReaderButtonEvent(event);"
                                onkeypress="ReaderParent.handleReaderButtonEvent(event);"/>
               </hbox>
               <toolbarbutton id="urlbar-go-button"
                              class="chromeclass-toolbar-additional"
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -1611,19 +1611,25 @@ richlistitem[type~="action"][actiontype=
 
 #urlbar-stop-button:hover:active {
   background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.1), transparent);
   -moz-image-region: rect(28px, 28px, 42px, 14px);
 }
 
 /* Popup blocker button */
 #page-report-button {
+  -moz-appearance: none;
+  padding: 0;
   list-style-image: url("chrome://browser/skin/Info.png");
 }
 
+#page-report-button:focus {
+  outline: 1px dotted;
+}
+
 /* Reader mode button */
 
 #reader-mode-button {
   -moz-appearance: none;
   padding: 0;
   list-style-image: url("chrome://browser/skin/reader-mode-16.png");
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -2496,30 +2496,40 @@ richlistitem[type~="action"][actiontype=
 
   #urlbar > toolbarbutton > .toolbarbutton-icon {
     width: 14px;
   }
 }
 
 /* POPUP BLOCKER BUTTON */
 #page-report-button {
+  -moz-appearance: none;
+  padding: 0;
+  border-width: 0;
   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
+#page-report-button > .toolbarbutton-icon {
+  width: 16px;
+}
+
+#page-report-button:focus {
+  @hudButtonFocused@
+}
+
 #page-report-button:hover:active,
 #page-report-button[open="true"] {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
 @media (min-resolution: 2dppx) {
   #page-report-button {
     list-style-image: url("chrome://browser/skin/urlbar-popup-blocked@2x.png");
     -moz-image-region: rect(0, 32px, 32px, 0);
-    width: 22px;
   }
 
   #page-report-button:hover:active,
   #page-report-button[open="true"] {
     -moz-image-region: rect(0, 64px, 32px, 32px);
   }
 }
 
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1558,20 +1558,24 @@ richlistitem[type~="action"][actiontype=
 #urlbar-stop-button:hover:active {
   background-image: radial-gradient(circle closest-side, hsla(5,100%,75%,.1), transparent);
   -moz-image-region: rect(28px, 28px, 42px, 14px);
 }
 
 /* popup blocker button */
 
 #page-report-button {
+  -moz-appearance: none;
+  padding: 0;
+  border-width: 0;
   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
+#page-report-button:focus,
 #page-report-button:hover {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
 #page-report-button:hover:active,
 #page-report-button[open="true"] {
   -moz-image-region: rect(0, 48px, 16px, 32px);
 }