Settings WebUI: fix color issues for some instances of cr-icon-button

In order to support opaque ripples for cr-icon-button, the instances
that used the background-image CSS property to specify the icon were
changed to use --cr-icon-image. The reason is the mask-image property
is being used instead inside cr-icon-button to allow the icon color
to be easily changed as needed using CSS.

The colors that were specified in the original SVG files need to now
be specified in CSS using the --cr-icon-button-color CSS variable.

This does not work for the camera-shutter-icon and
videocan-shutter-icon which have two colors: one for the fill and one
for the stroke. The mask-image approach is not able to accommodate
more than one color. For this reason, the icons used in cr-camera
were changed to use iron-icon which is also support by
cr-icon-button.

In order to support icons that have different stroke and fill colors
the following CSS variables have been added. The *-focus-* variables
are for when the ripple is showing.

--cr-icon-button-fill-color
--cr-icon-button-focus-fill-color
--cr-icon-button-focus-stroke-color
--cr-icon-button-stroke-color

These new variables are to be used in place of the existing CSS
variables --cr-icon-button-color and --cr-icon-button-focus-color.

Bug: 1022752
Change-Id: I0a010e500186e029ca71445f200d4606312deb7b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1906962
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#715060}

chrome/browser/resources/settings/settings_icons_css.html → chrome/browser/resources/settings/chromeos/os_settings_icons_css.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+
 <!-- Common icon classes for Material Design settings page. -->
-<dom-module id="settings-icons">
+<dom-module id="os-settings-icons">
   <template>
     <style>
-<if expr="chromeos">
       cr-icon-button.icon-add-circle {
-        --cr-icon-image: url(./images/settings_icon_add_circle.svg);
+        --cr-icon-button-color: var(--google-blue-refresh-500);
+        --cr-icon-image: url(./images/icon_add_circle.svg);
       }
       cr-icon-button.icon-add-wifi {
-        --cr-icon-image: url(./images/settings_icon_add_wifi.svg);
+        --cr-icon-button-color: var(--google-blue-refresh-500);
+        --cr-icon-image: url(./images/icon_add_wifi.svg);
       }
-</if>
     </style>
   </template>
 </dom-module>

chrome/browser/resources/settings/internet_page/internet_page.html

@@ -9,6 +9,7 @@
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="../chromeos/os_settings_icons_css.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../prefs/prefs.html">
 <link rel="import" href="../route.html">
@@ -24,7 +25,7 @@
 
 <dom-module id="settings-internet-page">
   <template>
