1323193 - markup view: add a visual hint between opening and closing tags of a collapsed node

Status: VERIFIED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[Julian Descottes [:jdescottes]]

Attachment: collapsed-node.png

When collapsing a node in the markup view, it looks like the node is empty, except for the collapse toggle displayed on the left of the node. See the attachment.

We should display a hint between the opening and closing tag so that users can quickly see that the node is not empty.

Chrome for instance displays an ellipsis character (which can not really be distinguished from an actual node containing an ellipsis character).

Comment 1

[Julian Descottes [:jdescottes]]

Attachment: markupview_ellipsis_proto.png

Comment 2

[Julian Descottes [:jdescottes]]

Attachment: Bug 1323193 - markupview: show an ellipsis character in collapsed nodes;

Review commit: https://reviewboard.mozilla.org/r/98418/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/98418/

Comment 3

[Julian Descottes [:jdescottes]]

Comment on attachment 8818321 [details]
Bug 1323193 - markupview: show an ellipsis character in collapsed nodes;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/98418/diff/1-2/

Comment 4

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 8818321 [details]
Bug 1323193 - markupview: show an ellipsis character in collapsed nodes;

https://reviewboard.mozilla.org/r/98418/#review99220

This is very nice!

Comment 5

[Julian Descottes [:jdescottes]]

Thanks for the review Gabriel! Try is green (https://treeherder.mozilla.org/#/jobs?repo=try&revision=8107d2f7d6766565df81eaa019f094c75da91f86).

Landing.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/333f5945aad4
markupview: show an ellipsis character in collapsed nodes;r=gl

Comment 7

[Julian Descottes [:jdescottes]]

Filter on CLIMBING SHOES

Comment 8

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/333f5945aad4

Comment 9

[magicp]

FYI, There is duplicate semicolon at the end of line "color: var(--theme-body-color-inactive)" in markup.css. 

[markup.css]
.expandable.collapsed .close::before {
  /* Display an ellipsis character in collapsed nodes that can be expanded. */
  content: "\2026";
  display: inline-block;
  width: 12px;
  height: 8px;
  margin: 0 2px;
  line-height: 3px;
  color: var(--theme-body-color-inactive);;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  text-align: center;
  vertical-align: middle;
}

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/36d350615b25
remove extra semi-colon in markup.css;r=me

Comment 11

[Julian Descottes [:jdescottes]]

Thanks magicp! Fixed the nit on inbound.

Comment 13

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/36d350615b25

Comment 14

[Sajedul Islam]

I have reproduced this bug with Nightly  53.0a1 (2016-12-13) on Windows 8.1 , 64 Bit ! 

Build   ID    20161213030215
User Agent    Mozilla/5.0 (Windows NT 6.3; WOW64; rv:53.0) Gecko/20100101 Firefox/53.0

This bug's fix is Verified with latest Nightly !

Build   ID    20161227030213
User Agent    Mozilla/5.0 (Windows NT 6.3; WOW64; rv:53.0) Gecko/20100101 Firefox/53.0

[bugday-20161221]

Comment 15

[Sebastian Zartner [:sebo]]

Regarding comment 14 I've set this to verified.

I've also added a note about this to the documentation:
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree

Sebastian