Bug 1144675 - The Reading List button from the Location Bar should have a distinct icon for pages currently in the list, r=markh.
authorFlorian Quèze <florian@queze.net>
Thu, 19 Mar 2015 15:50:23 -0700
changeset 263428 89cb4fd9ee1db6ac37d81adf8394a042c34d7a61
parent 263427 966e0994b0482f4fc7a2fb144911cc63c73209d7
child 263429 fafaf621ada2f629c7c689fcdbe8d53ddb02b577
push id4718
push userraliiev@mozilla.com
push dateMon, 11 May 2015 18:39:53 +0000
treeherdermozilla-beta@c20c4ef55f08 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmarkh
bugs1144675
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 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
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
@@ -1623,17 +1623,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
@@ -2522,17 +2522,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);