Add text-security css class

Adding the class `.text-security` to the body element will (should) turn
all names, phone numbers, and message bodies into unreadable squares.
Nice to have when you want to screenshot without leaking too much info.
Note that emojis and images are not obscured.

This isn't fully baked or exposed as a feature. You have manually
inspect and tweak the DOM to enable it, but I leave it here for the
benefit of devs and other "frequent flyers" of our issue tracker.

// FREEBIE

stylesheets/_global.scss

@@ -489,3 +489,9 @@ input[type=text], input[type=search], textarea {
 .inbox:focus {
     outline: none;
 }
+
+.text-security .inbox {
+  .name, .body, .last-message, .sender, .conversation-title, .number {
+      -webkit-text-security: square;
+  }
+}

stylesheets/manifest.css

@@ -442,6 +442,9 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
 .inbox:focus {
   outline: none; }
 
+.text-security .inbox .name, .text-security .inbox .body, .text-security .inbox .last-message, .text-security .inbox .sender, .text-security .inbox .conversation-title, .text-security .inbox .number {
+  -webkit-text-security: square; }
+
 @keyframes progress-bar-stripes {
   from {
     background-position: 40px 0; }