From 0deb210fd89b91b41d147c4a08969ea9acc1b480 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 22 Jan 2019 09:54:35 -0700
Subject: [PATCH] Collapse DOM around tab label icon

---
 res/css/structures/_TabbedView.scss           | 22 +++++++------------
 .../views/dialogs/_UserSettingsDialog.scss    | 12 +++++-----
 src/components/structures/TabbedView.js       |  8 +++----
 .../views/dialogs/UserSettingsDialog.js       | 14 ++++++------
 4 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss
index 86149020b8..0f4b67ad71 100644
--- a/res/css/structures/_TabbedView.scss
+++ b/res/css/structures/_TabbedView.scss
@@ -38,6 +38,7 @@ limitations under the License.
   font-weight: 600;
   height: 20px;
   margin-bottom: 6px;
+  position: relative;
 }
 
 .mx_TabbedView_tabLabel_active {
@@ -50,34 +51,27 @@ limitations under the License.
   background-color: orange;
 }
 
-.mx_TabbedView_tabLabel_icon {
-  width: 14px;
-  height: 14px;
+.mx_TabbedView_maskedIcon {;
   margin-left: 6px;
   margin-right: 9px;
-  position: relative;
-}
-
-.mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon {
   width: 14px;
   height: 14px;
   display: inline-block;
 }
 
-.mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon:before {
+.mx_TabbedView_maskedIcon:before {
+  display: inline-block;
   background-color: $tab-label-icon-bg-color;
   mask-repeat: no-repeat;
   mask-size: 14px;
+  width: 14px;
+  height: 14px;
   mask-position: center;
   content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  vertical-align: middle;
 }
 
-.mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon:before {
+.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
   background-color: $tab-label-active-icon-bg-color;
 }
 
diff --git a/res/css/views/dialogs/_UserSettingsDialog.scss b/res/css/views/dialogs/_UserSettingsDialog.scss
index def5d3f724..c4bd8a5110 100644
--- a/res/css/views/dialogs/_UserSettingsDialog.scss
+++ b/res/css/views/dialogs/_UserSettingsDialog.scss
@@ -39,25 +39,25 @@
 // ==========================================================
 
 .mx_UserSettingsDialog_settingsIcon:before {
-  mask: url('$(res)/img/feather-icons/settings.svg');
+  mask-image: url('$(res)/img/feather-icons/settings.svg');
 }
 
 .mx_UserSettingsDialog_voiceIcon:before {
-  mask: url('$(res)/img/feather-icons/phone.svg');
+  mask-image: url('$(res)/img/feather-icons/phone.svg');
 }
 
 .mx_UserSettingsDialog_bellIcon:before {
-  mask: url('$(res)/img/feather-icons/notifications.svg');
+  mask-image: url('$(res)/img/feather-icons/notifications.svg');
 }
 
 .mx_UserSettingsDialog_preferencesIcon:before {
-  mask: url('$(res)/img/feather-icons/sliders.svg');
+  mask-image: url('$(res)/img/feather-icons/sliders.svg');
 }
 
 .mx_UserSettingsDialog_securityIcon:before {
-  mask: url('$(res)/img/feather-icons/lock.svg');
+  mask-image: url('$(res)/img/feather-icons/lock.svg');
 }
 
 .mx_UserSettingsDialog_helpIcon:before {
-  mask: url('$(res)/img/feather-icons/help-circle.svg');
+  mask-image: url('$(res)/img/feather-icons/help-circle.svg');
 }
\ No newline at end of file
diff --git a/src/components/structures/TabbedView.js b/src/components/structures/TabbedView.js
index 43979140a8..2b136128f3 100644
--- a/src/components/structures/TabbedView.js
+++ b/src/components/structures/TabbedView.js
@@ -26,12 +26,12 @@ export class Tab {
     /**
      * Creates a new tab.
      * @param {string} tabLabel The untranslated tab label.
-     * @param {string} tabIconJsx The JSX for the tab icon. This should be a plain img element or null.
+     * @param {string} tabIconClass The class for the tab icon. This should be a simple mask.
      * @param {string} tabJsx The JSX for the tab container.
      */
-    constructor(tabLabel, tabIconJsx, tabJsx) {
+    constructor(tabLabel, tabIconClass, tabJsx) {
         this.label = tabLabel;
-        this.icon = tabIconJsx;
+        this.icon = tabIconClass;
         this.body = tabJsx;
     }
 }
@@ -78,7 +78,7 @@ export class TabbedView extends React.Component {
 
         let tabIcon = null;
         if (tab.icon) {
-            tabIcon = <span className="mx_TabbedView_tabLabel_icon">{tab.icon}</span>;
+            tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
         }
 
         const onClickHandler = () => this._setActiveTab(tab);
diff --git a/src/components/views/dialogs/UserSettingsDialog.js b/src/components/views/dialogs/UserSettingsDialog.js
index d0b3f436b8..dd404ce280 100644
--- a/src/components/views/dialogs/UserSettingsDialog.js
+++ b/src/components/views/dialogs/UserSettingsDialog.js
@@ -47,37 +47,37 @@ export default class UserSettingsDialog extends React.Component {
         return [
             new Tab(
                 _td("General"),
-                <span className="mx_UserSettingsDialog_settingsIcon mx_TabbedView_maskedIcon" />,
+                "mx_UserSettingsDialog_settingsIcon",
                 <GeneralSettingsTab />,
             ),
             new Tab(
                 _td("Notifications"),
-                <span className="mx_UserSettingsDialog_bellIcon mx_TabbedView_maskedIcon" />,
+                "mx_UserSettingsDialog_bellIcon",
                 <div>Notifications Test</div>,
             ),
             new Tab(
                 _td("Preferences"),
-                <span className="mx_UserSettingsDialog_preferencesIcon mx_TabbedView_maskedIcon" />,
+                "mx_UserSettingsDialog_preferencesIcon",
                 <div>Preferences Test</div>,
             ),
             new Tab(
                 _td("Voice & Video"),
-                <span className="mx_UserSettingsDialog_voiceIcon mx_TabbedView_maskedIcon" />,
+                "mx_UserSettingsDialog_voiceIcon",
                 <div>Voice Test</div>,
             ),
             new Tab(
                 _td("Security & Privacy"),
-                <span className="mx_UserSettingsDialog_securityIcon mx_TabbedView_maskedIcon" />,
+                "mx_UserSettingsDialog_securityIcon",
                 <div>Security Test</div>,
             ),
             new Tab(
                 _td("Help & About"),
-                <span className="mx_UserSettingsDialog_helpIcon mx_TabbedView_maskedIcon" />,
+                "mx_UserSettingsDialog_helpIcon",
                 <div>Help Test</div>,
             ),
             new Tab(
                 _td("Visit old settings"),
-                <span className="mx_UserSettingsDialog_helpIcon mx_TabbedView_maskedIcon" />,
+                "mx_UserSettingsDialog_helpIcon",
                 <TempTab onClose={this.props.onFinished} />,
             ),
         ];