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 229613 d71a3d134bf30ce7566e036169a6963908d7c3bb
parent 229612 4d66d5d582321b98f24030a60ed5c03f572ca908
child 229614 f39249695662bc00f04a8363a52edabf1b4f8037
push id11386
push usermleibovic@mozilla.com
push dateWed, 18 Feb 2015 22:56:35 +0000
treeherderfx-team@d71a3d134bf3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbnicholson
bugs1132307
milestone38.0a1
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;
 }