Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Update JQuery & JQueryUI #3813

Closed
sgiehl opened this Issue · 105 comments

5 participants

Stefan Giehl Timo B. Matthieu Aubry Gregor Aisch Fabian Becker
Stefan Giehl
Collaborator

We need to do an update of JQuery and JQueryUI.

JQuery 1.7.2 -> 1.9.1
JQueryUI 1.8.22 -> 1.10.2

As the last update was quite a long time ago, there might be some code changes required...

Stefan Giehl
Collaborator

Note to myself: Have a look at https://github.com/jquery/jquery-migrate/#readme

Stefan Giehl
Collaborator

The history plugin we are using doesn't work with new jquery version. Unfortunatly it is not maintained anymore (see http://tkyk.github.com/jquery-history-plugin/). I'll try to fix that plugin or look for something to use instead

Stefan Giehl
Collaborator

It might also be possible to remove the jquery.tooltip plugin. It is not maintained anymore and jquery ui has now also a tooltip widget included...

Stefan Giehl
Collaborator

We will also have to update jqplot. As the old version doesn't work with new jquery

Gregor Aisch
Collaborator

FYI: I tried to upgrade while working on the map widget, but that opened a door to hell so I stopped it after two lost hours or so.

Stefan Giehl
Collaborator

In 5e59c59: refs #3813 jquery, jqueryui & jqplot update + some fixes

Stefan Giehl
Collaborator

In ab52eb7: refs #3813 jqueryui css update + dialog fixes

Stefan Giehl
Collaborator

In 5667e91: refs #3813 widget reload on changing column layout was broken

Stefan Giehl
Collaborator

In f3806a2: refs #3813 readding jQuery.browser plugin, as it has been removed in 1.9

Stefan Giehl
Collaborator

In b5ab89c: refs #3813 css files in libs folder should always be included first, so they can be overwritten in piwik css as clean as possible

Stefan Giehl
Collaborator

In 237517a: refs #3813 use piwik tooltip styling for map tooltips

Stefan Giehl
Collaborator

In f61bbbc: refs #3813 use jqueryui tooltip plugin instead of piwiks selfmade one for datatables

Stefan Giehl
Collaborator

In ed55758: refs #3813 use jqueryui tooltip plugin instead of piwiks selfmade one for transitions

Stefan Giehl
Collaborator

In 7c58481: refs #3813 use jqueryui tooltip plugin instead of piwiks selfmade one for overlay

Stefan Giehl
Collaborator

In 82de4cc: refs #3813 use jqueryui tooltip plugin instead of piwiks selfmade one for jqplot graphs

Stefan Giehl
Collaborator

In b823598: refs #3813 removing now unused piwik tooltip.js

Stefan Giehl
Collaborator

In 0048ce3: refs #3813 minified jqplot

Stefan Giehl
Collaborator

In 670a0d2: refs #3813 upgrade to jQueryUI 1.10.2

Stefan Giehl
Collaborator

In f563073: refs #3813 fixed language selector: always use form to post data, as token_auth is required for users so setting a correct link is obsolete now

Timo B.
Collaborator

In 7fd5e00: refs #3813 polishing tooltip a little: using arial and same font size for title as table headings

Timo B.
Collaborator

Stefan, did you use fade-in for showing the tooltip on purpose? IMHO, it's not ideal in some cases.

For example:

  • When you open a row action popover, the tip stays there for a second and fades out quite slowly. This looks a little broken because it's above the popover background.
  • In Transitions, when an item on the left or right has multiple lines and you move the mouse from one line to the next, the tip fades out an in. (Tested in Chrome and Safari)
  • While fading, the tooltip moves not really fluidly. To me, that feels like you have to be careful not to break it when using the UI.
  • In Transitions, when you hover an item in the center, it says X% of all page views. When you leave the item and move your mose down, you might put your mouse on the tooltip while it's fading out. This prevents the next tooltip from showing. This happend to me a number of times and it took me a while to figure out that this is because I move my mouse over the fading tooltip and then stop moving. As a result, tooltips sometimes don't show up and it feels a little broken.

So I would propose not to use fade-in and all these items should be fixed. What do you think?

Is there a way to set the default options for $.toolip? Or would we have change every call?

