arc: Use location service consent.

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

Index: chrome/browser/resources/chromeos/arc_support/main.html
diff --git a/chrome/browser/resources/chromeos/arc_support/main.html b/chrome/browser/resources/chromeos/arc_support/main.html
index c9dd9b23c66d5f74e811846f113537a7b1d5f568..1bf4f200d250e734de28659649d84f872b10b16d 100644
--- a/chrome/browser/resources/chromeos/arc_support/main.html
+++ b/chrome/browser/resources/chromeos/arc_support/main.html
@@ -63,16 +63,26 @@
           <webview id="terms-view" partition="persist:arc_support"></webview>
         </div>
         <div class="layout horizontal section-checkbox-container">
-          <input type="checkbox" class="checkbox-option" id="enable-metrics"
-              hidden>
+          <div class="checkbox-container">

[khmel, 2016/07/25 15:36:05]

I found weird behavior when size of checkbox depends on number of lines in text
description. This makes checkbox with declared 16px in css file appeared as 12px
checkbox for 2 lines and 8px for 3 lines text description
(https://drive.google.com/a/google.com/file/d/0B63tZNwdjs-qejg3dEMwek9TLVk/vie...).
It was also not possible to apply padding because it was ignored. I found
workaround by wrapping checkbox by div.

[xiyuan, 2016/07/25 18:03:40]

Probably due to polymer's "layout horizontal" trying to something smart.

[khmel, 2016/07/25 22:48:48]

Yes, did some experiments and can confirm that problem because of flex layout.
Once I set flex layout checkbox is affected. I googled and found similar problem
here (webkit bug?):
http://stackoverflow.com/questions/34220553/flexbox-resizes-a-checkbox-too-small
I tried to use different workaround and it seems current approach with wrapping
<input> is more convenient.

+            <input type="checkbox" class="checkbox-option" id="enable-metrics"
+                hidden>
+          </div>
           <p class="checkbox-text" id="text-metrics"></p>

[xiyuan, 2016/07/25 18:03:40]

While you are changing this file, can we change this to a label and associated
with corresponding checkbox. Otherwise, user has to click on the checkbox to
toggle it, kind of hard to aim.

i.e. replace this <p> with
<label class="checkbox-text" id="text-metrics" for="enable-metrics"></label>

or wrap the <input> and <p> with <label>

[khmel, 2016/07/25 22:48:48]

presubmit is not happy with with 'for'. So wrapping whole block. That is more
user friendly indeed. Thanks for idea!

         </div>
-        <div id="section-backup-restore" class="layout horizontal
-            section-checkbox-container">
-          <input type="checkbox" class="checkbox-option"
-              id="enable-backup-restore">
+        <div class="layout horizontal section-checkbox-container">
+          <div class="checkbox-container">
+            <input type="checkbox" class="checkbox-option"
+                id="enable-backup-restore">
+          </div>
           <p class="checkbox-text" id="text-backup-restore"></p>
         </div>
+        <div class="layout horizontal section-checkbox-container">
+          <div class="checkbox-container">
+            <input type="checkbox" class="checkbox-option"
+                id="enable-location-service">
+          </div>
+          <p class="checkbox-text" id="text-location-service"></p>
+        </div>
         <div class="layout horizontal end-justified section-buttons">
           <paper-button class="white" id="button-cancel"
               i18n-content="buttonCancel">