<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=130911">Bug 130911: Web Inspector: AXI: node-link-list should be collapsible</a>.</p>

<li>Open Accessibility Inspector.</li>

<li>In DOM tree in the Web Inspector, click on the unordered list below.</li>

<li>In the Accessibility Inspector, you should be able to see that 5 out of 10 nodes are showing. The remaining 5 are hidden. If you do not see this, the test fails.</li>

<li>In the Accessibility Inspector click on "5 more&hellip;" to reveal the remaining 5 nodes.</li>

<li>If the click on the said link does not function as described in #4, the test fails.</li>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

<li>Item 5</li>

<li>Item 6</li>

<li>Item 7</li>

<li>Item 8</li>

<li>Item 9</li>

<li>Item 10</li>

2016-01-23 Aaron Chu <arona.chu@gmail.com>

Web Inspector: AXI: node-link-list should be collapsible

https://bugs.webkit.org/show_bug.cgi?id=130911

Reviewed by Timothy Hatcher.

Accessibility Inspector: for a very long children node list, only the first 5 nodes are shown.

Remaining nodes are hidden by a "# More…" link by which a user can click to reveal the remainder

of the node list.

* Localizations/en.lproj/localizedStrings.js:

* UserInterface/Views/DOMNodeDetailsSidebarPanel.js:

(WebInspector.DOMNodeDetailsSidebarPanel.prototype._refreshAccessibility.linkListForNodeIds):

* UserInterface/Views/Main.css:

(.expand-list-button):

(.node-link-list, .node-link-list li:not([hidden])):

(.node-link-list, .node-link-list li): Deleted.

if (!nodeIds)

return null;

const itemsToShow = 5;

let hasLinks = false;

let listItemCount = 0;

let container = document.createElement("div");

container.classList.add("list-container")

let linkList = container.createChild("ul", "node-link-list");

let initiallyHiddenItems = [];

for (let nodeId of nodeIds) {

let node = WebInspector.domTreeManager.nodeForId(nodeId);

if (!node)

continue;

let link = WebInspector.linkifyAccessibilityNodeReference(node);

hasLinks = true;

let li = linkList.createChild("li");

li.appendChild(link);

if (listItemCount >= itemsToShow) {

li.hidden = true;

initiallyHiddenItems.push(li);

}

listItemCount++;

container.appendChild(linkList);

if (listItemCount > itemsToShow) {

let moreNodesButton = container.createChild("button", "expand-list-button");

moreNodesButton.textContent = WebInspector.UIString("%d More\u2026").format(listItemCount - itemsToShow);

moreNodesButton.addEventListener("click", () => {

initiallyHiddenItems.forEach((element) => element.hidden = false);

moreNodesButton.remove();

});

}

if (hasLinks)

return container;

return null;

.expand-list-button {

-webkit-appearance: none;

text-decoration: underline;

background-color: transparent;

padding: 0;

margin: 0;

border: 0;

cursor: pointer;

color: black;

}

.node-link-list, .node-link-list li:not([hidden]) {