Stefan Giehl
Collaborator

Currenty the default behaviour is used.
I don't think a global config is possible. I'll change every call and disable animations.

Stefan Giehl
Collaborator

In 6defcda: refs #3813 disabled animations for tooltips

Stefan Giehl
Collaborator

I'll close that ticket for now. If there are any regressions please reopen.

Matthieu Aubry
Owner

Superb commits... It is very useful to use these latest versions.

Feedback:

  • would it be possible to remove the jquery.browser.js? asking because the lib is deprecated
  • Maybe not a regression of this change, but on Widget view for a report, clicking "Row evolution" icon reloads the view rather than loading popover.
  • When a widget is maximised, clicking on the background should close the popover. Currently it does not. Clicking the "X" icon top right still works OK.
  • Note sure if it's a regression: Row Evolution popover eg. for Countries, or for Search engines Row Evolution, display the html code of the Icon, instead of displaying the icon in the popover title.

Great work anyway, works nicely.

Btw, are there other JS libraries, or JS plugins, we could update to their latest versions as well?

Stefan Giehl
Collaborator

I considered replacing jquery.browser, but I don't think it makes sense, so I readded it as a "plugin". jQuery suggests to replace it with one of those feature detection frameworks.
Also kartograph.js uses jquery.browser and I guess greg would have to change that there...

I'll have a look at your regressions and fix them asap.

I had a look at the other jquery plugins we are still using, but there aren't any newer versions.

Stefan Giehl
Collaborator

In 87d16ae: refs #3813 fixed maximised widgets not closing on click outside

Stefan Giehl
Collaborator

In 089b7df: refs #3813 allow html for popover dialog title

Matthieu Aubry
Owner

I deployed these fixes on demo and it now works!

The last feedback would be to allow Row evolution and other RowActions in Widgetize mode, and maybe have a rule to enable them only if Width available > 700 or so.

Timo B.
Collaborator

Thanks for the updates, it's almost perfect now...

When a row action is clicked, the tooltip is not hidden immediately (i.e. in the click event). In Transitions, it is hidden once the popover content is loaded (which can be seconds after the click). For Row Evolution and Overlay, it is not hidden at all (at least as long as the mouse is not moved).
Could you hide the tooltip in the click event?

Stefan Giehl
Collaborator

@EZdesign: I can't reproduce that behavior. Which browser are u using?

Timo B.
Collaborator

It happens to me in Chrome and Safari. I didn't check other browsers.

Stefan Giehl
Collaborator

The tooltip of the rowaction is always hidden correct. But in a row with a row tooltip (truncated content) that tooltip sometimes shows up instead. I guess it's that what you mean? I'm not sure how to fix that, but I'll have a look.

Timo B.
Collaborator

Stefan, I just sent you an email with a screen capture of the issue.

Timo B.
Collaborator

Attachment: After searching, the default jQuery UI style shows up
Website selector style.png

Timo B.
Collaborator

I just noticed another detail (see attachment I just uploaded). I'm not entirely sure this belongs here but I think it didn't happen before.

Reproduce:

  • Open website selector
  • Search
  • Hover a search result
Stefan Giehl
Collaborator

I'll have look. Guess that happens because the new jQueryUI has new classnames at some points

Stefan Giehl
Collaborator

In 3e002e6: refs #3813 fixed adding new websites/users. note: jQuery('htmlString') doesn't work anymore if htmlString doesn't start with '<' - use jQuery(jQuery.parseHTML('htmlString')) instead

Stefan Giehl
Collaborator

In 75382f8: refs #3813 fixed hover layout of site selector items

Matthieu Aubry
Owner

Updated demo to beta5.

  • Click on black popover background does not close the popover. Reproduce: Click on "Give us feedback" then click on the background
  • The tooltip looks great.
  • However it is wrapped too early. It should display, when possible (up to a max width maybe 600px?), the text on one line. This is because the tooltip will be displayed often when the text is long, and it looks much better to show such text (often a URL or a keyword) in one line. See attached file showing issue.
  • on this report there is a funny space in "Pages Following a Site Search" (see attached file)

  • When adding a new website, "Keep URL fragment" is double HTML entitied (see screenshot)

Timo B.
Collaborator

