1308442 - Embed SourceEditor without iframe

Status: RESOLVED DUPLICATE of bug 1350226

(DevTools :: Netmonitor, defect)

Description

[Ricky Chien [:rickychien] (inactive)]

Use SourceEditor.appendToLocal to embed codemirror without iframe and so far there are two modules used SourceEditor.

Todo:
- NetMonitor should uses SourceEditor.appendToLocal to launch SourceEditor.
- NetworkDetails should uses SourceEditor.appendToLocal to launch SourceEditor.

Comment 1

[Brian Grinstead [:bgrins]]

Just a note: anything that loads the source editor in a XUL doc should continue to use the iframe so we can load CM in an HTML doc

Comment 3

[Ricky Chien [:rickychien] (inactive)]

netmonitor/shared/components/editor.js is using 

this.deferEditor = this.editor.appendTo(...)

to append source editor with an extra iframe. So we use a deferEditor workaround to tackle iframe editor instance. This workaround can be removed by using appendToLocalElement() instead of appendTo().

The problems with appendToLocalElement are caused by XUL, because document.createElement() call always create XUL on top of netmontor.xul. As a result, here is a followup bug to fix this issue after we eliminate netmonitor.xul

Comment 4

[Ricky Chien [:rickychien] (inactive)]

I'd like to postpone this work since there exists a better solution in debugger.html [1] which is using newer CodeMirror version and provides a set of useful APIs. This task is able to resume as soon as we move Netmonitor.html to Github.

On the other hand, CodeMirror layout is broken after using appendToLocalElement() even if netmontor.xul has converted to HTML. It might be some existing problems in our source editor wrapper "devtools/client/sourceeditor/editor". As a result, I'd prefer to tackle this issue by using newer source-editor.js in debugger.html.

Marco, could you help me to put this issue to P3. thanks! 

[1] https://github.com/devtools-html/debugger.html/blob/9a4addbcd4c5642d3d9a36ff9713d378cbff0666/src/utils/editor/source-editor.js

Comment 5

[Marco Mucci [:MarcoM]]

(In reply to Ricky Chien [:rickychien] from comment #4)
> I'd like to postpone this work since there exists a better solution in
> debugger.html [1] which is using newer CodeMirror version and provides a set
> of useful APIs. This task is able to resume as soon as we move
> Netmonitor.html to Github.
> 
> On the other hand, CodeMirror layout is broken after using
> appendToLocalElement() even if netmontor.xul has converted to HTML. It might
> be some existing problems in our source editor wrapper
> "devtools/client/sourceeditor/editor". As a result, I'd prefer to tackle
> this issue by using newer source-editor.js in debugger.html.
> 
> Marco, could you help me to put this issue to P3. thanks! 
> 
> [1]
> https://github.com/devtools-html/debugger.html/blob/
> 9a4addbcd4c5642d3d9a36ff9713d378cbff0666/src/utils/editor/source-editor.js

Will do, thanks Ricky.

Comment 6

[[e-mail]]

I'd like to revisit our editor when I back from the vacation

Comment 7

[Julien Cristau [:jcristau]]

Mass wontfix for bugs affecting firefox 52.

Comment 8

[Ricky Chien [:rickychien] (inactive)]

This fix will cover in bug 1350226. iframe mechanism has removed in latest patch. Please see bug 1350226 for details.