-    <style include="settings-shared">
+    <style include="os-settings-icons settings-shared">
       iron-icon.policy {
         height: 24px;
         margin-inline-end: 12px;

chrome/browser/resources/settings/internet_page/internet_subpage.html

@@ -12,13 +12,14 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="internet_page_browser_proxy.html">
+<link rel="import" href="../chromeos/os_settings_icons_css.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-internet-subpage">
   <template>
-    <style include="settings-shared iron-flex">
+    <style include="os-settings-icons settings-shared iron-flex">
       #networkListDiv {
         margin-top: var(--cr-section-vertical-margin);
         min-height: var(--settings-row-min-height);

chrome/browser/resources/settings/os_settings_resources.grd

@@ -343,10 +343,6 @@
       <structure name="IDR_OS_SETTINGS_CR_SETTINGS_PAGE_CSS_HTML"
                  file="settings_page_css.html"
                  type="chrome_html" />
-      <structure name="IDR_OS_SETTINGS_CR_SETTINGS_ICONS_CSS_HTML"
-                 file="settings_icons_css.html"
-                 flattenhtml="true"
-                 type="chrome_html" />
       <structure name="IDR_OS_SETTINGS_MAIN_PAGE_BEHAVIOR_HTML"
                  file="settings_page/main_page_behavior.html"
                  type="chrome_html" />
@@ -607,6 +603,10 @@
                  file="chromeos/os_icons.html"
                  type="chrome_html"
                  preprocess="true" />
+      <structure name="IDR_OS_SETTINGS_OS_SETTINGS_ICONS_CSS_HTML"
+                 file="chromeos/os_settings_icons_css.html"
+                 flattenhtml="true"
+                 type="chrome_html" />
       <structure name="IDR_OS_SETTINGS_POWERWASH_DIALOG_HTML"
                  file="chromeos/os_reset_page/os_powerwash_dialog.html"
                  type="chrome_html" />

chrome/browser/resources/settings/settings_resources.grd

@@ -287,10 +287,6 @@
       <structure name="IDR_SETTINGS_CR_SETTINGS_PAGE_CSS_HTML"
                  file="settings_page_css.html"
                  type="chrome_html" />
-      <structure name="IDR_SETTINGS_CR_SETTINGS_ICONS_CSS_HTML"
-                 file="settings_icons_css.html"
-                 flattenhtml="true"
-                 type="chrome_html" />
       <structure name="IDR_SETTINGS_MAIN_PAGE_BEHAVIOR_HTML"
                  file="settings_page/main_page_behavior.html"
                  type="chrome_html" />
@@ -668,6 +664,10 @@
                   file="chromeos/os_icons.html"
                   type="chrome_html"
                   preprocess="true" />
+        <structure name="IDR_OS_SETTINGS_OS_SETTINGS_ICONS_CSS_HTML"
+                   file="chromeos/os_settings_icons_css.html"
+                   flattenhtml="true"
+                   type="chrome_html" />
       </if>
       <structure name="IDR_SETTINGS_POWERWASH_DIALOG_HTML"
                  file="reset_page/powerwash_dialog.html"

chrome/browser/resources/settings/settings_shared_css.html

 <link rel="import" href="chrome://resources/cr_elements/search_highlight_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
-<link rel="import" href="settings_icons_css.html">
 <link rel="import" href="settings_vars_css.html">
 
 
 <!-- Common styles for Material Design settings. -->
 <dom-module id="settings-shared">
   <template>
-    <style include="settings-icons cr-shared-style search-highlight-style">
+    <style include="cr-shared-style search-highlight-style">
       /* Prevent action-links from being selected to avoid accidental
        * selection when trying to click it. */
       a[is=action-link] {

ui/webui/resources/cr_elements/chromeos/cr_picture/camera_alt_icon.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#FFFFFF" preserveAspectRatio="xMidYMid meet"><circle cx="12" cy="12" r="3.2"></circle><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"></path></svg>
\ No newline at end of file

ui/webui/resources/cr_elements/chromeos/cr_picture/camera_shutter_icon.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#EDEDED" stroke="#FFFFFF" preserveAspectRatio="xMidYMid meet"><circle cx="12" cy="12" r="10" stroke-width="2"></circle></svg>

ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html

@@ -5,6 +5,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="cr_png_behavior.html">
+<link rel="import" href="icons.html">
 
 <dom-module id="cr-camera">
   <template>
@@ -118,24 +119,20 @@
       }
 
       #takePhoto {
-        --cr-icon-image: url(camera_shutter_icon.svg);
+        --cr-icon-button-fill-color-focus: #ededed;
+        --cr-icon-button-fill-color: #ededed;
+        --cr-icon-button-stroke-color-focus: var(--google-blue-500);
+        --cr-icon-button-stroke-color: white;
       }
 
       :host([videomode]) #takePhoto {
-        --cr-icon-image: url(videocam_shutter_icon.svg);
+        --cr-icon-button-fill-color: red;
+        --cr-icon-button-fill-color-focus: red;
       }
 
       :host-context([dir=rtl]) #switchMode {
         float: left;
       }
-
-      #switchMode {
-       --cr-icon-image: url(videocam_icon.svg);
-      }
-
-      :host([videomode]) #switchMode {
-        --cr-icon-image: url(camera_alt_icon.svg);
-      }
     </style>
     <div id="perspectiveBox">
       <div id="userImageStreamCrop">
@@ -152,14 +149,16 @@
         <cr-icon-button id="takePhoto" tabindex="1"
             title="[[getTakePhotoLabel_(videomode, takePhotoLabel,
                 captureVideoLabel)]]" on-click="takePhoto"
-            disabled="[[!cameraOnline_]]">
+            disabled="[[!cameraOnline_]]"
+            iron-icon="[[getTakePhotoIcon_(videomode)]]">
         </cr-icon-button>
       </div>
       <div>
         <cr-icon-button hidden="[[!videoModeEnabled]]" id="switchMode"
             tabindex="2" on-click="onTapSwitchMode_"
             title="[[getSwitchModeLabel_(videomode, switchModeToCameraLabel,
-                switchModeToVideoLabel)]]" disabled="[[!cameraOnline_]]">
+                switchModeToVideoLabel)]]" disabled="[[!cameraOnline_]]"
+            iron-icon="[[getSwitchModeIcon_(videomode)]]">
         </cr-icon-button>
       </div>
     </div>

ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.js

@@ -288,6 +288,15 @@ Polymer({
         forwardBackwardImageSequence);
   },
 