Attachment: chart before (without line on the left)
chart before.png

Timo B.
Collaborator

Attachment: chart after (with line on the left)
chart after.png

Timo B.
Collaborator

I noticed a small but kinda ugly change in the evolution chart (see screenshots above).

jplot is now embedded as jqplot-custom.min.js. I can't debug the minified script. How can I build the minified script? Can Anthon or Stefan (who generated the script previously) place a README in the jqplot folder that explains the process?

The line is drawn on jqplot-grid-canvas, so it should be somewhere in jqplot.canvasGridRenderer.js. It's either a new parameter or a regression. I tried all documented parameters that seemed related but couldn't hide the line. I think we have to debug in the jqplot code.

Alternatively, we could revert the update. We don't depend on new jqplot features so using the old version would be OK - not ideal though.

Stefan Giehl
Collaborator

I don't know how anthon did that before. I had written a simple script that minified those files using the jsmin class.

Using the old version of jqplot didn't work with new jquery, that was the reason I upgraded it.

Stefan Giehl
Collaborator

@matt: I guess the url fragment thing got broken with your mass commit. There are whitspaces within the html tags. See https://github.com/piwik/piwik/blame/master/plugins/SitesManager/templates/SitesManager.tpl#L50
I'll fix that and the other regressions later...

Timo B.
Collaborator

Could you add the script to the jqplot folder so that we can just call it in the future to re-generate the minified file?

Fabian Becker
Collaborator

@sgiehl can you try and fix it as soon as possible - I will have to work on this template today (in my branch) and would like to avoid horrible merge conflicts with Smarty/Twig.

Timo B.
Collaborator

In c35534d: refs #3813 removing the line that appeared on evolution and bar chars on the left after jqplot update

Timo B.
Collaborator

The problem is fixed now. A script to generate the minified file would still be nice :)

To be honest, I don't understand why we have to minfy it. Doesn't the addJs Hook do that?

Timo B.
Collaborator

This probably isn't the best way to do it, but what do you think about this script?

echo "" > jqplot-custom.min.js-temp

cat jqplot.core.js >> jqplot-custom.min.js-temp 
cat jqplot.linearAxisRenderer.js >> jqplot-custom.min.js-temp
cat jqplot.axisTickRenderer.js >> jqplot-custom.min.js-temp
cat jqplot.axisLabelRenderer.js >> jqplot-custom.min.js-temp
cat jqplot.tableLegendRenderer.js >> jqplot-custom.min.js-temp
cat jqplot.lineRenderer.js >> jqplot-custom.min.js-temp
cat jqplot.linePattern.js >> jqplot-custom.min.js-temp
cat jqplot.markerRenderer.js >> jqplot-custom.min.js-temp
cat jqplot.divTitleRenderer.js >> jqplot-custom.min.js-temp
cat jqplot.canvasGridRenderer.js >> jqplot-custom.min.js-temp
cat jqplot.shadowRenderer.js >> jqplot-custom.min.js-temp
cat jqplot.shapeRenderer.js >> jqplot-custom.min.js-temp
cat jqplot.sprintf.js >> jqplot-custom.min.js-temp
cat jqplot.themeEngine.js >> jqplot-custom.min.js-temp
cat plugins/jqplot.pieRenderer.js >> jqplot-custom.min.js-temp
cat plugins/jqplot.barRenderer.js >> jqplot-custom.min.js-temp
cat plugins/jqplot.categoryAxisRenderer.js >> jqplot-custom.min.js-temp
cat plugins/jqplot.canvasTextRenderer.js >> jqplot-custom.min.js-temp
cat plugins/jqplot.canvasAxisTickRenderer.js >> jqplot-custom.min.js-temp

java -jar ../../js/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar --type js --line-break 1000 jqplot-custom.min.js-temp > jqplot-custom.min.js 

rm ./jqplot-custom.min.js-temp

Improvements / suggestions are welcome :)

Matthieu Aubry
Owner

FYI: The reason the JQPlot JS were concatenated by Anthon was to make the JS Assets Merger much faster. Some web hosts were taking like 15-20seconds more to minify + merge these 19 files.

Stefan Giehl
Collaborator

In 3892944: refs #3813 fixes url fragments in sitemanager

