Tab style updates x 8 #12565
Tab style updates x 8 #12565
Commits on Mar 16, 2018
-
Tab previewing: tab gets visual state, content gets gradient opacity …
…mask. Also tighten up some tab styles / spacing as discussed with design. Fix favicon getting cut off at small tab sizes with new spacing. Tab preview and hover timings which feel more natural for exploring open tabs - fast in and slow out Tab preview fades out active tab, for focus Cross-fade of frame content was considered, but removed due to performance / low animation framerate. This can be fixed and re-implemented with single-webview, which will require a different css architecture for this potential feature anyway.
-
Improve tab icon animation in order to account for the fact that item…
…s take up space before they fade in Makes transitions / animations faster and with appropriate timing-function for appearing Further imrpovement could be done by animating the space the icons take up, so that the tab title text does not jump to take up less room before the icon fades in, and also animating the icon's out, on unmount, and not just when they appear.
-
Navigation Bar and Tab theme color updates
Colors chosen as per design team. Move as many style decisions as possible to css rather than state util. Remove more occurances of creating a new stylesheet on every render cycle.
-
Tab title now supports nice subpixel antialiasing
Don't use background mask text, and render on the CPU for better looking text. Make sure tab is not rendered on GPU when it's not doing anything by not specifying will-change css properties, so text is rendered with subpixel antialising. Smoother visual transition between selected tabs Ensures that the gradient used for hiding the title is not visible in the tab's previous colors when a tab switches between active and inactive. Still allows for transitioning the color of the tab title text. Tab title text no longer needs different weights for different platforms - rendering is consistent
-
-
Adjust shadow filter on favicons on dark-color tabs
Fix #12722 This was previously causing irregularities in brand icons.
-
New 'close tab' icon with no background until hover.
Background only shows on hover, has 'active' state. Better UI for focusing on tab content. Remove fade in and out, to improve UX around knowing that clicking in the close button's location will result in an immediate destructive action.
-
Do not allow transparency in a tab's theme colors, which can prevent …
…the theme color rendering the same as in the content frame. Blend's the theme color with a white background, which is common in web content. Fix #12803 Also do not throw error when parsing color and no valid value is found
-
Increase tab bar height slightly to reduce crammed space and
fix tab icon / text vertical centering
-
Remove tab color animations when not desired:
- on switch between active <-> inactive as it is not appropriate - on first load, as state changes very quickly
-
Ensure tab title text is vertically centered in tab
Even with large emojis
-
-
Workaround for aphrodite causing initial css values to be transitione…
…d when they should not be. Aphrodite does not inject style rules to DOM until some time after they are first used. Unfortunately that creates elements with 0 css rules with rules that are then injected after the elements are added to the DOM, causing any transitions to fire on the initial values, which normally would not be the case. See https://codepen.io/petemill/pen/rdeqqv for demo.
-
-
