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

Polish compact Bravery panel #9078

Merged
merged 3 commits into from
Jun 7, 2017
Merged

Polish compact Bravery panel #9078

merged 3 commits into from
Jun 7, 2017

Conversation

luixxiul
Copy link
Contributor

@luixxiul luixxiul commented May 26, 2017

Closes #9077
Addresses #9016

Requires #9043 (Remove adblock.less & Rename custom classNames on switchControl.js)

Test Plan:

  1. Visit twitter.com
  2. Make sure only counts of blocked resources are clickable
  3. Make sure the panel is displayed as follows:

screenshot 2017-05-27 2 13 08

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).

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

@luixxiul luixxiul added feature/shields polish Nice to have — usually related to front-end/visual tasks. PR/needs-QA-attention ☕ labels May 26, 2017
@luixxiul luixxiul added this to the 0.16.200 milestone May 26, 2017
@luixxiul luixxiul self-assigned this May 26, 2017
@luixxiul luixxiul modified the milestones: 0.16.200, 0.16.100 (Frozen, only critical adds from here) May 27, 2017
@luixxiul
Copy link
Contributor Author

Moving the milestone as #8954 was merged for 0.16.1

@luixxiul
Copy link
Contributor Author

Fixed class names with 6163ea4, which was squashed.

</section>
}

get defaultBraveryPanelHeader () {
const shieldsUp = this.props.braverySettings.shieldsUp
return <section className={css(styles.braveryPanel__header)}>
<div className={css(styles.braveryPanel__header_left)}>
<div className={css(styles.braveryPanel__header__left)}>
<div data-l10n-id='braveryPanelTitle' />
<div title={this.displayHost} className={css(styles.braveryPanel__header__displayHost)}>{this.displayHost}</div>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This should be braveryPanel__header__left__displayHost. I'm fixing it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed with 39378e5

@cezaraugusto
Copy link
Contributor

sorry for delaying review. could you pls rebase?

@@ -8,6 +8,7 @@ const Immutable = require('immutable')
// Components
const ImmutableComponent = require('../immutableComponent')
const Dialog = require('../common/dialog')
const Button = require('../common/button')
Copy link
Contributor

Choose a reason for hiding this comment

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

any reason why prefer Button over BrowserButton?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

no, I have just forgot about that.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'll replace it!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed with c949c8b

Suguru Hirahara added 2 commits June 6, 2017 02:14
Also:
- Add padding around braveryPanel_compact__body__ul

Auditors:

Test Plan:
1. Visit twitter.com
2. Make sure only counts of blocked resources are clickable
@cezaraugusto
Copy link
Contributor

everything works as expected except for a test which is perma failing for me:

"Bravery Panel Adblock stats without iframe tests blocks websocket tracking"
Ref: https://travis-ci.org/brave/browser-laptop/jobs/239658853#L3143.

Can you check what is missing there? At least rebase against master and see if fail persists since it works on the latest I tested (sha cdaee37). Ref: https://travis-ci.org/brave/browser-laptop/jobs/239658304.

@@ -262,55 +271,63 @@ class BraveryPanel extends ImmutableComponent {
compactBraveryPanel && styles.braveryPanel_compact__stats
)}>
<div data-test-id='adsBlockedStat'
onClick={this.onToggleAdsAndTracking}
Copy link
Contributor

Choose a reason for hiding this comment

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

now that onClick handler is set for <span> the data-test-id should be moved over there as well. Otherwise, some tests that depend on it will perma fail because it is clicking an element that has no listener for changes.

(!shieldsUp || adControl === 'allowAdsAndTracking') && styles.braveryPanel__stats__item_count_disabled,
gridStyles.row1col1,
!compactBraveryPanel && styles.braveryPanel__stats__item,
!compactBraveryPanel && styles.braveryPanel__stats__item_count,
compactBraveryPanel && styles.braveryPanel_compact__stats__item_count
)}>{adsBlockedStat}</div>
)}>
<span onClick={this.onToggleAdsAndTracking}
Copy link
Contributor

Choose a reason for hiding this comment

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

based on above, test id should belong to here, i.e. <span data-test-id='adsBlockedStat' onClick={this.onToggleAdsAndTracking} ...

Auditors:

Test Plan: make sure the intermittent failures on Travis are fixed
@cezaraugusto
Copy link
Contributor

not a blocker but let's track this one for the next polish, overflow for tracker list should be auto here to avoid empty scrollbar when there's no overflow:

screen shot 2017-06-06 at 11 42 27 pm

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.

UI is great, test plan works, no regression for automated tests, great work ++

@cezaraugusto cezaraugusto merged commit b58e813 into brave:master Jun 7, 2017
@luixxiul luixxiul deleted the compactBraveryPanel-v3 branch June 7, 2017 02:50
@luixxiul
Copy link
Contributor Author

luixxiul commented Jun 7, 2017

@cezaraugusto nice find, I'll log that.

@cezaraugusto
Copy link
Contributor

I guess there are some missing parts prior to this PR that weren't tagged for 0.17.x which lead to bad UI after pulling these. To avoid regressions I'm pushing back PR changes to 0.18.x

@cezaraugusto cezaraugusto modified the milestones: 0.18.x, 0.17.x (Frozen, only critical adds from here) Jun 7, 2017
@luixxiul
Copy link
Contributor Author

luixxiul commented Jun 7, 2017

which isn't this one? #8954 that has been tagged with 0.17

@luixxiul luixxiul modified the milestones: 0.17.x (Frozen, only critical adds from here), 0.18.x Jun 7, 2017
@bsclifton bsclifton modified the milestones: 0.18.x, 0.17.x (Frozen, only critical adds from here) Jun 7, 2017
@luixxiul
Copy link
Contributor Author

luixxiul commented Jun 7, 2017

@bsclifton
Copy link
Member

@luixxiul this worked great! I pulled this and the other polish commit into 0.17.x

@luixxiul luixxiul modified the milestones: 0.17.x (Frozen, only critical adds from here), 0.18.x Jun 7, 2017
@luixxiul
Copy link
Contributor Author

luixxiul commented Jun 7, 2017

thanks!

@cezaraugusto
Copy link
Contributor

great ++

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature/shields polish Nice to have — usually related to front-end/visual tasks.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants