[MD extensions] paper-icon-button to paper-icon-button-light

This CL changes the <paper-icon-button> elements to <button> with
is="paper-icon-button-light".

Bug: 746584
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I045badb04115139ac3f624f9b6a57d161dafc55c
Reviewed-on: https://chromium-review.googlesource.com/588012Reviewed-by: Tommy Li <tommycli@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Dave Schuyler <dschuyler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#491192}

chrome/browser/resources/md_extensions/detail_view.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/paper_toggle_style_css.html">
 <link rel="import" href="chrome://resources/html/action_link.html">
@@ -9,7 +10,6 @@
 <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-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable-behavior.html">
 <link rel="import" href="chrome://extensions/animation_helper.html">
@@ -17,7 +17,8 @@
 
 <dom-module id="extensions-detail-view">
   <template>
-    <style include="iron-flex cr-hidden-style action-link paper-toggle-style">
+    <style include=
+        "iron-flex cr-hidden-style cr-icons action-link paper-toggle-style">
       :host {
         display: flex;
         justify-content: center;
@@ -46,10 +47,6 @@
         width: 24px;
       }
 
-      a paper-icon-button {
-        color: var(--paper-grey-600);
-      }
-
       #name {
         flex-grow: 1;
       }
@@ -110,22 +107,12 @@
         -webkit-padding-start: 20px;
         margin: 0;
       }
