arc: avoid checkbox AutomationNode issue

Avoid checkbox AutomationNode issue https://crbug.com/638498

BUG=638501
BUG=b/30906810
TEST=tested as described in the issue
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2254673003
Cr-Commit-Position: refs/heads/master@{#412740}

chrome/browser/resources/chromeos/arc_support/background.js

@@ -196,8 +196,7 @@ var onLearnMore = function(event) {
 function setMetricsMode(text, canEnable, on) {
   var doc = appWindow.contentWindow.document;
   var enableMetrics = doc.getElementById('enable-metrics');
-  var enableMetricsContainer = doc.getElementById('enable-metrics-container');
-  enableMetricsContainer.hidden = !canEnable;
+  enableMetrics.hidden = !canEnable;
   enableMetrics.checked = on;
 
   var onSettings = function(event) {

chrome/browser/resources/chromeos/arc_support/main.css

@@ -48,11 +48,6 @@ webview,
   width: 1px;
 }
 
-.checkbox-container {
-  margin: 0;
-  padding: 0 8px 0 0;
-}
-
 .checkbox-option {
   height: 12px;
   margin: 0;
@@ -123,6 +118,11 @@ webview,
   width: 640px;
 }
 
+.section-checkbox-container > input[type='checkbox'] {
+  flex-shrink: 0;
+  margin: 0 8px 0 0;
+}
+
 .section-terms {
   border: 1px solid #e6e6e6;
   color: rgba(0, 0, 0, 0.54);

chrome/browser/resources/chromeos/arc_support/main.html

@@ -73,23 +73,17 @@
           <webview id="terms-view" partition="persist:arc_support"></webview>
         </div>
         <label class="layout horizontal section-checkbox-container">
-          <div class="checkbox-container" id="enable-metrics-container" hidden>
-            <input type="checkbox" class="checkbox-option" id="enable-metrics">
-          </div>
+          <input type="checkbox" class="checkbox-option" id="enable-metrics">
           <p class="checkbox-text" id="text-metrics"></p>
         </label>
         <label class="layout horizontal section-checkbox-container">
-          <div class="checkbox-container">
-            <input type="checkbox" class="checkbox-option"
-                id="enable-backup-restore">
-          </div>
+          <input type="checkbox" class="checkbox-option"
+              id="enable-backup-restore">
           <p class="checkbox-text" id="text-backup-restore"></p>
         </label>
         <label class="layout horizontal section-checkbox-container">
-          <div class="checkbox-container">
-            <input type="checkbox" class="checkbox-option"
-                id="enable-location-service">
-          </div>
+          <input type="checkbox" class="checkbox-option"
+              id="enable-location-service">
           <p class="checkbox-text" id="text-location-service"></p>
         </label>
         <div class="layout horizontal end-justified section-buttons">