Polymer elements added to third_party/polymer.

List of changes:
* Added all core-elements and paper-elements provided by Polymer.
* Components moved to 'components' subdirectory.
* Added a presubmit check verifying that the list of dependencies from
  bower.json and the list of components installed to 'components' are the same.
  (see README.chromium for details).
* Updated README.chromium
* Updated pathes to polymer.js and platform.js in projects that use them.

web-animations-js library will be added to the repository
later. Here is a list of components depending on web-animations-js:
* core-animation/core-animation-group.html
* core-animation/core-animation.html
* core-animation/web-animations.html
* paper-menu-button/paper-menu-button.html
* paper-menu-button/paper-menu-button-transition.html

This CL doesn't change polymer and platform components.

Landed manually, because of the bug in the commit queue (http://crbug.com/416255).

BUG=415696
R=mtomasz@chromium.org, raymes@chromium.org, rsadam@chromium.org, thestig@chromium.org
TBR=cpu

Review URL: https://codereview.chromium.org/582873003

Cr-Commit-Position: refs/heads/master@{#296712}

8 files changed, 606 insertions, 0 deletions

diff --git a/third_party/polymer/components/core-style/.bower.json b/third_party/polymer/components/core-style/.bower.json
new file mode 100644
index 0000000..2b80b6a
--- /dev/null
+++ b/third_party/polymer/components/core-style/.bower.json
@@ -0,0 +1,18 @@
+{
+  "name": "core-style",
+  "private": true,
+  "dependencies": {
+    "polymer": "Polymer/polymer#>=0.3.0 <1.0.0"
+  },
+  "homepage": "https://github.com/Polymer/core-style",
+  "version": "0.3.5",
+  "_release": "0.3.5",
+  "_resolution": {
+    "type": "version",
+    "tag": "0.3.5",
+    "commit": "f5c5847be698afefe3d311c6e4062becb56ca832"
+  },
+  "_source": "git://github.com/Polymer/core-style.git",
+  "_target": "0.3.5",
+  "_originalSource": "Polymer/core-style"
+}
\ No newline at end of file
diff --git a/third_party/polymer/components/core-style/README.md b/third_party/polymer/components/core-style/README.md
new file mode 100644
index 0000000..89f4546
--- /dev/null
+++ b/third_party/polymer/components/core-style/README.md
@@ -0,0 +1,4 @@
+core-style
+==========
+
+See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-style) for more information.
diff --git a/third_party/polymer/components/core-style/bower.json b/third_party/polymer/components/core-style/bower.json
new file mode 100644
index 0000000..6240018
--- /dev/null
+++ b/third_party/polymer/components/core-style/bower.json
@@ -0,0 +1,7 @@
+{
+  "name": "core-style",
+  "private": true,
+  "dependencies": {
+    "polymer": "Polymer/polymer#>=0.3.0 <1.0.0"
+  }
+}
\ No newline at end of file
diff --git a/third_party/polymer/components/core-style/core-style.html b/third_party/polymer/components/core-style/core-style.html
new file mode 100644
index 0000000..d0aaf52
--- /dev/null
+++ b/third_party/polymer/components/core-style/core-style.html
@@ -0,0 +1,387 @@
+<!--

+Copyright (c) 2014 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

+-->

+<!--

+

+The `core-style` element helps manage styling inside other elements and can 

+be used to make themes. The `core-style` element can be either a producer 

+or consumer of styling. If it has its `id` property set, it's a producer. 

+Elements that are producers should include css styling as their text content.

+If a `core-style` has its `ref` property set, it's a consumer. A `core-style`

+typically sets its `ref` property to the value of the `id` property of the

+`core-style` it wants to use. This allows a single producer to be used in 

+multiple places, for example, in many different elements.

+

+It's common to place `core-style` producer elements inside HTMLImports.

+Remote stylesheets should be included this way, the &#64;import css mechanism is

+not currently supported.

+

+Here's a basic example:

+

+    <polymer-element name="x-test" noscript>

+      <template>

+        <core-style ref="x-test"></core-style>

+        <content></content>

+      </template>

+    </polymer-element>

+

+The `x-test` element above will be styled by any `core-style` elements that have

+`id` set to `x-test`. These `core-style` producers are separate from the element

+definition, allowing a user of the element to style it independent of the author's 

+styling. For example:

+

+    <core-style id="x-test">

+      :host {

+        backgound-color: steelblue;

+      }

+    </core-style>

+

+The content of the `x-test` `core-style` producer gets included inside the

+shadowRoot of the `x-test` element. If the content of the `x-test` producer

+`core-style` changes, all consumers of it are automatically kept in sync. This

+allows updating styling on the fly.

+

+The `core-style` element also supports bindings and it is the producer 

+`core-style` element is the model for its content. Here's an example:

+

+    <core-style id="x-test">

+      :host {

+        background-color: {{myColor}};

+      }

+    </core-style>

+    <script>

+      document._currentScript.ownerDocument.getElementById('x-test').myColor = 'orange';

+    </script>

+

+Finally, to facilitate sharing data between `core-style` elements, all

+`core-style` elements have a `g` property which is set to the global 

+`CoreStyle.g`. Here's an example:

+

+    <core-style id="x-test">

+      :host {

+        background-color: {{g.myColor}};

+      }

+    </core-style>

+    <script>

+      CoreStyle.g.myColor = 'tomato';

+    </script>

+

+Finally, one `core-style` can be nested inside another. The `core-style`

+element has a `list` property which is a map of all the `core-style` producers.

+A `core-style` producer's content is available via its `cssText` property. 

+Putting this together:

+

+    <core-style id="common">

+      :host {

+        font-family: sans-serif;

+      }

+    </core-style>

+

+    <core-style id="x-test">

+      {{list.common.cssText}}

+

+      :host {

+        background-color: {{g.myColor}};

+      }

+    </core-style>

+

+

+@group Polymer Core Elements

+@element core-style

+@homepage github.io

+-->

+

+<link rel="import" href="../polymer/polymer.html">

+

+<polymer-element name="core-style" hidden>

+<script>

+(function() {

+

+window.CoreStyle = window.CoreStyle || {

+  g: {},

+  list: {},

+  refMap: {}

+};

+

+Polymer('core-style', {

+  /**

+   * The `id` property should be set if the `core-style` is a producer

+   * of styles. In this case, the `core-style` should have text content

+   * that is cssText.

+   *

+   * @attribute id

+   * @type string

+   * @default ''

+   */

+

+

+  publish: {

+    /**

+     * The `ref` property should be set if the `core-style` element is a 

+     * consumer of styles. Set it to the `id` of the desired `core-style`

+     * element.

+     *

+     * @attribute ref

+     * @type string

+     * @default ''

+     */

+    ref: ''

+  },

+

+  // static

+  g: CoreStyle.g,

+  refMap: CoreStyle.refMap,

+

+  /**

+   * The `list` is a map of all `core-style` producers stored by `id`. It 

+   * should be considered readonly. It's useful for nesting one `core-style`

+   * inside another.

+   *

+   * @attribute list

+   * @type object (readonly)

+   * @default {map of all `core-style` producers}

+   */

+  list: CoreStyle.list,

+

+  // if we have an id, we provide style

+  // if we have a ref, we consume/require style

+  ready: function() {

+    if (this.id) {

+      this.provide();

+    } else {

+      this.registerRef(this.ref);

+      if (!window.ShadowDOMPolyfill) {

+        this.require();

+      }  

+    }

+  },

+

+  // can't shim until attached if using SD polyfill because need to find host

+  attached: function() {

+    if (!this.id && window.ShadowDOMPolyfill) {

+      this.require();

+    }

+  },

+

+  /****** producer stuff *******/

+

+  provide: function() {

+    this.register();

+    // we want to do this asap, especially so we can do so before definitions

+    // that use this core-style are registered.

+    if (this.textContent) {

+      this._completeProvide();

+    } else {

+      this.async(this._completeProvide);

+    }

+  },

+

+  register: function() {

+    var i = this.list[this.id];

+    if (i) {

+      if (!Array.isArray(i)) {

+        this.list[this.id] = [i];

+      }

+      this.list[this.id].push(this);

+    } else {

+      this.list[this.id] = this;  

+    }

+  },

+

+  // stamp into a shadowRoot so we can monitor dom of the bound output

+  _completeProvide: function() {

+    this.createShadowRoot();

+    this.domObserver = new MutationObserver(this.domModified.bind(this))

+        .observe(this.shadowRoot, {subtree: true, 

+        characterData: true, childList: true});

+    this.provideContent();

+  },

+

+  provideContent: function() {

+    this.ensureTemplate();

+    this.shadowRoot.textContent = '';

+    this.shadowRoot.appendChild(this.instanceTemplate(this.template));

+    this.cssText = this.shadowRoot.textContent;

+  },

+

+  ensureTemplate: function() {

+    if (!this.template) {

+      this.template = this.querySelector('template:not([repeat]):not([bind])');

+      // move content into the template

+      if (!this.template) {

+        this.template = document.createElement('template');

+        var n = this.firstChild;

+        while (n) {

+          this.template.content.appendChild(n.cloneNode(true));

+          n = n.nextSibling;

+        }

+      }

+    }

+  },

+

+  domModified: function() {

+    this.cssText = this.shadowRoot.textContent;

+    this.notify();

+  },

+

+  // notify instances that reference this element

+  notify: function() {

+    var s$ = this.refMap[this.id];

+    if (s$) {

+      for (var i=0, s; (s=s$[i]); i++) {

+        s.require();

+      }

+    }

+  },

+

+  /****** consumer stuff *******/

+

+  registerRef: function(ref) {

+    //console.log('register', ref);

+    this.refMap[this.ref] = this.refMap[this.ref] || [];

+    this.refMap[this.ref].push(this);

+  },

+

+  applyRef: function(ref) {

+    this.ref = ref;

+    this.registerRef(this.ref);

+    this.require();

+  },

+

+  require: function() {

+    var cssText = this.cssTextForRef(this.ref);

+    //console.log('require', this.ref, cssText);

+    if (cssText) {

+      this.ensureStyleElement();

+      // do nothing if cssText has not changed

+      if (this.styleElement._cssText === cssText) {

+        return;

+      }

+      this.styleElement._cssText = cssText;

+      if (window.ShadowDOMPolyfill) {

+        this.styleElement.textContent = cssText;

+        cssText = Platform.ShadowCSS.shimStyle(this.styleElement,

+            this.getScopeSelector());

+      }

+      this.styleElement.textContent = cssText;

+    }

+  },

+

+  cssTextForRef: function(ref) {

+    var s$ = this.byId(ref);

+    var cssText = '';

+    if (s$) {

+      if (Array.isArray(s$)) {

+        var p = [];

+        for (var i=0, l=s$.length, s; (i<l) && (s=s$[i]); i++) {

+          p.push(s.cssText);

+        }

+        cssText = p.join('\n\n');

+      } else {

+        cssText = s$.cssText;

+      }

+    }

+    if (s$ && !cssText) {

+      console.warn('No styles provided for ref:', ref);

+    }

+    return cssText;

+  },

+

+  byId: function(id) {

+    return this.list[id];

+  },

+

+  ensureStyleElement: function() {

+    if (!this.styleElement) {

+      this.styleElement = window.ShadowDOMPolyfill ? 

+          this.makeShimStyle() :

+          this.makeRootStyle();

+    }

+    if (!this.styleElement) {

+      console.warn(this.localName, 'could not setup style.');

+    }

+  },

+

+  makeRootStyle: function() {

+    var style = document.createElement('style');

+    this.appendChild(style);

+    return style;

+  },

+

+  makeShimStyle: function() {

+    var host = this.findHost(this);

+    if (host) {

+      var name = host.localName;

+      var style = document.querySelector('style[' + name + '=' + this.ref +']');

+      if (!style) {

+        style = document.createElement('style');

+        style.setAttribute(name, this.ref);

+        document.head.appendChild(style);

+      }

+      return style;

+    }

+  },

+

+  getScopeSelector: function() {

+    if (!this._scopeSelector) {

+      var selector = '', host = this.findHost(this);

+      if (host) {

+        var typeExtension = host.hasAttribute('is');

+        var name = typeExtension ? host.getAttribute('is') : host.localName;

+        selector = Platform.ShadowCSS.makeScopeSelector(name, 

+            typeExtension);

+      }

+      this._scopeSelector = selector;

+    }

+    return this._scopeSelector;

+  },

+

+  findHost: function(node) {

+    while (node.parentNode) {

+      node = node.parentNode;

+    }

+    return node.host || wrap(document.documentElement);

+  },

+

+  /* filters! */

+  // TODO(dfreedm): add more filters!

+

+  cycle: function(rgb, amount) {

+    if (rgb.match('#')) {

+      var o = this.hexToRgb(rgb);

+      if (!o) {

+        return rgb;

+      }

+      rgb = 'rgb(' + o.r + ',' + o.b + ',' + o.g + ')';

+    }

+

+    function cycleChannel(v) {

+      return Math.abs((Number(v) - amount) % 255);

+    }

+

+    return rgb.replace(/rgb\(([^,]*),([^,]*),([^,]*)\)/, function(m, a, b, c) {

+      return 'rgb(' + cycleChannel(a) + ',' + cycleChannel(b) + ', ' 

+          + cycleChannel(c) + ')';

+    });

+  },

+

+  hexToRgb: function(hex) {

+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

+    return result ? {

+        r: parseInt(result[1], 16),

+        g: parseInt(result[2], 16),

+        b: parseInt(result[3], 16)

+    } : null;

+  }

+

+});

+

+

+})();

+</script>

+</polymer-element>

diff --git a/third_party/polymer/components/core-style/demo.html b/third_party/polymer/components/core-style/demo.html
new file mode 100644
index 0000000..0681c6c
--- /dev/null
+++ b/third_party/polymer/components/core-style/demo.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<html>
+<head>
+  <title>core-style</title>
+  <script src="../platform/platform.js"></script>
+
+  <link rel="import" href="elements.html">
+  <link rel="import" href="my-theme.html">
+  
+</head>
+<body unresolved fullbleed vertical layout>
+  <core-style ref="main"></core-style>
+
+  <template is="auto-binding">
+    <my-toolbar>
+      <span flex>core-style</span>
+      <input type="color" value="{{g.theme.colorOne}}">
+      <input type="color" value="{{g.theme.colorTwo}}">
+      <input type="color" value="{{g.theme.colorThree}}">
+      <input type="range" min="1" max="8" value="{{g.columns}}">
+      <button>A button</button>
+    </my-toolbar>
+    <section flex horizontal wrap layout>
+      <template repeat="{{item in items}}">
+        <my-panel>{{item}}</my-panel>
+      </template>
+    </section>
+  </template>
+
+  <script>
+  (function() {
+
+    addEventListener('polymer-ready', function() {
+      var items = [];
+        for (var i=0; i < 100; i++) {
+          items.push(i);
+        }
+
+      CoreStyle.g.items = items;
+
+      addEventListener('template-bound', function(e) {
+        e.target.g = CoreStyle.g;
+        e.target.items = items;
+      });
+    });
+
+  })();
+  </script>
+
+</body>
+</html>
+
+
diff --git a/third_party/polymer/components/core-style/elements.html b/third_party/polymer/components/core-style/elements.html
new file mode 100644
index 0000000..f09f2e5
--- /dev/null
+++ b/third_party/polymer/components/core-style/elements.html
@@ -0,0 +1,46 @@
+<link rel="import" href="core-style.html">
+
+<core-style id="my-toolbar">
+  :host {
+    height: 54px;
+    font-size: 1.3rem;
+    background-color: steelblue;
+    color: white;
+  }
+
+  polyfill-next-selector {
+    content: ':host > *';
+  }
+  ::content > * {
+    margin: 8px;
+  }
+</core-style>
+
+<polymer-element name="my-toolbar" horizontal center layout noscript>
+  <template>
+    <core-style ref="my-toolbar"></core-style>
+    <content></content>
+  </template>
+</polymer-element>
+
+<core-style id="my-panel">
+  :host {
+    display: inline-block;
+    height: 200px;
+    width: calc({{ 100 / g.columns }}% - 16px);
+    font-size: 50px;
+    background: gray;
+    margin: 8px;
+  }
+</core-style>
+
+<script>
+  CoreStyle.g.columns = 3;
+</script>
+
+<polymer-element name="my-panel" vertical center center-justified layout noscript>
+  <template>
+    <core-style ref="my-panel"></core-style>
+    <content></content>
+  </template>
+</polymer-element>
\ No newline at end of file
diff --git a/third_party/polymer/components/core-style/index.html b/third_party/polymer/components/core-style/index.html
new file mode 100644
index 0000000..58856f3
--- /dev/null
+++ b/third_party/polymer/components/core-style/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<html>
+<head>
+
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="../core-component-page/core-component-page.html">
+
+</head>
+<body unresolved>
+
+  <core-component-page></core-component-page>
+
+</body>
+</html>
diff --git a/third_party/polymer/components/core-style/my-theme.html b/third_party/polymer/components/core-style/my-theme.html
new file mode 100644
index 0000000..5c6b43f
--- /dev/null
+++ b/third_party/polymer/components/core-style/my-theme.html
@@ -0,0 +1,64 @@
+<link rel="import" href="core-style.html">
+
+<script>
+
+  CoreStyle.g.theme = {
+    colorOne: '#abcdef',
+    colorTwo: '#123456',
+    colorThree: '#224433'
+  }
+</script>
+
+<core-style id="main">
+  body {
+    font-family: sans-serif;
+  }
+
+  section {
+    overflow: auto;
+  }
+
+  button {
+    border: 1px solid {{g.theme.colorOne | cycle(-50)}};
+    border-radius: 4px;
+    background-color: {{g.theme.colorOne}};
+    color: {{g.theme.colorTwo}};
+  }
+
+  button:active {
+    border: 1px solid {{g.theme.colorTwo | cycle(50)}};
+    border-radius: 4px;
+    background-color: {{g.theme.colorTwo}};
+    color: {{g.theme.colorOne}};
+  }
+
+  <template repeat="{{item in g.items}}">
+    my-panel:nth-of-type({{item+1}}) {
+      background-color: {{ g.theme.colorThree | cycle(item * -1) }};
+    }
+  </template>
+</core-style>
+
+<core-style id="my-toolbar">
+  :host {
+    border-bottom: 8px solid {{g.theme.colorOne}};
+    color: {{g.theme.colorOne | cycle(100)}};
+    background-color: {{g.theme.colorTwo}};
+  }
+</core-style>
+
+<core-style id="my-panel">
+  :host {
+    box-sizing: border-box;
+    background-color: {{g.theme.colorOne}};
+    border: 8px solid {{g.theme.colorOne | cycle(50)}};
+    color: {{g.theme.colorOne | cycle(-100)}};
+  }
+
+  :host(:nth-of-type(2n + 1)) {
+    background-color: {{g.theme.colorTwo}};
+    border: 8px solid {{g.theme.colorTwo | cycle(-50)}};
+    color: {{g.theme.colorTwo | cycle(100)}}
+  }
+
+</core-style>
\ No newline at end of file