[DevTools] Accessibility: Show siblings and children of selected node

third_party/WebKit/Source/devtools/front_end/ui/treeoutline.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 219 matching lines @@
         if (!this.selectedTreeElement || event.shiftKey || event.metaKey || event.ctrlKey)
             return;
 
         var handled = false;
         var nextSelectedElement;
         if (event.key === "ArrowUp" && !event.altKey) {
             handled = this.selectPrevious();
         } else if (event.key === "ArrowDown" && !event.altKey) {
             handled = this.selectNext();
         } else if (event.key === "ArrowLeft") {
-            if (this.selectedTreeElement.expanded) {
-                if (event.altKey)
-                    this.selectedTreeElement.collapseRecursively();
-                else
-                    this.selectedTreeElement.collapse();
-                handled = true;
-            } else if (this.selectedTreeElement.parent && !this.selectedTreeElement.parent.root) {
-                handled = true;
-                if (this.selectedTreeElement.parent.selectable) {
-                    nextSelectedElement = this.selectedTreeElement.parent;
-                    while (nextSelectedElement && !nextSelectedElement.selectable)
-                        nextSelectedElement = nextSelectedElement.parent;
-                    handled = nextSelectedElement ? true : false;
-                } else if (this.selectedTreeElement.parent)
-                    this.selectedTreeElement.parent.collapse();
-            }
+            handled = this.selectedTreeElement.collapseOrAscend(event.altKey);
         } else if (event.key === "ArrowRight") {
             if (!this.selectedTreeElement.revealed()) {
                 this.selectedTreeElement.reveal();
                 handled = true;
-            } else if (this.selectedTreeElement._expandable) {
-                handled = true;
-                if (this.selectedTreeElement.expanded) {
-                    nextSelectedElement = this.selectedTreeElement.firstChild();
-                    while (nextSelectedElement && !nextSelectedElement.selectable)
-                        nextSelectedElement = nextSelectedElement.nextSibling;
-                    handled = nextSelectedElement ? true : false;
-                } else {
-                    if (event.altKey)
-                        this.selectedTreeElement.expandRecursively();
-                    else
-                        this.selectedTreeElement.expand();
-                }
+            } else {
+                handled = this.selectedTreeElement.descendOrExpand(event.altKey);
             }
         } else if (event.keyCode === 8 /* Backspace */ || event.keyCode === 46 /* Delete */)
             handled = this.selectedTreeElement.ondelete();
         else if (isEnterKey(event))
             handled = this.selectedTreeElement.onenter();
         else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Space.code)
             handled = this.selectedTreeElement.onspace();
 
-        if (nextSelectedElement) {
-            nextSelectedElement.reveal();
-            nextSelectedElement.select(false, true);
-        }
-
         if (handled)
             event.consume(true);
     },
 
     /**
      * @param {!TreeElement} treeElement
      * @param {boolean} center
      */
     _deferredScrollIntoView: function(treeElement, center)
     {
@@ skipping 610 matching lines @@
             maxDepth = 3;
 
         while (item) {
             if (depth < maxDepth)
                 item.expand();
             item = item.traverseNextTreeElement(false, this, (depth >= maxDepth), info);
             depth += info.depthChange;
         }
     },
 
+
+    /**
+     * @param {boolean} altKey
+     * @return {boolean}
+     */
+    collapseOrAscend: function(altKey)

[dgozman, 2016/10/31 21:36:31]

Let's land changes to tree outline separately, with a description of what's
happening and why.

[aboxhall, 2016/10/31 22:45:15]

Sounds good, will do.

+    {
+        if (this.expanded) {
+            if (altKey)
+                this.collapseRecursively();
+            else
+                this.collapse();
+            return true;
+        }
+
+        if (!this.parent || this.parent.root)
+            return false;
+
+        var handled = true;
+        var nextSelectedElement;
+        if (this.parent.selectable) {
+            nextSelectedElement = this.parent;
+            while (nextSelectedElement && !nextSelectedElement.selectable)
+                nextSelectedElement = nextSelectedElement.parent;
+            handled = nextSelectedElement ? true : false;
+        } else if (this.parent) {
+            this.parent.collapse();
+        }
+
+        if (nextSelectedElement) {
+            nextSelectedElement.reveal();
+            nextSelectedElement.select(false, true);
+        }
+
+        return handled;
+    },
+
+    /**
+     * @param {boolean} altKey
+     * @return {boolean}
+     */
+    descendOrExpand: function(altKey)
+    {
+        if (!this._expandable)
+            return false;
+
+        var handled = true;
+        var nextSelectedElement;
+        if (this.expanded) {
+            nextSelectedElement = this.firstChild();
+            while (nextSelectedElement && !nextSelectedElement.selectable)
+                nextSelectedElement = nextSelectedElement.nextSibling;
+            handled = nextSelectedElement ? true : false;
+        } else {
+            if (altKey)
+                this.expandRecursively();
+            else
+                this.expand();
+        }
+
+        if (nextSelectedElement) {
+            nextSelectedElement.reveal();
+            nextSelectedElement.select(false, true);
+        }
+
+        return handled;
+    },
+
     /**
      * @param {boolean=} center
      */
     reveal: function(center)
     {
         var currentAncestor = this.parent;
         while (currentAncestor && !currentAncestor.root) {
             if (!currentAncestor.expanded)
                 currentAncestor.expand();
             currentAncestor = currentAncestor.parent;
@@ skipping 225 matching lines @@
     isEventWithinDisclosureTriangle: function(event)
     {
         // FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446)
         var paddingLeftValue = window.getComputedStyle(this._listItemNode).paddingLeft;
         console.assert(paddingLeftValue.endsWith("px"));
         var computedLeftPadding = parseFloat(paddingLeftValue);
         var left = this._listItemNode.totalOffsetLeft() + computedLeftPadding;
         return event.pageX >= left && event.pageX <= left + TreeElement._ArrowToggleWidth && this._expandable;
     }
 };