bugzilla.mozilla.org has resumed normal operation. Attachments prior to 2014 will be unavailable for a few days. This is tracked in Bug 1475801.
Please report any other irregularities here.

[markup-view] HTML editor should autoformat the html to be edited

NEW
Unassigned

Status

DevTools
Inspector
P3
normal
3 years ago
a month ago

People

(Reporter: gl, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

3 years ago
Codemirror has the ability to format any selected text.

See the demo: http://codemirror.net/2/demo/formatting.html

It would be nice if the HTML to be edited was automatically formatted when the user selects "Edit As HTML" in the context menu of an element.
That would indeed make it a lot easier to edit HTML.
One thing gl and I discussed is: doing this may cause mutations on nodes you might not have changed. For instance let's say your HTML looks like this:

<body><div>
                 <span>something</span>
</div></body>

This would turn into:

<body>
  <div>
    <span>
      something
    </span>
  </div>
</body>

Therefore adding/removing text nodes in some places.

This may be completely ok because:
- we don't show whitespace only text nodes in the markup-view anyway
- we're changing the whole outerHTML of a node anyway, so we don't really care if some parts we didn't mean to change changed.

But this may be no ok if:
- we want to provide a diff view of the changes at some point: there the actual relevant changes would be lost in a variety of irrelevant indentation changes.

Maybe there could be a pretty-print button in the text editor to do this optionally, just like in the debugger (which by the way could provide a good spot to add a submit button too, to make the ctrl/cmd+submit action more discoverable).
(In reply to Patrick Brosset [:pbrosset] [:pbro] from comment #1)
> That would indeed make it a lot easier to edit HTML.
> One thing gl and I discussed is: doing this may cause mutations on nodes you
> might not have changed. For instance let's say your HTML looks like this:
> 
> <body><div>
>                  <span>something</span>
> </div></body>
> 
> This would turn into:
> 
> <body>
>   <div>
>     <span>
>       something
>     </span>
>   </div>
> </body>
> 
> Therefore adding/removing text nodes in some places.
> 
> This may be completely ok because:
> - we don't show whitespace only text nodes in the markup-view anyway
> - we're changing the whole outerHTML of a node anyway, so we don't really
> care if some parts we didn't mean to change changed.
> 
> But this may be no ok if:
> - we want to provide a diff view of the changes at some point: there the
> actual relevant changes would be lost in a variety of irrelevant indentation
> changes.

Interestingly we don't ever seem to handle newHTML == oldHTML either in the frontend [0] or the backend [1].  So it seems that right now we are probably always causing mutations when just opening and saving the HTML editor.

> Maybe there could be a pretty-print button in the text editor to do this
> optionally, just like in the debugger (which by the way could provide a good
> spot to add a submit button too, to make the ctrl/cmd+submit action more
> discoverable).

I think I'd prefer a UI control to do this, since changing whitespace between nodes can change layout for things like display: inline-block or of course things like:

<pre>hi</pre>
<div style='white-space: pre'>hi</div>

[0]: https://dxr.mozilla.org/mozilla-central/rev/fb720c90eb49590ba55bf52a8a4826ffff9f528b/browser/devtools/markupview/markup-view.js#1108
[1]: https://dxr.mozilla.org/mozilla-central/rev/fb720c90eb49590ba55bf52a8a4826ffff9f528b/toolkit/devtools/server/actors/inspector.js#2431
(Reporter)

Comment 3

2 years ago
Filter on CLIMBING SHOES
Priority: -- → P3

Updated

a month ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.