Improve edit button visibility when infobar, snackbar is present

Before we were showing edit button only if the snackbar was not present
in the DOM. The goal here was to avoid overlapping elements (bar + FAB).

However and since the infobar can be present in the DOM but set to
display none this would cause another problem: no edit button and no
infobar visible to the user.

Solution:
- Make use of the existent css class .hidden (which sets it to display
none) so we can then in the css side show the Edit FAB only after them
snacbar is dismissed.

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: I31be2dfeb1bcb08b971074466a24db719320f8f4

2 files changed, 3 insertions, 3 deletions

diff --git a/browser/css/device-mobile.css b/browser/css/device-mobile.css
index 4b6a3ebbc2..f13087e3c4 100644
--- a/browser/css/device-mobile.css
+++ b/browser/css/device-mobile.css
@@ -916,6 +916,6 @@ div#fontstyletoolbox + div#style.mobile-wizard {
 	height: 100%;
 }
 
-.div-infobar-wrap ~ #mobile-edit-button {
+.div-infobar-wrap:not(.hidden) ~ #mobile-edit-button {
 	display: none;
 }
diff --git a/browser/src/control/IFrameDialog.js b/browser/src/control/IFrameDialog.js
index a573a809b6..44937c27a9 100644
--- a/browser/src/control/IFrameDialog.js
+++ b/browser/src/control/IFrameDialog.js
@@ -24,7 +24,7 @@ L.IFrameDialog = L.Class.extend({
 			this._container = L.DomUtil.create('div', this.options.prefix + '-wrap');
 			content = L.DomUtil.create('div', this.options.prefix + '-content', this._container);
 		}
-		this._container.style.display = 'none';
+		this._container.classList.add('hidden');
 
 		form = L.DomUtil.create('form', '', content);
 
@@ -104,7 +104,7 @@ L.IFrameDialog = L.Class.extend({
 	},
 
 	show: function () {
-		this._container.style.display = '';
+		this._container.classList.remove('hidden');
 	}
 });