Csp compat 2 (#864)

* remove inline style in roster template

* remove inline style from contacts panel

* remove inline-css from roster_filters

* remove inline style in trimmed chats

* remove last inline style from minimized chats

* update converse.css

* update changelog

css/converse.css

@@ -1966,6 +1966,7 @@
       display: block;
       padding: 4px 7px 0 5px; }
   #conversejs #controlbox #select-xmpp-status {
+    display: none;
     float: right;
     margin-right: 0.5em; }
   #conversejs #controlbox #set-custom-xmpp-status {
@@ -2145,6 +2146,8 @@
       background-position: right 3px center; }
     #conversejs #converse-roster .roster-filter-form .roster-filter.onX {
       cursor: pointer; }
+    #conversejs #converse-roster .roster-filter-form .roster-filter-state {
+      display: none; }
     #conversejs #converse-roster .roster-filter-form .state-type {
       float: left;
       border: 1px solid #999;
@@ -2154,6 +2157,8 @@
       padding: 0;
       padding-left: 0.4em;
       width: 53%; }
+    #conversejs #converse-roster .roster-filter-form .state-type-state {
+      display: none; }
     #conversejs #converse-roster .roster-filter-form .filter-type {
       display: table-cell;
       float: right;
@@ -2167,7 +2172,8 @@
     margin: 0;
     height: 100%;
     overflow-x: hidden;
-    overflow-y: auto; }
+    overflow-y: auto;
+    display: none; }
     #conversejs #converse-roster .roster-contacts dt.roster-group {
       border: none;
       color: #818479;
@@ -2624,6 +2630,9 @@
     position: absolute;
     right: 116px;
     bottom: 10px; }
+  #conversejs #minimized-chats .unread-message-count-hidden,
+  #conversejs #minimized-chats .chat-head-message-count-hidden {
+    display: none; }
 
 #conversejs #controlbox #chatrooms .bookmarks-list {
   padding-top: 1em; }

docs/CHANGES.md

@@ -10,6 +10,7 @@
 - API change: the `message` event now returns a data object with `stanza` and
   `chatbox` attributes, instead of just the stanza. [jcbrand]
 - #567 Unreaded message count reset on page load [novokrest]
+- Remove all inline CSS to comply with strict Content-Security-Policy headers [mathiasertl]
 
 ## 3.0.2 (2017-04-23)
 

sass/_controlbox.scss

@@ -220,6 +220,7 @@
         }
 
         #select-xmpp-status {
+            display: none;
             float: right;
             margin-right: 0.5em;
         }

sass/_minimized_chats.scss

@@ -54,5 +54,9 @@
             right: 116px;
             bottom: 10px;
         }
+        .unread-message-count-hidden,
+        .chat-head-message-count-hidden {
+            display: none;
+        }
     }
 }

sass/_roster.scss

@@ -49,6 +49,9 @@
         .roster-filter.onX {
             cursor: pointer;
         }
+        .roster-filter-state {
+            display: none;
+        }
         .state-type {
             float: left;
             border: 1px solid #999;
@@ -59,6 +62,9 @@
             padding-left: 0.4em;
             width: 53%;
         }
+        .state-type-state {
+            display: none;
+        }
         .filter-type {
             display: table-cell;
             float: right;
@@ -76,6 +82,7 @@
         height: 100%;
         overflow-x: hidden;
         overflow-y: auto;
+        display: none;
         dt.roster-group {
             border: none;
             color: $text-color;

src/templates/contacts_panel.html

 <form class="pure-form set-xmpp-status" action="" method="post">
     <span id="xmpp-status-holder">
-        <select id="select-xmpp-status" style="display:none">
+        <select id="select-xmpp-status">
             <option value="online">{{{label_online}}}</option>
             <option value="dnd">{{{label_busy}}}</option>
             <option value="away">{{{label_away}}}</option>

src/templates/roster.html

-<dl class="roster-contacts" style="display: none;"></dl>
+<dl class="roster-contacts"></dl>

src/templates/roster_filter.html

 <form class="pure-form roster-filter-form input-button-group">
-    <input value="{{filter_text}}" class="roster-filter"
-           placeholder="{{placeholder}}"
-           {[ if (filter_type === 'state') { ]}  style="display: none" {[ } ]} >
-    <select class="state-type" {[ if (filter_type !== 'state') { ]}  style="display: none" {[ } ]} >
+    <input value="{{filter_text}}" class="roster-filter roster-filter-{{filter_type}}"
+           placeholder="{{placeholder}}">
+           <select class="state-type state-type-{{filter_type}}">
         <option value="">{{label_any}}</option>
         <option {[ if (chat_state === 'unread_messages') { ]} selected="selected" {[ } ]}
             value="unread_messages">{{label_unread_messages}}</option>

src/templates/toggle_chats.html

 {{{Minimized}}} <span id="minimized-count">({{{num_minimized}}})</span>
-<span class="unread-message-count"
-    {[ if (!num_unread) { ]} style="display: none" {[ } ]}
+<span class="unread-message-count
+    {[ if (!num_unread) { ]} unread-message-count-hidden {[ } ]}
     href="#">{{{num_unread}}}</span>

src/templates/trimmed_chat.html

 <a class="chatbox-btn close-chatbox-button icon-close"></a>
-<a class="chat-head-message-count" 
-    {[ if (!num_unread) { ]} style="display: none" {[ } ]}
+<a class="chat-head-message-count
+    {[ if (!num_unread) { ]} chat-head-message-count-hidden {[ } ]}"
     href="#">{{{num_unread}}}</a>
 <a href="#" class="restore-chat" title="{{{tooltip}}}">
     {{{ title }}}