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

VERIFIED FIXED in Firefox 53

Status

enhancement
P3
normal
VERIFIED FIXED
2 years ago
10 months ago

People

(Reporter: jdescottes, Assigned: jdescottes)

Tracking

({dev-doc-complete})

52 Branch
Firefox 53

Firefox Tracking Flags

(firefox53 verified)

Details

Attachments

(3 attachments)

(Assignee)

Description

2 years ago
Posted 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 hidden (mozreview-request)

Comment 4

2 years ago
mozreview-review
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)

Updated

2 years ago
Assignee: nobody → jdescottes
Status: NEW → ASSIGNED

Comment 6

2 years ago
Pushed by jdescottes@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/333f5945aad4
markupview: show an ellipsis character in collapsed nodes;r=gl
(Assignee)

Comment 7

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

Comment 8

2 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/333f5945aad4
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 53

Comment 9

2 years ago
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

2 years ago
Pushed by jdescottes@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/36d350615b25
remove extra semi-colon in markup.css;r=me
(Assignee)

Comment 11

2 years ago
Thanks magicp! Fixed the nit on inbound.
(Assignee)

Updated

2 years ago
Duplicate of this bug: 1325626

Comment 14

2 years ago
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

Updated

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