fiddle: Don't overwrite existing fiddle names unintentionally.

fiddle/res/imp/fiddle-sk.html

 <!-- The <fiddle-sk> custom element declaration.
 
   Handles displaying and running a fiddle. Note that the code
   should be supplied as a child element textarea.
 
   Attributes:
     width        - The width of the fiddle image.
     height       - The height of the fiddle image.
     source       - The index of the source image to use as input.
     bug_link     - If true then display a link to report a bug.
     embed_button - If true then display the embed button.
 
   Methods:
     None.
 
   Events:
     fiddle-success - generates an event when a succesful run is complete. The event contains
       the hash of the new fiddle, to be used to retrieve the resultant images.
 -->
 <link rel="stylesheet" href="/res/common/css/md.css" type="text/css" media="all">
 <link rel="import" href="bower_components/paper-spinner/paper-spinner.html">
+<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="/res/common/imp/9/details-summary.html">
 <link rel="import" href="/res/common/imp/9/toggle.html">
 <link rel="import" href="/res/imp/bower_components/paper-input/paper-input.html">
 <style type="text/css" media="screen">
     .CodeMirror .error {
       background: #f88;
     }
 
     .CodeMirror-lines,
     .CodeMirror-scroll
@@ skipping 134 matching lines @@
         <div id=embedder>
           <h3>Embed as an iframe:</h3>
           <input type="text" readonly size=150 value="&lt;iframe src='https://fiddle.skia.org/iframe/{{fiddlehash}}' width='900' height='550' style='border: solid #00a 1px; border-radius: 5px;'/>">
           <p>Embed as an image with a backlink:</p>
           <input type="text" readonly size=150 value="&lt;a href='https://fiddle.skia.org/c/{{fiddlehash}}'>&lt;img src='https://fiddle.skia.org/c/{{fiddlehash}}_raster.png'>&lt;/a>">
         </div>
       </template>
         <toggle-display-sk disabled$={{_not_logged_in}}>Name</toggle-display-sk>
         <div id=namer>
           <h3>Create a name for this fiddle:</h3>
-          <paper-input id=name label="Name" size=40 auto-validate allowed-pattern="[0-9a-zA-Z_]" value=""></paper-input>
+          <paper-input id=name label="Name" placeholder="fiddle_name_goes_here" size=40 auto-validate allowed-pattern="[0-9a-zA-Z_]" value="{{_name}}"></paper-input>
           <!-- Add a pop-up menu here that has completions based on what's been typed so far, and also any names that this page has loaded previously.-->
-          <button class=save on-tap="_submit_name">Save</button>
+          <paper-checkbox id=overwrite title="Overwrite the existing name if one exists.">Overwrite</paper-checkbox>
+          <button class=save on-tap="_submit_name" disabled="{{_isEmpty(_name)}}">Save</button>
         </div>
 
     </div>
     <div on-tap="_errSelect">
       <template is="dom-if" if="{{_hasCompileErrors(_compile_errors)}}">
         <h2>Compilation Errors</h2>
         <template is="dom-repeat" items="{{_compile_errors}}">
           <pre class=compile-error data-line$="{{item.line}}" data-col$="{{item.col}}">{{item.text}}</pre>
         </template>
       </template>
@@ skipping 75 matching lines @@
       },
       _runtime_error: {
         type: String,
         value: "",
         reflectToAttribute: false,
       },
       _not_logged_in: {
         type: Boolean,
         value: true,
         reflectToAttribute: false,
-      }
+      },
+      _name: {
+        type: String,
+        value: "",
+        reflectToAttribute: false,
+      },
     },
 
     ready: function() {
       this._errorLinesRe = /draw.cpp:([0-9]+):([0-9]+):/;
 
       this._editor = CodeMirror.fromTextArea($$$('textarea', this), {
         theme: "default",
         lineNumbers: true,
         matchBrackets: true,
         lineWrapping: true,
@@ skipping 18 matching lines @@
       sk.Login.then(function(status) {
         this._not_logged_in = (status.Email == "");
       }.bind(this));
     },
 
     _run: function() {
       this._run_impl({});
     },
 
     _submit_name: function() {
-      this._run_impl({name: this.$.name.value});
+      this._run_impl({
+        name: this._name,
+        overwrite: this.$.overwrite.checked,
+      });
     },
 
     _run_impl: function(extra) {
       this._editor.save();
       this.fiddlehash = "";
       this.$.running.active = true;
       body = {
         code: $$$('textarea', this).value,
         options: {
           width: +this.width,
           height: +this.height,
           source: +this.source,
         }
       };
       for (key in extra) {
         body[key] = extra[key];
       }
       sk.post("/_/run", JSON.stringify(body)).then(JSON.parse).then(function(json) {
         this.fiddlehash = json.fiddleHash;
         this._compile_errors = json.compile_errors || [];
         this._runtime_error = json.runtime_error || "";
         this.$.running.active = false;
         this.fire("fiddle-success", json.fiddleHash);
         this._compile_errors.forEach(function(err) {
           this._editor.addLineClass(+err.line-1, "wrap", "error");
         }.bind(this));
-
+        this.$.overwrite.checked = false;
       }.bind(this)).catch(function(err) {
         this.$.running.active = false;
         sk.errorMessage(err);
       }.bind(this));
     },
 
     _errSelect: function(e) {
       if (e.target.nodeName == "PRE") {
         this._editor.setCursor(+e.target.dataset.line-1, +e.target.dataset.col-1);
         this._editor.focus();
       }
     },
 
     _bugLink: function(fiddleHash) {
       var comment = "Visit this link to see the issue on fiddle:\n\n https://fiddle.skia.org/c/" + fiddleHash;
       return "https://bugs.chromium.org/p/skia/issues/entry?" + sk.query.fromObject({
         comment: comment,
       });
     },
 
     _hasImages: function(fiddlehash, compile_errors, runtime_error) {
       return fiddlehash != "" && runtime_error == "" && (compile_errors.length == 0);
     },
 
     _hasCompileErrors: function(compile_errors) {
       return compile_errors.length > 0;
     },
 
+    _isEmpty: function(name) {
+      return name == "";
+    },
+
   });
 </script>