You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@wicket.apache.org by Maxim Solodovnik <so...@gmail.com> on 2020/02/08 17:43:01 UTC

Browser DevTools and wicket-ajax-jquery

Hello All,

recently I found it is hard to check/edit CSS in browser DevTools
After some investigation i found the issue is cased by "cross browser way
to check when the css is loaded" in wicket-ajax-jquery

I would like to propose to change it as follows
---
a/wicket-core/src/main/java/org/apache/wicket/ajax/res/js/wicket-ajax-jquery.js
+++
b/wicket-core/src/main/java/org/apache/wicket/ajax/res/js/wicket-ajax-jquery.js
@@ -1821,28 +1821,21 @@
                                                        $css.attr(this.name,
this.value);
                                                });

-                                               // add element to head
-                                               Wicket.Head.addElement(css);
-
-                                               // cross browser way to
check when the css is loaded
-                                               // taken from
http://www.backalleycoder.com/2011/03/20/link-tag-css-stylesheet-load-event/
-                                               // this makes a second GET
request to the css but it gets it either from the cache or
-                                               // downloads just the first
several bytes and realizes that the MIME is wrong and ignores the rest
-                                               var img =
document.createElement('img');
                                                var notifyCalled = false;
-                                               img.onerror = function () {
+                                               css.onerror = function () {
                                                        if (!notifyCalled) {

notifyCalled = true;
                                                                notify();
                                                        }
                                                };
-                                               img.src = css.href;
-                                               if (img.complete) {
-                                                 if (!notifyCalled) {
-                                                       notifyCalled = true;
-                                                       notify();
-                                                 }
+                                               css.onload = function () {
+                                                       if (!notifyCalled) {
+
notifyCalled = true;
+                                                               notify();
+                                                       }
                                                }
+                                               // add element to head
+                                               Wicket.Head.addElement(css);

                                                return
FunctionsExecuter.ASYNC;
                                        });


It work as expected in Chrome/Chromium/FF/IE11 latest
Unfortunately I was unable to test using Edge
Is it worth PR?

-- 
WBR
Maxim aka solomax

Re: Browser DevTools and wicket-ajax-jquery

Posted by Martin Grigorov <mg...@apache.org>.
Just for the reference: https://github.com/apache/wicket/pull/404

On Sat, Feb 8, 2020 at 7:43 PM Maxim Solodovnik <so...@gmail.com>
wrote:

> Hello All,
>
> recently I found it is hard to check/edit CSS in browser DevTools
> After some investigation i found the issue is cased by "cross browser way
> to check when the css is loaded" in wicket-ajax-jquery
>
> I would like to propose to change it as follows
> ---
>
> a/wicket-core/src/main/java/org/apache/wicket/ajax/res/js/wicket-ajax-jquery.js
> +++
>
> b/wicket-core/src/main/java/org/apache/wicket/ajax/res/js/wicket-ajax-jquery.js
> @@ -1821,28 +1821,21 @@
>                                                         $css.attr(
> this.name,
> this.value);
>                                                 });
>
> -                                               // add element to head
> -
>  Wicket.Head.addElement(css);
> -
> -                                               // cross browser way to
> check when the css is loaded
> -                                               // taken from
>
> http://www.backalleycoder.com/2011/03/20/link-tag-css-stylesheet-load-event/
> -                                               // this makes a second GET
> request to the css but it gets it either from the cache or
> -                                               // downloads just the first
> several bytes and realizes that the MIME is wrong and ignores the rest
> -                                               var img =
> document.createElement('img');
>                                                 var notifyCalled = false;
> -                                               img.onerror = function () {
> +                                               css.onerror = function () {
>                                                         if (!notifyCalled)
> {
>
> notifyCalled = true;
>                                                                 notify();
>                                                         }
>                                                 };
> -                                               img.src = css.href;
> -                                               if (img.complete) {
> -                                                 if (!notifyCalled) {
> -                                                       notifyCalled =
> true;
> -                                                       notify();
> -                                                 }
> +                                               css.onload = function () {
> +                                                       if (!notifyCalled)
> {
> +
> notifyCalled = true;
> +                                                               notify();
> +                                                       }
>                                                 }
> +                                               // add element to head
> +
>  Wicket.Head.addElement(css);
>
>                                                 return
> FunctionsExecuter.ASYNC;
>                                         });
>
>
> It work as expected in Chrome/Chromium/FF/IE11 latest
> Unfortunately I was unable to test using Edge
> Is it worth PR?
>
> --
> WBR
> Maxim aka solomax
>