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

This commit is contained in:
Florian Quèze 2015-03-19 15:50:23 -07:00
parent 2396f837bd
commit 9ec8694bee
5 changed files with 24 additions and 22 deletions

View File

@ -1628,7 +1628,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
list-style-image: url("chrome://browser/skin/Info.png"); 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 */

View File

@ -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 */ /* Reader mode button */

View File

@ -13,25 +13,15 @@
display: none; display: none;
} }
#addpage { #addpage, #alreadyadded {
fill: #808080; fill: #808080;
} }
#addpage-hover { #addpage-hover, #alreadyadded-hover {
fill: #555555; fill: #555555;
} }
#addpage-active { #addpage-active, #alreadyadded-active {
fill: #0095DD; fill: #0095DD;
} }
#alreadyadded {
fill: #0095DD;
}
#alreadyadded-hover {
fill: #555555;
}
#alreadyadded-active {
fill: #808080;
}
</style> </style>
<mask id="plus-mask"> <mask id="plus-mask">
@ -40,18 +30,27 @@
<rect x="7.5" y="4" width="1" height="8"/> <rect x="7.5" y="4" width="1" height="8"/>
</mask> </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"> <g id="addpage-shape">
<circle cx="8" cy="8" r="7" mask="url(#plus-mask)"/> <circle cx="8" cy="8" r="7" mask="url(#plus-mask)"/>
</g> </g>
<g id="removepage-shape">
<circle cx="8" cy="8" r="7" mask="url(#minus-mask)"/>
</g>
</defs> </defs>
<use id="addpage" xlink:href="#addpage-shape"/> <use id="addpage" xlink:href="#addpage-shape"/>
<use id="addpage-hover" xlink:href="#addpage-shape"/> <use id="addpage-hover" xlink:href="#addpage-shape"/>
<use id="addpage-active" xlink:href="#addpage-shape"/> <use id="addpage-active" xlink:href="#addpage-shape"/>
<use id="alreadyadded" xlink:href="#addpage-shape"/> <use id="alreadyadded" xlink:href="#removepage-shape"/>
<use id="alreadyadded-hover" xlink:href="#addpage-shape"/> <use id="alreadyadded-hover" xlink:href="#removepage-shape"/>
<use id="alreadyadded-active" xlink:href="#addpage-shape"/> <use id="alreadyadded-active" xlink:href="#removepage-shape"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

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

View File

@ -1576,7 +1576,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
-moz-image-region: rect(0, 48px, 16px, 32px); -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 */