Stefan Giehl
Collaborator

In e20f8ac: refs #3813 set max tooltip width to 600px

Stefan Giehl
Collaborator

In 8b2f671: refs #3813 rowevolution should work everywhere now

Matthieu Aubry
Owner

In widgetize mode: https://demo.piwik.org/index.php?module=Widgetize&action=iframe&widget=1&moduleToWidgetize=Actions&actionToWidgetize=getPageUrls&idSite=3&period=day&date=yesterday&disableLink=1&widget=1

-> Row evolution is not working there. It adds the parameter &popover= to the URL instead of maybe creating the hash?

Note: If you fix this, you can also close #3570 which is to make Transitions+Row Evolution compatible with widgetize views :)

Timo B.
Collaborator

In b1db7de: refs #3813 hiding row action tooltip when clicking the action

Timo B.
Collaborator

In 392161d: refs #3813 script for building jqplot-custom.min.js

Stefan Giehl
Collaborator

In a6c9cba: fixes #3570 refs #3813 now rowactions should work everywhere ;)

Stefan Giehl
Collaborator

In 0047ff1: refs #3813 fixed bug with ugly spaces in sitesearch datatable. problem was the datatable manager that didn't work with diffrent types of datatables on one page

Stefan Giehl
Collaborator

In f3544da: refs #3813 don't show row actions if available window width is less then 600px

Stefan Giehl
Collaborator

I hope all regressions are fixed now. If not reopen ;)

Timo B.
Collaborator
  • In 0047ff1 datatable_actions_js.tpl was removed. This file is still included in datatable_actions_recursive.tpl. Can we just remove the include or should the filename be changed to datatable_js.tpl?
  • After searching in a the pages report (search box at the bottom of the report), the data table JS does not work - neither sorting nor tooltips etc.
  • Also, search results with subtables are not shown properly, e.g. if you search for "index" here. They used to be nested like an expanded pages report.
Stefan Giehl
Collaborator

oh, guess I missed that one. Should be replaced with datatable_js.tpl
I'll have a look at that search issue asap

Timo B.
Collaborator

I'm not sure what the effect of changing the import would be, and it's hard to test as long as the other bug breaks the data table.
So I'm not comfortable with changing it, please take a look at it after the other bug is fixed.

Stefan Giehl
Collaborator

In 80f5e5b: refs #3813 fixed template for recursive action tables

Stefan Giehl
Collaborator

@EZdesign: I guess that should fix your issues. Can you confirm, plz?

Matthieu Aubry
Owner

We found that Overlay is not working anymore, eg: http://demo.piwik.org/index.php?module=Overlay&period=month&date=today&idSite=1#l=http$3A$2F$2Fpiwik.org$2F

  • Bug: Dropdown isn't showing selected period (however data on the right seems to apply to period)
  • Bug: The left panel shows "no data"
  • The right panel shows the bubbles in the websites as expected.
  • the particular page /download-piwik shows 12% next page in the transitions report but the "DOWNLOAD" menu link shows 0% for the same period.
Matthieu Aubry
Owner

Row Actions work in the standard UI, but in the Iframed Dashboard, the icon hides on click but does not launch the popover.

Timo B.
Collaborator

In 2fbfbf7: refs #3813 another data table improvement: refactor data table header to a separate template

  • removes code duplication (we already had a minor inconsistent bug fix - shame on us!)
  • show the sorted column and report documentation after using the search box

@Stefan: the issues I reported are fixed now

@Everyone: this is turning into a general data table improvement ticket

Timo B.
Collaborator

In c00d063: refs #3813 Overlay compatibility with latest jquery

Timo B.
Collaborator

Bug: The left panel shows "no data"

I don't understand. Can you clarify? When exactly does it happen?

the particular page /download-piwik shows 12% next page in the transitions report but the "DOWNLOAD" menu link shows 0% for the same period.

Is that connected to the select box showing the wrong period? Can you check again?
My guess is that you got confused about which range is shown because the select box didn't work. If the bug still exists, please tell us the exact period for both reports where the numbers don't match.

Matthieu Aubry
Owner

Nice refactoring Timo.

