Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Fix bookmarks toolbar overflow indicator display #9664

Conversation

GreenRecycleBin
Copy link
Contributor

@GreenRecycleBin GreenRecycleBin commented Jun 22, 2017

Fix #6869

Submitter Checklist:

  • 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).
  • Tagged reviewers and labelled the pull request as needed.

Test Plan:

Reviewer Checklist:

Tests

  • Adequate test coverage exists to prevent regressions
  • Tests should be independent and work correctly when run individually or as a suite ref
  • New files have MPL2 license header

@GreenRecycleBin
Copy link
Contributor Author

@bsclifton Could you take a look?

@cezaraugusto
Copy link
Contributor

@GreenRecycleBin could you pls rebase?

@GreenRecycleBin GreenRecycleBin force-pushed the fix-bookmarks-toolbar-overflow-indicator-display branch from 06ecb04 to 398a3cc Compare June 25, 2017 03:07
@GreenRecycleBin
Copy link
Contributor Author

@cezaraugusto A recent commit fixed the regression introduced by an earlier commit. I've removed one of my previous commit that did the same thing and rebased the other onto master.

Copy link
Contributor

@cezaraugusto cezaraugusto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for pushing a fix but this doesn't seem to be working for me:

screen shot 2017-06-26 at 11 37 49 am

screen shot 2017-06-26 at 11 36 06 am

@cezaraugusto
Copy link
Contributor

you're in the right track btw but calculation still needs some tweaks. let me know if you need a hand

@bsclifton
Copy link
Member

Hey there @GreenRecycleBin- it's been a while, I just wanted to follow up with you on this one

@cezaraugusto had left some feedback (above). Have you gotten a chance to look at it again? Please let us know if you need a hand 😄

@GreenRecycleBin
Copy link
Contributor Author

I noticed bookmark-item-font-size in styleValues.js is different from the corresponding one in bookmarksToolbar.less. Furthermore, bookmarkToolbarButton.js is using a different font-size from the above two.

The first two obviously need to be in sync according to this comment and the other one.

Should we keep these bookmark related styles in sync across these three files? If so, what's the best way to do that? Thank you.

@cezaraugusto
Copy link
Contributor

@GreenRecycleBin we're in the process of moving things out of LESS and make use of Aphrodite. Styles shared across components should live in global.js file.

All LESS files and styleValues.js will both eventually be removed. I would suggest you looking which style is really applied for what you want and move them to global.js. Even if there's a dupe of global.js and LESS for bookmarks, that's ok. Global styles should be preferred and computed styles methods avoided.

You can find a good example in bookmarkToolbarButton. You can move fontSize: '11px' to global and do something like fontSize: globalStyles.bookmarks.fontSize. Then use that style in the calc you're doing. Repeat this pattern wherever needed. For code still in LESS, just copy the style property to global.js and consult that file to get the number.

let me know if that makes sense for you

@GreenRecycleBin GreenRecycleBin force-pushed the fix-bookmarks-toolbar-overflow-indicator-display branch from 398a3cc to e6d5d02 Compare July 14, 2017 00:34
@GreenRecycleBin
Copy link
Contributor Author

@cezaraugusto Could you take another look?

@GreenRecycleBin GreenRecycleBin force-pushed the fix-bookmarks-toolbar-overflow-indicator-display branch from e6d5d02 to 273f01f Compare July 14, 2017 00:38
@GreenRecycleBin GreenRecycleBin force-pushed the fix-bookmarks-toolbar-overflow-indicator-display branch from 273f01f to f291eb3 Compare July 18, 2017 13:57
@GreenRecycleBin
Copy link
Contributor Author

@cezaraugusto There were some conflicts with origin/master. I've resolved them. Could you take a look?

// Toolbar padding is only on the left
const toolbarPadding = parseInt(globalStyles.spacing.bookmarksToolbarPadding)

const overflowButtonWidth = 25
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know it was like this before but could you please add this to globalStyles as well?

const bookmarkItemMaxWidth = '100px'
const bookmarkItemPadding = '4px'
const bookmarkItemMargin = '3px'
const bookmarkItemChevronMargin = '4px'
const bookmarkToolbarButtonDraggingMargin = '25px'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this could benefit from the above comment as well

Copy link
Contributor

@cezaraugusto cezaraugusto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did a stress test for the 3 cases we have and coudn't replicate the issue again, awesome work! I left a nit comment that I'd like to be done, but otherwise this looks great.

@GreenRecycleBin
Copy link
Contributor Author

GreenRecycleBin commented Jul 22, 2017

@cezaraugusto Could you take another look?

If everything works, could you do git rebase HEAD~3 --interactive --autosquash and merge? Thanks.

Copy link
Contributor

@cezaraugusto cezaraugusto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

++

@cezaraugusto cezaraugusto added this to the 0.20.x (Nightly Channel) milestone Jul 25, 2017
@cezaraugusto cezaraugusto merged commit d4ad740 into brave:master Jul 25, 2017
@GreenRecycleBin GreenRecycleBin deleted the fix-bookmarks-toolbar-overflow-indicator-display branch July 25, 2017 08:32
@bsclifton
Copy link
Member

@GreenRecycleBin thanks for hanging in there and delivering the fix! 😄

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants