I finished my work. It looks good to me. However, I encourage you to submit your suggestions.

@ashb Can I ask for review?

Codecov Report

Merging #4787 into master will decrease coverage by 1.67%.
The diff coverage is 87.5%.

@@            Coverage Diff             @@
##           master    #4787      +/-   ##
==========================================
- Coverage   80.02%   78.35%   -1.68%     
==========================================
  Files         594      467     -127     
  Lines       34769    29771    -4998     
==========================================
- Hits        27824    23326    -4498     
+ Misses       6945     6445     -500

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6fb8217...b1edcff. Read the comment docs.

I'd use data- attributes for this simplification instead of adding meta tags.
It's pretty common to pass values from html tags to javascript using data- attributes. Something like this: https://github.com/verdan/incubator-airflow/pull/10/files#diff-144f95ea05d0c8420d739f38ce8caa04R33
And yes, by doing it through data attributes you can easily get the value by using something like this

$('#ELEMENT_ID').data('DATA_ATTRIBUTE_NAME');

Not all variables have an assigned element. in other cases, this will complicate the code unnecessarily ex. csrf token. In other cases, I will try to introduce your change.

You can add new empty html span tags, just the way you introduced the meta tags in the PR.
You can get the idea here.

I do not know if adding empty elements in a body is a good idea. HEAD better describes the purpose and use of the code. It is clearer for me.

The body element represents the content of the document.

https://www.w3.org/TR/html5/sections.html#the-body-element

The head element represents a collection of metadata for the Document.

https://www.w3.org/TR/html5/document-metadata.html#the-head-element

The CSRF token is not associated with a specific document element, but it's a metadata for current page.

The fact that there is a function in jQuery is not a reason for me to use it.

True, that the CSRF token here is a metadata and not associated with any element. That was just an idea to use the empty tags, you can of course use data attributes on the top container as this is more relevant there. Up to you how you want to handle this.

@ashb i updated a PR.Now, code bluring is done without JS. Hostname/Clock code has been simplified

I'd love to see this get merged.

In #4893 (adding time-zone support on the UI), I've also been wrestling with how to invoke Javascript functions with Jinja-templated variables supplied by the server as arguments. The approach I settled on was to expose these functions in a webpack library and invoke them from inline scripts (example).

The approach in this PR seems cleaner though, since it gets rid of inline scripting altogether.

I chose the easiest way (global) to call the code, because it plans to extract all JS to separate files and then manage the dependencies in a modern/ES6 way. My solution will not require any changes in the code (except utils.js), but only the addition of correct imports that will load the functions into the current scope.

@mik-laj -> are you still working on that? I will be happy to take a look once it is ready.

@potiuk Yes. I'm working on it. I think it's finished, but I did not have time to make sure it was merged. In addition, the previous commiter was busy preparing a new release of Airflow and I did not want to take his time.

I did rebase. I had to make one change because of #5059 but the rest of changes remained unchanged.

PTAL @ashb @potiuk

@mik-laj BTW I found when looking for something else that Flask-AppBuilder has inline script tags too, so to enforce our CSP policy we'd need to do a bit of work there in that project too (or to customize the base templates further)

@ashb, in the future, we can also deal with this problem. It's important to me that ESLInt will work right now. I want to do small steps to improve Javascript code

@mik-laj absolutely. I just mentioning it before I forget. Looking at this right now.

What's the status of this PR?

Do you want to work on it? Unfortunately, I'm busy and I don't have time to finish it. I will be happy if someone take my changes and finishes them. I am going on vacation in 5 hours, so I will be AFK for a week.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.