8/8 master -> stable

CONTRIBUTING.md

@@ -21,22 +21,33 @@ Other projects require a similar agreement: jQuery, Firefox, Apache, Node, and m
 
 Here's an easy guide that should get you up and running:
 
-1. Fork the project on github and pull down your copy.
-   > replace the {{ username }} with your username and {{ repository }} with the repository name
+1. Fork the project on github
+2. Pull down the polymer-all project.
 
-        git clone [email protected]:{{ username }}/{{ repository }}.git --recursive
+        git clone [email protected]:Polymer/polymer-all --recursive
 
-    Note the `--recursive`. This is necessary for submodules to initialize properly. If you don't do a recursive clone, you'll have to init them manually:
-
-        git submodule init
-        git submodule update
-
-2. Development happens on the `master` branch. Get yourself on it!
+3. Go to the polymer-elements directory and switch it to point to your origin.
 
+        git remote remove origin
+        git remote add origin [email protected]:{{ username }}/{{ repository }}
+        git fetch origin
         git checkout master
 
+4. Pull down node dependencies. In your polymer-elements directory run 'npm install' this will pull down the tools used for executing the test. 
+
 That's it for the one time setup. Now you're ready to make a change.
 
+## Running the tests
+
+To run the tests make sure you have a webserver running with its docroot pointing to the polymer-all directory.  Then navigate to /polymer-elements/test/runner.html
+
+For Example:
+
+      cd polymer-all
+      ruby -rwebrick -e'WEBrick::HTTPServer.new(:Port => 4000, :DocumentRoot => Dir.pwd).start'
+
+Then in your browser open: http://localhost:4000/polymer-elements/test/runner.html
+
 ## Submitting a pull request
 
 We iterate fast! To avoid potential merge conflicts, it's a good idea to pull from the main project before making a change and submitting a pull request. The easiest way to do this is setup a remote called `upstream` and do a pull before working on a change:

gruntfile.js

@@ -19,7 +19,7 @@ module.exports = function(grunt) {
           outdir: 'docs',
           linkNatives: 'true',
           tabtospace: 2,
-          themedir: 'tools/doc/themes/footstrap'
+          themedir: 'tools/doc/themes/polymerase'
         }
       }
     }

polymer-flex-layout/index.html

@@ -54,7 +54,7 @@ <h3>Title</h3>
     </script>
   </polymer-element>
 
