DevTools: pretty-print HTML

DevTools: pretty-print HTML

The patch implements beautiful HTML pretty-printing.

Apart from HTML pretty-printing, the patch starts applying JavaScript
pretty-printer to the elements with appropriate JavaScript mime types.

DISCLAIMER: due to the nature of HTML documents, a pretty-printed HTML
document could be evaluated differently comparing to the original HTML.
However, the point of pretty-printing here is to make code more readable
and analyzible.

BUG=none
R=dgozman, pfeldman

Committed: https://crrev.com/3106649df0f8298c9d2baa9823b171c6428897c5
Cr-Commit-Position: refs/heads/master@{#388382}

[lushnikov, 2016-04-18 23:48:17]

Description was changed from

==========
DevTools: pretty-print HTML

The patch implements beautiful HTML pretty-printing.

Apart from HTML pretty-printing, the patch starts applying JavaScript
pretty-printer to the elements with appropriate JavaScript mime types.

DISCLAIMER: due to the nature of HTML documents, a pretty-printed HTML
document could be evaluated differently comparing to the original HTML.
However, the point of pretty-printing HERE is to make code more readable
and analyzible.

BUG=none
R=dgozman, pfeldman
==========

to

==========
DevTools: pretty-print HTML

The patch implements beautiful HTML pretty-printing.

Apart from HTML pretty-printing, the patch starts applying JavaScript
pretty-printer to the elements with appropriate JavaScript mime types.

DISCLAIMER: due to the nature of HTML documents, a pretty-printed HTML
document could be evaluated differently comparing to the original HTML.
However, the point of pretty-printing here is to make code more readable
and analyzible.

BUG=none
R=dgozman, pfeldman
==========

[lushnikov, 2016-04-18 23:50:38]

ptal

[dgozman, 2016-04-19 01:55:03]

lgtm

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/LayoutTe...
File
third_party/WebKit/LayoutTests/inspector/sources/pretty-print-html-1-expected.txt
(right):

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/LayoutTe...
third_party/WebKit/LayoutTests/inspector/sources/pretty-print-html-1-expected.txt:52:
<canvas width=100 height=100></canvas>
myattr="</canvas>"

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/LayoutTe...
File
third_party/WebKit/LayoutTests/inspector/sources/pretty-print-html-2-expected.txt
(right):

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/LayoutTe...
third_party/WebKit/LayoutTests/inspector/sources/pretty-print-html-2-expected.txt:54:
hello <b>world</b>
<li> hello <b>world</b>!
<li> hello <b>world</b> <b>i'm here</b>

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/LayoutTe...
File
third_party/WebKit/LayoutTests/inspector/sources/pretty-print-javascript-6-expected.txt
(right):

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/LayoutTe...
third_party/WebKit/LayoutTests/inspector/sources/pretty-print-javascript-6-expected.txt:19:
function g() {
Let's indent once?

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/Source/d...
File
third_party/WebKit/Source/devtools/front_end/formatter_worker/HTMLFormatter.js
(right):

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/formatter_worker/HTMLFormatter.js:131:
return;
else if ()

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/formatter_worker/HTMLFormatter.js:136:
this._builder.addToken(token.value, token.startOffset);
This is a default.

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/formatter_worker/HTMLFormatter.js:140:
this._builder.addToken(token.value, token.startOffset);
ditto

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/formatter_worker/HTMLFormatter.js:144:
this._builder.addToken(token.value, token.startOffset);
ditto

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/formatter_worker/HTMLFormatter.js:210:
"head": ["body"],
Maybe make a set here and use as-is?
"head": new Set(["body"])

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/formatter_worker/HTMLFormatter.js:231:
WebInspector.HTMLModel.States = {
nit: State

[lushnikov, 2016-04-19 23:11:41]

Thanks!

The patch also fixed an issue (and added a test) with DOMModel building - the
stack should be drained in the end of building model.

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/LayoutTe...
File
third_party/WebKit/LayoutTests/inspector/sources/pretty-print-html-1-expected.txt
(right):

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/LayoutTe...
third_party/WebKit/LayoutTests/inspector/sources/pretty-print-html-1-expected.txt:52:
<canvas width=100 height=100></canvas>
On 2016/04/19 01:55:02, dgozman wrote:
> myattr="</canvas>"

Done.

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/LayoutTe...
File
third_party/WebKit/LayoutTests/inspector/sources/pretty-print-html-2-expected.txt
(right):

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/LayoutTe...
third_party/WebKit/LayoutTests/inspector/sources/pretty-print-html-2-expected.txt:54:
hello <b>world</b>
On 2016/04/19 01:55:03, dgozman wrote:
> <li> hello <b>world</b>!
> <li> hello <b>world</b> <b>i'm here</b>

Done.

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/LayoutTe...
File
third_party/WebKit/LayoutTests/inspector/sources/pretty-print-javascript-6-expected.txt
(right):

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/LayoutTe...
third_party/WebKit/LayoutTests/inspector/sources/pretty-print-javascript-6-expected.txt:19:
function g() {
On 2016/04/19 01:55:03, dgozman wrote:
> Let's indent once?

Done.

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/Source/d...
File
third_party/WebKit/Source/devtools/front_end/formatter_worker/HTMLFormatter.js
(right):

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/formatter_worker/HTMLFormatter.js:131:
return;
On 2016/04/19 01:55:03, dgozman wrote:
> else if ()

Kinda Done. We both liked what we came up with about this function.

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/formatter_worker/HTMLFormatter.js:136:
this._builder.addToken(token.value, token.startOffset);
On 2016/04/19 01:55:03, dgozman wrote:
> This is a default.

Done.

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/formatter_worker/HTMLFormatter.js:140:
this._builder.addToken(token.value, token.startOffset);
On 2016/04/19 01:55:03, dgozman wrote:
> ditto

Done.

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/formatter_worker/HTMLFormatter.js:144:
this._builder.addToken(token.value, token.startOffset);
On 2016/04/19 01:55:03, dgozman wrote:
> ditto

Done.

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/formatter_worker/HTMLFormatter.js:210:
"head": ["body"],
On 2016/04/19 01:55:03, dgozman wrote:
> Maybe make a set here and use as-is?
> "head": new Set(["body"])

Done.

https://codereview.chromium.org/1894343002/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/formatter_worker/HTMLFormatter.js:231:
WebInspector.HTMLModel.States = {
On 2016/04/19 01:55:03, dgozman wrote:
> nit: State

Done.

[lushnikov, 2016-04-19 23:11:47]

The CQ bit was checked by lushnikov@chromium.org

[lushnikov, 2016-04-19 23:11:48]

The patchset sent to the CQ was uploaded after l-g-t-m from dgozman@chromium.org
Link to the patchset: https://codereview.chromium.org/1894343002/#ps20001
(title: "address comments")

[commit-bot: I haz the power, 2016-04-19 23:12:26]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/1894343002/20001
View timeline at
 https://chromium-cq-status.appspot.com/patch-timeline/1894343002/20001

[commit-bot: I haz the power, 2016-04-20 00:43:27]

Description was changed from

==========
DevTools: pretty-print HTML

The patch implements beautiful HTML pretty-printing.

Apart from HTML pretty-printing, the patch starts applying JavaScript
pretty-printer to the elements with appropriate JavaScript mime types.

DISCLAIMER: due to the nature of HTML documents, a pretty-printed HTML
document could be evaluated differently comparing to the original HTML.
However, the point of pretty-printing here is to make code more readable
and analyzible.

BUG=none
R=dgozman, pfeldman
==========

to

==========
DevTools: pretty-print HTML

The patch implements beautiful HTML pretty-printing.

Apart from HTML pretty-printing, the patch starts applying JavaScript
pretty-printer to the elements with appropriate JavaScript mime types.

DISCLAIMER: due to the nature of HTML documents, a pretty-printed HTML
document could be evaluated differently comparing to the original HTML.
However, the point of pretty-printing here is to make code more readable
and analyzible.

BUG=none
R=dgozman, pfeldman
==========

[commit-bot: I haz the power, 2016-04-20 00:43:27]

Committed patchset #2 (id:20001)

[ziyunfei, 2016-04-20 07:26:27]

lushnikov:

http://a1.alicdn.com/oss/uploads/2016/04/20/e199a420-06c7-11e6-a197-81ec8fbf2...

line 311 has a wrong indentation after pretty-printing
http://img.alicdn.com/tfscom/TB19_XFMFXXXXaiXXXXwu0bFXXX.png

[lushnikov, 2016-04-20 08:15:33]

On 2016/04/20 07:26:27, ziyunfei wrote:
> lushnikov:
> 
>
http://a1.alicdn.com/oss/uploads/2016/04/20/e199a420-06c7-11e6-a197-81ec8fbf2...
> 
> line 311 has a wrong indentation after pretty-printing
> http://img.alicdn.com/tfscom/TB19_XFMFXXXXaiXXXXwu0bFXXX.png

@ziyunfei: happens due to the text content of the <p> tag (which got extracted
with the original indentation). Worth filing a bug, IMO.

[ziyunfei, 2016-04-20 10:53:40]

On 2016/04/20 08:15:33, lushnikov wrote:
> On 2016/04/20 07:26:27, ziyunfei wrote:
> > lushnikov:
> > 
> >
>
http://a1.alicdn.com/oss/uploads/2016/04/20/e199a420-06c7-11e6-a197-81ec8fbf2...
> > 
> > line 311 has a wrong indentation after pretty-printing
> > http://img.alicdn.com/tfscom/TB19_XFMFXXXXaiXXXXwu0bFXXX.png
> 
> @ziyunfei: happens due to the text content of the <p> tag (which got extracted
> with the original indentation). Worth filing a bug, IMO.

filed: https://bugs.chromium.org/p/chromium/issues/detail?id=605077

[paulirish, 2016-04-21 08:17:49]

Description was changed from

==========
DevTools: pretty-print HTML

The patch implements beautiful HTML pretty-printing.

Apart from HTML pretty-printing, the patch starts applying JavaScript
pretty-printer to the elements with appropriate JavaScript mime types.

DISCLAIMER: due to the nature of HTML documents, a pretty-printed HTML
document could be evaluated differently comparing to the original HTML.
However, the point of pretty-printing here is to make code more readable
and analyzible.

BUG=none
R=dgozman, pfeldman
==========

to

==========
DevTools: pretty-print HTML

The patch implements beautiful HTML pretty-printing.

Apart from HTML pretty-printing, the patch starts applying JavaScript
pretty-printer to the elements with appropriate JavaScript mime types.

DISCLAIMER: due to the nature of HTML documents, a pretty-printed HTML
document could be evaluated differently comparing to the original HTML.
However, the point of pretty-printing here is to make code more readable
and analyzible.

BUG=580643
R=dgozman, pfeldman
==========

[commit-bot: I haz the power, 2016-04-22 19:19:07]

Description was changed from

==========
DevTools: pretty-print HTML

The patch implements beautiful HTML pretty-printing.

Apart from HTML pretty-printing, the patch starts applying JavaScript
pretty-printer to the elements with appropriate JavaScript mime types.

DISCLAIMER: due to the nature of HTML documents, a pretty-printed HTML
document could be evaluated differently comparing to the original HTML.
However, the point of pretty-printing here is to make code more readable
and analyzible.

BUG=580643
R=dgozman, pfeldman
==========

to

==========
DevTools: pretty-print HTML

The patch implements beautiful HTML pretty-printing.

Apart from HTML pretty-printing, the patch starts applying JavaScript
pretty-printer to the elements with appropriate JavaScript mime types.

DISCLAIMER: due to the nature of HTML documents, a pretty-printed HTML
document could be evaluated differently comparing to the original HTML.
However, the point of pretty-printing here is to make code more readable
and analyzible.

BUG=none
R=dgozman, pfeldman

Committed: https://crrev.com/3106649df0f8298c9d2baa9823b171c6428897c5
Cr-Commit-Position: refs/heads/master@{#388382}
==========

[commit-bot: I haz the power, 2016-04-22 19:19:08]

Patchset 2 (id:??) landed as
https://crrev.com/3106649df0f8298c9d2baa9823b171c6428897c5
Cr-Commit-Position: refs/heads/master@{#388382}