Add proper natural sort to swarming UI

appengine/swarming/ui/res/imp/botpage/bot-page-summary.html

 <!--
   This in an HTML Import-able file that contains the definition
   of the following elements:
 
     <bot-page-summary>
 
   Usage:
 
     <bot-page-summary></bot-page-summary>
 
+    This element shows a summary of all the tasks run on this bot. It attempts to
+    find commonalities in the names and shorten them to save screen space.
+
+    For example, if the there are two tasks:
+    Performance-Linux-Foo-Clang
+    Performance-Linux-Bar-GCC
+
+    The summary will (optionally) truncate these to
+    ...Foo-Clang
+    ...Bar-GCC
+
+    The summary includes information like total number of failures, average duration,
+    and more.
+
   Properties:
     None.
 
   Methods:
     None.
 
   Events:
     None.
 -->
 <link rel="import" href="/res/imp/bower_components/paper-checkbox/paper-checkbox.html">
@@ skipping 302 matching lines @@
       },
 
       _compare: function(a,b) {
         if (!this._sort) {
           return 0;
         }
         var dir = 1;
         if (this._sort.direction === "desc") {
           dir = -1;
         }
-        return dir * swarming.naturalCompare(a[this._sort.name], b[this._sort.name]);
+        return dir * naturalSort(a[this._sort.name], b[this._sort.name]);
       },
 
       _countTasks: function(){
         return this._taskStats.length <= SHOW_LIMIT;
       },
 
       _makeSortObject: function(sortstr){
         if (!sortstr) {
           return undefined;
         }
@@ skipping 25 matching lines @@
         }
         e.preventDefault();
         e.stopPropagation();
         this.set("_sortstr", e.detail.name + ":" + e.detail.direction);
       },
 
     });
   })();
   </script>
 </dom-module>