Responsive tab / refactor to Aphrodite #6900

cezaraugusto · 2017-01-28T02:22:58Z

Test plan

Tabs should have a cohesive/pleasant UI with no inconsistent icon alignment/overflow.
Tabs should be responsive: resizing them should update each icon to fit its container.
Action of mute/unmute audio icon shouldn't change mouse position for each toggle.

Automated tests

Covered by automated tests

npm run test -- --grep="tabContent components"

Submitted a ticket for my issue if one did not already exist.
Used Github auto-closing keywords in the commit message.
Added/updated tests for this change (for new code or code which already has tests).
Ran git rebase -i to squash commits (if needed).

Auditors: @bsclifton, @bbondy

/cc @bradleyrichter

Fix #5431
Fix #6511
Fix #6845
Fix #1776
Fix #100

cezaraugusto · 2017-01-28T02:31:54Z

For reference, @bradleyrichter reported some improvements here: #5918 (comment)

luixxiul · 2017-01-28T11:51:52Z

There is a lot of errors which seems to me to be related with the changes

bbondy · 2017-01-28T18:13:41Z

moving to 0.13.2, will consider moving back if tests are fixed up in time. Thanks.

bsclifton

Just now got to reviewing (doh- sorry) ☹️ Needs a rebase, since the siteDetail objects have been reworked.

I did notice this though:
Much of the code is using process.platform for the win32 check. This is not going to work in the renderer, because the renderer process (ex: where the tab runs) does not have access to node.js.

For a safe way to check, take a peek at the platformUtil helper code (specifically the isWindows). This checks the process.platform (which will return undefined) but also checks navigator

bsclifton · 2017-01-30T16:25:21Z

Once ready, this may also fix #6845

cezaraugusto · 2017-01-30T18:28:31Z

@bsclifton thanks added to PR description

cezaraugusto · 2017-01-30T19:25:28Z

Updated with test fixes.

The below are intermittent, but passed locally:

npm run test -- --grep="remembers findbar input when switching frames"
npm run test -- --grep="shows no tab pages when you have only 1 page"
npm run test -- --grep="Retains user input on tab switches"

bsclifton

Looking good! I tested on Windows and Mac and found 2 issues (only 1 that I think we need to address)

When you set the max tab count as 20, things can get a little cramped. However, I think this is outside the scope of this change. The behavior with this PR is MUCH better than what we have today. I think this would be a great follow up issue
There was a PR by @gyandeeps which made the tabs stay the same size when closing. This does appear to still work... but the close button is hidden. STR:

open up a bunch of tabs
close them, starting in the middle
notice after closing one that the close icon doesn't automatically show. You have to move mouse off tab and back on. But by doing that, mouse leaves and triggers the resize code.

edit:
here are pics of the cramped area when max tabs is set to 20 and width is smallest; we can use this for creating a follow up issue

bsclifton · 2017-01-30T20:25:23Z

app/renderer/components/styles/tab.js

