REGRESSION: Safari hangs while trying to edit the HTML source in sites rich text editor

• Component: New Bugs
• Status: NEW ---

[Venkat Karun]

1. Edit any google sites page 
2. Click on the "edit html source" button in the toolbar

Expected result:

A tabbed dialog with HTML and preview tabs pops up without making the browser unresponsive.

Actual result:

The dialog appears but the browser stays unresponsive for about 15-20
seconds.

Additional information:
We were able to verify that this happened while installing CSS styles programatically in the preview iframe but couldn't reproduce this with a reduced case.

[Ojan Vafai]

Created attachment 31148 [details]
shark sample

This is a 30 second shark sample from my Debug ToT build (synced to r44594).

[Venkat Karun]

Please note that this doesn't happen with Safari 4 public beta (528.16) 

[Julie Parent]

But it does happen in the Safari 4.0 final release: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Safari/530.17

[Julie Parent]

Marking as P1 since this is a regression.

[Julie Parent]

Eric, here is a google internal url you can use to reproduce outside of Sites: http://jparent:6789/-/standaloneEditorDebug.html?use_configuration=&TR_FLAGS_ENABLE_CLOSURE_TOOLBAR=1&TR_FLAGS_ENABLE_TOOLBAR_FACTORY=1&TR_FLAGS_ENABLE_RAW_HTML=1&TR_FLAGS_ENABLE_EXPORT_PUBLIC_NAMES=1&TR_FLAGS_ENABLE_BLENDED_IE=1&TR_FLAGS_ENABLE_BLENDED_MOZ=1&TR_FLAGS_ENABLE_EMAIL_WARNING=1&TR_FLAGS_ENABLE_OLD_DIALOGS=1&TR_FLAGS_USE_DEFAULT_DIALOG_PLUGINS=1&locale=en&BUILD--closure_pass=1&BUILD--alias_externals=1&BUILD--collapse_variable_declarations=1&BUILD--smart_name_removal=1&BUILD--aggressively_rename_js_prototypes=1&BUILD--collapse_properties=1&BUILD--undefined_properties_level=WARNING&BUILD--remove_unused_prototype_props=1&compatmode=quirks

Just click the "edit html" button and you'll see the hang.  Ping me if you have any questions.

[Venkat Karun]

Just adding some metrics from tests that I performed by dividing the set of all CSS rulesets applied to the preview iframe into individual buckets. Each bucket corresponds to a 'style' element. These tests were performed on safari 4 (latest webkit nightly)

Total ruleset size:- 3374

Number of buckets  Time taken to install styles (ms)
1                             4385
2                             1839
4                             1267
8                              767
16                            370
32                            274

[Venkat Karun]

We have a temporary workaround in place for this. Our previous code path revolved around creating a style element, appending the style element to the head and then setting styles in the content element. We swapped the order of the last two steps and this seemed to resolve this.

From:
var styleSheet = doc.createElement('style')
head.appendChild(styleSheet);
styleSheet.innerText = stylesString;

To:
var styleSheet = doc.createElement('style')
styleSheet.innerText = stylesString;
head.appendChild(styleSheet);