-
-      button[is='paper-icon-button-light'].action-arrow {
-        background-image: url(chrome://resources/images/arrow_right.svg);
-      }
-
-      button[is='paper-icon-button-light'].open-in-new {
-        background-image: url(chrome://resources/images/open_in_new.svg);
-        background-size: contain;
-        height: 20px;
-        width: 20px;
-      }
     </style>
     <div id="main">
       <div id="top-bar">
-        <paper-icon-button id="close-button" icon="arrow-back"
-            on-tap="onCloseButtonTap_"></paper-icon-button>
+        <button id="close-button" is="paper-icon-button-light"
+            class="icon-arrow-back no-overlap"
+            on-tap="onCloseButtonTap_"></button>
         <img alt="" id="icon" src="[[data.iconUrl]]">
         <span id="name">[[data.name]]</span>
       </div>
@@ -233,14 +220,14 @@
         <div class="control-line actionable" id="extensions-options"
             on-tap="onOptionsTap_">
           <span>$i18n{itemOptions}</span>
-          <button class="open-in-new" is="paper-icon-button-light"></button>
+          <button class="icon-external" is="paper-icon-button-light"></button>
         </div>
       </div>
       <div class="section">
         <div class="control-line actionable" id="remove-extension"
             on-tap="onRemoveTap_">
           <span>$i18n{itemRemoveExtension}</span>
-          <button class="action-arrow" is="paper-icon-button-light"></button>
+          <button class="subpage-arrow" is="paper-icon-button-light"></button>
         </div>
       </div>
       <div class="section">

chrome/browser/resources/md_extensions/error_page.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable-behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 <link rel="import" href="chrome://extensions/animation_helper.html">
 <link rel="import" href="chrome://extensions/code_section.html">
 
 <dom-module id="extensions-error-page">
   <template>
-    <style include="cr-hidden-style">
+    <style include="cr-icons cr-hidden-style">
       #main {
         background-color: white;
         height: 800px;
@@ -62,8 +63,9 @@
     </style>
     <div id="main">
       <div id="heading">
-        <paper-icon-button id="close-button" icon="arrow-back"
-            on-tap="onCloseButtonTap_"></paper-icon-button>
+        <button id="close-button" is="paper-icon-button-light"
+            class="icon-arrow-back no-overlap" on-tap="onCloseButtonTap_">
+        </button>
         <span>$i18n{errorsPageHeading}</span>
       </div>
       <iron-list id="errors-list" items="[[calculateShownItems_(data.*)]]">
@@ -74,9 +76,8 @@
               on-tap="onErrorItemTap_" on-keydown="onErrorItemKeydown_">
             <img class$="[[computeErrorIconClass_(item)]]">
             <div class="error-message">[[item.message]]</div>
-            <paper-icon-button class="delete-button"
-                on-tap="onDeleteErrorTap_"
-                icon="delete" tabindex$="[[tabIndex]]"></paper-icon-button>
+            <button is="paper-icon-button-light" class="icon-delete-gray"
+                on-tap="onDeleteErrorTap_" tabindex$="[[tabIndex]]"></button>
           </div>
         </template>
       </iron-list>

chrome/browser/resources/md_extensions/item.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/paper_toggle_style_css.html">
@@ -15,13 +16,13 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/communication-icons.html">
 <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/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 
 <dom-module id="extensions-item">
   <template>
-    <style include="iron-flex cr-hidden-style action-link paper-button-style paper-toggle-style">
+    <style include="iron-flex cr-hidden-style cr-icons action-link paper-button-style paper-toggle-style">
       #icon-wrapper {
         align-self: flex-start;
         display: flex;
@@ -240,9 +241,9 @@
           </paper-button>
         </div>
         <template is="dom-if" if="[[!computeDevReloadButtonHidden_(data.*)]]">
-          <paper-icon-button id="dev-reload-button"
-              on-tap="onReloadTap_" icon="refresh">
-          </paper-icon-button>
+          <button id="dev-reload-button" is="paper-icon-button-light"
+              class="icon-refresh no-overlap" on-tap="onReloadTap_">
+          </button>
         </template>
         <paper-button id="repair-button" class="action-button"
             on-tap="onRepairTap_"

chrome/browser/resources/md_extensions/shortcut_input.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://extensions/shortcut_util.html">
 
 <dom-module id="extensions-shortcut-input">
   <template>
-    <style include="cr-hidden-style">
+    <style include="cr-icons cr-hidden-style">
       #main {
         position: relative;
         width: 200px;
@@ -42,9 +43,10 @@
       <paper-input id="input" placeholder="$i18n{shortcutTypeAShortcut}"
         value="[[computeText_(capturing_, shortcut, pendingShortcut_)]]">
       </paper-input>
-      <paper-icon-button id="clear" icon="clear" on-tap="onClearTap_"
+      <button id="clear" is="paper-icon-button-light"
+          class="icon-clear no-overlap" on-tap="onClearTap_"
           hidden$="[[computeClearHidden_(capturing_, shortcut)]]">
-      </paper-icon-button>
+      </button>
     </div>
   </template>
   <script src="chrome://extensions/shortcut_input.js"></script>

chrome/browser/resources/settings/settings_icons_css.html

@@ -4,9 +4,6 @@
 <dom-module id="settings-icons">
   <template>
     <style>
-      button[is='paper-icon-button-light'].icon-arrow-back {
-        background-image: url(./images/settings_icon_arrow_back.svg);
-      }
       button[is='paper-icon-button-light'].icon-visibility {
         background-image: url(./images/settings_icon_visibility.svg);
       }

chrome/test/data/webui/extensions/extension_error_page_test.js

@@ -93,9 +93,9 @@ cr.define('extension_error_page_tests', function() {
         expectTrue(testIsVisible('#heading'));
         expectTrue(testIsVisible('#errors-list'));
 
-        var errorElems = errorPage.querySelectorAll('* /deep/ .error-item');
-        expectEquals(1, errorElems.length);
-        var error = errorElems[0];
+        var errorElements = errorPage.querySelectorAll('* /deep/ .error-item');
+        expectEquals(1, errorElements.length);
+        var error = errorElements[0];
         expectEquals(
             'message',
             error.querySelector('.error-message').textContent.trim());
@@ -110,9 +110,9 @@ cr.define('extension_error_page_tests', function() {
         }, manifestErrorBase);
         errorPage.set('data.manifestErrors', [manifestError]);
         Polymer.dom.flush();
-        var errorElems = errorPage.querySelectorAll('* /deep/ .error-item');
-        expectEquals(2, errorElems.length);
-        var error = errorElems[0];
+        errorElements = errorPage.querySelectorAll('* /deep/ .error-item');
+        expectEquals(2, errorElements.length);
+        error = errorElements[0];
         expectEquals(
             'invalid key',
             error.querySelector('.error-message').textContent.trim());
@@ -120,7 +120,7 @@ cr.define('extension_error_page_tests', function() {
             'icon-severity-warning'));
 
         mockDelegate.testClickingCalls(
-            error.querySelector('.delete-button'), 'deleteErrors',
+            error.querySelector('.icon-delete-gray'), 'deleteErrors',
             [extensionId, [manifestError.id]]);
       });
 
@@ -159,8 +159,8 @@ cr.define('extension_error_page_tests', function() {
         errorPage.push('data.runtimeErrors', nextRuntimeError);
         Polymer.dom.flush();
 
-        var errorElems = errorPage.querySelectorAll('* /deep/ .error-item');
-        expectEquals(2, errorElems.length);
+        var errorElements = errorPage.querySelectorAll('* /deep/ .error-item');
+        expectEquals(2, errorElements.length);
 
         // The first error should be focused by default, and we should have
         // requested the source for it.
@@ -175,7 +175,7 @@ cr.define('extension_error_page_tests', function() {
 
         // Tap the second error. It should now be selected and we should request
         // the source for it.
-        MockInteractions.tap(errorElems[1]);
+        MockInteractions.tap(errorElements[1]);
         expectEquals(nextRuntimeError, errorPage.selectedError_);
         expectTrue(!!mockDelegate.requestFileSourceArgs);
         args = mockDelegate.requestFileSourceArgs

ui/webui/resources/cr_elements/cr_icons_css.html

@@ -5,7 +5,7 @@
   <template>
     <style>
       :host-context([dir=rtl]) button[is='paper-icon-button-light'] {
-        transform: scaleX(-1);  /* Flip on the X axis (aka mirror). */
+        transform: scaleX(-1);  /* Invert X: flip on the Y axis (aka mirror). */
       }
 
       button[is='paper-icon-button-light'] {
@@ -18,6 +18,15 @@
         width: var(--cr-icon-ripple-size);
       }
 
+      button[is='paper-icon-button-light'].no-overlap {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      button[is='paper-icon-button-light'].icon-arrow-back {
+        background-image: url(../images/icon_arrow_back.svg);
+      }
+
       button[is='paper-icon-button-light'].icon-cancel {
         background-image: url(../images/icon_cancel.svg);
       }
@@ -50,10 +59,18 @@
         background-image: url(../images/open_in_new.svg);
       }
 
+      button[is='paper-icon-button-light'].icon-menu-white {
+        background-image: url(../images/icon_menu_white.svg);
+      }
+
       button[is='paper-icon-button-light'].icon-more-vert {
         background-image: url(../images/icon_more_vert.svg);
       }
 
+      button[is='paper-icon-button-light'].icon-refresh {
+        background-image: url(../images/icon_refresh.svg);
+      }
+
       button[is='paper-icon-button-light'].icon-settings {
         background-image: url(../images/icon_settings.svg);
       }

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html

 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-media-query.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-media-query.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 
 <dom-module id="cr-toolbar">
   <template>
-    <style>
+    <style include="cr-icons">
       :host {
         --cr-toolbar-field-width: 580px;
         --cr-toolbar-height: 56px;
@@ -130,11 +132,12 @@
       <div id="leftSpacer">
         <!-- Note: showing #menuPromo relies on this dom-if being [restamp]. -->
         <template is="dom-if" if="[[showMenu]]" restamp>
-          <paper-icon-button id="menuButton" icon="cr20:menu"
+          <button id="menuButton" is="paper-icon-button-light"
+              class="icon-menu-white no-overlap"
               on-tap="onMenuTap_"
               title="[[titleIfNotShowMenuPromo_(menuLabel, showMenuPromo)]]"
               aria-label$="[[menuLabel]]">
-          </paper-icon-button>
+          </button>
           <template is="dom-if" if="[[showMenuPromo]]">
             <div id="menuPromo" role="tooltip">
               [[menuPromo]]

ui/webui/resources/cr_elements/icons.html

@@ -17,7 +17,6 @@ blurry at 20 px). Please use 20 px icons when available.
       Keep these in sorted order by id="". See also http://goo.gl/Y1OdAq
       -->
       <g id="domain"><path d="M2,3 L2,17 L11.8267655,17 L13.7904799,17 L18,17 L18,7 L12,7 L12,3 L2,3 Z M8,13 L10,13 L10,15 L8,15 L8,13 Z M4,13 L6,13 L6,15 L4,15 L4,13 Z M8,9 L10,9 L10,11 L8,11 L8,9 Z M4,9 L6,9 L6,11 L4,11 L4,9 Z M12,9 L16,9 L16,15 L12,15 L12,9 Z M12,11 L14,11 L14,13 L12,13 L12,11 Z M8,5 L10,5 L10,7 L8,7 L8,5 Z M4,5 L6,5 L6,7 L4,7 L4,5 Z"></path></g>
-      <g id="menu"><rect x="2" y="4" width="16" height="2"></rect><rect x="2" y="9" width="16" height="2"></rect><rect x="2" y="14" width="16" height="2"></rect></g>
   </svg>
 </iron-iconset-svg>
 <iron-iconset-svg name="cr" size="24">

ui/webui/resources/cr_elements_images.grdp

@@ -9,6 +9,8 @@
            file="images/arrow_right.svg" type="BINDATA" />
   <include name="IDR_WEBUI_IMAGES_OPEN_IN_NEW"
            file="images/open_in_new.svg" type="BINDATA" />
+  <include name="IDR_WEBUI_IMAGES_ICON_ARROW_BACK"
+           file="images/icon_arrow_back.svg" type="BINDATA" />
   <include name="IDR_WEBUI_IMAGES_ICON_CANCEL"
            file="images/icon_cancel.svg" type="BINDATA" />
   <include name="IDR_WEBUI_IMAGES_ICON_CANCEL_TOOLBAR"
@@ -25,8 +27,12 @@
            file="images/icon_expand_more.svg" type="BINDATA" />
   <include name="IDR_WEBUI_IMAGES_ICON_EXTERNAL"
            file="images/open_in_new.svg" type="BINDATA" />
+  <include name="IDR_WEBUI_IMAGES_ICON_MENU_WHITE"
+           file="images/icon_menu_white.svg" type="BINDATA" />
   <include name="IDR_WEBUI_IMAGES_ICON_MORE_VERT"
            file="images/icon_more_vert.svg" type="BINDATA" />
+  <include name="IDR_WEBUI_IMAGES_ICON_REFRESH"
+           file="images/icon_refresh.svg" type="BINDATA" />
   <include name="IDR_WEBUI_IMAGES_ICON_SETTINGS"
            file="images/icon_settings.svg" type="BINDATA" />
   <include name="IDR_WEBUI_IMAGES_ICON_SEARCH"

ui/webui/resources/images/icon_menu_white.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="#fff" preserveAspectRatio="xMidYMid meet"><rect x="2" y="4" width="16" height="2"></rect><rect x="2" y="9" width="16" height="2"></rect><rect x="2" y="14" width="16" height="2"></rect></svg>
\ No newline at end of file

ui/webui/resources/images/icon_refresh.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#757575" preserveAspectRatio="xMidYMid meet"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"></path></svg>
\ No newline at end of file