Bug 202428 – results.webkit.org: Standardize styles in the drawer

• Component: Tools / Tests
• Status: RESOLVED FIXED

[Jonathan Bedard]

At the moment, we have a disparate collection of font sizes, weights and colors in the control drawer. We should standardize these.

[Jonathan Bedard]

Created attachment 379939 [details]
Patch

[Jonathan Bedard]

Created attachment 379940 [details]
dark-mode-screenshot

[Jonathan Bedard]

Created attachment 379941 [details]
standard-screenshot

[Zhifei Fang]

Comment on attachment 379939 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=379939&action=review

> Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:2279
> +  font-color: var(--boldInverseColor);

Since bold is control by font-weight, maybe we should call this inverseColor ?

> Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:2334
> +  font-weight: calc(2.5 * var(--fontWeight));

We need overwrite the whole default user agent for input and select, better to have one extra section as:

select, input {
   font-weight: var(--fontWeight)
}

Webkit have a default font-weight:400 for select and input, only bold those seems weird to me. 
You may need to add this after line 478

> Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:2363
> +  color: var(--boldInverseColor);

if the input is disabled, it should have a different color. It should have a different color. Otherwise it will be hard for user to understand this input is disabled, you may need other --DisableInverseColor

[Jonathan Bedard]

Comment on attachment 379939 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=379939&action=review

>> Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:2363
>> +  color: var(--boldInverseColor);
> 
> if the input is disabled, it should have a different color. It should have a different color. Otherwise it will be hard for user to understand this input is disabled, you may need other --DisableInverseColor

We probably do want that long term, but for now, I'll just keep this the way it is.

[Zhifei Fang]

Comment on attachment 379939 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=379939&action=review

>>> Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:2363
>>> +  color: var(--boldInverseColor);
>> 
>> if the input is disabled, it should have a different color. It should have a different color. Otherwise it will be hard for user to understand this input is disabled, you may need other --DisableInverseColor
> 
> We probably do want that long term, but for now, I'll just keep this the way it is.

it is better to do a inline style if you want to keep the way it is.

[Jonathan Bedard]

Created attachment 379952 [details]
Patch

[Jonathan Bedard]

(In reply to Jonathan Bedard from comment #7)
> Created attachment 379952 [details]
> Patch

Doesn't actually change the way the results database looks, so I didn't update the screenshots.

[Jonathan Bedard]

(In reply to Zhifei Fang from comment #6)
> Comment on attachment 379939 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=379939&action=review
> 
> >>> Tools/resultsdbpy/resultsdbpy/view/static/library/css/webkit.css:2363
> >>> +  color: var(--boldInverseColor);
> >> 
> >> if the input is disabled, it should have a different color. It should have a different color. Otherwise it will be hard for user to understand this input is disabled, you may need other --DisableInverseColor
> > 
> > We probably do want that long term, but for now, I'll just keep this the way it is.
> 
> it is better to do a inline style if you want to keep the way it is.

Not actually sure why I changed it...by 'keep the way it is', I mean keeping it var(--greyDarker), not keeping my change (since I realize that was a bit ambiguous)

[Zhifei Fang]

unofficially r=me

[Aakash Jain]

rs=me

[Jonathan Bedard]

Created attachment 379963 [details]
Patch for landing

[WebKit Commit Bot]

Comment on attachment 379963 [details]
Patch for landing

Clearing flags on attachment: 379963

Committed r250587: <https://trac.webkit.org/changeset/250587>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Radar WebKit Bug Importer]

<rdar://problem/55895241>