+  /**
+   * @return {string}
+   * @private
+   */
+  getTakePhotoIcon_: function() {
+    return this.videomode ? 'cr-picture:videocam-shutter-icon' :
+                            'cr-picture:camera-shutter-icon';
+  },
+
   /**
    * Returns the label to use for take photo button.
    * @return {string}
@@ -297,6 +306,15 @@ Polymer({
     return videomode ? videoLabel : photoLabel;
   },
 
+  /**
+   * @return {string}
+   * @private
+   */
+  getSwitchModeIcon_: function() {
+    return this.videomode ? 'cr-picture:camera-alt-icon' :
+                            'cr-picture:videocam-icon';
+  },
+
   /**
    * Returns the label to use for switch mode button.
    * @return {string}

ui/webui/resources/cr_elements/chromeos/cr_picture/icons.html

+<link rel="import" href="../../../html/polymer.html">
+
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
+
+<iron-iconset-svg name="cr-picture" size="24">
+  <svg>
+    <defs>
+      <g id="camera-alt-icon"><circle cx="12" cy="12" r="3.2"></circle><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"></path></g>
+      <g id="camera-shutter-icon"><circle cx="12" cy="12" r="10" stroke-width="2"></circle></g>
+      <g id="videocam-icon"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"></path></g>
+      <g id="videocam-shutter-icon"><circle cx="12" cy="12" r="7" stroke-width="8"></circle></g>
+    </defs>
+  </svg>
+</iron-iconset-svg>

ui/webui/resources/cr_elements/chromeos/cr_picture/videocam_icon.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#FFFFFF" preserveAspectRatio="xMidYMid meet"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>

ui/webui/resources/cr_elements/chromeos/cr_picture/videocam_shutter_icon.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="red" stroke="#FFFFFF" preserveAspectRatio="xMidYMid meet"><circle cx="12" cy="12" r="7" stroke-width="8"></circle></svg>

ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html

@@ -8,7 +8,16 @@
   <template>
     <style>
       :host {
+        /* TODO(aee): Delete --cr-icon-button-color and replace all usages with
+         *     --cr-icon-button-fill-color. */
         --cr-icon-button-color: var(--google-grey-refresh-700);
+        --cr-icon-button-fill-color-focus: var(--cr-icon-button-focus-color);
+        --cr-icon-button-fill-color: var(--cr-icon-button-color);
+        /* TODO(aee): Delete --cr-icon-button-focus-color and replace all usages
+         *     with --cr-icon-button-fill-color-focus. */
+        --cr-icon-button-focus-color: white;
+        --cr-icon-button-stroke-color-focus: none;
+        --cr-icon-button-stroke-color: none;
         --cr-icon-button-icon-start-offset: 0;
         --cr-icon-button-icon-size: 20px;
         --cr-icon-button-size: 36px;
@@ -60,7 +69,7 @@
       }
 
       :host-context([a11y-enhanced]):host([ripple-showing_]) #maskedImage {
-        background-color: var(--cr-icon-button-focus-color, white);
+        background-color: var(--cr-icon-button-fill-color-focus);
       }
 
       #icon {
@@ -76,15 +85,18 @@
       }
 
       iron-icon {
-        --iron-icon-fill-color: var(--cr-icon-button-color);
+        --iron-icon-fill-color: var(--cr-icon-button-fill-color);
+        --iron-icon-stroke-color: var(--cr-icon-button-stroke-color);
         --iron-icon-height: var(--cr-icon-button-icon-size);
         --iron-icon-width: var(--cr-icon-button-icon-size);
-        transition: fill var(--cr-icon-button-transition);
+        transition: fill var(--cr-icon-button-transition),
+            stroke var(--cr-icon-button-transition);
         z-index: 1;
       }
 
       :host-context([a11y-enhanced]):host([ripple-showing_]) iron-icon {
-        --iron-icon-fill-color: var(--cr-icon-button-focus-color, white);
+        --iron-icon-fill-color: var(--cr-icon-button-fill-color-focus);
+        --iron-icon-stroke-color: var(--cr-icon-button-stroke-color-focus);
       }
 
       paper-ripple {
@@ -93,30 +105,10 @@
       }
 
 
