Bug 1385262 - Restore the star icon when the bookmark animation ends. r=jaws

* Also remove unused frame at the end of the bookmark-animation

MozReview-Commit-ID: 5zOO1gXEfcz

--HG--
extra : rebase_source : 678595644a8a8ad5d08f7e7f211dc3013e2ea7b6
This commit is contained in:
Sam Foster 2018-06-04 12:21:26 -07:00
parent 17b8e2a81c
commit 3a33c9cd4e
2 changed files with 6 additions and 23 deletions

View File

@ -1601,6 +1601,12 @@ var BookmarkingUI = {
let isBookmarked = this._itemGuids.size > 0;
if (!isBookmarked) {
BrowserUtils.setToolbarButtonHeightProperty(this.star);
// there are no other animations on this element, so we can simply
// listen for animationend with the "once" option to clean up
let animatableBox = document.getElementById("star-button-animatable-box");
animatableBox.addEventListener("animationend", event => {
this.star.removeAttribute("animate");
}, { once: true });
this.star.setAttribute("animate", "true");
}
PlacesCommandHook.bookmarkPage(gBrowser.selectedBrowser, true);

View File

@ -516,27 +516,4 @@
<path fill="none" d="M16.499 9.988l2.288 4.636 5.116 0.744 -3.702 3.608 0.874 5.096 -4.576 -2.406 -4.576 2.406 0.874 -5.096 -3.702 -3.608 5.116 -0.744 2.288 -4.636z"/>
</g>
</svg>
<svg x="660">
<defs>
<mask id="P" mask-type="alpha">
<g clip-path="url(#f20_BkV3WrqkR1)" transform="matrix(0 0 0 0 16.352 17.593)">
<path fill="context-stroke" d="M0 0h320v240h-320z"/>
</g>
</mask>
<mask id="O" mask-type="alpha">
<g clip-path="url(#f20_4P5xKEAlF3)" transform="matrix(0 0 0 0 16.463 17.517)">
<path fill="context-stroke" d="M0 0h320v240h-320z"/>
</g>
</mask>
</defs>
<path fill="none" stroke="context-fill" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.584" d="M16.457 9.307l1.71 3.363 0.722 1.422 1.57 0.267 3.653 0.624 -2.66 2.897 -1.03 1.12 0.23 1.506 0.587 3.824 -3.32 -1.762 -1.496 -0.792 -1.49 0.8 -3.225 1.73 0.584 -3.798 0.233 -1.514 -1.043 -1.124 -2.676 -2.882 3.718 -0.624 1.613 -0.272 0.713 -1.472 1.606 -3.31" display="block"/>
<g mask="url(#O)">
<path fill="#FFF" d="M16.456 9.271l1.716 3.376 0.725 1.427 1.577 0.269 3.666 0.626 -2.67 2.907 -1.033 1.125 0.23 1.512 0.589 3.838 -3.333 -1.768 -1.5 -0.796 -1.496 0.803 -3.238 1.737 0.586 -3.813 0.234 -1.52 -1.047 -1.128 -2.686 -2.892 3.732 -0.627 1.619 -0.273 0.716 -1.477 1.612 -3.324"/>
<path fill="none" stroke="context-stroke" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.59" d="M16.456 9.271l1.716 3.376 0.725 1.427 1.577 0.269 3.666 0.626 -2.67 2.907 -1.033 1.125 0.23 1.512 0.589 3.838 -3.333 -1.768 -1.5 -0.796 -1.496 0.803 -3.238 1.737 0.586 -3.813 0.234 -1.52 -1.047 -1.128 -2.686 -2.892 3.732 -0.627 1.619 -0.273 0.716 -1.477 1.612 -3.324"/>
</g>
<g mask="url(#P)" opacity=".08">
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M16.502 10.083l2.255 4.57 5.044 0.734 -3.65 3.557 0.862 5.023 -4.511 -2.371 -4.512 2.371 0.862 -5.023 -3.65 -3.557 5.044 -0.733 2.256 -4.57z"/>
<path fill="none" d="M16.502 10.083l2.255 4.57 5.044 0.734 -3.65 3.557 0.862 5.023 -4.511 -2.371 -4.512 2.371 0.862 -5.023 -3.65 -3.557 5.044 -0.733 2.256 -4.57z"/>
</g>
</svg>
</svg>

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 44 KiB