report: show fail icon for errors #9272

connorjclark · 2019-06-24T18:26:06Z

Before:
See #9270

After:

patrickhulce

LGTM code-wise! defer to someone else on if the icon is what we want :)

patrickhulce · 2019-06-24T19:47:55Z

lighthouse-core/report/html/report-styles.css

@@ -705,11 +703,6 @@
  color: var(--color-fail-secondary);
 }

-/* Hide icon if there was an error */


old selves seemed fairly convinced we should intentionally, but why 🤔

#5077 seems to be the last time it was touched, so it's fair to say a lot has changed since then :)

seems to be the last time it was touched, so it's fair to say a lot has changed since then :)

It's a shame we didn't preserve much context. You were very excited @patrickhulce :)

One issue is conflation of lighthouse errors with audit failures, which is something some people already get confused about (thinking "Errror!" means their page had an error). I don't know what a better icon would be, though.

lol, yeah it's hard to tell which subchange specifically I was most excited about there, but I remember being super jazzed about the error tooltip and no more informative scores that people have no idea what they mean, so I'm guessing it's somewhat tangential to our change here?

agreed more context would've been helpful now. I also seems worth it to try to move these two states to be less similar in the UI given how frequently people confuse the Error for their page doing something wrong.

black hexagon (stop sign)?

@exterkamp "upside down red triangle. or an X"

paulirish · 2019-06-25T00:33:41Z

@yuinchien what icon should we use for audits with errors?

brendankenny · 2019-06-25T00:39:01Z

or should we be rendering it as normal with an icon at all

I also seems worth it to try to move these two states to be less similar in the UI given how frequently people confuse the Error for their page doing something wrong.

this is a really good question. Is there more we can do to show that

we tried to run this
we failed to run it
it was our fault not yours

connorjclark · 2019-06-25T00:48:21Z

strikethrough the entire row?

yuinchien · 2019-06-25T01:31:52Z

@paulirish @connorjclark @brendankenny
Question 1: the red error! labels, are these the LH runtime errors that users can't do anything about? I recalled we decided to consolidate these errors into a right side panel that can be collapsed, and show a "See runtime errors" button at the end of each audit category. OnClick will toggle open the panel and show the errors.

Question 2: the ? in the score seems to be the result of non applicable score. I wonder, if we can try emojis, and show more characters ^_^/ (Just some fun ideas)

If you must have an error icon, try this one: https://material.io/tools/icons/?search=error&icon=error&style=baseline

connorjclark · 2019-06-27T04:17:54Z

Just to solve this immediate issue, we'll go with the MD icon. other UI re: errors will probably be handled (heh) later on.

connorjclark · 2019-06-27T04:46:20Z

Updated after image.

The icon looks really bad at the regular score icon size, so I doubled it. This required some shifting to keep things lined up. I think the workaround isn't terrible (removed margin and translate a bit to the left).

connorjclark · 2019-06-27T04:46:51Z

lighthouse-core/report/html/report-styles.css

@@ -143,9 +143,8 @@
  --plugin-icon-url-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');
  --plugin-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="%23757575"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');

-  --pass-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>check</title><path fill="%23178239" d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z"/></svg>');
-  --average-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>info</title><path fill="%23E67700" d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4V22h4v12zm0-16h-4v-4h4v4z"/></svg>');


we weren't using these.

patrickhulce · 2019-06-27T13:49:38Z

I'm no designer so take with grain of salt but 2x feels like a smidge too far, a few px smaller perhaps 1.5?

brendankenny · 2019-06-27T20:04:12Z

lighthouse-core/report/html/report-styles.css

+  height: calc(var(--score-icon-size) * 2);
+  transform: translateX(-6px);
+  margin-right: 0;
+}


2x does seem too big. 1.7, 1.75?

Also, what do you think about using scaling instead of width/height to avoid the margin shenanigans. Like

.lh-audit--error .lh-audit__score-icon { background-image: var(--error-icon-url); transform: scale(1.7); }

@brendankenny is it possible to share a screenshot of the current icon size?

1x

1.7x:

2x:

one issue is that the scaling doesn't do great things to rendering of the !. It gets pretty muddled at less than a ~1.7x scale

Looking at this mock, i have more context for what you are trying to do.
The original Red triangle already signifies "Error", and doesn't need to be changed. Replacing it with the Material icon feels out of place and creates more confusion for users.

