New issue
Advanced search Search tips

Issue 844006 link

Starred by 3 users

Issue metadata

Status: Verified
Owner:
Closed: May 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: iOS
Pri: 2
Type: Bug
Q2



Sign in to add a comment

Tab strip under UI-Refresh with lots of tabs has ugly shadows.

Project Member Reported by marq@chromium.org, May 17 2018

Issue description

With UI-Refresh enabled, and many (20+ -- I had 65ish) tabs open on an iPad, the drop shadows on the tab strip tabs can accumulate in ways that leave ugly black blobs on the screen -- see the attached screenshot.
 
TabStripShadows.png
60.1 KB View Download
Cc: justincohen@chromium.org
Components: Design
Labels: Proj-UIRefresh
Owner: pschaffner@chromium.org
This is true of our current implementation, only the shadows are 0.5 pt so the "blobs" are less noticeable. I don't have a good solution in mind for mitigating this as long as we are drawing tab backgrounds with assets. Assigning to me to come up with a fix for.

Comment 2 by marq@chromium.org, May 17 2018

One possible approach is for tabs below the first in a "stack" to not have shadows at all.
The approach we took in desktop Chrome to avoid this was to clip stacked tabs against the next tab's outline path.
Owner: justincohen@chromium.org
pkasting's described implementation sounds nice but we wont be able to get an outline path considering our tab shapes are assets (Mark, correct me if I'm wrong).

Mark I think your proposal in #2 is reasonable but I worry it would be hard to coordinate when scrolling? IDK, I will leave that to you and Justin to discuss. Assign back to me if you need anything (like a shadowless variant of the background tab shapes??).
 Issue 843308  has been merged into this issue.
Owner: pschaffner@chromium.org
Per offline conversation with pschaffner@, lets update the asset for now.
We used to do this even with assets in desktop -- we manually draw a path we knew matched the asset.  Then you have to keep them updated in sync, which is a pain.  Of course the long term solution is probably programmatic drawing.
Owner: justincohen@chromium.org
Attached are new assets (also available here: https://drive.google.com/open?id=14d53aIrYInQVH7oG_itP3ye6ooeNp1SL&authuser=pschaffner@google.com) that use the same hairline shadow as our previous tabs. This is a stopgap solution seeing as larger tab strip work is in the pipeline.
Tab Strip Backgrounds.zip
33.6 KB Download
Here is a mock showing ~what it will look like.
Apple iPad Air 2 Silver@2x.png
408 KB View Download
Project Member

Comment 10 by bugdroid1@chromium.org, May 30 2018

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b85ebef528e90732357572883382623e19442223

commit b85ebef528e90732357572883382623e19442223
Author: Justin Cohen <justincohen@google.com>
Date: Wed May 30 15:16:59 2018

[ios] Update tab strip tab art for refresh.

Removes shadows around refresh artwork, and all the necessary pixel tweakage.

screenshot: https://screenshot.googleplex.com/pawpDoFFzVY

Bug:  844006 
Cq-Include-Trybots: luci.chromium.try:ios-simulator-full-configs;master.tryserver.chromium.mac:ios-simulator-cronet
Change-Id: I760902a0820b0426d75d571163cdc2ab7c7782a4
Reviewed-on: https://chromium-review.googlesource.com/1078912
Reviewed-by: Rohit Rao <rohitrao@chromium.org>
Commit-Queue: Justin Cohen <justincohen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#562828}
[modify] https://crrev.com/b85ebef528e90732357572883382623e19442223/ios/chrome/browser/ui/tabs/resources/tabstrip_background_tab.imageset/tabstrip_background_tab@2x~ipad.png
[modify] https://crrev.com/b85ebef528e90732357572883382623e19442223/ios/chrome/browser/ui/tabs/resources/tabstrip_background_tab.imageset/tabstrip_background_tab~ipad.png
[modify] https://crrev.com/b85ebef528e90732357572883382623e19442223/ios/chrome/browser/ui/tabs/resources/tabstrip_foreground_tab.imageset/tabstrip_foreground_tab@2x~ipad.png
[modify] https://crrev.com/b85ebef528e90732357572883382623e19442223/ios/chrome/browser/ui/tabs/resources/tabstrip_foreground_tab.imageset/tabstrip_foreground_tab~ipad.png
[modify] https://crrev.com/b85ebef528e90732357572883382623e19442223/ios/chrome/browser/ui/tabs/resources/tabstrip_incognito_background_tab.imageset/tabstrip_incognito_background_tab@2x~ipad.png
[modify] https://crrev.com/b85ebef528e90732357572883382623e19442223/ios/chrome/browser/ui/tabs/resources/tabstrip_incognito_background_tab.imageset/tabstrip_incognito_background_tab~ipad.png
[modify] https://crrev.com/b85ebef528e90732357572883382623e19442223/ios/chrome/browser/ui/tabs/resources/tabstrip_incognito_foreground_tab.imageset/tabstrip_incognito_foreground_tab@2x~ipad.png
[modify] https://crrev.com/b85ebef528e90732357572883382623e19442223/ios/chrome/browser/ui/tabs/resources/tabstrip_incognito_foreground_tab.imageset/tabstrip_incognito_foreground_tab~ipad.png
[modify] https://crrev.com/b85ebef528e90732357572883382623e19442223/ios/chrome/browser/ui/tabs/tab_strip_controller.mm
[modify] https://crrev.com/b85ebef528e90732357572883382623e19442223/ios/chrome/browser/ui/tabs/tab_view.mm

Status: Fixed (was: Assigned)
Status: Verified (was: Fixed)
Verified in 69.0.3449.0 Canary, iPad Air  iOS11.4

Shadow is not shown.

Sign in to add a comment