-      :host-context([a11y-enhanced]) paper-ripple {
-        --paper-ripple-opacity: 1;
-        opacity: 0;
-        transition: opacity var(--cr-icon-button-transition);
-      }
-
       @media (prefers-color-scheme: dark) {
         :host {
           --cr-icon-button-color: var(--google-grey-refresh-500);
-        }
-
-        :host-context([a11y-enhanced]):host([ripple-showing_]) iron-icon {
-          --iron-icon-fill-color: var(--cr-icon-button-focus-color,
-              var(--google-grey-900));
-        }
-
-        :host(:not([iron-icon])) #maskedImage {
-          background-color: var(--cr-icon-button-color,
-              var(--google-grey-refresh-500));
-        }
-
-        :host-context([a11y-enhanced]):host([ripple-showing_]) #maskedImage {
-          background-color: var(--cr-icon-button-focus-color,
-              var(--google-grey-900));
+          --cr-icon-button-focus-color: var(--google-grey-900);
         }
 
         paper-ripple {
@@ -124,6 +116,12 @@
         }
       }
 
+      :host-context([a11y-enhanced]) paper-ripple {
+        --paper-ripple-opacity: 1;
+        opacity: 0;
+        transition: opacity var(--cr-icon-button-transition);
+      }
+
       :host-context([a11y-enhanced]):host([ripple-showing_]) paper-ripple {
         opacity: 1;
       }

ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.js

@@ -22,9 +22,28 @@
  *   </template>
  * </dom-module>
  *
+ * In general when an icon is specified using a class, the expectation is the
+ * class will set an image to the --cr-icon-image variable.
+ *
  * Example of using an iron-icon:
  * <link rel="import" href="chrome://resources/cr_elements/icons.html">
  * <cr-icon-button iron-icon="cr:icon-key"></cr-icon-button>
+ *
+ * The color of the icon can be overridden using CSS variables. When using
+ * iron-icon both the fill and stroke can be overridden the variables:
+ * --cr-icon-button-fill-color
+ * --cr-icon-button-fill-color-focus
+ * --cr-icon-button-stroke-color
+ * --cr-icon-button-stroke-color-focus
+ *
+ * When not using iron-icon (ie. specifying --cr-icon-image), the icons support
+ * one color and the 'stroke' variables are ignored.
+ *
+ * The '-focus' variables are used for opaque ripple support. This is enabled
+ * when the 'a11y-enhanced' attribute on <html> is present.
+ *
+ * When using iron-icon's, more than one icon can be specified by setting
+ * the |ironIcon| property to a comma-delimited list of keys.
  */
 Polymer({
   is: 'cr-icon-button',

ui/webui/resources/cr_elements_images.grdp

@@ -47,18 +47,6 @@
   <include name="IDR_WEBUI_IMAGES_OPEN_IN_NEW"
            file="images/open_in_new.svg" type="BINDATA" compress="gzip" />
   <if expr="chromeos">
-    <include name="IDR_CR_ELEMENTS_CAMERA_ALT_ICON_SVG"
-             file="cr_elements/chromeos/cr_picture/camera_alt_icon.svg"
-             type="BINDATA" compress="gzip" />
-    <include name="IDR_CR_ELEMENTS_CAMERA_SHUTTER_ICON_SVG"
-             file="cr_elements/chromeos/cr_picture/camera_shutter_icon.svg"
-             type="BINDATA" compress="gzip" />
-    <include name="IDR_CR_ELEMENTS_VIDEOCAM_ICON_SVG"
-             file="cr_elements/chromeos/cr_picture/videocam_icon.svg"
-             type="BINDATA" compress="gzip" />
-    <include name="IDR_CR_ELEMENTS_VIDEOCAM_SHUTTER_ICON_SVG"
-             file="cr_elements/chromeos/cr_picture/videocam_shutter_icon.svg"
-             type="BINDATA" compress="gzip" />
     <include name="IDR_CR_ELEMENTS_CELLULAR_0_WITH_X_SVG"
              file="cr_elements/chromeos/network/cellular_0_with_x.svg"
              type="BINDATA" compress="gzip" />

ui/webui/resources/cr_elements_resources.grdp

@@ -219,6 +219,10 @@
                file="cr_elements/chromeos/cr_picture/cr_png_behavior.js"
                type="chrome_html"
                compress="gzip" />
+    <structure name="IDR_CR_ELEMENTS_CHROMEOS_CR_PICTURE_ICONS_HTML"
+               file="cr_elements/chromeos/cr_picture/icons.html"
+               type="chrome_html"
+               compress="gzip" />
     <structure name="IDR_CR_ELEMENTS_CHROMEOS_CR_NETWORK_ICON_HTML"
                file="cr_elements/chromeos/network/cr_network_icon.html"
                type="chrome_html"