Font preview tooltip are hard to read with the checkered background

RESOLVED FIXED in Firefox 55

Status

P3
normal
RESOLVED FIXED
2 years ago
8 months ago

People

(Reporter: jdescottes, Assigned: sy.fen0)

Tracking

unspecified
Firefox 55

Firefox Tracking Flags

(firefox55 fixed)

Details

Attachments

(2 attachments, 1 obsolete attachment)

(Reporter)

Description

2 years ago
Created attachment 8849966 [details]
font_preview_checkered.png

Bug 1067999 added a checkered background for transparent images. 

The font preview tooltip is created by generating a canvas containing the preview text, on a transparent background. The new checkered background feels inadequate here, making the text harder to see.

We can either add a special classname to the font-preview tooltip element that prevents adding the checkered background.

Or we can modify the way the canvas is created to draw a background behind the text.

Font preview tooltip is created at http://searchfox.org/mozilla-central/rev/0079c7adf3b329bff579d3bbe6ac7ba2f6218a19/devtools/client/inspector/shared/tooltips-overlay.js#266-284

Other relevant files are devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js (createImageTooltip method) and devtools/server/actors/inspector.js (getFontFamilyDataURL method)
(Assignee)

Comment 1

2 years ago
what if we pass some flag on options argument?

on _setFontPreviewTooltip we can pass in options object something like: `{hideDimensionLabel: true, maxDim, naturalWidth, naturalHeight, noCheckeredBackground: true}`

this `noCheckeredBackground` flag could be checked on `setImageTooltip` function to remove checkered background.

I go for this way because always have `hideDimensionLabel` flag on that options object.
(Assignee)

Comment 2

2 years ago
Created attachment 8850118 [details] [diff] [review]
bug1349520.patch
Assignee: nobody → sy.fen0
Attachment #8850118 - Flags: review?(jdescottes)
(Reporter)

Comment 3

2 years ago
Comment on attachment 8850118 [details] [diff] [review]
bug1349520.patch

Review of attachment 8850118 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good to me! 

A few nits and this should be ready to land.

::: devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js
@@ +56,5 @@
>   *        - {Number} naturalHeight mandatory, height of the image to display
>   *        - {Number} maxDim optional, max width/height of the preview
>   *        - {Boolean} hideDimensionLabel optional, pass true to hide the label
> + *        - {Boolean} hideCheckeredBackground optional, pass true to hide
> +                      checkeredBackground

nit: to hide checkeredBackground -> to hide the checkered background

@@ +65,2 @@
>    maxDim = maxDim || MAX_DIMENSION;
> +  hideCheckeredBackground = hideCheckeredBackground || false;

not needed here, we can let hideCheckeredBackground be falsy

@@ +74,4 @@
>      imgWidth = Math.ceil(scale * naturalWidth);
>    }
>  
> +  let tooltipClass = "devtools-tooltip-tiles";

nit: we usually do this the other way around.

let tooltipClass = "";

if (!hideCheckeredBackground) {
  tooltipClass = "devtools-tooltip-tiles";
}

@@ +94,4 @@
>                  align-items: center;
>                  justify-content: center;
>                  min-height: 1px;">
> +      <img class="${tooltipClass}"

maybe imageClass rather than tooltipClass here?
Attachment #8850118 - Flags: review?(jdescottes) → review+
(Assignee)

Comment 4

2 years ago
Created attachment 8852182 [details] [diff] [review]
bug1349520.patch

Updated.
Attachment #8850118 - Attachment is obsolete: true
Attachment #8852182 - Flags: ui-review?(jdescottes)
(Reporter)

Comment 5

2 years ago
Comment on attachment 8852182 [details] [diff] [review]
bug1349520.patch

Review of attachment 8852182 [details] [diff] [review]:
-----------------------------------------------------------------

Thanks for the update Stefan! 

For the record, you should include "r=reviewer" (so here r=jdescottes) at the end of the changeset summary :)
Also the message should be about what you did rather than what the issue was.

So for instance here "Bug 1349520 - disable checkered background for font preview tooltips;r=jdescottes"
I will amend your changeset and push it to inbound. Thanks for fixing this!
Attachment #8852182 - Flags: ui-review?(jdescottes) → review+
(Assignee)

Comment 6

2 years ago
Hey Julian,
Thanks for the tip, I'll follow this when commit here, thanks!
Priority: -- → P3

Comment 7

2 years ago
Pushed by jdescottes@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/461e047c199d
disable checkered background for font preview tooltips;r=jdescottes

Comment 8

2 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/461e047c199d
Status: NEW → RESOLVED
Last Resolved: 2 years ago
status-firefox55: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 55
(Reporter)

Comment 9

2 years ago
Thanks for fixing this Stefan! 

Your patch will now ride the trains and be released with Firefox 55.

Comment 10

2 years ago
I have reproduced this bug with Nightly 55.0a1(2017-03-22) on Windows 10, 64 bit!

The Bug's fix is now verified on Latest Nightly 55.0a1

Build ID 	20170404030204
User Agent 	Mozilla/5.0 (Windows NT 10.0; WOW64; rv:55.0) Gecko/20100101 Firefox/55.0

[bugday-20170405]

Updated

8 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.