rework dialogs

dashboard-ui/bower_components/emby-webcomponents/.bower.json

@@ -16,12 +16,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.1.73",
+  "version": "1.1.75",
-  "_release": "1.1.73",
+  "_release": "1.1.75",
   "_resolution": {
     "type": "version",
-    "tag": "1.1.73",
+    "tag": "1.1.75",
-    "commit": "f8be47bfe5f076e14224b9a61a5e08590df41c4d"
+    "commit": "bc766156397a317445676c829b9b5e9dc058ca8e"
   },
   "_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "~1.1.5",

dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js

@@ -71,7 +71,7 @@
         pos.left += options.positionTo.offsetWidth / 2;
 
         // Account for popup size - we can't predict this yet so just estimate
-        pos.top -= (55 * options.items.length) / 2;
+        pos.top -= (45 * options.items.length) / 2;
         pos.left -= 80;
 
         // Avoid showing too close to the bottom
@@ -233,6 +233,7 @@
 
             if (pos) {
                 dlg.style.position = 'fixed';
+                dlg.style.margin = 0;
                 dlg.style.left = pos.left + 'px';
                 dlg.style.top = pos.top + 'px';
             }

dashboard-ui/bower_components/emby-webcomponents/confirm/confirm.js

@@ -55,7 +55,7 @@ define(['layoutManager', 'dialogText'], function (layoutManager, dialogText) {
 
             dialogOptions.modal = false;
             dialogOptions.entryAnimationDuration = 160;
-            dialogOptions.exitAnimationDuration = 200;
+            dialogOptions.exitAnimationDuration = 160;
             dialogOptions.autoFocus = false;
         }
 
@@ -72,18 +72,26 @@ define(['layoutManager', 'dialogText'], function (layoutManager, dialogText) {
 
         html += '<div class="buttons">';
 
-        html += '<paper-button class="btnConfirm" dialog-confirm autofocus>' + dialogText.get('Ok') + '</paper-button>';
+        html += '<paper-button class="btnConfirm" autofocus>' + dialogText.get('Ok') + '</paper-button>';
 
-        html += '<paper-button dialog-dismiss>' + dialogText.get('Cancel') + '</paper-button>';
+        html += '<paper-button class="btnCancel">' + dialogText.get('Cancel') + '</paper-button>';
 
         html += '</div>';
 
         dlg.innerHTML = html;
         document.body.appendChild(dlg);
 
-        paperdialoghelper.open(dlg).then(function () {
+        var confirmed = false;
+        dlg.querySelector('.btnConfirm').addEventListener('click', function () {
+            confirmed = true;
+            paperdialoghelper.close(dlg);
+        });
+        dlg.querySelector('.btnCancel').addEventListener('click', function () {
+            confirmed = false;
+            paperdialoghelper.close(dlg);
+        });
 
-            var confirmed = dlg.closingReason.confirmed;
+        paperdialoghelper.open(dlg).then(function () {
 
             if (confirmed) {
                 resolve();

dashboard-ui/bower_components/emby-webcomponents/focusmanager.js

@@ -25,7 +25,7 @@ define([], function () {
     }
 
     var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A', 'PAPER-BUTTON', 'PAPER-INPUT', 'PAPER-TEXTAREA', 'PAPER-ICON-BUTTON', 'PAPER-FAB', 'PAPER-CHECKBOX', 'PAPER-ICON-ITEM', 'PAPER-MENU-ITEM', 'PAPER-DROPDOWN-MENU', 'EMBY-DROPDOWN-MENU'];
-    var focusableContainerTagNames = ['BODY', 'PAPER-DIALOG'];
+    var focusableContainerTagNames = ['BODY', 'PAPER-DIALOG', 'DIALOG'];
     var focusableQuery = focusableTagNames.join(',') + ',.focusable';
 
     function isFocusable(elem) {

dashboard-ui/bower_components/emby-webcomponents/paperdialoghelper/paperdialoghelper.css

@@ -1,5 +1,19 @@
 .paperDialog {
     margin: 0;
+    border-radius: 4px;
+    z-index: 999999 !important;
+    background-color: #fff;
+    position: fixed;
+    display: block;
+    margin: 24px 40px;
+    -webkit-overflow-scrolling: touch;
+    background: #ffffff;
+    color: #212121;
+    -webkit-font-smoothing: antialiased;
+    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
+    height: auto;
+    border: 0;
+    padding: 0;
 }
 
     .paperDialog.fixedSize {
@@ -12,6 +26,7 @@
         border-radius: 0 !important;
         max-height: none !important;
         max-width: none !important;
+        width: auto;
     }
 
     .paperDialog.scrollY {
@@ -59,4 +74,56 @@
 .noScroll {
     overflow-x: hidden !important;
     overflow-y: hidden !important;
-}
+}
+
+.paperDialog > * {
+    margin-top: 20px;
+    padding: 0 24px;
+}
+
+    .paperDialog > *:first-child {
+        margin-top: 24px;
+    }
+
+.paperDialog .buttons {
+    position: relative;
+    padding: 8px 8px 8px 24px;
+    margin: 0;
+    color: #3f51b5;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    -ms-flex-pack: end;
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+}
+
+.dialogBackdrop {
+    background-color: #000;
+    opacity: 0;
+    position: fixed !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    margin: 0 !important;
+    z-index: 999998 !important;
+    transition: opacity ease-out 0.2s;
+}
+
+.paperDialog.opened + .dialogBackdrop {
+    opacity: .6;
+}
+
+.paperDialog::backdrop {
+    opacity: 0;
+    background-color: #000;
+    transition: opacity ease-out 0.2s;
+}
+
+.paperDialog.opened::backdrop {
+    opacity: .6;
+}

dashboard-ui/bower_components/emby-webcomponents/paperdialoghelper/paperdialoghelper.js

@@ -1,4 +1,4 @@
-define(['historyManager', 'focusManager', 'browser', 'layoutManager', 'inputManager', 'paper-dialog', 'scale-up-animation', 'fade-out-animation', 'fade-in-animation', 'css!./paperdialoghelper.css'], function (historyManager, focusManager, browser, layoutManager, inputManager) {
+define(['historyManager', 'focusManager', 'browser', 'layoutManager', 'inputManager', 'css!./paperdialoghelper.css'], function (historyManager, focusManager, browser, layoutManager, inputManager) {
 
     function paperDialogHashHandler(dlg, hash, resolve) {
 
@@ -11,13 +11,13 @@
 
             var isBack = self.originalUrl == window.location.href;
 
-            if (isBack || !dlg.opened) {
+            if (isBack || !isOpened(dlg)) {
                 window.removeEventListener('popstate', onHashChange);
             }
 
             if (isBack) {
                 self.closedByBack = true;
-                dlg.close();
+                closeDialog(dlg);
             }
         }
 
@@ -27,13 +27,15 @@
                 inputManager.off(dlg, onBackCommand);
 
                 self.closedByBack = true;
-                dlg.close();
+                closeDialog(dlg);
                 e.preventDefault();
             }
         }
 
         function onDialogClosed() {
 
+            removeBackdrop(dlg);
+
             if (removeScrollLockOnClose) {
                 document.body.classList.remove('noScroll');
             }
@@ -64,8 +66,43 @@
             }, 1);
         }
 
-        dlg.addEventListener('iron-overlay-closed', onDialogClosed);
+        dlg.addEventListener('close', onDialogClosed);
-        dlg.open();
+
+        var center = !dlg.classList.contains('fixedSize');
+        if (center) {
+            dlg.style.left = '50%';
+            dlg.style.top = '50%';
+        }
+
+        dlg.classList.remove('hide');
+
+        // Use native methods if available
+        var hasManualBackdrop = false;
+        if (dlg.showModal) {
+            if (dlg.getAttribute('modal')) {
+                dlg.showModal();
+            } else {
+                addBackdropOverlay(dlg);
+                hasManualBackdrop = true;
+                dlg.show();
+            }
+        } else {
+            addBackdropOverlay(dlg);
+            hasManualBackdrop = true;
+        }
+
+        if (!hasManualBackdrop) {
+            dlg.classList.add('opened');
+        }
+
+        if (center) {
+            centerDialog(dlg);
+        }
+        animateDialogOpen(dlg);
+
+        if (dlg.getAttribute('data-autofocus') == 'true') {
+            focusManager.autoFocus(dlg);
+        }
 
         if (dlg.getAttribute('data-lockscroll') == 'true' && !document.body.classList.contains('noScroll')) {
             document.body.classList.add('noScroll');
@@ -81,6 +118,23 @@
         }
     }
 
+    function addBackdropOverlay(dlg) {
+
+        var backdrop = document.createElement('div');
+        backdrop.classList.add('dialogBackdrop');
+        dlg.parentNode.insertBefore(backdrop, dlg.nextSibling);
+        dlg.backdrop = backdrop;
+
+        // Doing this immediately causes the opacity to jump immediately without animating
+        setTimeout(function () {
+            dlg.classList.add('opened');
+        }, 0);
+
+        backdrop.addEventListener('click', function () {
+            close(dlg);
+        });
+    }
+
     function isHistoryEnabled(dlg) {
         return dlg.getAttribute('data-history') == 'true';
     }
@@ -93,20 +147,84 @@
         });
     }
 
+    function isOpened(dlg) {
+
+        //return dlg.opened;
+        return !dlg.classList.contains('hide');
+    }
+
     function close(dlg) {
 
-        if (dlg.opened) {
+        if (isOpened(dlg)) {
             if (isHistoryEnabled(dlg)) {
                 history.back();
             } else {
-                dlg.close();
+                closeDialog(dlg);
             }
         }
     }
 
-    function onDialogOpened(e) {
+    function scaleUp(elem) {
 
-        focusManager.autoFocus(e.target);
+        var keyframes = [
+          { transform: 'scale(0)', offset: 0 },
+          { transform: 'scale(1,1)', offset: 1 }];
+        var timing = elem.animationConfig.entry.timing;
+        return elem.animate(keyframes, timing);
+    }
+
+    function fadeIn(elem) {
+
+        var keyframes = [
+          { opacity: '0', offset: 0 },
+          { opacity: '1', offset: 1 }];
+        var timing = elem.animationConfig.entry.timing;
+        return elem.animate(keyframes, timing);
+    }
+
+    function fadeOut(elem) {
+
+        var keyframes = [
+          { opacity: '1', offset: 0 },
+          { opacity: '0', offset: 1 }];
+        var timing = elem.animationConfig.exit.timing;
+        return elem.animate(keyframes, timing);
+    }
+
+    function closeDialog(dlg) {
+
+        if (!dlg.classList.contains('hide')) {
+
+            var onAnimationFinish = function () {
+                dlg.classList.add('hide');
+                if (dlg.close) {
+                    dlg.close();
+                } else {
+                    dlg.dispatchEvent(new CustomEvent('close', {
+                        bubbles: false,
+                        cancelable: false
+                    }));
+                }
+            };
+            if (!dlg.animationConfig || !dlg.animate) {
+                onAnimationFinish();
+                return;
+            }
+
+            fadeOut(dlg).onfinish = onAnimationFinish;
+        }
+    }
+
+    function animateDialogOpen(dlg) {
+
+        if (!dlg.animationConfig || !dlg.animate) {
+            return;
+        }
+        if (dlg.animationConfig.entry.name == 'fade-in-animation') {
+            fadeIn(dlg);
+        } else if (dlg.animationConfig.entry.name == 'scale-up-animation') {
+            scaleUp(dlg);
+        }
     }
 
     function shouldLockDocumentScroll(options) {
@@ -122,14 +240,34 @@
         return browser.mobile;
     }
 
+    function centerDialog(dlg) {
+
+        dlg.style.marginLeft = (-(dlg.offsetWidth / 2)) + 'px';
+        dlg.style.marginTop = (-(dlg.offsetHeight / 2)) + 'px';
+    }
+
+    function removeBackdrop(dlg) {
+
+        var backdrop = dlg.backdrop;
+
+        if (backdrop) {
+            dlg.backdrop = null;
+
+            backdrop.classList.remove('opened');
+
+            setTimeout(function () {
+                backdrop.parentNode.removeChild(backdrop);
+            }, 300);
+        }
+    }
+
     function createDialog(options) {
 
         options = options || {};
 
-        var dlg = document.createElement('paper-dialog');
+        var dlg = document.createElement('dialog');
 
-        dlg.setAttribute('with-backdrop', 'with-backdrop');
+        dlg.classList.add('hide');
-        dlg.setAttribute('role', 'alertdialog');
 
         if (shouldLockDocumentScroll(options)) {
             dlg.setAttribute('data-lockscroll', 'true');
@@ -147,8 +285,9 @@
             dlg.setAttribute('modal', 'modal');
         }
 
-        // seeing max call stack size exceeded in the debugger with this
+        if (options.autoFocus !== false) {
-        dlg.setAttribute('noAutoFocus', 'noAutoFocus');
+            dlg.setAttribute('data-autofocus', 'true');
+        }
 
         var defaultEntryAnimation = browser.animate && !browser.mobile ? 'scale-up-animation' : 'fade-in-animation';
         dlg.entryAnimation = options.entryAnimation || defaultEntryAnimation;
@@ -168,15 +307,15 @@
             'exit': {
                 name: dlg.exitAnimation,
                 node: dlg,
-                timing: { duration: options.exitAnimationDuration || 400, easing: 'ease-in' }
+                timing: { duration: options.exitAnimationDuration || 300, easing: 'ease-in' }
             }
         };
 
         // too buggy in IE, not even worth it
         if (!browser.animate) {
-            dlg.animationConfig = null;
+            //dlg.animationConfig = null;
-            dlg.entryAnimation = null;
+            //dlg.entryAnimation = null;
-            dlg.exitAnimation = null;
+            //dlg.exitAnimation = null;
         }
 
         dlg.classList.add('paperDialog');
@@ -197,10 +336,6 @@
             dlg.classList.add(options.size);
         }
 
-        if (options.autoFocus !== false) {
-            dlg.addEventListener('iron-overlay-opened', onDialogOpened);
-        }
-
         return dlg;
     }
 

dashboard-ui/bower_components/emby-webcomponents/slideshow/slideshow.js

@@ -57,7 +57,7 @@ define(['paperdialoghelper', 'inputManager', 'connectionManager', 'browser', 'cs
 
             inputmanager.on(window, onInputCommand);
 
-            dlg.addEventListener('iron-overlay-closed', onDialogClosed);
+            dlg.addEventListener('close', onDialogClosed);
 
             if (options.interactive) {
                 loadSwiper(dlg);

dashboard-ui/bower_components/iron-input/.bower.json

@@ -1,6 +1,6 @@
 {
   "name": "iron-input",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "An input element with data binding",
   "authors": [
     "The Polymer Authors"
@@ -20,6 +20,7 @@
   "homepage": "https://github.com/PolymerElements/iron-input",
   "ignore": [],
   "dependencies": {
+    "iron-a11y-announcer": "PolymerElements/iron-a11y-announcer#^1.0.0",
     "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
     "polymer": "Polymer/polymer#^1.0.0"
   },
@@ -28,14 +29,14 @@
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
     "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
     "test-fixture": "PolymerElements/test-fixture#^1.0.0",
-    "web-component-tester": "polymer/web-component-tester#^3.4.0",
+    "web-component-tester": "^4.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
-  "_release": "1.0.8",
+  "_release": "1.0.9",
   "_resolution": {
     "type": "version",
-    "tag": "1.0.8",
+    "tag": "v1.0.9",
-    "commit": "55d2b39ead32b8d90da538daa1a6681fd9ae89d9"
+    "commit": "6565b5d1b5f7030eb05378718163def8e9c709b7"
   },
   "_source": "git://github.com/PolymerElements/iron-input.git",
   "_target": "^1.0.0",

dashboard-ui/bower_components/iron-input/.travis.yml

@@ -1,22 +1,25 @@
 language: node_js
 sudo: false
 before_script:
-  - npm install web-component-tester
+  - npm install -g bower polylint web-component-tester
-  - npm install bower
-  - 'export PATH=$PWD/node_modules/.bin:$PATH'
   - bower install
+  - polylint
 env:
   global:
     - secure: AnFRDBxxASn2RP4u+CHJS04g2klVTM+YL1fgNfkNIiECChymGRkeBiF7zvWPfodqPGKWhBZPAMxVuFKbztawQ95kWlbPSTNJtWhHhPcRarV5AYvjhyUV372E3REZ4CGt+T8nghD9bdJiMX5x0pXAz+wfBPPpiHwbiSPPjFLFvTs=
     - secure: SvsE+VQL35CZ967ZVy0+7o5xclnBM8egjhsjNRG7WxVPZQboCQ3Xwm8tIDQSWeagM3ZQRkTGca4ta91F1ZEhm4Jdt5CwKhhSNC6JgS3CX819r9UKgUnSS3nvWdqcZq4GXcMoOZm4qE9ttd3xdoKCfkLRQlEGAvM2TEw69mBhj24=
-node_js: 4
+    - CXX=g++-4.8
+node_js: stable
 addons:
   firefox: latest
   apt:
     sources:
       - google-chrome
+      - ubuntu-toolchain-r-test
     packages:
       - google-chrome-stable
+      - g++-4.8
+  sauce_connect: true
 script:
   - xvfb-run wct
   - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"

dashboard-ui/bower_components/iron-input/CONTRIBUTING.md

@@ -5,6 +5,11 @@ https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
 
 If you edit that file, it will get updated everywhere else.
 If you edit this file, your changes will get overridden :)
+
+You can however override the jsbin link with one that's customized to this
+specific element:
+
+jsbin=https://jsbin.com/cagaye/edit?html,output
 -->
 # Polymer Elements
 ## Guide for Contributors
@@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
  3. Click the `paper-foo` element.
  ```
 
- 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
+ 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
 
  3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
 
@@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
 
 When submitting pull requests, please provide:
 
- 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
+ 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
 
  ```markdown
  (For a single issue)
  Fixes #20
 
  (For multiple issues)
- Fixes #32, #40
+ Fixes #32, fixes #40
  ```
 
  2. **A succinct description of the design** used to fix any related issues. For example:

dashboard-ui/bower_components/iron-input/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "iron-input",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "An input element with data binding",
   "authors": [
     "The Polymer Authors"
@@ -20,6 +20,7 @@
   "homepage": "https://github.com/PolymerElements/iron-input",
   "ignore": [],
   "dependencies": {
+    "iron-a11y-announcer": "PolymerElements/iron-a11y-announcer#^1.0.0",
     "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0",
     "polymer": "Polymer/polymer#^1.0.0"
   },
@@ -28,7 +29,7 @@
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
     "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
     "test-fixture": "PolymerElements/test-fixture#^1.0.0",
-    "web-component-tester": "polymer/web-component-tester#^3.4.0",
+    "web-component-tester": "^4.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   }
 }

dashboard-ui/bower_components/iron-input/iron-input.html

@@ -9,6 +9,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 
 <link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
 <link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
 
 <script>
@@ -68,18 +69,22 @@ is separate from validation, and `allowed-pattern` does not affect how the input
       },
 
       /**
-       * Set to true to prevent the user from entering invalid input. The new input characters are
+       * Set to true to prevent the user from entering invalid input. If `allowedPattern` is set,
-       * matched with `allowedPattern` if it is set, otherwise it will use the `type` attribute (only
+       * any character typed by the user will be matched against that pattern, and rejected if it's not a match.
-       * supported for `type=number`).
+       * Pasted input will have each character checked individually; if any character
+       * doesn't match `allowedPattern`, the entire pasted string will be rejected.
+       * If `allowedPattern` is not set, it will use the `type` attribute (only supported for `type=number`).
        */
       preventInvalidInput: {
         type: Boolean
       },
 
       /**
-       * Regular expression expressing a set of characters to enforce the validity of input characters.
+       * Regular expression that list the characters allowed as input.
-       * The recommended value should follow this format: `[a-ZA-Z0-9.+-!;:]` that list the characters 
+       * This pattern represents the allowed characters for the field; as the user inputs text,
-       * allowed as input.
+       * each individual character will be checked against the pattern (rather than checking
+       * the entire value as a whole). The recommended format should be a list of allowed characters;
+       * for example, `[a-zA-Z0-9.+-!;:]`
        */
       allowedPattern: {
         type: String,
@@ -103,6 +108,46 @@ is separate from validation, and `allowed-pattern` does not affect how the input
       'keypress': '_onKeypress'
     },
 
+    registered: function() {
+      // Feature detect whether we need to patch dispatchEvent (i.e. on FF and IE).
+      if (!this._canDispatchEventOnDisabled()) {
+        this._origDispatchEvent = this.dispatchEvent;
+        this.dispatchEvent = this._dispatchEventFirefoxIE;
+      }
+    },
+
+    created: function() {
+      Polymer.IronA11yAnnouncer.requestAvailability();
+    },
+
+    _canDispatchEventOnDisabled: function() {
+      var input = document.createElement('input');
+      var canDispatch = false;
+      input.disabled = true;
+
+      input.addEventListener('feature-check-dispatch-event', function() {
+        canDispatch = true;
+      });
+
+      try {
+        input.dispatchEvent(new Event('feature-check-dispatch-event'));
+      } catch(e) {}
+
+      return canDispatch;
+    },
+
+    _dispatchEventFirefoxIE: function() {
+      // Due to Firefox bug, events fired on disabled form controls can throw
+      // errors; furthermore, neither IE nor Firefox will actually dispatch
+      // events from disabled form controls; as such, we toggle disable around
+      // the dispatch to allow notifying properties to notify
+      // See issue #47 for details
+      var disabled = this.disabled;
+      this.disabled = false;
+      this._origDispatchEvent.apply(this, arguments);
+      this.disabled = disabled;
+    },
+
     get _patternRegExp() {
       var pattern;
       if (this.allowedPattern) {
@@ -143,6 +188,7 @@ is separate from validation, and `allowed-pattern` does not affect how the input
       if (this.preventInvalidInput && !this._patternAlreadyChecked) {
         var valid = this._checkPatternValidity();
         if (!valid) {
+          this._announceInvalidCharacter('Invalid string of characters not entered.');
           this.value = this._previousValidInput;
         }
       }
@@ -203,6 +249,7 @@ is separate from validation, and `allowed-pattern` does not affect how the input
       var thisChar = String.fromCharCode(event.charCode);
       if (this._isPrintable(event) && !regexp.test(thisChar)) {
         event.preventDefault();
+        this._announceInvalidCharacter('Invalid character ' + thisChar + ' not entered.');
       }
     },
 
@@ -225,23 +272,29 @@ is separate from validation, and `allowed-pattern` does not affect how the input
      * @return {boolean} True if the value is valid.
      */
     validate: function() {
-      // Empty, non-required input is valid.
+      // First, check what the browser thinks. Some inputs (like type=number)
-      if (!this.required && this.value == '') {
+      // behave weirdly and will set the value to "" if something invalid is
-        this.invalid = false;
+      // entered, but will set the validity correctly.
-        return true;
+      var valid =  this.checkValidity();
+
+      // Only do extra checking if the browser thought this was valid.
+      if (valid) {
+        // Empty, required input is invalid
+        if (this.required && this.value === '') {
+          valid = false;
+        } else if (this.hasValidator()) {
+          valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
+        }
       }
 
-      var valid;
+      this.invalid = !valid;
-      if (this.hasValidator()) {
-        valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
-      } else {
-        valid = this.checkValidity();
-        this.invalid = !valid;
-      }
       this.fire('iron-input-validate');
       return valid;
-    }
+    },
 
+    _announceInvalidCharacter: function(message) {
+      this.fire('iron-announce', { text: message });
+    }
   });
 
   /*

dashboard-ui/bower_components/iron-input/test/disabled-input.html

@@ -0,0 +1,32 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+
+<dom-module id="disabled-input">
+  <template>
+    <input is="iron-input" bind-value="{{myValue}}" invalid="{{myInvalid}}" disabled id="input">
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'disabled-input',
+    properties: {
+      myValue: {
+        value: 'foo'
+      },
+
+      myInvalid: {
+        value: false
+      }
+    }
+  });
+</script>

dashboard-ui/bower_components/iron-input/test/index.html

@@ -8,7 +8,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 --><html><head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-  <title>iron-input ests</title>
+  <title>iron-input tests</title>
   <script src="../../web-component-tester/browser.js"></script>
 </head>
 <body>

dashboard-ui/bower_components/iron-input/test/iron-input.html

@@ -20,6 +20,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <script src="../../web-component-tester/browser.js"></script>
   <link rel="import" href="../iron-input.html">
   <link rel="import" href="letters-only.html">
+  <link rel="import" href="disabled-input.html">
 
 </head>
 <body>
@@ -85,10 +86,23 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     </template>
   </test-fixture>
 
+  <test-fixture id="native-and-custom-validator">
+    <template>
+      <letters-only></letters-only>
+      <input is="iron-input" validator="letters-only" pattern="[a-c]*">
+    </template>
+  </test-fixture>
+
   <template is="dom-bind" id="bind-to-object">
     <input is="iron-input" id="input" bind-value="{{foo}}">
   </template>
 
+  <test-fixture id="disabled-input">
+    <template>
+      <disabled-input></disabled-input>
+    </template>
+  </test-fixture>
+
   <script>
 
     suite('basic', function() {
@@ -209,8 +223,57 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         input._onInput();
         assert.equal(input.bindValue, 'foo');
       });
+
+      test('disabled input doesn\'t throw on Firefox', function() {
+        var el = fixture('disabled-input');
+        var input = el.$.input;
+
+        assert.equal(input.bindValue, 'foo');
+
+        assert.isFalse(el.myInvalid);
+        assert.isTrue(input.disabled);
+      });
+
+      test('browser validation beats custom validation', function() {
+        var input = fixture('native-and-custom-validator')[1];
+        // The input allows any letters, but the browser only allows one
+        // of [abc].
+        input.value = 'aaaa';
+        input.validate();
+        assert.isFalse(input.invalid, 'input is valid');
+
+        // The validator allows this, but the browser doesn't.
+        input.value = 'zzz';
+        input.validate();
+        assert.isTrue(input.invalid, 'input is invalid');
+      });
     });
 
+    suite('a11y', function() {
+      test('announces invalid characters when _onInput is called', function() {
+        var input = fixture('prevent-invalid-input');
+        input.addEventListener('iron-announce', function(event) {
+          assert.equal(event.detail.text, 'Invalid string of characters not entered.');
+        });
+        input.value = 'foo';
+        input._onInput();
+      });
+
+      test('announces invalid characters on keypress', function() {
+        var input = fixture('prevent-invalid-input');
+        input.addEventListener('iron-announce', function(event) {
+          assert.equal(event.detail.text, 'Invalid character a not entered.');
+        });
+
+        // Simulate key press event.
+        var event = new CustomEvent('keypress', {
+          bubbles: true,
+          cancelable: true
+        });
+        event.charCode = 97 /* a */;
+        input.dispatchEvent(event);
+      });
+    });
   </script>
 
 </body>

dashboard-ui/bower_components/paper-behaviors/.bower.json

@@ -45,7 +45,7 @@
     "tag": "v1.0.11",
     "commit": "e3c1ab0c72905b58fb4d9adc2921ea73b5c085a5"
   },
-  "_source": "git://github.com/PolymerElements/paper-behaviors.git",
+  "_source": "git://github.com/polymerelements/paper-behaviors.git",
   "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/paper-behaviors"
+  "_originalSource": "polymerelements/paper-behaviors"
 }

dashboard-ui/bower_components/paper-ripple/.bower.json

@@ -32,14 +32,14 @@
     "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
   },
   "ignore": [],
-  "homepage": "https://github.com/PolymerElements/paper-ripple",
+  "homepage": "https://github.com/polymerelements/paper-ripple",
   "_release": "1.0.5",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.5",
     "commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
   },
-  "_source": "git://github.com/PolymerElements/paper-ripple.git",
+  "_source": "git://github.com/polymerelements/paper-ripple.git",
   "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/paper-ripple"
+  "_originalSource": "polymerelements/paper-ripple"
 }

dashboard-ui/components/collectioneditor/collectioneditor.js

@@ -1,9 +1,9 @@
-define(['paperdialoghelper', 'jQuery', 'paper-checkbox', 'paper-dialog', 'paper-input'], function (paperDialogHelper, $) {
+define(['paperdialoghelper', 'jQuery', 'paper-checkbox', 'paper-input'], function (paperDialogHelper, $) {
 
     function onSubmit() {
         Dashboard.showLoadingMsg();
 
-        var panel = $(this).parents('paper-dialog')[0];
+        var panel = $(this).parents('dialog')[0];
 
         var collectionId = $('#selectCollectionToAddTo', panel).val();
 
@@ -215,7 +215,7 @@
 
             initEditor(dlg, items);
 
-            $(dlg).on('iron-overlay-closed', onDialogClosed);
+            $(dlg).on('close', onDialogClosed);
 
             paperDialogHelper.open(dlg);
 

dashboard-ui/components/directorybrowser/directorybrowser.js

@@ -237,7 +237,7 @@
                 $(dlg).on('iron-overlay-opened', function () {
                     this.querySelector('#txtDirectoryPickerPath input').focus();
                 });
-                $(dlg).on('iron-overlay-closed', onDialogClosed);
+                $(dlg).on('close', onDialogClosed);
 
                 paperDialogHelper.open(dlg);
 

dashboard-ui/components/fileorganizer/fileorganizer.js

@@ -204,7 +204,7 @@
 
                     paperDialogHelper.open(dlg);
 
-                    dlg.addEventListener('iron-overlay-closed', function () {
+                    dlg.addEventListener('close', function () {
 
                         if (dlg.submitted) {
                             resolve();

dashboard-ui/components/filterdialog/filterdialog.js

@@ -528,7 +528,7 @@
 
                     paperDialogHelper.open(dlg);
 
-                    dlg.addEventListener('iron-overlay-closed', resolve);
+                    dlg.addEventListener('close', resolve);
 
                     var onTimeout = function () {
                         updateFilterControls(dlg, options);

dashboard-ui/components/guestinviter/guestinviter.js

@@ -113,7 +113,7 @@
 
                     paperDialogHelper.open(dlg);
 
-                    dlg.addEventListener('iron-overlay-closed', function () {
+                    dlg.addEventListener('close', function () {
 
                         if (dlg.submitted) {
                             resolve();

dashboard-ui/components/imagedownloader/imagedownloader.js

@@ -1,4 +1,4 @@
-define(['paperdialoghelper', 'jQuery', 'paper-checkbox', 'paper-dialog', 'paper-fab'], function (paperDialogHelper, $) {
+define(['paperdialoghelper', 'jQuery', 'paper-checkbox', 'dialog', 'paper-fab'], function (paperDialogHelper, $) {
 
     var currentItemId;
     var currentItemType;
@@ -130,7 +130,7 @@
         ApiClient.downloadRemoteImage(options).then(function () {
 
             hasChanges = true;
-            var dlg = $(page).parents('paper-dialog')[0];
+            var dlg = $(page).parents('dialog')[0];
             paperDialogHelper.close(dlg);
         });
     }
@@ -296,7 +296,7 @@
             document.body.appendChild(dlg);
 
             // Has to be assigned a z-index after the call to .open() 
-            $(dlg).on('iron-overlay-closed', onDialogClosed);
+            $(dlg).on('close', onDialogClosed);
 
             paperDialogHelper.open(dlg);
 

dashboard-ui/components/imageeditor/imageeditor.js

@@ -271,7 +271,7 @@
                 initEditor(dlg, options);
 
                 // Has to be assigned a z-index after the call to .open() 
-                $(dlg).on('iron-overlay-closed', onDialogClosed);
+                $(dlg).on('close', onDialogClosed);
 
                 paperDialogHelper.open(dlg);
 

dashboard-ui/components/imageuploader/imageuploader.js

@@ -1,4 +1,4 @@
-define(['paperdialoghelper', 'jQuery', 'paper-dialog', 'paper-fab'], function (paperDialogHelper, $) {
+define(['paperdialoghelper', 'jQuery', 'paper-fab'], function (paperDialogHelper, $) {
 
     var currentItemId;
     var currentFile;
@@ -85,7 +85,7 @@
 
         Dashboard.showLoadingMsg();
 
-        var page = $(this).parents('paper-dialog');
+        var page = $(this).parents('dialog');
 
         var imageType = $('#selectImageType', page).val();
 
@@ -161,7 +161,7 @@
             document.body.appendChild(dlg);
 
             // Has to be assigned a z-index after the call to .open() 
-            $(dlg).on('iron-overlay-closed', onDialogClosed);
+            $(dlg).on('close', onDialogClosed);
 
             paperDialogHelper.open(dlg);
 

dashboard-ui/components/itemidentifier/itemidentifier.js

@@ -1,4 +1,4 @@
-define(['paperdialoghelper', 'jQuery', 'paper-dialog', 'paper-fab', 'paper-input', 'paper-checkbox'], function (paperDialogHelper, $) {
+define(['paperdialoghelper', 'jQuery', 'paper-fab', 'paper-input', 'paper-checkbox'], function (paperDialogHelper, $) {
 
     var currentItem;
     var currentItemType;
@@ -301,7 +301,7 @@
                 document.body.appendChild(dlg);
 
                 // Has to be assigned a z-index after the call to .open() 
-                $(dlg).on('iron-overlay-closed', onDialogClosed);
+                $(dlg).on('close', onDialogClosed);
 
                 paperDialogHelper.open(dlg);
 
@@ -380,7 +380,7 @@
                 return false;
             });
 
-            dlg.addEventListener('iron-overlay-closed', function () {
+            dlg.addEventListener('close', function () {
 
                 Dashboard.hideLoadingMsg();
                 var foundItem = hasChanges ? currentSearchResult : null;

dashboard-ui/components/medialibrarycreator/medialibrarycreator.js

@@ -1,4 +1,4 @@
-define(['paperdialoghelper', 'jQuery', 'paper-dialog', 'paper-input', 'paper-fab', 'paper-item-body', 'paper-icon-item'], function (paperDialogHelper, $) {
+define(['paperdialoghelper', 'jQuery', 'paper-input', 'paper-fab', 'paper-item-body', 'paper-icon-item'], function (paperDialogHelper, $) {
 
     var currentDeferred;
     var hasChanges;
@@ -18,7 +18,7 @@
         }
 
         var form = this;
-        var dlg = $(form).parents('paper-dialog')[0];
+        var dlg = $(form).parents('dialog')[0];
 
         var name = $('#txtValue', form).val();
         var type = $('#selectCollectionType', form).val();
@@ -63,7 +63,7 @@
                 return;
             }
 
-            var dlg = $(this).parents('paper-dialog')[0];
+            var dlg = $(this).parents('dialog')[0];
 
             var index = this.selectedIndex;
             if (index != -1) {
@@ -214,7 +214,7 @@
 
                 initEditor(dlg, options.collectionTypeOptions);
 
-                dlg.addEventListener('iron-overlay-closed', onDialogClosed);
+                dlg.addEventListener('close', onDialogClosed);
 
                 paperDialogHelper.open(dlg);
 

dashboard-ui/components/medialibraryeditor/medialibraryeditor.js

@@ -178,7 +178,7 @@
                 var editorContent = dlg.querySelector('.editorContent');
                 initEditor(editorContent, options);
 
-                $(dlg).on('iron-overlay-closed', onDialogClosed);
+                $(dlg).on('close', onDialogClosed);
 
                 paperDialogHelper.open(dlg);
 

dashboard-ui/components/metadataeditor/metadataeditor.js

@@ -1,4 +1,4 @@
-define(['paperdialoghelper', 'jQuery', 'paper-checkbox', 'paper-dialog', 'paper-input', 'paper-item-body', 'paper-icon-item', 'paper-textarea', 'paper-fab'], function (paperDialogHelper, $) {
+define(['paperdialoghelper', 'jQuery', 'paper-checkbox', 'paper-input', 'paper-item-body', 'paper-icon-item', 'paper-textarea', 'paper-fab'], function (paperDialogHelper, $) {
 
     var currentContext;
     var metadataEditorInfo;
@@ -6,7 +6,7 @@
 
     function closeDialog(isSubmitted) {
 
-        if (currentContext.tagName == 'PAPER-DIALOG') {
+        if (currentContext.tagName == 'DIALOG') {
             paperDialogHelper.close(currentContext);
         }
     }
@@ -463,7 +463,7 @@
         });
 
         // For now this is only supported in dialog mode because we have a way of knowing when it closes
-        if (currentContext.tagName == 'PAPER-DIALOG') {
+        if (currentContext.tagName == 'DIALOG') {
             bindItemChanged(context);
         }
     }
@@ -1239,7 +1239,7 @@
 
                     paperDialogHelper.open(dlg);
 
-                    dlg.addEventListener('iron-overlay-closed', function () {
+                    dlg.addEventListener('close', function () {
                         unbindItemChanged(dlg);
                         resolve();
                     });

dashboard-ui/components/metadataeditor/personeditor.js

@@ -34,7 +34,7 @@
 
                     paperDialogHelper.open(dlg);
 
-                    dlg.addEventListener('iron-overlay-closed', function () {
+                    dlg.addEventListener('close', function () {
 
                         if (submitted) {
                             resolve(person);

dashboard-ui/components/playlisteditor/playlisteditor.js

@@ -1,4 +1,4 @@
-define(['paperdialoghelper', 'jQuery', 'paper-dialog', 'paper-input'], function (paperDialogHelper, $) {
+define(['paperdialoghelper', 'jQuery', 'paper-input'], function (paperDialogHelper, $) {
 
     var lastPlaylistId = '';
 
@@ -221,7 +221,7 @@
 
             initEditor(dlg, items);
 
-            $(dlg).on('iron-overlay-closed', onDialogClosed);
+            $(dlg).on('close', onDialogClosed);
 
             paperDialogHelper.open(dlg);
 

dashboard-ui/components/recordingcreator/recordingcreator.js

@@ -355,7 +355,7 @@
 
                 currentDialog = dlg;
 
-                dlg.addEventListener('iron-overlay-closed', function () {
+                dlg.addEventListener('close', function () {
 
                     if (recordingCreated) {
                         require(['toast'], function (toast) {

dashboard-ui/css/librarybrowser.css

@@ -16,7 +16,7 @@
     margin-left: .5em;
 }
 
-.background-theme-b, paper-dialog.background-theme-b {
+.background-theme-b, .paperDialog.background-theme-b {
     background-color: #181818;
     /*background: radial-gradient(circle, #282828, #141414);*/
 }

dashboard-ui/css/site.css

@@ -336,7 +336,7 @@ h1, h1 a {
 }
 
 h2 {
-    font-weight: 300;
+    font-weight: 400;
 }
 
 .ui-btn {
@@ -839,10 +839,14 @@ paper-input + .fieldDescription {
     box-shadow: -3px 0 10px 0 #555;*/
 }
 
-.background-theme-a, paper-dialog.background-theme-a {
+.background-theme-a, .paperDialog.background-theme-a {
     background-color: #f6f6f6;
 }
 
+.paperDialog:not(.background-theme-a):not(.background-theme-b) {
+    background-color: #fff;
+}
+
 .ui-page-theme-a .content-secondary {
     background: #fff;
 }

dashboard-ui/devices/ios/ios.css

@@ -19,7 +19,7 @@
     background-attachment: initial;
 }
 
-.background-theme-b, paper-dialog.background-theme-b {
+.background-theme-b, .paperDialog.background-theme-b {
     background: #181818;
 }
 

dashboard-ui/devices/windowsphone/wp.css

@@ -13,7 +13,7 @@
         font-weight: 400 !important;
     }
 
-.background-theme-b, paper-dialog.background-theme-b {
+.background-theme-b, .paperDialog.background-theme-b {
     background: #161616;
 }
 

dashboard-ui/scripts/registrationservices.js

@@ -138,7 +138,7 @@
             document.body.appendChild(dlg);
 
             // Has to be assigned a z-index after the call to .open() 
-            dlg.addEventListener('iron-overlay-closed', function (e) {
+            dlg.addEventListener('close', function (e) {
                 appStorage.setItem(supporterPlaybackKey, new Date().getTime());
                 dlg.parentNode.removeChild(dlg);
                 resolve();

dashboard-ui/thirdparty/paper-button-style.css

@@ -216,14 +216,6 @@ iron-overlay-backdrop {
     padding: 0 12px;
 }
 
-paper-dialog > *:last-child:not(.buttons) {
-    margin-bottom: 12px;
-}
-
-paper-dialog > *:first-child:not(h2) {
-    margin-top: 12px;
-}
-
 paper-icon-button paper-ripple {
     color: inherit !important;
 }
@@ -559,7 +551,7 @@ div.dialogHeader {
     margin-left: .75em;
 }
 
-paper-dialog.popupEditor h2.dialogHeader {
+.paperDialog.popupEditor h2.dialogHeader {
     font-weight: inherit !important;
     line-height: 36px;
     padding: 0 1em;
@@ -571,7 +563,7 @@ paper-dialog.popupEditor h2.dialogHeader {
     margin-bottom: 0;
 }
 
-paper-dialog.popupEditor {
+.paperDialog.popupEditor {
     padding-bottom: 100px;
 }
 

dashboard-ui/voice/voicedialog.js

@@ -179,7 +179,7 @@ define(['paperdialoghelper', 'jQuery'], function (paperDialogHelper, $) {
         paperDialogHelper.open(dlg);
         currentDialog = dlg;
 
-        dlg.addEventListener('iron-overlay-closed', function () {
+        dlg.addEventListener('close', function () {
             currentDialog = null;
         });