Regarding Overlay, now it's not loading any data for piwik.org: https://demo.piwik.org/index.php?module=Overlay&period=week&date=today&idSite=1

No data on the left and no bubbles in the right.

Overlay works OK on the forums& the crowdfunding site: http://demo.piwik.org/index.php?module=Overlay&period=month&date=today&idSite=7#l=http$3A$2F$2Fforum.piwik.org$2F

Matthieu Aubry
Owner

Actually works on Chrome for piwik.org as well so looking good :)

IIRC the only small bug left to fix is:

  • Row Actions work in the standard UI, but in the Iframed Dashboard, the icon hides on click but does not launch the popover.
Stefan Giehl
Collaborator

Replying to matt:

Regarding Overlay, now it's not loading any data for piwik.org: https://demo.piwik.org/index.php?module=Overlay&period=week&date=today&idSite=1

No data on the left and no bubbles in the right.

Doesn't work with https for me, too. http is working well...

Timo B.
Collaborator

https://demo.piwik.org/index.php?module=Overlay&period=week&date=today&idSite=1

This works for me in Firefox, Safari and Chrome. Are you using exactly this URL? And which browser?
Please copy-paste the exact URL, tell me the browser and whether it's working or not. I'm a bit confused about what is working for whom in which case...


Row Actions work in the standard UI, but in the Iframed Dashboard, the icon hides on click but does not launch the popover.

Stefan, will you handle that?

Stefan Giehl
Collaborator

In 30416f5: refs #3813 fixes rowevolution not working in widgetized dashboard

Stefan Giehl
Collaborator

In ae2c2fd: refs #3813 clean solution to make popovers work in widgetize mode

Stefan Giehl
Collaborator

Is everything fixed now, or is something still open?

Matthieu Aubry
Owner

Nice updates!

Updated beta10 to demo and found some bugs:

  • the "Export as image" icon below evolution graph is not triggering the "Save As" box (does nothing)
  • on Search engines report, clicking "Make it flat" loads "no data".
  • on widgetize dashboard, clicking Row Evolution works, but it also displays "Loading Data..." below the "calendar". Instead it should not show this "Loading data..." since the popover loading message is enough.
Matthieu Aubry
Owner

There was also a bug reported in the forums on IE8.

  • Using IE8, go to Actions> Page title report
  • Click on "Related report: Entry page titles" in the footer
  • error: "Message: Syntax error, unrecognized expression: The plugin undefined is not enabled. You can activate the plugin on Settings > Plugins page in Piwik."
Timo B.
Collaborator

In 57cd347: refs #3813 fixing export as image

Stefan Giehl
Collaborator

In f2f4cd1: refs #3813 do not show a loading message if broadcast is initalized for popovers

Stefan Giehl
Collaborator

Replying to matt:

Seems to be related to the callbacks used by the api method of that datatable. Removing them makes the table work... don't know why -.-

  • on widgetize dashboard, clicking Row Evolution works, but it also displays "Loading Data..." below the "calendar". Instead it should not show this "Loading data..." since the popover loading message is enough.

fixed by my last commit

Stefan Giehl
Collaborator

In 07d96a0: refs #3813 fixes ie8 bug

Stefan Giehl
Collaborator

As the search engines report seems to be fixed with [204cbc0]. I guess everything is done?

Matthieu Aubry
Owner

Nice fixes! I upgraded demo to b11.

I found a few more bugs:

  • Go to: here , click "all website" and the subtable loads "Google" but shows "1-25 of 102 Next " which is the paging info for the main table. Instead subtable paging should be "1-1 of 1" without next button.
    • similar/duplicate bug in search: Go to here search for "clear" below the subtable. On loading the search results, note that the paging information is wrong, and the "Next" button is displayed. Instead it should show "1-3 of 3" for the 3 search results, and hide the "next" button.
  • Row evolution regression: going to: dashboard, click on "Browser>Chrome row evolution" does not load the popover.
Matthieu Aubry
Owner

Somehow the "Row evolution regressioN" I cannot replicate consistently.. sometimes it work, sometimes it doesn't.

Also tested dashboard and found:

  • Copying dashboard to user does not work. in the URL: user=undefined
  • Renaming dashboard also bugs
Stefan Giehl
Collaborator

