outlook.com - unresponsive script when changing font and adding bullet to new compose

RESOLVED WORKSFORME

Status

Tech Evangelism
Desktop
RESOLVED WORKSFORME
3 years ago
10 months ago

People

(Reporter: guigs [guigs] PST (please needinfo me!), Assigned: karlcow)

Tracking

Firefox 33

Firefox Tracking Flags

(platform-rel ?)

Details

(Whiteboard: [sitewait] [microsoft] [js] [country-all] [platform-rel-Microsoft][platform-rel-Outlook], URL)

Attachments

(2 attachments)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:35.0) Gecko/20100101 Firefox/35.0
Build ID: 20141208150535

Steps to reproduce:

1. Sign into an account at outlook.com
2. go to live mail (https://bay180.mail.live.com/?page=Compose)
3. Click the +New to compose a new message
4. Add a cc and a title
5. Start to type some text in the email
6. Add a bullet list with the icon
7. Click on the Font button and change it to Arial
7. hit enter at the end of the line of the first bullet


Actual results:

There was a warning for an unresponsive script: 
[POST https://bay180.mail.live.com/Handlers/ScenarioQos.mvc [HTTP/1.1 200 OK 282ms]
no element found ScenarioQos.mvc:1
Error in parsing value for 'font-size'.  Declaration dropped. RteFrameResources.aspx
POST https://bn1msgr2010706.gateway.messenger.live.com/gateway/gateway.dll [HTTP/1.1 200 OK 62040ms]
Error: Script terminated by timeout at:
i.event.fix@https://a.gfx.ms/jquery_IxInqeqWhsTYFrwY33VHww2.js:16:38274
i.event.dispatch@https://a.gfx.ms/jquery_IxInqeqWhsTYFrwY33VHww2.js:16:36087
i.event.add/s@https://a.gfx.ms/jquery_IxInqeqWhsTYFrwY33VHww2.js:16:32963
]


Expected results:

There not to be an unresponsive script
Problem occurs here too. Something to do with mutation events and jQuery going into an endless loop. 

Might be as simple as this code:

t.prototype._onNodeInserted = function (n) {
    var i = n.srcElement,
    r;
    i.tagName == 'FONT' && (r = i.getAttribute('size'), i.style.fontSize = t.getFontSizes() [r - 1])
  }

Running from a DOMAttrModified listener causes a new DOMAttrModified event to fire.
$B.Firefox && (t.prototype._doInitImpl = function () {
    this._onNodeInsertedHandler = $CD(this, this._onNodeInserted);
    var t = n(this._editor);
    t.on('DOMNodeInserted', this._onNodeInsertedHandler);
    t.on('DOMAttrModified', this._onNodeInsertedHandler);

The thing I don't quite understand yet is that _onNodeInserted method seems to set style.fontSize to undefined every time it runs (getAttribute('size') returns null, null - 1 is -1 and r.getFontSizes()[-1] is undefined). The DOMAttrModified runs because the style attribute is removed, it makes some sense that this removal happens due to setting undefined - but again and again? Is there some code elsewhere that sets fontSize to a good value?
The _onNodeInserted method in the code for Safari looks pretty different.
I also see Firefox fire DOM Mutation events that IE doesn't. (Chrome and Safari do not seem to support DOMAttrModified at all).

I'll upload a demo showing different behaviour in Firefox and IE, but it seems the root cause here is the browser sniffing in the JS and that the code Firefox gets hasn't taken this specific corner case into account. There are at least two simple fixes if my analysis is correct (I haven't changed the JS to test this): one is to bail out if getAttribute('size') returns null, the other one is to return early if it's a DOMAttrModified event and attrChange is 3 (deleted attribute).
Created attachment 8543737 [details]
1117220.htm - demo where Firefox fires more events than IE, but I don't know which one is doing the Right Thing (tm)

Given that DOM mutation events are deprecated anyway it probably doesn't make sense to spend time on figuring out whether Firefox or IE implementation is spec-compliant (if the spec covers this in the first place, that is).
Whiteboard: [contactready] [microsoft]
(Assignee)

Updated

3 years ago
(Assignee)

Updated

3 years ago
Assignee: nobody → kdubost
(Assignee)

Comment 5

3 years ago
contactemail
Contacted through email our contact at Microsoft.
Status: NEW → ASSIGNED
Whiteboard: [contactready] [microsoft] → [sitewait] [microsoft] [js] [country-all]
(Assignee)

Comment 6

2 years ago
Could someone with an outlook account test again?
Still an issue - please nag them :)
Whiteboard: [sitewait] [microsoft] [js] [country-all] → [sitewait] [microsoft] [js] [country-all] [platform-rel-Microsoft][platform-rel-Outlook]

Updated

2 years ago
platform-rel: --- → ?
ni? mike to test again.
Flags: needinfo?(miket)
Created attachment 8834169 [details]
screen shot, trying to reproduce

It seems like this no longer reproduces, possibly due to a redesign.
Flags: needinfo?(miket)
Status: ASSIGNED → RESOLVED
Last Resolved: 10 months ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.