Closed Bug 1323193 Opened 4 years ago Closed 4 years ago

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

Categories

(DevTools :: Inspector, enhancement, P3)

52 Branch
enhancement

Tracking

(firefox53 verified)

VERIFIED FIXED
Firefox 53
Tracking Status
firefox53 --- verified

People

(Reporter: jdescottes, Assigned: jdescottes)

References

Details

(Keywords: dev-doc-complete)

Attachments

(3 files)

Attached image 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 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!
Attachment #8818321 - Flags: review?(gl) → review+
Assignee: nobody → jdescottes
Status: NEW → ASSIGNED
Pushed by jdescottes@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/333f5945aad4
markupview: show an ellipsis character in collapsed nodes;r=gl
Filter on CLIMBING SHOES
Priority: -- → P3
https://hg.mozilla.org/mozilla-central/rev/333f5945aad4
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 53
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;
}
Pushed by jdescottes@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/36d350615b25
remove extra semi-colon in markup.css;r=me
Thanks magicp! Fixed the nit on inbound.
Duplicate of this bug: 1325626
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]
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
Status: RESOLVED → VERIFIED
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.