-  <polymer-element name="flex-container" extends="polymer-flex-panel">
+  <polymer-element name="flex-container" noscript extends="polymer-flex-panel">
     <template>
       <style>
         div, polymer-flex-panel {
@@ -82,7 +82,7 @@ <h3>Title</h3>
     </template>
   </polymer-element>
 
-  <polymer-element name="flex-nonvisual">
+  <polymer-element name="flex-nonvisual" noscript>
     <template>
       <style>
         div {

polymer-flex-layout/polymer-flex-panel.html

@@ -3,8 +3,15 @@
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
-<polymer-element name="polymer-flex-panel" extends="polymer-flex-layout" isContainer>
+<link rel="import" href="polymer-flex-layout.html">
+
+<polymer-element name="polymer-flex-panel" extends="polymer-flex-layout">
   <template>
     <shadow></shadow>
   </template>
+  <script>
+    Polymer('polymer-flex-panel', {
+      isContainer: true
+    });
+  </script>
 </polymer-element>

polymer-grid-layout/polymer-grid-layout.html

@@ -136,16 +136,24 @@
       var m = 0;
 
       function railize(count, sizeFn) {
-        // create rails for `count` tracks using `sizeFn(track)`
-        // tracks are bounded, so for n tracks there are (n+1) rails
+        //
+        // create rails for `count` tracks using sizing function `sizeFn(track)`
+        // for n tracks there are (n+1) rails
         //
         //   |track|track|track|
         //  0|->sz0|->sz1|<-sz2|0
         //
         //   |track|track|track|
         //  0|->sz0|     |<-sz2|0
         //
-        //  0|
+        // there can be one elastic track per set
+        //
+        //   |track|track|track|track|
+        //  0|-->s0|-->s1|<--s1|<--s2|0
+        //
+        // sz1 spans two (>1) tracks which makes
+        // it elastic (it's underconstrained)
+        //
         var rails = [];
         var a = 0;
         for (var i=0; i<count; i++) {
@@ -170,21 +178,11 @@
         return rails;
       }
 
+      // TODO(sjmiles): this codes tries to preserve actual position,
+      // so 'unposition' is really 'naturalize' or something
       function unposition(box) {
         var style = box.style;
-        //style.left = style.right = style.top = style.bottom = style.width = style.height = '';
-        // TODO(sjmiles): this codes tries to preserve position,
-        // so 'unposition' is really 'naturalize' or something
-        /*
-        if (style.left && style.right) {
-          style.left = '';
-        }
-        if (style.top && style.bottom) {
-          style.top = '';
-        }
-        */
-        style.right = style.bottom = '';
-        style.width = style.height = '';
+        style.right = style.bottom = style.width = style.height = '';
         style.position = 'absolute';
         style.display = 'inline-block';
         style.boxSizing = style.mozBoxSizing = 'border-box';

polymer-list/polymer-grid.html

@@ -94,7 +94,7 @@
   </script>
 </polymer-element>
 
-<polymer-element name="polymer-grid">
+<polymer-element name="polymer-grid" attributes="items">
   <template>
     <style>
       @host{*{
@@ -113,19 +113,21 @@
       items: null,
       scrub: 0,
       ready: function() {
-        this.items = [];
-        for (var i = 0; i < 5000; i++) {
-          var n = '';
-          var l = Math.floor(Math.random() * 8) + 2;
-          for (var j=0; j<l; j++) {
-            n += String.fromCharCode((j === 0 ? 'A' : 'a').charCodeAt(0) + Math.floor(Math.random()*26));
+        if (!this.items) {
+          this.items = [];
+          for (var i = 0; i < 5000; i++) {
+            var n = '';
+            var l = Math.floor(Math.random() * 8) + 2;
+            for (var j=0; j<l; j++) {
+              n += String.fromCharCode((j === 0 ? 'A' : 'a').charCodeAt(0) + Math.floor(Math.random()*26));
+            }
+            n += ' ';
+            var l = Math.floor(Math.random() * 8) + 2;
+            for (var j=0; j<l; j++) {
+              n += String.fromCharCode((j === 0 ? 'A' : 'a').charCodeAt(0) + Math.floor(Math.random()*26));
+            }
+            this.items[i] = n;
           }
-          n += ' ';
-          var l = Math.floor(Math.random() * 8) + 2;
-          for (var j=0; j<l; j++) {
-            n += String.fromCharCode((j === 0 ? 'A' : 'a').charCodeAt(0) + Math.floor(Math.random()*26));
-          }
-          this.items[i] = n;
         }
       },
       inserted: function() {

polymer-overlay/index.html

@@ -37,6 +37,39 @@
 		</style>
 	</head>
 	<body>
+		<polymer-element name="x-dialog" attributes="opened autoCloseDisabled">
+			<template>
+				<style>
+					@host {
+						:scope {
+							box-sizing: border-box;
+							-moz-box-sizing: border-box;
+							font-family: Arial, Helvetica, sans-serif;
+							font-size: 13px;
+							-webkit-user-select: none;
+							-moz-user-select: none;
+							overflow: hidden;
+							background: white;
+							padding:30px 42px;
+							outline: 1px solid rgba(0,0,0,0.2);
+							box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+						}
+					}
+				</style>
+				<polymer-overlay id="overlay" opened="{{opened}}" autoCloseDisabled="{{autoCloseDisabled}}"></polymer-overlay>
+				<content></content>
+			</template>
+			<script>
+				Polymer('x-dialog', {
+					ready: function() {
+						this.$.overlay.target = this;
+					},
+					toggle: function() {
+						this.$.overlay.toggle();
+					}
+				});
+			</script>
+		</polymer-element>
 		<button overlay="#dialog">Toggle Dialog</button>
 		( open styling: 
 		<select onchange="changeOpening(event)">
@@ -49,51 +82,37 @@
 		<label>scrim: <input type="checkbox" onchange="scrimChange(event)"></label>
 		)
 		<br>
-		<div id="dialog" class="dialog polymer-overlay-scale-slideup">
-			<polymer-overlay></polymer-overlay>
+		<x-dialog id="dialog" class="dialog polymer-overlay-scale-slideup">
 			<h2>Dialog</h2>
 			<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla sapien sed enim sollicitudin laoreet. Suspendisse suscipit, metus ac volutpat sodales, libero magna semper lacus, molestie fringilla massa orci ut arcu. Nullam sodales urna sit amet odio vehicula mattis.</div><br><br>
 			<div>Ut aliquam vulputate congue. Vestibulum pretium pretium nulla quis sollicitudin. Praesent lacinia congue erat nec mattis. Fusce commodo lacus est. Duis turpis eros, ultrices sed aliquet non, blandit egestas velit. Integer a augue nec lorem tristique hendrerit. Curabitur imperdiet risus id enim bibendum vestibulum. Integer id magna at arcu faucibus fermentum vel a augue. Sed fringilla venenatis dolor, in blandit magna molestie luctus. Vestibulum dignissim posuere ultrices. Aenean urna nisl, tincidunt vitae iaculis ut, pharetra nec eros.</div><br><br>
 			<div>
 				<input placeholder="say something..." autofocus oninput="somethingCheck()"></input><br>
 				I agree with this wholeheartedly.
-				<div id="confirmation" class="dialog">
-					<polymer-overlay></polymer-overlay>
+				<x-dialog id="confirmation" class="dialog">
 					Thank you.
-				</div>
+				</x-dialog>
 			</div><br><br>
 			<button overlay-toggle>OK</button>
-		</div>
+		</x-dialog>
 
 		<br><br>
 
 		<button overlay="#dialog2">Toggle Dialog 2</button>
 
-		<div id="dialog2" class="dialog polymer-overlay-shake" autoCloseDisabled="true">
-			<polymer-overlay></polymer-overlay>
+		<x-dialog id="dialog2" class="dialog polymer-overlay-shake" autoCloseDisabled="true">
 			<div>
 				<h2>Dialog 2</h2>
 					I'm dizzy.
 			</div>
 			<br><br>
 			<button overlay-toggle>OK</button>
-		</div>
+		</x-dialog>
 		<script>
-			setupOverlays = function() {
-				var overlays = document.querySelectorAll('polymer-overlay');
-				Array.prototype.forEach.call(overlays, function(o) {
-					o.target = o.parentNode;
-				});
-			}
-
-			document.addEventListener('WebComponentsReady', function() {
-				setupOverlays();
-			});
-
 			$ = document.querySelector.bind(document);
 
 			somethingCheck = function() {
-				$('#confirmation').querySelector('polymer-overlay').opened = (event.target.value == 'something');
+				$('#confirmation').opened = (event.target.value == 'something');
 			}
 
 			changeOpening = function(e) {
@@ -115,10 +134,7 @@ <h2>Dialog 2</h2>
 			var overlayButtons = document.querySelectorAll('button[overlay]');
 			Array.prototype.forEach.call(overlayButtons, function(b) {
 				b.addEventListener('tap', function(e) {
-					var overlay = document.querySelector(e.target.getAttribute('overlay'));
-					if (overlay) {
-						overlay.querySelector('polymer-overlay').toggle();
-					}
+					document.querySelector(e.target.getAttribute('overlay')).toggle();
 				})
 			});
 		</script>

polymer-overlay/polymer-overlay.css

@@ -28,7 +28,7 @@ http://dev.w3.org/csswg/css3-transforms/#transform-rendering
 We address this by using script based positioning =(
 */
 @host {
-  * {
+  .polymer-overlay {
     position: fixed;
     z-index: 10;
     outline: none;
@@ -129,3 +129,50 @@ We address this by using script based positioning =(
     animation-name: polymer-overlay-shakeFadeOut;
   }
 }
+
+.polymer-overlay {
+  position: fixed;
+  z-index: 10;
+  outline: none;
+  display: none;
+  opacity: 0.99;
+  -webkit-transition: opacity 0.001s;
+  transition: opacity 0.001s;
+}
+
+/*
+  The revealed class exists because it's necessary to 'show' a node
+  before applying a transition. When an overlay is opened, it is 
+  immediately revealed (display: block) and then asynchronously the 
+  opened or closing classes are added.
+
+  Because we don't want to actually show the node before a transition
+  or animation is applied, when the node is 
+  revealed, it is made display: block but visibility: hidden.
+  It is then made visibility: visible when it is opened.
+*/
+
+.revealed {
+  display: block;
+  visibility: hidden;
+}
+
+.revealed.opened {
+  opacity: 1;
+  display: block;
+  visibility: visible;
+}
+
+.revealed.closing {
+  display: block;
+  visibility: visible;
+}
+
+.backdrop {
+	position: fixed;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	background: rgba(0, 0, 0, 0.25);
+}

polymer-overlay/polymer-overlay.html

@@ -71,8 +71,8 @@
 -->
 <polymer-element name="polymer-overlay" attributes="target opened autoCloseDisabled">
 	<template>
+		<link rel="stylesheet" polymer-scope="controller" href="polymer-overlay.css">
 		<link rel="stylesheet" href="polymer-overlay.css">
-		<link rel="stylesheet" polymer-scope="global" href="polymer-overlay-global.css">
 		<polymer-key-helper id="keyHelper"></polymer-key-helper>
 	</template>
 	<script>
@@ -163,6 +163,9 @@
 					}
 					this.setAttribute('touch-action', 'none');
 				},
+				inserted: function() {
+					this.installControllerStyles();
+				},
 				/** 
 				 * Toggle the opened state of the overlay.
 				 * @method toggle
@@ -253,10 +256,10 @@
 				continueRenderOpened: function() {
 					this.target.classList.toggle('opened', this.opened);
 					this.target.classList.toggle('closing', !this.opened);
-					//this.animating = this.asyncMethod('completeOpening', null, this.timeout);
+					this.animating = this.asyncMethod('completeOpening', null, this.timeout);
 				},
 				completeOpening: function() {
-					//clearTimeout(this.animating);
+					clearTimeout(this.animating);
 					this.animating = null;
 					this.target.classList.remove('closing');
 					this.target.classList.toggle('revealed', this.opened);