From 7a7739a3f69c1cf113c7c966d7aa61735c61d5e0 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Sun, 12 Mar 2017 18:58:13 -0700
Subject: [PATCH] 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 | 6 ++++++
 stylesheets/manifest.css | 3 +++
 2 files changed, 9 insertions(+)

diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index c8bc2654c..63b0eb6af 100644
--- a/stylesheets/_global.scss
+++ b/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;
+  }
+}
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 9278e0955..625082f2f 100644
--- a/stylesheets/manifest.css
+++ b/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; }