[WebUI] highlighted tab color to Google Blue 600

change highlight tab color to GB 600 in Clear Browsing Data, Manage
certificates.
and also drop the uppercase from Certificate manager's tabs
to keep consistent.

Bug: 842010
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I060112a47e9feac1ccba6b9dc20b48d4ca6843d0
Reviewed-on: https://chromium-review.googlesource.com/1055229
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#558798}

chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_tabs_style_css.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
@@ -18,7 +19,7 @@
 
 <dom-module id="settings-clear-browsing-data-dialog">
   <template>
-    <style include="settings-shared">
+    <style include="settings-shared paper-tabs-style">
       :host {
         /* Fixed height to allow multiple tabs with different height.
          * The last entry in the advanced tab should show half an entry.
@@ -80,23 +81,12 @@
       }
 
       paper-tabs {
-        --paper-tabs-selection-bar-color: var(--google-blue-500);
         --paper-tabs: {
           font-size: 100%;
           height: 40px;
         }
       }
 
-      paper-tab {
-        --paper-tab-content: {
-          color: var(--google-blue-700);
-        };
-        --paper-tab-content-unselected: {
-          opacity: 1;
-          color: var(--paper-grey-600);
-        };
-      }
-
       .time-range-row {
         margin-bottom: 12px;
       }

chrome/browser/resources/settings/device_page/display.html

@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_tabs_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
@@ -23,7 +24,7 @@
 
 <dom-module id="settings-display">
   <template>
-    <style include="settings-shared md-select iron-flex iron-flex-alignment">
+    <style include="settings-shared md-select iron-flex iron-flex-alignment paper-tabs-style">
       .indented {
         -webkit-margin-start: var(--cr-section-indent-padding);
         align-self: stretch;
@@ -54,10 +55,6 @@
         -webkit-padding-start: 0
       }
 
-      paper-tab {
-        text-transform: uppercase;
-      }
-
       #controlsDiv > .settings-box:first-of-type {
         border-top: none;
       }

chrome/browser/resources/settings/settings_vars_css.html

@@ -54,7 +54,5 @@
     --iron-icon-width: var(--cr-icon-size);
 
     --paper-radio-group-item-padding: 0;
-
-    --paper-tabs-selection-bar-color: var(--paper-blue-500);
   }
 </style>

ui/webui/resources/cr_components/certificate_manager/certificate_manager.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_tabs_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
@@ -18,26 +19,12 @@
 
 <dom-module id="certificate-manager">
   <template>
-    <style include="cr-hidden-style">
-      :host {
-        --paper-tabs-selection-bar-color: var(--paper-blue-500);
-      }
-
+    <style include="cr-hidden-style paper-tabs-style">
       paper-tabs {
         font-size: inherit;
         height: 40px;
         margin-bottom: 24px;
       }
-
-      paper-tab {
-        --paper-tab-content: {
-          color: var(--paper-grey-800);
-        };
-        --paper-tab-content-unselected: {
-          color: var(--paper-grey-600);
-        };
-        text-transform: uppercase;
-      }
     </style>
 
     <template is="dom-if" if="[[showCaTrustEditDialog_]]" restamp>

ui/webui/resources/cr_elements/paper_tabs_style_css.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+
+<!-- Common paper-tabs styling for Material Design WebUI. -->
+<dom-module id="paper-tabs-style">
+  <template>
+    <style>
+      paper-tabs {
+        --paper-tabs-selection-bar-color: var(--google-blue-600);
+      }
+
+      paper-tab {
+        --paper-tab-content: {
+          color: var(--google-blue-600);
+        };
+        --paper-tab-content-unselected: {
+          color: var(--paper-grey-600);
+        };
+      }
+    </style>
+  </template>
+</dom-module>
\ No newline at end of file

ui/webui/resources/cr_elements_resources.grdp

@@ -304,6 +304,10 @@
              file="../../webui/resources/cr_elements/paper_input_style_css.html"
              type="chrome_html"
              compress="gzip" />
+  <structure name="IDR_CR_ELEMENTS_PAPER_TABS_STYLE_CSS_HTML"
+             file="../../webui/resources/cr_elements/paper_tabs_style_css.html"
+             type="chrome_html"
+             compress="gzip" />
   <structure name="IDR_CR_ELEMENTS_SEARCH_HIGHLIGHT_STYLE_CSS_HTML"
              file="../../webui/resources/cr_elements/search_highlight_style_css.html"
              type="chrome_html"