Bug 1144675 - The Reading List button from the Location Bar should have a distinct icon for pages currently in the list, r=markh.

browser/themes/linux/browser.css

@@ -1628,7 +1628,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   list-style-image: url("chrome://browser/skin/Info.png");
 }
 
-%include ../shared/readinglist.inc.css
+%include ../shared/readinglist/readinglist.inc.css
 
 /* Reader mode button */
 

browser/themes/osx/browser.css

@@ -2527,7 +2527,7 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-
   }
 }
 
-%include ../shared/readinglist.inc.css
+%include ../shared/readinglist/readinglist.inc.css
 
 /* Reader mode button */
 

browser/themes/shared/readinglist/icons.svg

@@ -13,25 +13,15 @@
         display: none;
       }
 
-      #addpage {
+      #addpage, #alreadyadded {
         fill: #808080;
       }
-      #addpage-hover {
+      #addpage-hover, #alreadyadded-hover {
         fill: #555555;
       }
-      #addpage-active {
+      #addpage-active, #alreadyadded-active {
         fill: #0095DD;
       }
-
-      #alreadyadded {
-        fill: #0095DD;
-      }
-      #alreadyadded-hover {
-        fill: #555555;
-      }
-      #alreadyadded-active {
-        fill: #808080;
-      }
     </style>
 
     <mask id="plus-mask">
@@ -40,18 +30,27 @@
       <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>

browser/themes/shared/readinglist/readinglist.inc.css

@@ -1,5 +1,9 @@
 /* Reading List button */
 
+#urlbar:not([focused]):not(:hover) #readinglist-addremove-button {
+  display: none;
+}
+
 #readinglist-addremove-button {
   -moz-appearance: none;
   border: none;
@@ -16,11 +20,11 @@
   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");
 }
 
@@ -35,4 +39,3 @@
 #readinglist-addremove-button[already-added="true"]:active {
   list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active");
 }
-

browser/themes/windows/browser.css

@@ -1576,7 +1576,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   -moz-image-region: rect(0, 48px, 16px, 32px);
 }
 
-%include ../shared/readinglist.inc.css
+%include ../shared/readinglist/readinglist.inc.css
 
 /* Reader mode button */