Site Settings WebUI: padding for policy indicator outline when last

Also fixing focus issue with cr-policy-pref-indicator. Need to pass
make a function that returns the iron-icon that is the focusable
element and is within the shadow DOM.

Bug: 878331
Change-Id: I4c04aae355e713a086e69df3dd480193005b72b3
Reviewed-on: https://chromium-review.googlesource.com/1195674
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#593241}

chrome/browser/resources/md_history/history_item.js

@@ -6,7 +6,7 @@ class HistoryFocusRow extends cr.ui.FocusRow {
   /**
    * @param {!Element} root
    * @param {?Element} boundary
-   * @param {cr.ui.FocusRow.Delegate} delegate
+   * @param {cr.ui.FocusRowDelegate} delegate
    */
   constructor(root, boundary, delegate) {
     super(root, boundary, delegate);
@@ -35,7 +35,7 @@ class HistoryFocusRow extends cr.ui.FocusRow {
 }
 
 cr.define('md_history', function() {
-  /** @implements {cr.ui.FocusRow.Delegate} */
+  /** @implements {cr.ui.FocusRowDelegate} */
   class FocusRowDelegate {
     /** @param {{lastFocused: Object}} historyItemElement */
     constructor(historyItemElement) {

chrome/browser/resources/settings/focus_row_behavior.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/** @implements {cr.ui.FocusRow.Delegate} */
+/** @implements {cr.ui.FocusRowDelegate} */
 class FocusRowDelegate {
   /** @param {{lastFocused: Object}} listItem */
   constructor(listItem) {
@@ -41,7 +41,7 @@ class FocusRowDelegate {
 class VirtualFocusRow extends cr.ui.FocusRow {
   /**
    * @param {!Element} root
-   * @param {cr.ui.FocusRow.Delegate} delegate
+   * @param {cr.ui.FocusRowDelegate} delegate
    */
   constructor(root, delegate) {
     super(root, /* boundary */ null, delegate);
@@ -125,11 +125,12 @@ const FocusRowBehavior = {
 
       const controls = this.root.querySelectorAll('[focus-row-control]');
 
-      for (let i = 0; i < controls.length; i++) {
+      controls.forEach(control => {
         this.row_.addItem(
-            controls[i].getAttribute('focus-type'),
-            /** @type {HTMLElement} */ (controls[i]));
-      }
+            control.getAttribute('focus-type'),
+            /** @type {!HTMLElement} */
+            (cr.ui.FocusRow.getFocusableElement(control)));
+      });
     }
   },
 

chrome/browser/resources/settings/site_settings/site_list_entry.html

@@ -17,6 +17,10 @@
 <dom-module id="site-list-entry">
   <template>
     <style include="settings-shared">
+      :host {
+        padding-inline-end: 4px;
+      }
+
       .settings-row {
         flex: 1
       }

chrome/test/data/webui/settings/cr_settings_interactive_ui_tests.js

@@ -57,7 +57,9 @@ CrSettingsFocusRowBehavior.prototype = {
 
   /** @override */
   extraLibraries: CrSettingsInteractiveUITest.prototype.extraLibraries.concat([
+    ROOT_PATH + 'ui/webui/resources/js/util.js',
     'focus_row_behavior_test.js',
+    'test_util.js',
   ]),
 };
 

chrome/test/data/webui/settings/focus_row_behavior_test.js

@@ -7,6 +7,14 @@ suite('focus-row-behavior', function() {
 
   suiteSetup(function() {
     document.body.innerHTML = `
+      <dom-module id="button-three">
+        <template>
+          <button>
+            fake button three
+          </button>
+        </template>
+      </dom-module>
+
       <dom-module id="focus-row-element">
         <template>
           <div id="container" focus-row-container>
@@ -17,11 +25,22 @@ suite('focus-row-behavior', function() {
             <button id="controlTwo" focus-row-control focus-type='fake-btn-two'>
               fake button two
             </button>
+            <button-three focus-row-control focus-type='fake-btn-three'>
+            </button-three>
           </div>
         </template>
       </dom-module>
     `;
 
+    Polymer({
+      is: 'button-three',
+
+      /** @return {!Element} */
+      getFocusableElement: function() {
+        return this.$$('button');
+      },
+    });
+
     Polymer({
       is: 'focus-row-element',
       behaviors: [FocusRowBehavior],
@@ -75,4 +94,17 @@ suite('focus-row-behavior', function() {
     testElement.fire('focus');
     assertFalse(focused);
   });
+
+  test('when focus-override is defined, returned element gains focus', () => {
+    const lastButton = document.createElement('button');
+    lastButton.setAttribute('focus-type', 'fake-btn-three');
+    testElement.lastFocused = lastButton;
+
+    const wait = test_util.eventToPromise('focus', testElement);
+    testElement.fire('focus');
+    return wait.then(() => {
+      const button = getDeepActiveElement();
+      assertEquals('fake button three', button.textContent.trim());
+    });
+  });
 });

ui/webui/resources/cr_elements/policy/BUILD.gn

@@ -54,6 +54,7 @@ js_library("cr_policy_network_indicator") {
   deps = [
     ":cr_policy_indicator_behavior",
     ":cr_policy_network_behavior",
+    ":cr_tooltip_icon",
     "../chromeos/network:cr_onc_types",
   ]
 }

ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js

@@ -78,4 +78,9 @@ Polymer({
     return this.getIndicatorTooltip(
         indicatorType, this.pref.controlledByName || '', matches);
   },
+
+  /** @return {!Element} */
+  getFocusableElement: function() {
+    return this.$$('cr-tooltip-icon').getFocusableElement();
+  },
 });

ui/webui/resources/cr_elements/policy/cr_tooltip_icon.js

@@ -9,4 +9,9 @@ Polymer({
     iconClass: String,
     tooltipText: String,
   },
+
+  /** @return {!Element} */
+  getFocusableElement: function() {
+    return this.$.indicator;
+  },
 });
\ No newline at end of file

ui/webui/resources/js/cr/ui/focus_grid.js

@@ -25,7 +25,7 @@ cr.define('cr.ui', function() {
    *   focusable  focusable  focusable
    *
    * @constructor
-   * @implements {cr.ui.FocusRow.Delegate}
+   * @implements {cr.ui.FocusRowDelegate}
    */
   function FocusGrid() {
     /** @type {!Array<!cr.ui.FocusRow>} */