nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1484030 - Implement chiclet animation for CFR r=Gijs,k88hudson

Browse source 
Differential Revision: https://phabricator.services.mozilla.com/D3804

--HG--
extra : moz-landing-system : lando
This commit is contained in:
ahillier 2018-08-24 23:30:48 +00:00
parent f6923ccc24
commit 64ef5ce6b2
3 changed files with 126 additions and 1 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

8
browser/base/content/browser.css
View file

@ -597,7 +597,9 @@ html|input.urlbar-scheme[textoverflow="start"]:not([focused]):valid {
visibility: visible;
}
/* Fade out URL on overflow */
/* Fade out URL on overflow
This mask may be overriden when a Contextual Feature Recommendation is shown,
see browser/themes/shared/urlbar-searchbar.inc.css for details */
html|input.urlbar-input[textoverflow="end"]:not([focused]) {
mask-image: linear-gradient(to left, transparent, black 3ch);
}
@ -606,6 +608,10 @@ html|input.urlbar-input[textoverflow="start"]:not([focused]) {
mask-image: linear-gradient(to right, transparent var(--urlbar-scheme-size), black calc(var(--urlbar-scheme-size) + 3ch));
}
html|input.urlbar-input:not([focused]) {
mask-repeat: no-repeat;
}
/* Apply crisp rendering for favicons at exactly 2dppx resolution */
@media (resolution: 2dppx) {
.searchbar-engine-image {

8
browser/base/content/browser.xul
View file

@ -922,6 +922,14 @@ xmlns="http://www.w3.org/1999/xhtml"
<label id="extension" class="urlbar-display urlbar-display-extension" value="&urlbar.extension.label;"/>
</box>
<hbox id="page-action-buttons" context="pageActionContextMenu">
<hbox id="contextual-feature-recommendation" role="button" hidden="true">
<hbox id="cfr-label-container">
<label id="cfr-label"/>
</hbox>
<image id="cfr-button"
class="urlbar-icon urlbar-page-action"
role="presentation"/>
</hbox>
<hbox id="userContext-icons" hidden="true">
<label id="userContext-label"/>
<image id="userContext-indicator"/>

111
browser/themes/shared/urlbar-searchbar.inc.css
View file

@ -378,6 +378,117 @@
animation-name: bookmark-animation-rtl;
}
/**
* Contextual Feature Recommendation
*
* Animate the recommendation icon to expand outwards and display a text label.
* Fake the effect of a smoothly expanding width without animating any widths
* by (continuously) animating only `mask-position-x` and `transform`.
*
* In a few places, transition a property using the timing-function `step-start`
* while collapsed and `step-end` while expanded in order to (discretely) modify
* the value while expanded and while transitioning in either direction.
*
* This UI is part of an experiment launching in LTR locales only. Fixing the
* RTL issues is tracked by Bug 1485725.
*/
:root {
--cfr-animation-duration: 0.35s;
--cfr-button-icon: url(resource://activity-stream/data/content/assets/glyph-webextension-16.svg);
--cfr-active-color: #0060df;
}
#contextual-feature-recommendation {
width: 28px;
margin-left: 0;
transition: margin-left step-end var(--cfr-animation-duration);
}
#urlbar[cfr-recommendation-state="expanded"] #contextual-feature-recommendation {
margin-left: calc(var(--cfr-label-width) * -1);
transition: margin-left step-start var(--cfr-animation-duration);
}
#cfr-button {
list-style-image: var(--cfr-button-icon);
margin: -2px 0;
transition-property: fill, fill-opacity, transform;
transition-timing-function: ease-in-out;
transition-duration: var(--cfr-animation-duration);
}
#urlbar[cfr-recommendation-state="expanded"] #cfr-button {
fill: white;
fill-opacity: 1;
background-color: transparent; /* Override hover background-color */
transform: translateX(calc(var(--cfr-label-width) * -1));
}
@keyframes cfr-button-fade-through-active-color {
33% {
fill-opacity: 1;
fill: var(--cfr-active-color);
}
67% {
fill-opacity: 1;
fill: var(--cfr-active-color);
}
}
#urlbar[cfr-recommendation-state="collapsed"] #cfr-button {
animation: cfr-button-fade-through-active-color calc(3 * var(--cfr-animation-duration));
}
#cfr-label-container {
width: 0;
overflow: hidden;
border-radius: 5px;
padding-left: 28px;
mask-image: linear-gradient(to right, transparent 0, black 0);
mask-position-x: var(--cfr-label-width);
mask-repeat: no-repeat;
transition-property: background-color, mask-position-x, width, margin-right;
transition-timing-function: ease-in-out, ease-in-out, step-end, step-end;
transition-duration: var(--cfr-animation-duration);
}
#urlbar[cfr-recommendation-state="expanded"] #cfr-label-container {
width: calc(var(--cfr-label-width) + 28px);
background-color: var(--cfr-active-color);
margin-right: -28px;
mask-position-x: 0;
transition-timing-function: ease-in-out, ease-in-out, step-start, step-start;
}
#cfr-label {
margin: 0;
padding: 3px 5px 3px 0;
color: white;
mask-image: linear-gradient(to right, transparent 0, black 0);
mask-position-x: var(--cfr-label-width);
mask-repeat: no-repeat;
transition: mask-position-x ease-in-out var(--cfr-animation-duration);
}
#urlbar[cfr-recommendation-state="expanded"] #cfr-label {
mask-position-x: 0;
}
/* Translate the dropmarker to give illusion of increasing width of the recommendation */
#urlbar[cfr-recommendation-state] .urlbar-history-dropmarker {
transition: transform ease-in-out var(--cfr-animation-duration);
}
#urlbar[cfr-recommendation-state="expanded"] .urlbar-history-dropmarker {
transform: translateX(calc(var(--cfr-label-width) * -1));
}
/* Shift the url-bar text fading to stop the recommendation overlapping */
#urlbar[cfr-recommendation-state] html|input.urlbar-input {
transition: mask-position-x ease-in-out var(--cfr-animation-duration);
}
#urlbar[cfr-recommendation-state="expanded"] html|input.urlbar-input {
/* A mask-image is only defined for the url bar when text overflows. When
expanded, the right end of the url bar may be obscured without overflow so
we need to redefine the mask-image here, as well as the mask-position-x. */
mask-image: linear-gradient(to left, transparent, black 3ch);
mask-position-x: calc(var(--cfr-label-width) * -1);
}
/* Reader mode icon */
#reader-mode-button {