Create tf-wbr-string for safe word-breaking

tensorboard/components/tf_runs_selector/BUILD

@@ -6,7 +6,10 @@ licenses(["notice"])  # Apache 2.0
 
 tf_web_library(
     name = "tf_runs_selector",
-    srcs = ["tf-runs-selector.html"],
+    srcs = [
+        "tf-runs-selector.html",
+        "tf-wbr-string.html",
+    ],
     path = "/tf-runs-selector",
     visibility = ["//visibility:public"],
     deps = [

tensorboard/components/tf_runs_selector/tf-runs-selector.html

@@ -22,6 +22,7 @@
 <link rel="import" href="../tf-color-scale/tf-color-scale.html" />
 <link rel="import" href="../tf-dashboard-common/scrollbar-style.html" />
 <link rel="import" href="../tf-dashboard-common/tf-multi-checkbox.html" />
+<link rel="import" href="tf-wbr-string.html" />
 
 <!--
 tf-runs-selector creates a set of checkboxes to display which runs are
@@ -36,7 +37,7 @@
   <template>
     <paper-dialog with-backdrop id="data-location-dialog">
       <h2>Data Location</h2>
-      <div inner-h-t-m-l="{{_breakString(dataLocation)}}"></div>
+      <tf-wbr-string value="[[dataLocation]]" />
     </paper-dialog>
     <div id="top-text">
       <h3 id="tooltip-help" class="tooltip-container">Runs</h3>
@@ -54,11 +55,7 @@ <h3 id="tooltip-help" class="tooltip-container">Runs</h3>
     </paper-button>
     <template is="dom-if" if="[[dataLocation]]">
       <div id="data-location">
-        <span
-          id="clipped-dataLocation"
-          inner-h-t-m-l="[[_clippedDataLocation]]"
-        ></span
-        ><!--
+        <tf-wbr-string value="[[_clippedDataLocation]]" /><!--
           We use HTML comments to remove spaces before the ellipsis.
         --><template
           is="dom-if"
@@ -179,10 +176,6 @@ <h3 id="tooltip-help" class="tooltip-container">Runs</h3>
       _toggleAll: function() {
         this.$.multiCheckbox.toggleAll();
       },
-      // Break the string at natural points, including commas, equals, and slashes
-      _breakString: function(originalString) {
-        return originalString.replace(/([\/=\-_,])/g, '$1<wbr>');
-      },
       _getClippedDataLocation: function(dataLocation, dataLocationClipLength) {
         if (dataLocation === undefined) {
           // The dataLocation has not been set yet.
@@ -192,11 +185,9 @@ <h3 id="tooltip-help" class="tooltip-container">Runs</h3>
         if (dataLocation.length > dataLocationClipLength) {
           // Clip the dataLocation to avoid blocking the runs selector. Let the
           // user view a more full version of the dataLocation.
-          return this._breakString(
-            dataLocation.substring(0, dataLocationClipLength)
-          );
+          dataLocation.substring(0, dataLocationClipLength);
         } else {
-          return this._breakString(dataLocation);
+          return dataLocation;
         }
       },
       _openDataLocationDialog: function(event) {

tensorboard/components/tf_runs_selector/tf-wbr-string.html

@@ -0,0 +1,65 @@
+<!--
+@license
+Copyright 2019 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<link rel="import" href="../tf-imports/polymer.html" />
+
+<!--
+  tf-wbr-string safely renders a string, with <wbr> elements inserted
+  around select delimiters (see `const delimiterPattern` in this file).
+-->
+<dom-module id="tf-wbr-string">
+  <template>
+    <!--
+      This ugly formatting is required to prevent spaces from slipping
+      into the HTML.
+    -->
+    <template is="dom-repeat" items="[[_parts]]" as="part"
+      >[[part]]<wbr
+    /></template>
+  </template>
+  <script>
+    Polymer({
+      is: 'tf-wbr-string',
+      properties: {
+        /** The value to render with word breaks. */
+        value: String,
+        _parts: {
+          type: Array /* string[] */,
+          computed: '_computeParts(value)',
+        },
+      },
+      _computeParts(value) {
+        const result = [];
+        const delimiterPattern = /[/=_,-]/;
+        if (value == null) {
+          value = '';
+        }
+        while (true) {
+          const idx = value.search(delimiterPattern);
+          if (idx === -1) {
+            result.push(value);
+            break;
+          } else {
+            result.push(value.slice(0, idx + 1));
+            value = value.slice(idx + 1);
+          }
+        }
+        return result;
+      },
+    });
+  </script>
+</dom-module>