New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 807778 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Mar 2018
Cc:
Components:
EstimatedDays: ----
NextAction: 2018-02-26
OS: iOS
Pri: 0
Type: Bug
Q1



Sign in to add a comment

Generate PNG assets for the adaptive toolbar

Project Member Reported by rohitrao@chromium.org, Jan 31 2018

Issue description

We require image (PNG) assets for the toolbar feature.  I suspect that it will be easiest to generate these as template (black) images, and we'll use iOS APIs to apply the desired tint color.  That way we won't need separate assets for normal vs incognito.

Most of these assets will require @1x, @2x, and @3x versions.  It will probably be easiest to generate all of them, and Eng can discard the ones that are unnecessary.

Each asset is listed along with its desired filename prefix.  For most assets, we'll want three variants in each resolution:

(prefix).png
(prefix)_pressed.png
(prefix)_disabled.png

I do not believe that any of the below assets will be different between regular and compact size classes.  If that assumption is incorrect, please let me know.

I do not believe that any of the below assets will be different between phone and tablet.  If that assumption is incorrect, please let me know

-----------------------------------

Top Toolbar Assets:

toptoolbar_back     - Back button
toptoolbar_forward  - Forward button
toptoolbar_reload   - Reload button
toptoolbar_share    - Share button
toptoolbar_star     - Bookmark button
toptoolbar_menu     - Menu (three dots) button
toptoolbar_switcher - Tab switcher (tab grid) button
toptoolbar_voice    - Voice search button


Bottom Toolbar Assets:

bottomtoolbar_switcher  - Tab switcher (tab grid) button
bottomtoolbar_share     - Share button
bottomtoolbar_search    - Search button
bottomtoolbar_star      - Bookmark button
bottomtoolbar_menu      - Menu (three dots) button


Toolbar Sizes and Colors:
- Toolbar background color
- Toolbar icon tint color
- Toolbar incognito background color
- Toolbar incognito icon tint color

Redlines:
- Top+Bottom toolbars on phone portrait
- Top toolbar on phone landscape
- Top toolbar on tablet
 
Cc: khalilcader@chromium.org
Owner: khalilcader@chromium.org
Status: Assigned (was: Untriaged)
Cc: pschaffner@chromium.org
Owner: pschaffner@chromium.org
Cc: crivero@chromium.org

Comment 5 by cmasso@google.com, Feb 21 2018

Labels: Q1 ui-update-ux-assets

Comment 6 by cmasso@google.com, Feb 21 2018

Labels: -Pri-3 Pri-0
NextAction: 2018-02-26
Status: Started (was: Assigned)
I'm almost done and will finish up/update this bug Monday by EOD (France time).

Comment 8 by cmasso@google.com, Feb 22 2018

Thanks Pete!
The NextAction date has arrived: 2018-02-26
I've attached an Xcode Playground (referenced in the following specs), and the requested assets (and some extras for the Omnibox). Considering there is no difference in assets that appear both in the top and bottom toolbars, I did not use the [top|bottom] prefix in the asset names.

NOTE: will handle Omnibox assets + specs in a separate issue
NOTE: toolbar button order/distribution is currently up for debate; will update in separate issue

## Colors & Sizes (see attached Playground for further explanation)
- Toolbar background color: #FAFAFA @ 0.5 opacity + light blur + vibrancy
- Toolbar icon tint color: #000 @ 0.5 opacity
- Toolbar incognito background color: dark blur + vibrancy
- Toolbar incognito icon tint color: #FFF
- NOTE: no toolbar shadow/border

## Redlines
- Top+Bottom toolbars on phone portrait: [top] standard UINavigationBar (44pt + statusbar), [bottom] 48pt + home indicator
- Top toolbar on phone landscape: 54pt (w/ no statusbar)
- Top toolbar on tablet: 54pt + tab strip
adaptive_toolbar_assets.zip
63.0 KB Download
Updated Playground attached.
BijouPageActionIconAnimation.playground.zip
517 KB Download
A few things I forgot:

## Button states
- highlighted (pressed): default implementation when adjustsImageWhenHighlighted = true (assuming these buttons are UIButtons/UIBarButtonItems)
- disabled: default implementation when adjustsImageWhenDisabled = true (assuming these buttons are UIButtons/UIBarButtonItems)
- selected (think long pressing back/forward controls and open menu): for now, change the tint color to #000 @ 0.7 opacity

## Redlines
- [Amendment] Top+Bottom toolbars on phone portrait: 48pt + statusbar/home indicator
- [Amendment] Top toolbar on phone landscape: 50pt (w/ no statusbar)
- [Amendment] Top toolbar on tablet: 50pt + tab strip
- Vertical alignment of buttons in top toolbar on phone portrait: V:|-[button]-3-| (assuming a 44x44pt frame)
- Collapsed top toolbar height: 20pt
- Switcher count label: system 13pt bold
- Toolbar button spacing: 11pt (assuming a 44x44pt frame)
- Toolbar leading/trailing margin: 4pt
- Toolbar button and Omnibox spacing: 19pt
Most of the assets have been added. You can enable it by using the #ui-refresh-phase-1 flag on canary.

I am still investigating the selected state and the new positioning: http://crbug.com/818681.
 
How to file bugs:
Use https://goto.google.com/adaptive-toolbar-bug . Please add additional label based on which user story the bug can be related to. The labels can be found in https://docs.google.com/spreadsheets/d/1UiI-fqpU_6zb-d6aJ0ShqLduLa_vRG1JARlAKeQAbsQ/edit#gid=1247204554

If the bug is about visual aspect only, not functionalities, please use the "S-Visual-Polish" label.

Comment 14 by cmasso@google.com, Mar 6 2018

Gauthier do you mean this task is now completed?
SPEC UPDATE:

## Colors & Sizes
- Toolbar background color: light blur effect only (i.e. [UIBlurEffect effectWithStyle: UIBlurEffectStyleLight])

Cc: gambard@chromium.org
Status: Fixed (was: Started)

Sign in to add a comment