Add a toast for when a URL could not be fetched. (#3694)

ampproject · Jun 21, 2016 · b466250 · b466250
1 parent 4a069f6
commit b466250
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/validator/package.json b/validator/package.json
@@ -16,8 +16,10 @@
   },
   "dependencies": {
     "@polymer/font-roboto": "0.0.3",
+    "@polymer/iron-a11y-announcer": "0.0.3",
     "@polymer/iron-a11y-keys-behavior": "0.0.3",
     "@polymer/iron-behaviors": "0.0.3",
+    "@polymer/iron-fit-behavior": "0.0.3",
     "@polymer/iron-flex-layout": "0.0.3",
     "@polymer/iron-form-element-behavior": "0.0.3",
     "@polymer/iron-icon": "0.0.3",
@@ -26,6 +28,7 @@
     "@polymer/iron-input": "0.0.3",
     "@polymer/iron-menu-behavior": "0.0.3",
     "@polymer/iron-meta": "0.0.3",
+    "@polymer/iron-overlay-behavior": "0.0.3",
     "@polymer/iron-resizable-behavior": "0.0.3",
     "@polymer/iron-selector": "0.0.3",
     "@polymer/iron-validatable-behavior": "0.0.3",
@@ -37,6 +40,7 @@
     "@polymer/paper-material": "0.0.3",
     "@polymer/paper-ripple": "0.0.3",
     "@polymer/paper-styles": "0.0.3",
+    "@polymer/paper-toast": "0.0.3",
     "@polymer/paper-toolbar": "0.0.3",
     "@polymer/polymer": "1.2.5-npm-test.2",
     "codemirror": "5.15.2",

diff --git a/validator/webui/@polymer/webui-mainpage/webui-mainpage.html b/validator/webui/@polymer/webui-mainpage/webui-mainpage.html
@@ -25,7 +25,6 @@
   <template>
     <ampproject-toolbar></ampproject-toolbar>
     <webui-urlform id="urlForm"></webui-urlform>
-
     <amphtml-editor id="amphtmlEditor"></amphtml-editor>
     <webui-statusbar id="statusBar"></webui-statusbar>
     <webui-errorlist id="errorListBox"></webui-errorlist>
@@ -34,6 +33,9 @@
     Polymer({
       is: 'webui-mainpage',
       ready: function() {
+        // The URL form at the top of the screen.
+        var urlForm = this.$.urlForm;
+
         // The editor control in the center of the screen.
         var editor = this.$.amphtmlEditor;
 
@@ -155,6 +157,8 @@
             xmlHttp.onreadystatechange = function() {
               if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                 editor.setEditorValue(JSON.parse(xmlHttp.responseText).Contents);
+              } else {
+                urlForm.displayToast();
               }
             };
             xmlHttp.open('POST', '/fetch', true);

diff --git a/validator/webui/@polymer/webui-urlform/webui-urlform.html b/validator/webui/@polymer/webui-urlform/webui-urlform.html
@@ -15,9 +15,10 @@
 -->
 <!-- Form for entering a URL above the main editor window. -->
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../paper-input/paper-input.html">
 <link rel="import" href="../paper-button/paper-button.html">
+<link rel="import" href="../paper-input/paper-input.html">
 <link rel="import" href="../paper-material/paper-material.html">
+<link rel="import" href="../paper-toast/paper-toast.html">
 <dom-module id="webui-urlform">
   <style scope="webui-urlform">
     .flex-horizontal {
@@ -28,8 +29,15 @@
     .flexchild {
       @apply(--layout-flex);
     }
+    #urlToast {
+      left: auto;
+      min-height: auto;
+      min-width: auto;
+      right: 0;
+    }
   </style>
   <template>
+    <paper-toast id="urlToast" text="Could not fetch the given URL."></paper-toast>
     <div class="container flex-horizontal">
       <paper-input auto-validate required pattern="[^ \s]+(://.*|\.[a-z]+($|(/.*)))"
           error-message="Please enter a valid URL" on-focus="checkURL"
@@ -53,6 +61,9 @@
       checkURL: function(e) {
         this.validURL = !this.$.urlToFetch.invalid;
       },
+      displayToast: function() {
+        this.$.urlToast.open();
+      },
       keyPress: function(e) {
         if (this.validURL && 13 === e.charCode) {
           this.$.validateButton.click();