From e217c172f80084eca701fb26eff69456a2ed782d Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.h.kim@gmail.com>
Date: Tue, 26 Dec 2017 12:28:32 -0800
Subject: [PATCH] ref(toolbar): re-wrap buttons for torture tests

The inline classes for the toolbars were re-arranged
to fix non-rounded corners in the always-on-top window's
toolbar. However, those classes were also used by the
torture tests as a way to find stable elements that will
not get blown away by a react re-render. So re-wrap the
buttons with a div that will not get blown away,
add back the inline classes to those divs, and change
the CSS to round the corners in the always-on-top
window's toolbar.
---
 css/_toolbars.scss                                          | 3 +++
 react/features/toolbox/components/StatelessToolbarButton.js | 2 +-
 react/features/toolbox/components/ToolbarButton.web.js      | 6 +++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/css/_toolbars.scss b/css/_toolbars.scss
index 436ed9c66..8dd34b4e9 100644
--- a/css/_toolbars.scss
+++ b/css/_toolbars.scss
@@ -153,10 +153,13 @@
 
         @include transform(translateX(-50%));
 
+        > a:first-child.button,
         > div:first-child .button {
             border-bottom-left-radius: 3px;
             border-top-left-radius: 3px;
         }
+
+        > a:last-child.button,
         > div:last-child .button {
             border-bottom-right-radius: 3px;
             border-top-right-radius: 3px;
diff --git a/react/features/toolbox/components/StatelessToolbarButton.js b/react/features/toolbox/components/StatelessToolbarButton.js
index 0fb58a9d8..822c5300f 100644
--- a/react/features/toolbox/components/StatelessToolbarButton.js
+++ b/react/features/toolbox/components/StatelessToolbarButton.js
@@ -96,7 +96,7 @@ export default class StatelessToolbarButton extends AbstractToolbarButton {
         const attributes = getButtonAttributesByProps(button);
 
         return (
-            <div className = { `toolbar-button-wrapper ${button.id}-wrapper` }>
+            <div className = 'toolbar-button'>
                 <a
                     { ...attributes }
                     onClick = { this._onClick }>
diff --git a/react/features/toolbox/components/ToolbarButton.web.js b/react/features/toolbox/components/ToolbarButton.web.js
index 3b37250a0..f5cd55cfe 100644
--- a/react/features/toolbox/components/ToolbarButton.web.js
+++ b/react/features/toolbox/components/ToolbarButton.web.js
@@ -140,7 +140,11 @@ class ToolbarButton extends Component<*> {
             );
         }
 
-        return children;
+        return (
+            <div className = { `toolbar-button-wrapper ${button.id}-wrapper` }>
+                { children }
+            </div>
+        );
     }
 
     /**