+const {StyleSheet} = require('aphrodite')
+const globalStyles = require('./global')
+
+const styles = StyleSheet.create({


Really well done here! 😄 This is perfect

bsclifton · 2017-01-30T20:25:41Z

app/renderer/components/styles/global.js

+    tabIcon: '14px',
+    tabTitle: '12px'
+  },
+  appIcons: {


bsclifton · 2017-01-30T20:27:34Z

app/common/lib/platformUtil.js

+module.exports.isLinux = () => {
+  return !module.exports.isDarwin() &&
+    !module.exports.isWindows()
+}


this is perfect! For anyone else looking at this... I believe this is the best way because there could be many variations of navigator.platform for Linux. We can't rely on process.platform because this code is often invoked in the renderer (like in this PR)

cezaraugusto · 2017-02-01T22:45:37Z

Updated after #6900 (review) regarding sequential tab closing issue.

bsclifton

Other than the feedback I left with small nitpicks, everything else looks great! Awesome job on this one 😄

bsclifton · 2017-02-02T00:38:44Z

js/components/tab.js

-    const locationHasFavicon = this.props.tab.get('location') !== 'about:newtab'
+  componentDidMount () {
+    // Execute resize handler at a rate of 15fps
+    window.addEventListener('resize', throttle(this.onUpdateTabSize, 66))


This 66 magic number may make more sense as a constant in tabUtil.js

bsclifton · 2017-02-02T00:41:58Z

js/stores/windowStore.js

+      // Copy the hover state if tab closed with mouse
+      // This allow us to have closeTab button visible
+      // for sequential frames closing, until onMouseLeave event happens.
+      if (hoverState) {


you may also want to check nextFrame; like if (hoverState && nextFrame) {

bsclifton · 2017-02-02T00:42:27Z

less/tabs.less

-    z-index: @zindexTabs;
-  }
-}
-


Seeing all this deleted is beautiful! 😄

bsclifton · 2017-02-02T00:53:08Z

@bbondy did you want to give this one a go? I think you'll like it 😄

bbondy · 2017-02-04T16:07:40Z

wow this is very awesome @cezaraugusto, nice work.

@bsclifton

Auditors: @bsclifton, @bbondy /cc @bradleyrichter Fix #5431 Fix #6511 Fix #6845 Fix #1776 Fix #100

bsclifton · 2017-02-06T23:32:31Z

@cezaraugusto need your help with 2 things 😄

For each of the issues listed, can you please put the test plan at the top of each issue?
I noticed two failing tests (broken selectors?). They may not be related, but help looking into them is appreciated 😄

npm run test -- --grep="navigationBar tests submit page that does not load resets URL to previous location if page does not load"

npm run test -- --grep="tab pages basic tab page functionality tabs per page setting takes effect immediately"

cezaraugusto · 2017-02-07T04:30:48Z

@bsclifton failing tests not related to selector. Failing on master as well.

npm run test -- --grep="navigationBar tests submit page that does not load resets URL to previous location if page does not load

Searches for activeWebview, which was not modified.

npm run test -- --grep="tab pages basic tab page functionality tabs per page setting takes effect immediately"

Test is described inside basic tab page functionality, and the only selector which was modified is on before() action, but other tests wrapped there passes as well, so I don't think it's related. It's also failing on master as well.

Also updated target issues with test plan pointing for this PR's top comment.

bsclifton · 2017-02-07T05:03:58Z

Looks like we have navigationBar failures tracked here #6666

And tab failures tracked here: #6981

Since the rest passed (and these are happening in master), I'll go ahead and merge. Thanks for updating the issues 😄

cezaraugusto added feature/tabsbar refactoring/aphrodite labels Jan 28, 2017

cezaraugusto added this to the 0.13.1 milestone Jan 28, 2017

cezaraugusto self-assigned this Jan 28, 2017

cezaraugusto requested review from bbondy and bsclifton January 28, 2017 02:22

cezaraugusto added the QA/test-plan-specified label Jan 28, 2017

cezaraugusto mentioned this pull request Jan 28, 2017

Refine tab's element position #5918

Closed

3 tasks

cezaraugusto force-pushed the tabs-refactor branch 3 times, most recently from c14ad16 to e7fba5b Compare January 28, 2017 06:08

luixxiul added the PR/needs-QA-attention ☕ label Jan 28, 2017

bbondy modified the milestones: 0.13.2, 0.13.1 Jan 28, 2017

luixxiul added PR/needs-rebase ۞ and removed PR/needs-QA-attention ☕ labels Jan 29, 2017

bsclifton suggested changes Jan 30, 2017

View reviewed changes

cezaraugusto force-pushed the tabs-refactor branch from e7fba5b to dffa875 Compare January 30, 2017 18:27

bsclifton removed the PR/needs-rebase ۞ label Jan 30, 2017

bsclifton suggested changes Jan 30, 2017

View reviewed changes

luixxiul added the PR/work-in-progress ⚒ label Jan 31, 2017

bsclifton mentioned this pull request Jan 31, 2017

Allow more than 20 tabs per set #6692

Closed

luixxiul mentioned this pull request Feb 1, 2017

Disable close button on tabs if tab size is too small #5431

Closed

srirambv mentioned this pull request Feb 1, 2017

Session tab/private tab icon and text is too spaced out #6511

Closed

bsclifton approved these changes Feb 2, 2017

View reviewed changes

cezaraugusto mentioned this pull request Feb 3, 2017

Close button spacing incorrect on tabs without icons #7005

Closed

cezaraugusto force-pushed the tabs-refactor branch from 265caaf to 2428ae2 Compare February 3, 2017 20:37

cezaraugusto added PR/needs-QA-attention ☕ and removed PR/work-in-progress ⚒ labels Feb 3, 2017

bsclifton added PR/ready-for-merge and removed PR/needs-QA-attention ☕ labels Feb 4, 2017

luixxiul added the PR/needs-rebase ۞ label Feb 4, 2017

cezaraugusto force-pushed the tabs-refactor branch from 2428ae2 to 31513ae Compare February 5, 2017 18:31

cezaraugusto removed the PR/needs-rebase ۞ label Feb 5, 2017

This was referenced Feb 6, 2017

Audio indicator on/off button #1776

Closed

Tabs don't resize with window #100

Closed

bsclifton modified the milestones: 0.13.3, 0.13.4 Feb 6, 2017

Responsive tab / refactor to Aphrodite

600f53a

Auditors: @bsclifton, @bbondy /cc @bradleyrichter Fix #5431 Fix #6511 Fix #6845 Fix #1776 Fix #100

bsclifton force-pushed the tabs-refactor branch from 31513ae to 600f53a Compare February 6, 2017 21:16

bsclifton merged commit e4b8830 into master Feb 7, 2017

bsclifton deleted the tabs-refactor branch February 7, 2017 05:04

bsclifton removed the PR/ready-for-merge label Feb 7, 2017

This was referenced Feb 11, 2017

Manual tests for OS X 0.13.3 RC1 #7177

Closed

Manual tests for Windows ia-32 0.13.3 RC1 #7178

Closed

Manual tests for Windows x64 0.13.3 RC1 #7179

Closed

Manual tests for Linux Mint 0.13.3 RC1 #7180

Closed

luixxiul mentioned this pull request Feb 11, 2017

Close tab button should not appear on the title #7183

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Responsive tab / refactor to Aphrodite #6900

Responsive tab / refactor to Aphrodite #6900

cezaraugusto commented Jan 28, 2017 •

edited

Loading

cezaraugusto commented Jan 28, 2017

luixxiul commented Jan 28, 2017 •

edited

Loading

bbondy commented Jan 28, 2017

bsclifton left a comment •

edited

Loading

bsclifton commented Jan 30, 2017

cezaraugusto commented Jan 30, 2017

cezaraugusto commented Jan 30, 2017 •

edited

Loading

bsclifton left a comment •

edited

Loading

bsclifton Jan 30, 2017

bsclifton Jan 30, 2017

bsclifton Jan 30, 2017

cezaraugusto commented Feb 1, 2017

bsclifton left a comment

bsclifton Feb 2, 2017

bsclifton Feb 2, 2017

bsclifton Feb 2, 2017

bsclifton commented Feb 2, 2017

bbondy commented Feb 4, 2017

bsclifton commented Feb 6, 2017

cezaraugusto commented Feb 7, 2017 •

edited

Loading

bsclifton commented Feb 7, 2017

Responsive tab / refactor to Aphrodite #6900

Responsive tab / refactor to Aphrodite #6900

Conversation

cezaraugusto commented Jan 28, 2017 • edited Loading

Test plan

Automated tests

cezaraugusto commented Jan 28, 2017

luixxiul commented Jan 28, 2017 • edited Loading

bbondy commented Jan 28, 2017

bsclifton left a comment • edited Loading

Choose a reason for hiding this comment

bsclifton commented Jan 30, 2017

cezaraugusto commented Jan 30, 2017

cezaraugusto commented Jan 30, 2017 • edited Loading

bsclifton left a comment • edited Loading

Choose a reason for hiding this comment

bsclifton Jan 30, 2017

Choose a reason for hiding this comment

bsclifton Jan 30, 2017

Choose a reason for hiding this comment

bsclifton Jan 30, 2017

Choose a reason for hiding this comment

cezaraugusto commented Feb 1, 2017

bsclifton left a comment

Choose a reason for hiding this comment

bsclifton Feb 2, 2017

Choose a reason for hiding this comment

bsclifton Feb 2, 2017

Choose a reason for hiding this comment

bsclifton Feb 2, 2017

Choose a reason for hiding this comment

bsclifton commented Feb 2, 2017

bbondy commented Feb 4, 2017

bsclifton commented Feb 6, 2017

cezaraugusto commented Feb 7, 2017 • edited Loading

bsclifton commented Feb 7, 2017

cezaraugusto commented Jan 28, 2017 •

edited

Loading

luixxiul commented Jan 28, 2017 •

edited

Loading

bsclifton left a comment •

edited

Loading

cezaraugusto commented Jan 30, 2017 •

edited

Loading

bsclifton left a comment •

edited

Loading

cezaraugusto commented Feb 7, 2017 •

edited

Loading