WebUI: Update Polymer paper-button version 1.0.13 -> 2.0.0

Also had to update paper-styles version 1.1.4 -> 1.3.1, and removed
the deprecated and unused shadow-layout.html.

Bug: 738611
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I43fc909502ac321e3a6a512ca6b00c93a98abab2
Reviewed-on: https://chromium-review.googlesource.com/882446Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#531851}

third_party/polymer/v1_0/bower.json

@@ -34,7 +34,7 @@
     "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#1.1.1",
     "neon-animation": "PolymerElements/neon-animation#1.2.4",
     "paper-behaviors": "PolymerElements/paper-behaviors#1.0.12",
-    "paper-button": "PolymerElements/paper-button#1.0.13",
+    "paper-button": "PolymerElements/paper-button#2.0.0",
     "paper-checkbox": "PolymerElements/paper-checkbox#1.4.0",
     "paper-fab": "PolymerElements/paper-fab#1.2.0",
     "paper-icon-button": "PolymerElements/paper-icon-button#1.1.6",
@@ -48,7 +48,7 @@
     "paper-ripple": "PolymerElements/paper-ripple#1.0.9",
     "paper-slider": "PolymerElements/paper-slider#2.0.2",
     "paper-spinner": "PolymerElements/paper-spinner#1.2.0",
-    "paper-styles": "PolymerElements/paper-styles#1.1.4",
+    "paper-styles": "PolymerElements/paper-styles#1.3.1",
     "paper-tabs": "PolymerElements/paper-tabs#1.6.2",
     "paper-toggle-button": "PolymerElements/paper-toggle-button#1.3.0",
     "paper-tooltip": "PolymerElements/paper-tooltip#1.1.4",

third_party/polymer/v1_0/components-chromium/paper-button/bower.json

 {
   "name": "paper-button",
-  "version": "1.0.13",
+  "version": "2.0.0",
   "description": "Material design button",
   "authors": [
     "The Polymer Authors"
@@ -21,21 +21,46 @@
   "license": "http://polymer.github.io/LICENSE.txt",
   "homepage": "https://github.com/PolymerElements/paper-button",
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.1.0",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
-    "paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
-    "paper-material": "PolymerElements/paper-material#^1.0.0"
+    "polymer": "Polymer/polymer#1.9 - 2",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#1 - 2",
+    "paper-behaviors": "PolymerElements/paper-behaviors#1 - 2",
+    "paper-styles": "PolymerElements/paper-styles#1 - 2"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "iron-icon": "PolymerElements/iron-icon#^1.0.0",
-    "iron-icons": "PolymerElements/iron-icons#^1.0.0",
-    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
-    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
-    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
-    "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "iron-component-page": "PolymerElements/iron-component-page#1 - 2",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
+    "iron-icon": "PolymerElements/iron-icon#1 - 2",
+    "iron-icons": "PolymerElements/iron-icons#1 - 2",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#1 - 2",
+    "test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
+    "web-component-tester": "^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
   },
-  "ignore": []
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "Polymer/polymer#^1.9",
+        "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+        "paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
+        "paper-styles": "PolymerElements/paper-styles#^1.0.0"
+      },
+      "devDependencies": {
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+        "iron-icon": "PolymerElements/iron-icon#^1.0.0",
+        "iron-icons": "PolymerElements/iron-icons#^1.0.0",
+        "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+        "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+        "web-component-tester": "Polymer/web-component-tester#^4.0.0"
+      },
+      "resolutions": {
+        "webcomponentsjs": "^0.7"
+      }
+    }
+  },
+  "ignore": [],
+  "resolutions": {
+    "webcomponentsjs": "^1.0.0"
+  }
 }

third_party/polymer/v1_0/components-chromium/paper-button/paper-button.html