How about the most simple & literal approach like this:

The original Red triangle already signifies "Error", and doesn't need to be changed. Replacing it with the Material icon feels out of place and creates more confusion for users.

But today it's not an error, it signifies the page did poorly at something. A really bad FCP is very different than "something went wrong and LH has no idea what your FCP was".

One example of the confusion that sometimes pops up is in #8287

@brendankenny my understanding of Runtime Error is "something went wrong and LH doesn't know how to properly produce audit result/score". Maybe we should come up with a more clear label w/o having the word error in it? Something like "Audit invalid", or "Audit unavailable", or "Invalid result" ?

As for the big score with ? mark, might be good to have a info tooltip briefly explain why the score is unavailable.

paulirish · 2019-10-11T04:25:10Z

after today's call, we have a new plan for this: the "thick bang" icon.

yuinchien · 2019-10-11T04:33:42Z

Please see mocks in #9820

connorjclark · 2020-09-02T17:39:23Z

Are we still good with the thick bang mock?

patrickhulce · 2020-09-02T17:48:19Z

related #9968 (comment)

seems like this PR addresses one of those two AIs, I'm cool with the exclamation 👍

report: show fail icon for errors

8984f34

connorjclark requested a review from paulirish as a code owner June 24, 2019 18:26

googlebot added the cla: yes label Jun 24, 2019

patrickhulce reviewed Jun 24, 2019

View reviewed changes

connorjclark mentioned this pull request Jun 24, 2019

report: use css grid for metrics #9273

Merged

use md icon

7ed1598

vercel bot deployed to staging June 27, 2019 04:44 View deployment

connorjclark commented Jun 27, 2019

View reviewed changes

brendankenny reviewed Jun 27, 2019

View reviewed changes

paulirish added the chillin ❄ label Oct 11, 2019

connorjclark added the needs-discussion label Sep 2, 2020

paulirish added waiting4committer and removed needs-discussion labels Sep 21, 2020

paulirish added the pr-bankruptcy label Apr 25, 2022

tannerdolby mentioned this pull request May 11, 2023

Runtime Error Design Update #9820

Closed

tannerdolby mentioned this pull request May 18, 2023

report: update error icons #15092

Merged

adamraine requested a review from a team as a code owner November 1, 2023 20:13

adamraine closed this Dec 4, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

report: show fail icon for errors #9272

report: show fail icon for errors #9272

connorjclark commented Jun 24, 2019 •

edited

Loading

patrickhulce left a comment

patrickhulce Jun 24, 2019

patrickhulce Jun 24, 2019

brendankenny Jun 24, 2019

patrickhulce Jun 24, 2019

connorjclark Jun 24, 2019

connorjclark Jun 24, 2019

paulirish commented Jun 25, 2019

brendankenny commented Jun 25, 2019

connorjclark commented Jun 25, 2019

yuinchien commented Jun 25, 2019

connorjclark commented Jun 27, 2019

connorjclark commented Jun 27, 2019

connorjclark Jun 27, 2019

patrickhulce commented Jun 27, 2019

brendankenny Jun 27, 2019

yuinchien Jun 27, 2019

brendankenny Jun 27, 2019

brendankenny Jun 27, 2019

yuinchien Jun 27, 2019

brendankenny Jul 9, 2019

yuinchien Jul 9, 2019

paulirish commented Oct 11, 2019

yuinchien commented Oct 11, 2019

connorjclark commented Sep 2, 2020

patrickhulce commented Sep 2, 2020

report: show fail icon for errors #9272

report: show fail icon for errors #9272

Conversation

connorjclark commented Jun 24, 2019 • edited Loading

patrickhulce left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paulirish commented Jun 25, 2019

brendankenny commented Jun 25, 2019

connorjclark commented Jun 25, 2019

yuinchien commented Jun 25, 2019

connorjclark commented Jun 27, 2019

connorjclark commented Jun 27, 2019

Choose a reason for hiding this comment

patrickhulce commented Jun 27, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

1x

1.7x:

2x:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paulirish commented Oct 11, 2019

yuinchien commented Oct 11, 2019

connorjclark commented Sep 2, 2020

patrickhulce commented Sep 2, 2020

connorjclark commented Jun 24, 2019 •

edited

Loading