Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Help text toggle #751

Merged
merged 5 commits into from
Oct 6, 2016
Merged

Help text toggle #751

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2ad8c3e
Help text toggle
ebidel Oct 6, 2016
d0a9a54
Lint fixes
ebidel Oct 6, 2016
f3767f5
Feedback
ebidel Oct 6, 2016
80e3b93
Refactor
ebidel Oct 6, 2016
493beed
Remove unused aggregatorScored param
ebidel Oct 6, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 22 additions & 15 deletions lighthouse-core/report/report-generator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,23 @@ class ReportGenerator {
return Math.round(totalScore * 100);
};

const getItemRating = (value, aggregatorScored) => {
Copy link
Member

@brendankenny brendankenny Oct 6, 2016 •
edited
Loading

Choose a reason for hiding this comment

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

make this a method on the class?

Copy link
Member

Choose a reason for hiding this comment

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

aggregatorScored appears to never be used

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's an arg to the helper, but I don't see it used in the report.

Copy link
Member

Choose a reason for hiding this comment

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

what about moving this to a private method?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done

if (typeof value === 'boolean') {
return value ? 'good' : 'poor';
Copy link
Contributor

Choose a reason for hiding this comment

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

nit extract good / poor / average to a file live "enum" like map const

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done

}

// Limit the rating to average if this is a rating for Best Practices.
let rating = aggregatorScored ? 'average' : 'poor';
if (value > 0.33) {
Copy link
Contributor

Choose a reason for hiding this comment

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

extract magic numbers to a private file level const map

Copy link
Contributor Author

Choose a reason for hiding this comment

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

not going to touch other people's stuff as part of this cl

Copy link
Member

Choose a reason for hiding this comment

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

I agree with sam here. If you can improve code immediately involved with what you're changing anyways, you should. Pulling these out would be helpful.

Copy link
Contributor Author

@ebidel ebidel Oct 6, 2016 •
edited
Loading

Choose a reason for hiding this comment

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

If every PR is a refactor, PRs take way longer to get in and introduce errors unrelated to the PR. I'm happy to do this one because it's small.

Copy link
Member

Choose a reason for hiding this comment

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

Agreed, and there's always a limit so we can actually make progress, PRs aren't weighted down by the past, etc. But small simplifications along the way are also a good way to help pay down technical debt. People usually need to get new stuff done so pure refactor PRs don't come along that often.

rating = 'average';
}
if (value > 0.66) {
rating = 'good';
}

return rating;
};

// Converts a name to a link.
Handlebars.registerHelper('nameToLink', name => {
return name.toLowerCase().replace(/\s/, '-');
Expand Down Expand Up @@ -79,22 +96,12 @@ class ReportGenerator {
return rating;
});

// Converts a value to a rating string, which can be used inside the report for color styling.
Handlebars.registerHelper('getItemRating', (value, aggregatorScored) => {
if (typeof value === 'boolean') {
return value ? 'good' : 'poor';
}

// Limit the rating to average if this is a rating for Best Practices.
let rating = aggregatorScored ? 'average' : 'poor';
if (value > 0.33) {
rating = 'average';
}
if (value > 0.66) {
rating = 'good';
}
// Converts a value to a rating string, which can be used inside the report
// for color styling.
Handlebars.registerHelper('getItemRating', getItemRating);

return rating;
Handlebars.registerHelper('showHelpText', value => {
return getItemRating(value) === 'good' ? 'hidden' : '';
});

// Convert numbers to fixed point decimals
Expand Down
12 changes: 12 additions & 0 deletions lighthouse-core/report/scripts/lighthouse-report.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,10 @@ function LighthouseReport() {
this.checkboxToggleView = document.querySelector('.js-toggle-view');
this.viewUserFeature = document.querySelector('.js-report-by-user-feature');
this.viewTechnology = document.querySelector('.js-report-by-technology');
this.itemDetails = document.querySelectorAll('.report-section__item-details');

this.updateView = this.updateView.bind(this);
this.toggleHelpText = this.toggleHelpText.bind(this);

this.addEventListeners();
}
Expand All @@ -47,9 +49,19 @@ LighthouseReport.prototype = {
}
},

toggleHelpText: function(e) {
if (e.target.classList.contains('report-section__item-help-toggle')) {
const el = e.currentTarget.parentNode.querySelector('.report-section__item-helptext');
Copy link
Contributor

Choose a reason for hiding this comment

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

depending directly on the parentNode structure feels like smell, and potentially brittle code that could break with a trivial dom change.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Moved the handlers up a level to each item in the report (.report-section__item). That should "guarantee" the help text falls within the currentTarget

el.hidden = !el.hidden;
}
},

addEventListeners: function() {
this.printButton.addEventListener('click', this.onPrint);
this.checkboxToggleView.addEventListener('change', this.updateView);
Array.from(this.itemDetails).forEach(node => {
Copy link
Contributor

Choose a reason for hiding this comment

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

[...this.itemDetails].forEach

should be fine, since itemDetails is an iterable

Copy link
Contributor Author

Choose a reason for hiding this comment

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

any advantage?

node.addEventListener('click', this.toggleHelpText);
});
}
};

Expand Down
23 changes: 23 additions & 0 deletions lighthouse-core/report/styles/report.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,6 +386,29 @@ a {
max-width: 90%;
}

.report-section__item-help-toggle {
color: currentColor;
border-radius: 50%;
width: 21px;
height: 21px;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.2s cubic-bezier(0,0,0.3,1);
font-size: 90%;
font-weight: 600;
margin-left: 8px;
vertical-align: top;
opacity: 0.6;
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.report-section__item-help-toggle:hover {
opacity: 1;
box-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

.report-section__item-raw-value {
color: #777;
}
Expand Down
7 changes: 6 additions & 1 deletion lighthouse-core/report/templates/report.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,15 +112,20 @@ <h1 class="report-section__subtitle">{{ aggregation.name }}</h1>
{{#if subItem.comingSoon}}
(Coming soon)
{{/if}}

{{#if subItem.helpText }}
<span class="report-section__item-help-toggle">?</span>
{{/if}}
</span>

{{#if subItem.displayValue }}
<span class="report-section__item-raw-value">({{ subItem.displayValue }})&nbsp;</span>
{{/if }}
<span class="report-section__item-value report-section__item-value--{{ getItemRating subItem.score }}">{{{ getItemValue subItem.score }}}</span>
</div>

{{#if subItem.helpText }}
<div class="report-section__item-helptext">
<div class="report-section__item-helptext" {{showHelpText subItem.score}}>
{{{ subItem.helpText }}}
</div>
{{/if}}
Expand Down