Bug 1349520 - disable checkered background for font preview tooltips;r=jdescottes

Added flag hideCheckeredBackground to hide checkered background if pass true.

MozReview-Commit-ID: FOQO59xqGvt

--HG--
extra : rebase_source : 839fdba629d3eac77ea37509bb049a233c72a163

devtools/client/inspector/shared/tooltips-overlay.js

@@ -280,7 +280,8 @@ TooltipsOverlay.prototype = {
     let {naturalWidth, naturalHeight} = yield getImageDimensions(doc, imageUrl);
 
     yield setImageTooltip(this.previewTooltip, doc, imageUrl,
-      {hideDimensionLabel: true, maxDim, naturalWidth, naturalHeight});
+      {hideDimensionLabel: true, hideCheckeredBackground: true,
+       maxDim, naturalWidth, naturalHeight});
   }),
 
   _onNewSelection: function () {

devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js

@@ -56,9 +56,12 @@ function getImageDimensions(doc, imageUrl) {
  *        - {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
+                      the checkered background
  */
 function setImageTooltip(tooltip, doc, imageUrl, options) {
-  let {naturalWidth, naturalHeight, hideDimensionLabel, maxDim} = options;
+  let {naturalWidth, naturalHeight, hideDimensionLabel,
+       hideCheckeredBackground, maxDim} = options;
   maxDim = maxDim || MAX_DIMENSION;
 
   let imgHeight = naturalHeight;
@@ -70,6 +73,11 @@ function setImageTooltip(tooltip, doc, imageUrl, options) {
     imgWidth = Math.ceil(scale * naturalWidth);
   }
 
+  let imageClass = "";
+  if (!hideCheckeredBackground) {
+    imageClass = "devtools-tooltip-tiles";
+  }
+
   // Create tooltip content
   let div = doc.createElementNS(XHTML_NS, "div");
   div.style.cssText = `
@@ -85,7 +93,7 @@ function setImageTooltip(tooltip, doc, imageUrl, options) {
                 align-items: center;
                 justify-content: center;
                 min-height: 1px;">
-      <img class="devtools-tooltip-tiles"
+      <img class="${imageClass}"
            style="height: ${imgHeight}px; max-height: 100%;"
            src="${imageUrl}"/>
     </div>`;