In 0f80874: refs #3813 fixing dashboard regressions: jQuery.attr('value') might not return correct value anymore. use jQuery.val() instead!

Timo B.
Collaborator

In 8d672e5: refs #3813 fixing subtable pagination

Timo B.
Collaborator

In 8e95c37: refs #3813 fixing pagination after searching in a report

Stefan Giehl
Collaborator

In 235a231: refs #3813 popover param wasn't removed in some cases; popover wasn't closed when using browsers back button on pages with empty hash part in url

Matthieu Aubry
Owner

The new Tooltip introduces XSS in Piwik!

Payload:
piwik.php?idsite=1&rec=1&apiv=1&r=641368&_id=e1f7d8e178b7a866&3A42&fla=1&java=1&dir=0&qt=0&realp=0&pdf=0&wma=0&gears=0&ag=0&h=12&m=34&s=6&res=1024x768&cookie=1&url=http%3A%2F%2Fexample.org%2Findex.html&urlref=http%3A%2F%2Fthing1.com%2Fa%2Fb%2Fc.html%3Fa%3Db%26d%3Dc&action_name=second+page&urlref=http://example3.com/test%3E%22%27%3E%3Cscript%3Ealert%28%27XSS%27%29%3C/script%3E

Then go to Referers> Websites

I get a 'XSS' popup!

Luckyly I often use XSS payloads to test ;-)

Thanks for fixing!

Matthieu Aubry
Owner

And nice work on the other fixes, appart from above, I can't find other problems for now :)

Stefan Giehl
Collaborator

I don't think that is caused by the tooltips, as they escape html by default. But I'll have a look...

Stefan Giehl
Collaborator

In ab74f93: refs #3813 escape html title attribute to avoid possible XSS

Matthieu Aubry
Owner

The bug is in the tooltip somehow (I think).

Fixing the datatable_cell is not enough as it appears in other cases as well:

 piwik.php?action_name=%C3%83%E2%80%9E&idsite=1&rec=1&r=604235&h=11&m=3&s=38&url=http%3A%2F%2Flocalhost%2F&_id=c7200934de2aba4e&_idts=1364427469&_idvc=3&_idn=0&_refts=1366498880&_viewts=1365810845&_ref=http%3A%2F%2Freferrer.example.com%2Fpage%2Fsub%3Fquery%3Dtest%26test2%3Dtest3&cs=windows-1252&cvar=%7B%222%22%3A%5B%22%3Cscript%3Ealert(%27xss%27)%3B%3C%2Fscript%3E%22%2C%22%3Cscript%3Ealert(%27xss%27)%3B%3C%2Fscript%3E%22%5D%2C%221%22%3A%5B%22pagecvar%22%2C%22%20WOOOW%20%22%5D%7D&pdf=0&qt=0&realp=0&wma=0&dir=0&fla=1&java=0&gears=0&ag=0&cookie=1&res=1920x1080&generation_time_ms=23 ```

Here it appears as a "Custom variable of page scope" in the Visitor Log, on hover on the page, it shows a XSS popup.  (I could send few even more payloads for other reports).

So +1 for revert previous and let me know if you find a solution that would fix it globally (if not I can take a look!) thanks!
Stefan Giehl
Collaborator

In c1eb200: refs #3813 escape tooltip content for visitorlog to fix possible XSS

Matthieu Aubry
Owner
  • When there is no data in the Visitor Log, the "Next" is displayed but it shouldn't be (since paging will not show data for the currently selected date)
Timo B.
Collaborator

"Next" is always shown in the visitor log. This is a hack that has been there forever. When I made the latest changes to the plugin, I made the hack better (i.e. less ugly) but it's still there. My point is that it's not related to this ticket and not even a regression. It could be added to a list of possible improvements for the visitor log.

Matthieu Aubry
Owner

Thanks for clarification.

Stefan Giehl
Collaborator

Another try to close that ticket.
Hope there aren't any other regressions...

Matthieu Aubry
Owner

Thanks Stefan. Sorry for silence last few days... I plan to do a bit more testing this week but code/features look very good!

Stefan Giehl sgiehl added this to the 1.12 - The Great 1.x Backlog milestone
Stefan Giehl sgiehl self-assigned this
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.