1349520 - Font preview tooltip are hard to read with the checkered background

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[Julian Descottes [:jdescottes]]

Attachment: 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)

Comment 1

[Stefan Yohansson]

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.

Comment 2

[Stefan Yohansson]

Attachment: bug1349520.patch

Comment 3

[Julian Descottes [:jdescottes]]

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?

Comment 4

[Stefan Yohansson]

Attachment: bug1349520.patch

Updated.

Comment 5

[Julian Descottes [:jdescottes]]

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!

Comment 6

[Stefan Yohansson]

Hey Julian,
Thanks for the tip, I'll follow this when commit here, thanks!

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/461e047c199d
disable checkered background for font preview tooltips;r=jdescottes

Comment 8

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/461e047c199d

Comment 9

[Julian Descottes [:jdescottes]]

Thanks for fixing this Stefan! 

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

Comment 10

[Tanvir Rahman]

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]