From 474a44388c4cfdd1f7cb0fc74f1841cd294fb415 Mon Sep 17 00:00:00 2001
From: Shashwat <shashwatkansal@google.com>
Date: Mon, 19 Jul 2021 17:50:48 +0000
Subject: [PATCH] Update Snackbar to not allow text to overflow.

CSS of Snackbar added in App.vue to break long words into several lines so that it
all fits within the snackbar when error message is displayed.

Bug: 162502395

Test: Add a file on Winscope homepage with extremely long filename that pops an error
(unaccepted file type) and then see the snackbar with text not
overflowing.

Change-Id: I21c8881963fe22705f0c39d9ab6207ccbbfa90b0
---
 tools/winscope/src/App.vue       | 14 ++++++++++++++
 tools/winscope/src/DataInput.vue |  6 +++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/tools/winscope/src/App.vue b/tools/winscope/src/App.vue
index 89627c6b2..75d7b32bf 100644
--- a/tools/winscope/src/App.vue
+++ b/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>
diff --git a/tools/winscope/src/DataInput.vue b/tools/winscope/src/DataInput.vue
index 6517ad36b..6bd7e354f 100644
--- a/tools/winscope/src/DataInput.vue
+++ b/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>
\ No newline at end of file