jQuery-UI dialog box 'x' button image is missing (Userscript in Greasemonkey 4.1beta4)

Question

I use Greasemonkey 4.1beta4 (latest beta) in FF57.
With the following script ^{(for reference, here is the full script)}
the dialog box is indeed created, but unfortunately it has an empty gray square where the close icon should be:

// ==UserScript==
// @name        jQuery UI dialog
// @include     /^https?:\/\/hg\.mozilla\.org.*pushloghtml.*/
// @require     https://code.jquery.com/jquery-2.1.4.min.js
// @require     https://code.jquery.com/ui/1.12.1/jquery-ui.min.js
// @resource    css http://code.jquery.com/ui/1.12.1/themes/redmond/images/ui-icons_469bdd_256x240.png
// @grant       GM.getResourceUrl
// ==/UserScript==

//  I use an ajax request in the beginning in order to inject the CSS file, otherwise it's blocked by the page's CSP
$.ajax({
    url:'http://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.min.css',
    success:function(data){
        $('<style></style>').appendTo('head').html(data);
    }
});

var div = document.createElement('div');
$('div.page_footer').append(div);
div.id = 'dialog';

$('#dialog').dialog({
});

Example page where the script applies to:
https://hg.mozilla.org/mozilla-central/pushloghtml?startdate=1+day+ago&enddate=now

I saw in this question that the problem is that I don't include the sprite image (which for the theme I use it's http://code.jquery.com/ui/1.12.1/themes/redmond/images/ui-icons_469bdd_256x240.png).

So, I've been trying to use the sprite image (PNG) as background (CSS) to that element , based on this reply.

Below are my 4 unsuccessful attempts so far (appending each of the following parts to the above):

GM.getResourceUrl() (inside async/await, due to GM 4.x)

(In this case the close box just changes color to light blue)

(async function() {
    var stylesheet = `
    <style>
    .ui-dialog-titlebar-close {
      background: url('` + await GM.getResourceUrl("css1") + `') repeat scroll -93px -128px rgba(0, 0, 0, 0) !important;
      border: medium none;
    }
    </style>`;
    $('head').append(stylesheet);
})();

encode the PNG to base64 and try to append it:
(in this case the PNG is indeed loaded (as seen in FF'S Inspector), but the close box just changes color to light blue)
screenshot

var stylesheet = `
<style>
.ui-dialog-titlebar-close {
  background: url('data:image/png;base64,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')
repeat scroll -93px -128px rgba(0, 0, 0, 0) !important;
  border: medium none;
}
</style>`;
$('head').append(stylesheet);

Here is what is shown in Web Console in this case:

Content Security Policy: The page’s settings blocked the loading of a resource at data:image/png;base64,iVBORw0KGgoAAAANSU... (“img-src https://hg.mozilla.org”).

ajax request, and use the response as PNG
(the close box just changes color to light blue)

$.ajax({
    url:'http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_888888_256x240.png',
    type: 'POST',
    contentType: 'image/png',
    data: {},
    success:function(data){
        $('.ui-dialog-titlebar-close').css('background', 'url(' + data + ')');
    }
});

XMLHttpRequest(); (here the target PNG -as blob- it's blocked by the page's CSP)

var oReq = new XMLHttpRequest();
oReq.open("post", 'http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_888888_256x240.png', true );
oReq.responseType = "blob";
oReq.onload = function ( oEvent )
{
    var blob = oReq.response;
    var imgSrc = URL.createObjectURL( blob );
    $('.ui-dialog-titlebar-close').css('background', 'url(' + imgSrc + ')');
};
oReq.send( null );

Here is what is shown in Web Console in this case:

Content Security Policy: The page’s settings blocked the loading of a resource at blob:https://hg.mozilla.org/b0197e3c-3323-4f43-bdc8-3c2fb663748d (“img-src https://hg.mozilla.org”).

How can I make the X button appear?

Your snippet does not match the script you linked. Anywho, it should be enough to inject the CSS, not the image. **But it needs to be a `` tag.** The images are pulled in by the CSS. Does the script work in Tampermonkey in FF 57? Does the script work on a decent browser (or FF 56, or FF LTS)? — Brock Adams, Nov 26 '17 at 02:55
It's just a reduced test case of the full script. Note: the linked version 4.2.3 is aimed to be compatible FF57 with GM 4.x, and I just saw that unfortunately it works (with no button icon) only with GM 4.x (in TM it only shows a "hovering Close button" https://i.imgur.com/aZLrfK5.jpg ). But, the previous version 4.2.2 (https://greasyfork.org/en/scripts/19358-firefox-for-desktop-list-fixed-bugs-in-mercurial?version=173817) works ok (but no button icon in any case) in both TM with FF57 as well as in FF56 with GM 3.17 or FF52 LTS with GM 3.9 . — darkred, Nov 26 '17 at 03:53
Did you try the `` syntax? That's the way that normally works. — Brock Adams, Nov 26 '17 at 03:55
No, I hadn't. So (if I understand you correctly) I just tried replacing the `$.ajax` part (in the in the initial/first code, in my question post) with `$('head').append('');` but now it only shows a hovering 'Close' button. — darkred, Nov 26 '17 at 04:32
Whelp, that Mozilla CSP is a PITA. You can use a `@resource` and rewrite technique similar to what's shown in [this answer](https://stackoverflow.com/a/11532646/). Good luck with that; I'm done with Mozilla. — Brock Adams, Nov 26 '17 at 04:57
`GM.getResourceText` is still not supported in GM 4.x (https://github.com/greasemonkey/greasemonkey/issues/2548). If/when they do, I 'll report here whether it works. I've tried the code in the answer you linked (only changed `$('#editor').resizable` to `$('#dialog').dialog()` ) and it works ok up to FF56 with GM 3.17 (no icon with TM in any version). Thanks a lot for your time. — darkred, Nov 26 '17 at 16:47
You're welcome and good luck. That approach should work in TM too; I'll look into it the next time it comes up. — Brock Adams, Nov 26 '17 at 19:42
Correction: that code works ok, i.e. the X button image icon is visible (https://i.imgur.com/VhyTLpz.jpg), in Firefox versions up to FF 55, i.e. it's not visible in the later versions, FF 56 and 57 (always with GM 3.17). Also, the X button image is not visible with TM in any FF version I tried (the oldest being FF 52). — darkred, Nov 26 '17 at 21:59

jQuery-UI dialog box 'x' button image is missing (Userscript in Greasemonkey 4.1beta4)

0 Answers0