Closed Bug 1349520 Opened 7 years ago Closed 7 years ago

Font preview tooltip are hard to read with the checkered background


(DevTools :: Inspector, enhancement, P3)



(firefox55 fixed)

Firefox 55
Tracking Status
firefox55 --- fixed


(Reporter: jdescottes, Assigned: sy.fen0)




(2 files, 1 obsolete file)

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

Other relevant files are devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js (createImageTooltip method) and devtools/server/actors/inspector.js (getFontFamilyDataURL method)
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.
Attached patch bug1349520.patch (obsolete) — Splinter Review
Assignee: nobody → sy.fen0
Attachment #8850118 - Flags: review?(jdescottes)
Comment on attachment 8850118 [details] [diff] [review]

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+
Attached patch bug1349520.patchSplinter Review
Attachment #8850118 - Attachment is obsolete: true
Attachment #8852182 - Flags: ui-review?(jdescottes)
Comment on attachment 8852182 [details] [diff] [review]

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+
Hey Julian,
Thanks for the tip, I'll follow this when commit here, thanks!
Priority: -- → P3
Pushed by
disable checkered background for font preview tooltips;r=jdescottes
Closed: 7 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 55
Thanks for fixing this Stefan! 

Your patch will now ride the trains and be released with Firefox 55.
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

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