@@ -9,7 +9,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 --><html><head><link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">
-<link rel="import" href="../paper-material/paper-material-shared-styles.html">
+<link rel="import" href="../paper-styles/element-styles/paper-material-styles.html">
 
 <!--
 Material design: [Buttons](https://www.google.com/design/spec/components/buttons.html)
@@ -81,10 +81,11 @@ Custom property | Description | Default
 
 </head><body><dom-module id="paper-button">
   <template strip-whitespace="">
-    <style include="paper-material-shared-styles">
+    <style include="paper-material-styles">
+      /* Need to specify the same specificity as the styles imported from paper-material. */
       :host {
-        @apply(--layout-inline);
-        @apply(--layout-center-center);
+        @apply --layout-inline;
+        @apply --layout-center-center;
         position: relative;
         box-sizing: border-box;
         min-width: 5.14em;
@@ -101,8 +102,28 @@ Custom property | Description | Default
         z-index: 0;
         padding: 0.7em 0.57em;
 
-        @apply(--paper-font-common-base);
-        @apply(--paper-button);
+        @apply --paper-font-common-base;
+        @apply --paper-button;
+      }
+
+      :host([elevation="1"]) {
+        @apply --paper-material-elevation-1;
+      }
+
+      :host([elevation="2"]) {
+        @apply --paper-material-elevation-2;
+      }
+
+      :host([elevation="3"]) {
+        @apply --paper-material-elevation-3;
+      }
+
+      :host([elevation="4"]) {
+        @apply --paper-material-elevation-4;
+      }
+
+      :host([elevation="5"]) {
+        @apply --paper-material-elevation-5;
       }
 
       :host([hidden]) {
@@ -111,12 +132,12 @@ Custom property | Description | Default
 
       :host([raised].keyboard-focus) {
         font-weight: bold;
-        @apply(--paper-button-raised-keyboard-focus);
+        @apply --paper-button-raised-keyboard-focus;
       }
 
       :host(:not([raised]).keyboard-focus) {
         font-weight: bold;
-        @apply(--paper-button-flat-keyboard-focus);
+        @apply --paper-button-flat-keyboard-focus;
       }
 
       :host([disabled]) {
@@ -125,11 +146,11 @@ Custom property | Description | Default
         cursor: auto;
         pointer-events: none;
 
-        @apply(--paper-button-disabled);
+        @apply --paper-button-disabled;
       }
 
       :host([animated]) {
-        @apply(--shadow-transition);
+        @apply --shadow-transition;
       }
 
       paper-ripple {
@@ -137,7 +158,7 @@ Custom property | Description | Default
       }
     </style>
 
-    <content></content>
+    <slot></slot>
   </template>
 
   </dom-module>

third_party/polymer/v1_0/components-chromium/paper-styles/bower.json

 {
   "name": "paper-styles",
-  "version": "1.1.4",
+  "version": "1.3.1",
   "description": "Common (global) styles for Material Design elements.",
   "authors": [
     "The Polymer Authors"

third_party/polymer/v1_0/components-chromium/paper-styles/classes/shadow-layout.html

-<!--
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<style>
-
-  /*******************************
-            Flex Layout
-  *******************************/
-
-  html /deep/ .layout.horizontal,
-  html /deep/ .layout.horizontal-reverse,
-  html /deep/ .layout.vertical,
-  html /deep/ .layout.vertical-reverse {
-    display: flex;
-  }
-
-  html /deep/ .layout.inline {
-    display: inline-flex;
-  }
-
-  html /deep/ .layout.horizontal {
-    flex-direction: row;
-  }
-
-  html /deep/ .layout.horizontal-reverse {
-    flex-direction: row-reverse;
-  }
-
-  html /deep/ .layout.vertical {
-    flex-direction: column;
-  }
-
-  html /deep/ .layout.vertical-reverse {
-    flex-direction: column-reverse;
-  }
-
-  html /deep/ .layout.wrap {
-    flex-wrap: wrap;
-  }
-
-  html /deep/ .layout.wrap-reverse {
-    flex-wrap: wrap-reverse;
-  }
-
-  html /deep/ .flex-auto {
-    flex: 1 1 auto;
-  }
-
-  html /deep/ .flex-none {
-    flex: none;
-  }
-
-  html /deep/ .flex,
-  html /deep/ .flex-1 {
-    flex: 1;
-  }
-
-  html /deep/ .flex-2 {
-    flex: 2;
-  }
-
-  html /deep/ .flex-3 {
-    flex: 3;
-  }
-
-  html /deep/ .flex-4 {
-    flex: 4;
-  }
-
-  html /deep/ .flex-5 {
-    flex: 5;
-  }
-
-  html /deep/ .flex-6 {
-    flex: 6;
-  }
-
-  html /deep/ .flex-7 {
-    flex: 7;
-  }
-
-  html /deep/ .flex-8 {
-    flex: 8;
-  }
-
-  html /deep/ .flex-9 {
-    flex: 9;
-  }
-
-  html /deep/ .flex-10 {
-    flex: 10;
-  }
-
-  html /deep/ .flex-11 {
-    flex: 11;
-  }
-
-  html /deep/ .flex-12 {
-    flex: 12;
-  }
-
-  /* alignment in cross axis */
-
-  html /deep/ .layout.start {
-    align-items: flex-start;
-  }
-
-  html /deep/ .layout.center,
-  html /deep/ .layout.center-center {
-    align-items: center;
-  }
-
-  html /deep/ .layout.end {
-    align-items: flex-end;
-  }
-
-  /* alignment in main axis */
-
-  html /deep/ .layout.start-justified {
-    justify-content: flex-start;
-  }
-
-  html /deep/ .layout.center-justified,
-  html /deep/ .layout.center-center {
-    justify-content: center;
-  }
-
-  html /deep/ .layout.end-justified {
-    justify-content: flex-end;
-  }
-
-  html /deep/ .layout.around-justified {
-    justify-content: space-around;
-  }
-
-  html /deep/ .layout.justified {
-    justify-content: space-between;
-  }
-
-  /* self alignment */
-
-  html /deep/ .self-start {
-    align-self: flex-start;
-  }
-
-  html /deep/ .self-center {
-    align-self: center;
-  }
-
-  html /deep/ .self-end {
-    align-self: flex-end;
-  }
-
-  html /deep/ .self-stretch {
-    align-self: stretch;
-  }
-
-  /*******************************
-            Other Layout
-  *******************************/
-
-  html /deep/ .block {
-    display: block;
-  }
-
-  /* IE 10 support for HTML5 hidden attr */
-  html /deep/ [hidden] {
-    display: none !important;
-  }
-
-  html /deep/ .invisible {
-    visibility: hidden !important;
-  }
-
-  html /deep/ .relative {
-    position: relative;
-  }
-
-  html /deep/ .fit {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  body.fullbleed {
-    margin: 0;
-    height: 100vh;
-  }
-
-  html /deep/ .scroll {
-    -webkit-overflow-scrolling: touch;
-    overflow: auto;
-  }
-
-  .fixed-bottom,
-  .fixed-left,
-  .fixed-right,
-  .fixed-top {
-    position: fixed;
-  }
-
-  html /deep/ .fixed-top {
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-
-  html /deep/ .fixed-right {
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  html /deep/ .fixed-bottom {
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  html /deep/ .fixed-left {
-    top: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-</style>

third_party/polymer/v1_0/components-chromium/paper-styles/classes/typography.html

@@ -16,7 +16,7 @@ http://www.google.com/design/spec/style/typography.html#typography-standard-styl
 To make use of them, apply a `paper-font-<style>` class to elements, matching
 the font style you wish it to inherit.
 
-  <header class="paper-font-display2">Hey there!</header>
+  <h1 class="paper-font-display2">Hey there!</h1>
 
 Note that these are English/Latin centric styles. You may need to further adjust
 line heights and weights for CJK typesetting. See the notes in the Material

third_party/polymer/v1_0/components-chromium/paper-styles/element-styles/paper-item-styles.html

+<!--
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../color.html">
+<link rel="import" href="../default-theme.html">
+<link rel="import" href="../typography.html">
+
+<!--
+Material design: [Lists](https://www.google.com/design/spec/components/lists.html)
+
+Shared styles for a native `button` to be used as an item in a `paper-listbox` element:
+
+    <custom-style>
+      <style is="custom-style" include="paper-item-styles"></style>
+    </custom-style>
+
+    <paper-listbox>
+      <button class="paper-item" role="option">Inbox</button>
+      <button class="paper-item" role="option">Starred</button>
+      <button class="paper-item" role="option">Sent mail</button>
+    </paper-listbox>
+
+@group Paper Elements
+@demo demo/index.html
+-->
+
+<dom-module id="paper-item-styles">
+  <template>
+    <style>
+      :host, html {
+        --paper-item: {
+          display: block;
+          position: relative;
+          min-height: var(--paper-item-min-height, 48px);
+          padding: 0px 16px;
+          @apply --paper-font-subhead;
+          border:none;
+          outline: none;
+          background: white;
+          width: 100%;
+          text-align: left;
+        };
+      }
+      .paper-item {
+        @apply --paper-item;
+      }
+
+      .paper-item[hidden] {
+        display: none !important;
+      }
+
+      .paper-item.iron-selected {
+        font-weight: var(--paper-item-selected-weight, bold);
+        @apply --paper-item-selected;
+      }
+
+      .paper-item[disabled] {
+        color: var(--paper-item-disabled-color, var(--disabled-text-color));
+        @apply --paper-item-disabled;
+      }
+
+      .paper-item:focus {
+        position: relative;
+        outline: 0;
+        @apply --paper-item-focused;
+      }
+
+      .paper-item:focus:before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: currentColor;
+        content: '';
+        opacity: var(--dark-divider-opacity);
+        pointer-events: none;
+        @apply --paper-item-focused-before;
+      }
+    </style>
+  </template>
+</dom-module>

third_party/polymer/v1_0/components-chromium/paper-styles/element-styles/paper-material-styles.html

+<!--
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../shadow.html">
+
+<!--
+Material design: [Cards](https://www.google.com/design/spec/components/cards.html)
+
+Shared styles that you can apply to an element to renders two shadows on top
+of each other,that create the effect of a lifted piece of paper.
+
+Example:
+
+    <custom-style>
+      <style is="custom-style" include="paper-material-styles"></style>
+    </custom-style>
+
+    <div class="paper-material elevation-1">
+      ... content ...
+    </div>
+
+@group Paper Elements
+@demo demo/index.html
+-->
+
+<dom-module id="paper-material-styles">
+  <template>
+    <style>
+      :host, html {
+        --paper-material: {
+          display: block;
+          position: relative;
+        };
+        --paper-material-elevation-1: {
+          @apply --shadow-elevation-2dp;
+        };
+        --paper-material-elevation-2: {
+          @apply --shadow-elevation-4dp;
+        };
+        --paper-material-elevation-3: {
+          @apply --shadow-elevation-6dp;
+        };
+        --paper-material-elevation-4: {
+          @apply --shadow-elevation-8dp;
+        };
+        --paper-material-elevation-5: {
+          @apply --shadow-elevation-16dp;
+        };
+      }
+      :host(.paper-material), .paper-material {
+        @apply --paper-material;
+      }
+      :host(.paper-material[elevation="1"]), .paper-material[elevation="1"] {
+        @apply --paper-material-elevation-1;
+      }
+      :host(.paper-material[elevation="2"]), .paper-material[elevation="2"] {
+        @apply --paper-material-elevation-2;
+      }
+      :host(.paper-material[elevation="3"]), .paper-material[elevation="3"] {
+        @apply --paper-material-elevation-3;
+      }
+      :host(.paper-material[elevation="4"]), .paper-material[elevation="4"] {
+        @apply --paper-material-elevation-4;
+      }
+      :host(.paper-material[elevation="5"]), .paper-material[elevation="5"] {
+        @apply --paper-material-elevation-5;
+      }
+    </style>
+  </template>
+</dom-module>

third_party/polymer/v1_0/components-chromium/paper-styles/shadow.html

@@ -66,6 +66,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
                   0  8px 10px -5px rgba(0, 0, 0, 0.4);
     };
 
+    --shadow-elevation-24dp: {
+      box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
+                  0 9px 46px 8px rgba(0, 0, 0, 0.12),
+                  0 11px 15px -7px rgba(0, 0, 0, 0.4);
+    };
   }
 
 </style>

third_party/polymer/v1_0/components_summary.txt

@@ -192,9 +192,9 @@ Tree link: https://github.com/PolymerElements/paper-behaviors/tree/v1.0.12
 
 Name: paper-button
 Repository: https://github.com/PolymerElements/paper-button.git
-Tree: v1.0.13
-Revision: 649ac0c09fa74b5af258cb6debebba811024f7cc
-Tree link: https://github.com/PolymerElements/paper-button/tree/v1.0.13
+Tree: v2.0.0
+Revision: b37655b85e1c3364ce9f5ca0470ddf1071cca3aa
+Tree link: https://github.com/PolymerElements/paper-button/tree/v2.0.0
 
 Name: paper-checkbox
 Repository: https://github.com/PolymerElements/paper-checkbox.git
@@ -276,9 +276,9 @@ Tree link: https://github.com/PolymerElements/paper-spinner/tree/v1.2.0
 
 Name: paper-styles
 Repository: https://github.com/PolymerElements/paper-styles.git
-Tree: v1.1.4
-Revision: 885bbd74db88dab4fb5dc229cdf994c55fb2b31b
-Tree link: https://github.com/PolymerElements/paper-styles/tree/v1.1.4
+Tree: v1.3.1
+Revision: 1ed324102daa36458d153dd20eac80be9758b00e
+Tree link: https://github.com/PolymerElements/paper-styles/tree/v1.3.1
 
 Name: paper-tabs
 Repository: https://github.com/PolymerElements/paper-tabs.git

third_party/polymer/v1_0/rsync_exclude.txt

@@ -12,6 +12,7 @@ hero.svg
 index.html
 *.md
 metadata.html
+package.json
 */test/
 */tests/
 .travis.yml
@@ -29,3 +30,6 @@ paper-material/paper-material.html
 
 # paper-spinner
 paper-spinner/paper-spinner.html
+
+# paper-styles
+paper-styles/classes/shadow-layout.html

ui/webui/resources/polymer_resources.grdp

@@ -764,10 +764,6 @@
              file="../../../third_party/polymer/v1_0/components-chromium/paper-spinner/paper-spinner-styles.html"
              type="chrome_html"
              compress="gzip" />
-  <structure name="IDR_POLYMER_1_0_PAPER_STYLES_CLASSES_SHADOW_LAYOUT_HTML"
-             file="../../../third_party/polymer/v1_0/components-chromium/paper-styles/classes/shadow-layout.html"
-             type="chrome_html"
-             compress="gzip" />
   <structure name="IDR_POLYMER_1_0_PAPER_STYLES_CLASSES_SHADOW_HTML"
              file="../../../third_party/polymer/v1_0/components-chromium/paper-styles/classes/shadow.html"
              type="chrome_html"
@@ -784,6 +780,14 @@
              file="../../../third_party/polymer/v1_0/components-chromium/paper-styles/default-theme.html"
              type="chrome_html"
              compress="gzip" />
+  <structure name="IDR_POLYMER_1_0_PAPER_STYLES_ELEMENT_STYLES_PAPER_ITEM_STYLES_HTML"
+             file="../../../third_party/polymer/v1_0/components-chromium/paper-styles/element-styles/paper-item-styles.html"
+             type="chrome_html"
+             compress="gzip" />
+  <structure name="IDR_POLYMER_1_0_PAPER_STYLES_ELEMENT_STYLES_PAPER_MATERIAL_STYLES_HTML"
+             file="../../../third_party/polymer/v1_0/components-chromium/paper-styles/element-styles/paper-material-styles.html"
+             type="chrome_html"
+             compress="gzip" />
   <structure name="IDR_POLYMER_1_0_PAPER_STYLES_PAPER_STYLES_CLASSES_HTML"
              file="../../../third_party/polymer/v1_0/components-chromium/paper-styles/paper-styles-classes.html"
              type="chrome_html"