Allow features to require optional permissions

Design doc:
https://docs.google.com/document/d/1OhL0Yh7SmWffXyjW_XVQOK95Fqh7gLltk1eEtnKN8Ds/edit

Fixed: twpowertools:86
Change-Id: Iccb22aac2b285307854b7a4c002e9702c24d57f2
diff --git a/src/static/options/chrome_style/chrome_style.css b/src/static/options/chrome_style/chrome_style.css
index 4d3c91b..3f8b076 100644
--- a/src/static/options/chrome_style/chrome_style.css
+++ b/src/static/options/chrome_style/chrome_style.css
@@ -84,7 +84,6 @@
 select,
 input[type='checkbox'],
 input[type='radio'] {
-  -webkit-appearance: none;
   -webkit-user-select: none;
   background-image: linear-gradient(#ededed, #ededed 38%, #dedede);
   border: 1px solid rgba(0, 0, 0, 0.25);
@@ -98,6 +97,12 @@
   text-shadow: 0 1px 0 rgb(240, 240, 240);
 }
 
+select,
+input[type='checkbox']:not(:indeterminate),
+input[type='radio'] {
+  -webkit-appearance: none;
+}
+
 :-webkit-any(button,
              input[type='button'],
              input[type='submit']),
@@ -173,7 +178,7 @@
 
 /* Checked ********************************************************************/
 
-input[type='checkbox']:checked::before {
+input[type='checkbox']:checked:not(:indeterminate)::before {
   -webkit-user-select: none;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAQAAAADpb+tAAAAZ0lEQVR4AWNAA2xAiAXEM8xiMEAXVGJYz7AZCFEkmBi6wYKtEC4/gxqY9gILrmYQhwiXMWxkiAVyVoOFfSCCpkAmCK4Fk+1QA4GqekECUAMkka0KY9gIFvZDd5oawwyGBqACdIDqOwAQzBnTWnnU+gAAAABJRU5ErkJggg==);
   background-size: 100% 100%;
diff --git a/src/static/options/experiments.html b/src/static/options/experiments.html
index f5452fa..0f42f11 100644
--- a/src/static/options/experiments.html
+++ b/src/static/options/experiments.html
@@ -12,6 +12,7 @@
       <h1 data-i18n="experiments_title"></h1>
       <p data-i18n="experiments_description"></p>
       <form>
+        <div id="optional-permissions-warning" hidden data-i18n="optionalpermissionswarning_header"></div>
         <div class="actions"><button id="save" data-i18n="save"></button></div>
       </form>
       <div id="save-indicator"></div>
diff --git a/src/static/options/options.css b/src/static/options/options.css
index ce79b81..68057ce 100644
--- a/src/static/options/options.css
+++ b/src/static/options/options.css
@@ -24,16 +24,22 @@
   cursor: pointer;
 }
 
-.option, #kill-switch-warning {
+.option,
+    #kill-switch-warning,
+    #optional-permissions-warning {
   margin: 4px 0;
   line-height: 1.8em;
 }
 
-#kill-switch-warning, .kill-switch-label {
+#kill-switch-warning,
+    .kill-switch-label,
+    #optional-permissions-warning,
+    .optional-permissions-warning-label {
   color: red;
 }
 
-.kill-switch-label {
+.kill-switch-label,
+    .optional-permissions-warning-label {
   margin: 0 0 8px 0;
   line-height: 1em;
 }
diff --git a/src/static/options/options.html b/src/static/options/options.html
index 8a0915a..36fd08a 100644
--- a/src/static/options/options.html
+++ b/src/static/options/options.html
@@ -39,6 +39,7 @@
         </a>
       </div>
       <form>
+        <div id="optional-permissions-warning" hidden data-i18n="optionalpermissionswarning_header"></div>
         <div id="kill-switch-warning" hidden data-i18n="killswitchwarning"></div>
         <div id="options-container"></div>
         <div class="actions"><button id="save" data-i18n="save"></button></div>