diff options
Diffstat (limited to 'comm/mail/base/test/browser/files/treeListbox.xhtml')
| -rw-r--r-- | comm/mail/base/test/browser/files/treeListbox.xhtml | 390 |
1 files changed, 390 insertions, 0 deletions
diff --git a/comm/mail/base/test/browser/files/treeListbox.xhtml b/comm/mail/base/test/browser/files/treeListbox.xhtml new file mode 100644 index 0000000000..a760ca141d --- /dev/null +++ b/comm/mail/base/test/browser/files/treeListbox.xhtml @@ -0,0 +1,390 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <meta charset="utf-8" /> + <title>Test for the tree-listbox custom element</title> + <style> + :focus { + outline: 3px blue solid; + } + html { + height: 100%; + } + body { + height: 100%; + display: flex; + margin: 0; + } + ul[is="tree-listbox"] { + overflow-y: auto; + white-space: nowrap; + } + ul { + margin: 0; + padding: 0; + list-style: none; + } + li > div { + display: flex; + align-items: center; + } + li.selected > div { + color: white; + background-color: blue; + } + li > ul { + padding-inline-start: 1em; + } + li.collapsed > ul { + display: none; + } + div.twisty { + width: 1em; + height: 1em; + } + li.children > div > div.twisty { + background-color: green; + } + li.children.collapsed > div > div.twisty { + background-color: red; + } + li.unselectable > div { + background-color: red; + } + </style> + <script defer="defer" src="chrome://messenger/content/tree-listbox.js"></script> +</head> +<body> + <ul is="tree-listbox" role="tree"> + <li id="row-1"> + <div> + <div class="twisty"></div> + Item with no children + </div> + </li> + <li id="row-2"> + <div> + <div class="twisty"></div> + Item with children + </div> + <ul> + <li id="row-2-1"> + <div> + <div class="twisty"></div> + First child + </div> + </li> + <li id="row-2-2"> + <div> + <div class="twisty"></div> + Second child + </div> + </li> + </ul> + </li> + <li id="row-3"> + <div> + <div class="twisty"></div> + Item with grandchildren + </div> + <ul> + <li id="row-3-1"> + <div> + <div class="twisty"></div> + First child + </div> + <ul> + <li id="row-3-1-1"> + <div> + <div class="twisty"></div> + First grandchild + </div> + </li> + <li id="row-3-1-2"> + <div> + <div class="twisty"></div> + Second grandchild + </div> + </li> + </ul> + </li> + </ul> + </li> + </ul> + <template id="rowToAdd"> + <li id="new-row"> + <div> + <div class="twisty"></div> + New row + </div> + </li> + </template> + <template id="rowsToAdd"> + <li id="added-row"> + <div> + <div class="twisty"></div> + Added row + </div> + <ul> + <li id="added-row-1"> + <div> + <div class="twisty"></div> + Added child + </div> + <ul> + <li id="added-row-1-1"> + <div> + <div class="twisty"></div> + Added grandchild + </div> + </li> + </ul> + </li> + <li id="added-row-2"> + <div> + <div class="twisty"></div> + Added child + </div> + </li> + </ul> + </li> + </template> + <!-- Larger tree for deleting from --> + <ul> + <li>Before</li> + <li> + <!-- Place under a plain <li> an <ul> to make sure our selector logic + - doesn't break down. --> + <ul is="tree-listbox" id="deleteTree" role="tree"> + <li id="dRow-1" class="collapsed"> + <div> + <div class="twisty"></div> + Item with collapsed children + </div> + <ul> + <li id="dRow-1-1"> + <div> + <div class="twisty"></div> + Hidden child + </div> + </li> + </ul> + </li> + <li id="dRow-2"> + <div> + <div class="twisty"></div> + Item with children + </div> + <ul> + <li id="dRow-2-1"> + <div> + <div class="twisty"></div> + First child + </div> + </li> + <li id="dRow-2-2"> + <div> + <div class="twisty"></div> + Second child + </div> + </li> + </ul> + </li> + <li id="dRow-3"> + <div> + <div class="twisty"></div> + Item with grandchildren + </div> + <ul> + <li id="dRow-3-1"> + <div> + <div class="twisty"></div> + First child + </div> + <ul> + <li id="dRow-3-1-1" class="collapsed"> + <div> + <div class="twisty"></div> + First grandchild + </div> + <ul> + <li id="dRow-3-1-1-1"> + <div> + <div class="twisty"></div> + Hidden child + </div> + </li> + </ul> + </li> + <li id="dRow-3-1-2"> + <div> + <div class="twisty"></div> + Second grandchild + </div> + </li> + <li id="dRow-3-1-3" class="collapsed"> + <div> + <div class="twisty"></div> + Third grandchild + </div> + <ul> + <li id="dRow-3-1-3-1"> + <div> + <div class="twisty"></div> + Hidden child + </div> + </li> + </ul> + </li> + </ul> + </li> + </ul> + </li> + <li id="dRow-4"> + <div> + <div class="twisty"></div> + Fourth item + </div> + <ul> + <li id="dRow-4-1" class="collapsed"> + <div> + <div class="twisty"></div> + First child + </div> + <ul> + <li id="dRow-4-1-1"> + <div> + <div class="twisty"></div> + Hidden child 1 + </div> + </li> + <li id="dRow-4-1-2"> + <div> + <div class="twisty"></div> + Hidden child 2 + </div> + </li> + </ul> + </li> + <li id="dRow-4-2"> + <div> + <div class="twisty"></div> + Second child + </div> + </li> + <li id="dRow-4-3"> + <div> + <div class="twisty"></div> + Third child + </div> + <ul> + <li id="dRow-4-3-1"> + <div> + <div class="twisty"></div> + First Grand child + </div> + </li> + <li id="dRow-4-3-2"> + <div> + <div class="twisty"></div> + Second Grand child + </div> + </li> + </ul> + </li> + <li id="dRow-4-4" class="collapsed"> + <div> + <div class="twisty"></div> + Fourth child + </div> + <ul> + <li id="dRow-4-4-1"> + <div> + <div class="twisty"></div> + Hidden child 1 + </div> + </li> + <li id="dRow-4-4-2"> + <div> + <div class="twisty"></div> + Hidden child 2 + </div> + </li> + </ul> + </li> + </ul> + </li> + <li id="dRow-5"> + <div> + <div class="twisty"></div> + Second last item + </div> + <ul> + <li id="dRow-5-1"> + <div> + <div class="twisty"></div> + Last child + </div> + </li> + </ul> + </li> + <li id="dRow-6"> + <div> + <div class="twisty"></div> + Last item + </div> + </li> + </ul> + </li> + <li>After</li> + </ul> + <!-- Tree with unselectable rows --> + <ul is="tree-listbox" id="unselectableTree" role="tree"> + <li id="uRow-1" class="unselectable"> + <div>Item with no children</div> + </li> + <li id="uRow-2" class="unselectable"> + <div>Item with children</div> + <ul> + <li id="uRow-2-1"> + <div> + <div class="twisty"></div> + First child + </div> + </li> + <li id="uRow-2-2"> + <div> + <div class="twisty"></div> + Second child + </div> + </li> + </ul> + </li> + <li id="uRow-3" class="unselectable"> + <div>Item with grandchildren</div> + <ul> + <li id="uRow-3-1"> + <div> + <div class="twisty"></div> + First child + </div> + <ul> + <li id="uRow-3-1-1"> + <div> + <div class="twisty"></div> + First grandchild + </div> + </li> + <li id="uRow-3-1-2"> + <div> + <div class="twisty"></div> + Second grandchild + </div> + </li> + </ul> + </li> + </ul> + </li> + </ul> +</body> +</html> |