Bug 1144675 - The Reading List button from the Location Bar should have a distinct icon for pages currently in the list, r=markh. a=readinglist
authorFlorian Quèze <florian@queze.net>
Thu, 19 Mar 2015 15:50:23 -0700
changeset 248439 69c5f5536e10e7119f277e93e27695eba3107ed0
parent 248438 4510e7024404394e75fcbe4074245bca73dc859e
child 248440 70a942a84ad58abe0963b800c186deb5a7fe8f6c
push id7837
push userjwein@mozilla.com
push dateFri, 27 Mar 2015 00:27:16 +0000
treeherdermozilla-aurora@cb0db44ce60e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmarkh, readinglist
bugs1144675
milestone38.0a2
Bug 1144675 - The Reading List button from the Location Bar should have a distinct icon for pages currently in the list, r=markh. a=readinglist
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/readinglist.inc.css
browser/themes/shared/readinglist/icons.svg
browser/themes/shared/readinglist/readinglist.inc.css
browser/themes/windows/browser.css
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -1624,17 +1624,17 @@ richlistitem[type~="action"][actiontype=
   -moz-image-region: rect(28px, 28px, 42px, 14px);
 }
 
 /* Popup blocker button */
 #page-report-button {
   list-style-image: url("chrome://browser/skin/Info.png");
 }
 
-%include ../shared/readinglist.inc.css
+%include ../shared/readinglist/readinglist.inc.css
 
 /* 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
@@ -2518,17 +2518,17 @@ richlistitem[type~="action"][actiontype=
   }
 
   #page-report-button:hover:active,
   #page-report-button[open="true"] {
     -moz-image-region: rect(0, 64px, 32px, 32px);
   }
 }
 
-%include ../shared/readinglist.inc.css
+%include ../shared/readinglist/readinglist.inc.css
 
 /* 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/shared/readinglist/icons.svg
+++ b/browser/themes/shared/readinglist/icons.svg
@@ -8,50 +8,49 @@
      xml:space="preserve">
 
   <defs>
     <style type="text/css">
       use:not(:target) {
         display: none;
       }
 
-      #addpage {
+      #addpage, #alreadyadded {
         fill: #808080;
       }
-      #addpage-hover {
+      #addpage-hover, #alreadyadded-hover {
         fill: #555555;
       }
-      #addpage-active {
-        fill: #0095DD;
-      }
-
-      #alreadyadded {
+      #addpage-active, #alreadyadded-active {
         fill: #0095DD;
       }
-      #alreadyadded-hover {
-        fill: #555555;
-      }
-      #alreadyadded-active {
-        fill: #808080;
-      }
     </style>
 
     <mask id="plus-mask">
       <rect width="100%" height="100%" fill="white"/>
       <rect x="4" y="7.5" width="8" height="1"/>
       <rect x="7.5" y="4" width="1" height="8"/>
     </mask>
 
+    <mask id="minus-mask">
+      <rect width="100%" height="100%" fill="white"/>
+      <rect x="4" y="7.5" width="8" height="1"/>
+    </mask>
+
     <g id="addpage-shape">
       <circle cx="8" cy="8" r="7" mask="url(#plus-mask)"/>
     </g>
 
+    <g id="removepage-shape">
+      <circle cx="8" cy="8" r="7" mask="url(#minus-mask)"/>
+    </g>
+
   </defs>
 
   <use id="addpage"                 xlink:href="#addpage-shape"/>
   <use id="addpage-hover"           xlink:href="#addpage-shape"/>
   <use id="addpage-active"          xlink:href="#addpage-shape"/>
 
-  <use id="alreadyadded"            xlink:href="#addpage-shape"/>
-  <use id="alreadyadded-hover"      xlink:href="#addpage-shape"/>
-  <use id="alreadyadded-active"     xlink:href="#addpage-shape"/>
+  <use id="alreadyadded"            xlink:href="#removepage-shape"/>
+  <use id="alreadyadded-hover"      xlink:href="#removepage-shape"/>
+  <use id="alreadyadded-active"     xlink:href="#removepage-shape"/>
 
 </svg>
rename from browser/themes/shared/readinglist.inc.css
rename to browser/themes/shared/readinglist/readinglist.inc.css
--- a/browser/themes/shared/readinglist.inc.css
+++ b/browser/themes/shared/readinglist/readinglist.inc.css
@@ -1,38 +1,41 @@
 /* Reading List button */
 
+#urlbar:not([focused]):not(:hover) #readinglist-addremove-button {
+  display: none;
+}
+
 #readinglist-addremove-button {
   -moz-appearance: none;
   border: none;
   list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage");
   padding: 3px;
 }
 
 #readinglist-addremove-button:hover {
   border: none;
 }
 
 #readinglist-addremove-button > .toolbarbutton-icon {
   width: 16px;
   height: 16px
 }
 
-#readinglist-addremove-button:not([already-added="true"]):hover {
+#readinglist-addremove-button:hover {
   list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover");
 }
 
-#readinglist-addremove-button:not([already-added="true"]):active {
+#readinglist-addremove-button:active {
   list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active");
 }
 
 #readinglist-addremove-button[already-added="true"] {
   list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded");
 }
 
 #readinglist-addremove-button[already-added="true"]:hover {
   list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover");
 }
 
 #readinglist-addremove-button[already-added="true"]:active {
   list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active");
 }
-
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1571,17 +1571,17 @@ richlistitem[type~="action"][actiontype=
   -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);
 }
 
-%include ../shared/readinglist.inc.css
+%include ../shared/readinglist/readinglist.inc.css
 
 /* 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);