Bug 1132307 - Use <button> elements instead of <a> elements in reader mode toolbar. r=bnicholson
authorMargaret Leibovic <margaret.leibovic@gmail.com>
Fri, 13 Feb 2015 14:09:44 -0800
changeset 229779 d71a3d134bf30ce7566e036169a6963908d7c3bb
parent 229638 4d66d5d582321b98f24030a60ed5c03f572ca908
child 229780 f39249695662bc00f04a8363a52edabf1b4f8037
push id28296
push usercbook@mozilla.com
push dateThu, 19 Feb 2015 14:46:48 +0000
treeherdermozilla-central@7345d6035eea [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbnicholson
bugs1132307
milestone38.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 1132307 - Use <button> elements instead of <a> elements in reader mode toolbar. r=bnicholson
mobile/android/themes/core/aboutReader.css
toolkit/components/reader/content/aboutReader.html
toolkit/themes/windows/global/aboutReader.css
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -350,16 +350,24 @@ body {
 }
 
 .button {
   color: white;
   display: block;
   background-position: center;
   background-size: 30px 24px;
   background-repeat: no-repeat;
+  background-color: transparent;
+  border: 0;
+  width: 100%;
+}
+
+/* Remove dotted border when button is focused */
+.button::-moz-focus-inner {
+  border: 0;
 }
 
 .dropdown {
   text-align: center;
   display: inline-block;
   list-style: none;
   margin: 0px;
   padding: 0px;
--- a/toolkit/components/reader/content/aboutReader.html
+++ b/toolkit/components/reader/content/aboutReader.html
@@ -20,28 +20,28 @@
 
   <div id="reader-content" class="content">
   </div>
 
   <div id="reader-message" class="message">
   </div>
 
   <ul id="reader-toolbar" class="toolbar toolbar-hidden">
-    <li><a id="close-button" class="button close-button" href="#"></a></li>
-    <li><a id="share-button" class="button share-button" href="#"></a></li>
+    <li><button id="close-button" class="button close-button"/></li>
+    <li><button id="share-button" class="button share-button"/></li>
     <ul id="style-dropdown" class="dropdown">
-      <li><a class="dropdown-toggle button style-button" href="#"></a></li>
+      <li><button class="dropdown-toggle button style-button"/></li>
       <li class="dropdown-popup">
         <ul id="font-type-buttons"></ul>
         <hr></hr>
         <ul id="font-size-buttons" class="segmented-button"></ul>
         <hr></hr>
         <ul id="color-scheme-buttons" class="segmented-button"></ul>
         <div class="dropdown-arrow"/>
       </li>
     </ul>
-    <li><a id="toggle-button" class="button toggle-button" href="#"></a></li>
-    <li><a id="list-button" class="button list-button" href="#"></a></li>
+    <li><button id="toggle-button" class="button toggle-button"/></li>
+    <li><button id="list-button" class="button list-button"/></li>
   </ul>
 
 </body>
 
 </html>
--- a/toolkit/themes/windows/global/aboutReader.css
+++ b/toolkit/themes/windows/global/aboutReader.css
@@ -234,19 +234,22 @@ body {
 }
 
 .button {
   color: white;
   display: block;
   background-position: center;
   background-size: 24px 24px;
   background-repeat: no-repeat;
-  padding: 4px;
-  height: 32px;
-  width: 32px;
+  background-color: transparent;
+  height: 40px;
+  width: 40px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
   border-bottom: 1px solid #c1c1c1;
 }
 
 .dropdown {
   text-align: center;
   list-style: none;
   margin: 0px;
   padding: 0px;
@@ -260,17 +263,16 @@ body {
 .dropdown-popup {
   text-align: start;
   position: absolute;
   left: 48px; /* offset to account for toolbar width */
   z-index: 1000;
   background-color: #FBFBFB;
   font-size: 14px;
   visibility: hidden;
-  cursor: pointer;
   border-radius: 4px;
   border: 1px solid #B5B5B5;
   box-shadow: 0px 1px 12px #666;
   color: black;
 }
 
 .dropdown-popup > hr {
   width: 100%;
@@ -371,17 +373,17 @@ body {
 
 /* Android-only controls */
 .share-button {
   display: none;
 }
 
 .close-button {
   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
-  height: 60px;
+  height: 68px;
   background-position: center 8px;
 }
 
 .close-button:active,
 .close-button:hover {
   background-image: url("chrome://global/skin/reader/RM-Close-hover-24x24.svg");
   background-color: #d94141;
 }