Merge "Update Snackbar to not allow text to overflow."

tools/winscope/src/App.vue

@@ -279,4 +279,18 @@ a {
 .data-view-container {
   padding: 25px 20px 0 20px;
 }
+
+.snackbar-break-words {
+    /* These are technically the same, but use both */
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    word-break: break-word;
+    /* Adds a hyphen where the word breaks, if supported (No Blink) */
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+    padding: 10px 10px 10px 10px;
+  }
 </style>

tools/winscope/src/DataInput.vue

@@ -91,7 +91,7 @@
       :md-active.sync="showSnackbar"
       md-persistent
     >
-      <span style="white-space: pre-line;">{{ snackbarText }}</span>
+      <p class="snackbar-break-words">{{ snackbarText }}</p>
       <div @click="hideSnackbarMessage()">
         <md-button class="md-icon-button">
           <md-icon style="color: white">close</md-icon>
@@ -137,7 +137,7 @@ export default {
   },
   methods: {
     showSnackbarMessage(message, duration) {
-      this.snackbarText = message;
+      this.snackbarText = '\n' + message + '\n';
       this.snackbarDuration = duration;
       this.showSnackbar = true;
     },
@@ -534,4 +534,4 @@ export default {
   },
 };
 
-</script>
+</script>