DevTools: Add support for :focus-visible selector

Image: https://imgur.com/pv5mo8l

Bug: 817199
Change-Id: I3f2fbdde41f5126be392e6197edbf5cf9cc44744
Reviewed-on: https://chromium-review.googlesource.com/961881Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
Reviewed-by: Alice Boxhall <aboxhall@chromium.org>
Commit-Queue: Rob Dodson <robdodson@chromium.org>
Cr-Commit-Position: refs/heads/master@{#543915}

third_party/WebKit/Source/core/css/SelectorChecker.cpp

@@ -1361,10 +1361,19 @@ bool SelectorChecker::MatchesFocusPseudoClass(const Element& element) {
 }
 
 bool SelectorChecker::MatchesFocusVisiblePseudoClass(const Element& element) {
+  bool force_pseudo_state = false;
+  probe::forcePseudoState(const_cast<Element*>(&element),
+                          CSSSelector::kPseudoFocusVisible,
+                          &force_pseudo_state);
+  if (force_pseudo_state)
+    return true;
   bool always_show_focus_ring =
       IsHTMLFormControlElement(element) &&
       ToHTMLFormControlElement(element).ShouldShowFocusRingOnMouseFocus();
-  return MatchesFocusPseudoClass(element) &&
+  // Avoid probing for force_pseudo_state. Otherwise, as currently implemented,
+  // :focus-visible will always match if :focus is forced, since no focus
+  // source flags will be set.
+  return element.IsFocused() && IsFrameFocused(element) &&
          (!element.WasFocusedByMouse() || always_show_focus_ring);
 }
 

third_party/WebKit/Source/core/inspector/InspectorCSSAgent.cpp

@@ -870,6 +870,9 @@ void InspectorCSSAgent::ForcePseudoState(Element* element,
     case CSSSelector::kPseudoFocusWithin:
       force = forced_pseudo_state & kPseudoFocusWithin;
       break;
+    case CSSSelector::kPseudoFocusVisible:
+      force = forced_pseudo_state & kPseudoFocusVisible;
+      break;
     case CSSSelector::kPseudoHover:
       force = forced_pseudo_state & kPseudoHover;
       break;

third_party/WebKit/Source/devtools/front_end/elements/ElementStatePaneWidget.js

@@ -50,6 +50,11 @@ Elements.ElementStatePaneWidget = class extends UI.Widget {
 
     tr = table.createChild('tr');
     tr.appendChild(createCheckbox.call(null, 'focus-within'));
+    try {
+      tr.querySelector(':focus-visible');  // Will throw if not supported
+      tr.appendChild(createCheckbox.call(null, 'focus-visible'));
+    } catch (e) {
+    }
 
     this.contentElement.appendChild(table);
     UI.context.addFlavorChangeListener(SDK.DOMNode, this._update, this);

third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js

@@ -104,9 +104,15 @@ Elements.ElementsTreeElement = class extends UI.TreeElement {
   /**
    * @param {!UI.ContextMenu} contextMenu
    * @param {!SDK.DOMNode} node
+   * @suppressGlobalPropertiesCheck
    */
   static populateForcedPseudoStateItems(contextMenu, node) {
     const pseudoClasses = ['active', 'hover', 'focus', 'visited', 'focus-within'];
+    try {
+      document.querySelector(':focus-visible');  // Will throw if not supported
+      pseudoClasses.push('focus-visible');
+    } catch (e) {
+    }
     const forcedPseudoState = node.domModel().cssModel().pseudoState(node);
     const stateMenu = contextMenu.debugSection().appendSubMenuItem(Common.UIString('Force state'));
     for (let i = 0; i < pseudoClasses.length; ++i) {