{"action":"created","issue":{"url":"https://api.github.com/repos/brave/browser-laptop/issues/12565","repository_url":"https://api.github.com/repos/brave/browser-laptop","labels_url":"https://api.github.com/repos/brave/browser-laptop/issues/12565/labels{/name}","comments_url":"https://api.github.com/repos/brave/browser-laptop/issues/12565/comments","events_url":"https://api.github.com/repos/brave/browser-laptop/issues/12565/events","html_url":"https://github.com/brave/browser-laptop/pull/12565","id":287013913,"number":12565,"title":"Tab style updates x 8","user":{"login":"petemill","id":741836,"avatar_url":"https://avatars1.githubusercontent.com/u/741836?v=4","gravatar_id":"","url":"https://api.github.com/users/petemill","html_url":"https://github.com/petemill","followers_url":"https://api.github.com/users/petemill/followers","following_url":"https://api.github.com/users/petemill/following{/other_user}","gists_url":"https://api.github.com/users/petemill/gists{/gist_id}","starred_url":"https://api.github.com/users/petemill/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/petemill/subscriptions","organizations_url":"https://api.github.com/users/petemill/orgs","repos_url":"https://api.github.com/users/petemill/repos","events_url":"https://api.github.com/users/petemill/events{/privacy}","received_events_url":"https://api.github.com/users/petemill/received_events","type":"User","site_admin":false},"labels":[{"id":628716587,"url":"https://api.github.com/repos/brave/browser-laptop/labels/feature/tab-preview","name":"feature/tab-preview","color":"84b6eb","default":false},{"id":476101563,"url":"https://api.github.com/repos/brave/browser-laptop/labels/feature/tabsbar","name":"feature/tabsbar","color":"84b6eb","default":false},{"id":732348562,"url":"https://api.github.com/repos/brave/browser-laptop/labels/initiative/ux-harmonization","name":"initiative/ux-harmonization","color":"fbca04","default":false}],"state":"closed","locked":false,"assignee":{"login":"petemill","id":741836,"avatar_url":"https://avatars1.githubusercontent.com/u/741836?v=4","gravatar_id":"","url":"https://api.github.com/users/petemill","html_url":"https://github.com/petemill","followers_url":"https://api.github.com/users/petemill/followers","following_url":"https://api.github.com/users/petemill/following{/other_user}","gists_url":"https://api.github.com/users/petemill/gists{/gist_id}","starred_url":"https://api.github.com/users/petemill/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/petemill/subscriptions","organizations_url":"https://api.github.com/users/petemill/orgs","repos_url":"https://api.github.com/users/petemill/repos","events_url":"https://api.github.com/users/petemill/events{/privacy}","received_events_url":"https://api.github.com/users/petemill/received_events","type":"User","site_admin":false},"assignees":[{"login":"petemill","id":741836,"avatar_url":"https://avatars1.githubusercontent.com/u/741836?v=4","gravatar_id":"","url":"https://api.github.com/users/petemill","html_url":"https://github.com/petemill","followers_url":"https://api.github.com/users/petemill/followers","following_url":"https://api.github.com/users/petemill/following{/other_user}","gists_url":"https://api.github.com/users/petemill/gists{/gist_id}","starred_url":"https://api.github.com/users/petemill/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/petemill/subscriptions","organizations_url":"https://api.github.com/users/petemill/orgs","repos_url":"https://api.github.com/users/petemill/repos","events_url":"https://api.github.com/users/petemill/events{/privacy}","received_events_url":"https://api.github.com/users/petemill/received_events","type":"User","site_admin":false}],"milestone":{"url":"https://api.github.com/repos/brave/browser-laptop/milestones/78","html_url":"https://github.com/brave/browser-laptop/milestone/78","labels_url":"https://api.github.com/repos/brave/browser-laptop/milestones/78/labels","id":2639972,"number":78,"title":"0.22.x (Beta Channel)","description":"Tab discarding, Windows are now buffered and open faster, Save/Dialog fixes, EV Certificate status shown, fix Google cookie mismatch, U2F support, IME fixes for international users, ~Not~ single-webview 😸 \r\n","creator":{"login":"alexwykoff","id":1434040,"avatar_url":"https://avatars0.githubusercontent.com/u/1434040?v=4","gravatar_id":"","url":"https://api.github.com/users/alexwykoff","html_url":"https://github.com/alexwykoff","followers_url":"https://api.github.com/users/alexwykoff/followers","following_url":"https://api.github.com/users/alexwykoff/following{/other_user}","gists_url":"https://api.github.com/users/alexwykoff/gists{/gist_id}","starred_url":"https://api.github.com/users/alexwykoff/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alexwykoff/subscriptions","organizations_url":"https://api.github.com/users/alexwykoff/orgs","repos_url":"https://api.github.com/users/alexwykoff/repos","events_url":"https://api.github.com/users/alexwykoff/events{/privacy}","received_events_url":"https://api.github.com/users/alexwykoff/received_events","type":"User","site_admin":false},"open_issues":16,"closed_issues":134,"state":"open","created_at":"2017-07-13T18:49:47Z","updated_at":"2018-03-20T23:03:48Z","due_on":null,"closed_at":null},"comments":14,"created_at":"2018-01-09T08:59:11Z","updated_at":"2018-03-20T23:07:39Z","closed_at":"2018-03-16T22:47:56Z","author_association":"MEMBER","pull_request":{"url":"https://api.github.com/repos/brave/browser-laptop/pulls/12565","html_url":"https://github.com/brave/browser-laptop/pull/12565","diff_url":"https://github.com/brave/browser-laptop/pull/12565.diff","patch_url":"https://github.com/brave/browser-laptop/pull/12565.patch"},"body":"### 1. Tab / Top Nav updated colors 🎨 \r\nA small iteration towards new styles including:\r\n- New colors from @bradleyrichter \r\n- Everything more ~painstakingly~ perfectly aligned\r\n- Horizontal and vertical spacing improvements, including very slightly taller tabs\r\n- Tab audio icon gets new color, hover state and tooltip\r\n- Some miscellaneous code cleanup / refactoring for performance and maintainability\r\n\r\n#### Was (0.20)\r\n![image](https://user-images.githubusercontent.com/741836/35140470-33563252-fcac-11e7-91e0-5edcd549ce6a.png)\r\n\r\n\r\n#### Now\r\n![image](https://user-images.githubusercontent.com/741836/35140453-26eb21e4-fcac-11e7-923a-a6d0394870e6.png)\r\n_Note: exact style has been tweaked via design team since this screenshot._\r\n\r\n### 2. Tab title text gets sub-pixel antialiasing 🔍 \r\n\r\nThe tab title text was being forced to be rendered on a GPU layer. This is useful when performing transformations, but this was occuring even when the tab is static. Using the GPU has a slight hit to text rendering quality since it cannot use sub-pixel antialiasing, whereas CPU rendering can.\r\n\r\n_These are not great representations. I recommend using the zoom function of Mac / Windows, or taking a screenshot and magnifying in order to validate:_\r\n\r\n#### Was\r\n<img src=\"https://user-images.githubusercontent.com/741836/37505774-c85a03c4-28a3-11e8-9ba4-2efb75368d04.png\" width=\"740\" />\r\n\r\n\r\n\r\n#### Now\r\n<img src=\"https://user-images.githubusercontent.com/741836/37505547-c3f8dfd6-28a2-11e8-949f-759e18880468.png\" width=\"740\" />\r\n\r\n\r\n\r\n### 3. Preview mode tab style 📑 \r\nFix #12454 \r\nCloses #2869\r\n\r\nMakes it more apparent that the tab is doing something out of context - being previewed and not being made active - by providing a transition as if the tab were 'pulled out' for special inspection.\r\nAlso adds more of a style to the frame itself, to reduce user-confusion that the frame is active, and not simply a preview.\r\nCross-fade of frame content was implemented (and awesome), but removed due to performance / low animation framerate.\r\nThis can be fixed and re-implemented with single-webview, which will require a\r\ndifferent css architecture for this potential feature anyway.\r\nThe tab animation itself is sometimes not as smooth as I'd like. That is also caused by multiple webviews hiding and showing, and could be revisited after single-webview.\r\n\r\n![brave-tab-preview-1](https://user-images.githubusercontent.com/741836/35140852-962a8788-fcad-11e7-9cad-d6519df4baaa.gif)\r\n_Note: exact style has been tweaked via design team since this screenshot._\r\n\r\n### 4. Tighten up transitions 🔧 \r\nIncluding:\r\n- Hover (and preview if enabled) transition comes in fast 💨, and fades out ~luxuriously~slowly 🐌 \r\n- No transition for switching between active and inactive state\r\n\r\n\r\n### 5. Adjust filter for favicons on dark themed tabs 🌫 \r\nThis was causing big issues for some favicons which. We experimented with a bunch of different blends at https://codepen.io/petemill/pen/XVovva\r\nFix #12722 \r\n\r\n#### Was\r\n![image](https://user-images.githubusercontent.com/741836/35140304-9017486a-fcab-11e7-8c6a-d463337e286e.png)\r\n\r\n\r\n#### Now\r\n![image](https://user-images.githubusercontent.com/741836/35140319-9f535f8a-fcab-11e7-9878-bdfe0fc8986b.png)\r\n\r\n\r\n### 6. Tab gradient background transition fix (overflow text) 💨 \r\nFix #12721 (Tab background gradient visible when switching tabs)\r\nFix #11249 (Tab color has weird fade in paint effect when switching)\r\nA regression introduced with 0.20.x\r\n\r\n#### Was (slowed down to 10% speed)\r\n![issue-tab-background-gradient-transition-visible](https://user-images.githubusercontent.com/741836/35139804-9a332622-fca9-11e7-8a34-fcdecc2d8ada.gif)\r\n\r\n#### Now\r\n![issue-tab-background-gradient-transition-visible-fixed](https://user-images.githubusercontent.com/741836/35140855-9dc74a3a-fcad-11e7-944d-408a8c7e778d.gif)\r\n_Note that the background transition has mostly been removed as part of this PR anyway, since active tab style change should be instant, just like the content_\r\n\r\n### 7. Tab Close Button style ✖️ \r\n- Background of button does not show until hover\r\n- Color of button (when not hovered) is the same as text\r\n- Button gets active state (i.e. when mouse is down on button, background color changes)\r\n\r\n### 8. Remove transparency from theme color 🔵 \r\nFix #12803\r\n\r\n#### Was:\r\n![image](https://user-images.githubusercontent.com/741836/35294384-481270de-002b-11e8-95de-5d746bf1f829.png)\r\n\r\n#### Now:\r\n![image](https://user-images.githubusercontent.com/741836/35294399-52653b48-002b-11e8-9e99-6db3d71d935c.png)\r\n\r\n\r\nSubmitter Checklist:\r\n\r\n- [x] Submitted a [ticket](https://github.com/brave/browser-laptop/issues) for my issue if one did not already exist.\r\n- [x] Used Github [auto-closing keywords](https://help.github.com/articles/closing-issues-via-commit-messages/) in the commit message.\r\n- [x] Added/updated tests for this change (for new code or code which already has tests).\r\n- [x] Ran `git rebase -i` to squash commits (if needed).\r\n- [x] Tagged reviewers and labelled the pull request [as needed](https://github.com/brave/browser-laptop/wiki/Pull-request-process).\r\n- [ ] Request a security/privacy review [as needed](https://github.com/brave/handbook/blob/master/development/security.md#how-to-request-a-security-review). (Ask a Brave employee to help if you cannot access this document.)\r\n\r\nTest Plan:\r\nConfirm visuals as above. Note that some minor tweaks have been made since the above screenshots were taken, through iterations with design/product team members.\r\n\r\nReviewer Checklist:\r\n\r\n- [ ] Request a security/privacy review [as needed](https://github.com/brave/handbook/blob/master/development/security.md#how-to-request-a-security-review) if one was not already requested.\r\n\r\nTests\r\n\r\n\r\n- [ ] Adequate test coverage exists to prevent regressions\r\n- [ ] Tests should be independent and work correctly when run individually or as a suite [ref](https://github.com/brave/browser-laptop/wiki/Code-Guidelines#test-dependencies)\r\n- [ ] New files have MPL2 license header\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/brave/browser-laptop/issues/comments/374787657","html_url":"https://github.com/brave/browser-laptop/pull/12565#issuecomment-374787657","issue_url":"https://api.github.com/repos/brave/browser-laptop/issues/12565","id":374787657,"user":{"login":"bradleyrichter","id":13509546,"avatar_url":"https://avatars0.githubusercontent.com/u/13509546?v=4","gravatar_id":"","url":"https://api.github.com/users/bradleyrichter","html_url":"https://github.com/bradleyrichter","followers_url":"https://api.github.com/users/bradleyrichter/followers","following_url":"https://api.github.com/users/bradleyrichter/following{/other_user}","gists_url":"https://api.github.com/users/bradleyrichter/gists{/gist_id}","starred_url":"https://api.github.com/users/bradleyrichter/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bradleyrichter/subscriptions","organizations_url":"https://api.github.com/users/bradleyrichter/orgs","repos_url":"https://api.github.com/users/bradleyrichter/repos","events_url":"https://api.github.com/users/bradleyrichter/events{/privacy}","received_events_url":"https://api.github.com/users/bradleyrichter/received_events","type":"User","site_admin":false},"created_at":"2018-03-20T23:07:39Z","updated_at":"2018-03-20T23:07:39Z","author_association":"CONTRIBUTOR","body":"@petemill Yes. Perfect. Please try reducing only the page fade-out to current tab by 50% of current. \r\n\r\nThe rest feels good as is. "}}
{"actor":{"display_login":"bradleyrichter"}}