Page MenuHomePhabricator

New wikilink window grows in width each time when opened in IE and Chrome
Closed, ResolvedPublic

Description

Author: obradovicgoran

Description:
When editing article, clicking on a 'new wikilink button ('chain' icon) opens a window for creating new wikilink. First time this window is opened it has normal width, but in Chrome each time user clicks to open this window, it gets wider and wider (css width property increases in pixels).

This makes the window unusable because after several links added the window gets wider than the screen and can't be used effectively any more.

This bug appears in Chrome and possibly Internet Explorer.

This bug is new, it wasn't there until few days ago, and is possibly linked with the recent changes in javascript code.


Version: unspecified
Severity: minor

Details

Reference
bz27566

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:24 PM
bzimport set Reference to bz27566.
bzimport added a subscriber: Unknown Object (MLST).

thanks for reporting this. I'm confused about one thing, why do you think this "possibly" happens in Internet Explorer.

obradovicgoran wrote:

User that complained to me about this thing said that it happens in IE as well. I have installed IE6 (for css debugging purposes) but it is too old so it doesn't even have that button/window enabled.

Since it was reported by the user that noticed it in Chrome it is most probably true that IE is affected as well, but I haven't been able to replicate the bug personally, so I said 'possibly'.

redekopmark wrote:

I can confirm that this bug exists on the version of the software en wikipedia on IE9 with windows x64 SP1 as of 5 minutes ago.

also tried testing with chrome 11.696.14 on the same system and the box doesn't appear, the page gets greyed out as it should be the insert box doesn't appear, of course this could also be due to it being the dev channel of chrome

  • Bug 28148 has been marked as a duplicate of this bug. ***

redekopmark wrote:

did some more testing with it and found that the box wasn't working in chrome due to some custom js, when i tried it with the js turned off the box appears but grows each time i clicked to insert a link just like ie9

The window consistently grows with 40px, this is the size of the left and right margin of ".wikiEditor-toolbar-dialog .ui-dialog-content"

When you reopen the dialog, it tries to reuse the last known width of the window.
It does this in jquery.wikiEditor.dialogs.js resize()

For instance: Initial opening of table dialog:

"ui-dialog ui-widget ui-widget-content ui-corner-all wikiEditor-toolbar-dialog ui-draggable"
width:590px
scrollWidth:590px

#wikieditor-toolbar-table-dialog ".wikiEditor-toolbar-dialog .ui-dialog-content"
width: auto (550)
scrollWidth: 590
clientWidth: 590

Resize function: this == #wikieditor-toolbar-table-dialog
oldWidth (of the wrapper .uidialog): 590px
thisWidth (from $this data object): 0 (not set before), using scrollWidth of this (590)

Than we set the width of this to thisWidth and store it in the data. The width of #wikieditor-toolbar-table-dialog now grows from 550px to 590px. The scrollWidth of wrapper grows to 630px;

wrapperWidth: (from this data object): 0 (not set before), using scrollWidth of wrapper (630px)
setting width of wrapper to wrapperWidth, storing wrapperWidth in data

2nd iteration

"ui-dialog ui-widget ui-widget-content ui-corner-all wikiEditor-toolbar-dialog ui-draggable"
width:630px
scrollWidth:630px

#wikieditor-toolbar-table-dialog ".wikiEditor-toolbar-dialog .ui-dialog-content"
width: auto (590)
scrollWidth: 630
clientWidth: 630

Resize function: this == #wikieditor-toolbar-table-dialog
oldWidth (of the wrapper .uidialog): 630px
thisWidth (from $this data object): 590px, but overwrite with scrollWidth which is 630px

Than we set the width of this to thisWidth and store it in the data. The width of #wikieditor-toolbar-table-dialog now grows from 590px to 630px. The scrollWidth of wrapper grows to 670px;

wrapperWidth: (from this data object): 630, using scrollWidth of wrapper (670px)
setting width of wrapper to wrapperWidth, storing wrapperWidth in data