From 549746aed47603ca066871a88f7dac623dfec257 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sun, 24 Jan 2021 00:19:20 +0100
Subject: [PATCH] Hide toolbars properly

---
 src/canvas/view/FrameWrapView.js     |  2 +-
 src/commands/view/SelectComponent.js | 30 ++++++++++------------------
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/canvas/view/FrameWrapView.js b/src/canvas/view/FrameWrapView.js
index d7b1938f9..29e78936c 100644
--- a/src/canvas/view/FrameWrapView.js
+++ b/src/canvas/view/FrameWrapView.js
@@ -175,7 +175,7 @@ export default Backbone.View.extend({
       'div',
       {
         class: `${ppfx}tools`,
-        style: 'pointer-events:none; opacity: 0'
+        style: 'pointer-events:none; display: none'
       },
       `
       <div class="${ppfx}highlighter" data-hl></div>
diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js
index 896a88709..bc6157e5b 100644
--- a/src/commands/view/SelectComponent.js
+++ b/src/commands/view/SelectComponent.js
@@ -224,7 +224,7 @@ export default {
 
   toggleToolsEl(on, view, opts = {}) {
     const el = opts.el || this.canvas.getToolsEl(view);
-    el && (el.style.opacity = on ? 1 : 0);
+    el && (el.style.display = on ? '' : 'none');
     return el || {};
   },
 
@@ -509,29 +509,19 @@ export default {
    * @param {Object} mod
    */
   updateToolbar(mod) {
-    var em = this.config.em;
-    var model = mod == em ? em.getSelected() : mod;
-    var toolbarEl = this.canvas.getToolbarEl();
-    var toolbarStyle = toolbarEl.style;
-
-    if (!model) {
-      // By putting `toolbarStyle.display = 'none'` will cause kind
-      // of freezed effect with component selection (probably by iframe
-      // switching)
-      toolbarStyle.opacity = 0;
-      return;
-    }
-
-    var toolbar = model.get('toolbar');
-    var showToolbar = em.get('Config').showToolbar;
-
-    if (showToolbar && toolbar && toolbar.length) {
-      toolbarStyle.opacity = '';
+    const { em } = this.config;
+    const model = mod == em ? em.getSelected() : mod;
+    const toolbarEl = this.canvas.getToolbarEl();
+    const toolbarStyle = toolbarEl.style;
+    const toolbar = model.get('toolbar');
+    const showToolbar = em.get('Config').showToolbar;
+
+    if (model && showToolbar && toolbar && toolbar.length) {
       toolbarStyle.display = '';
       if (!this.toolbar) {
         toolbarEl.innerHTML = '';
         this.toolbar = new Toolbar(toolbar);
-        var toolbarView = new ToolbarView({
+        const toolbarView = new ToolbarView({
           collection: this.toolbar,
           editor: this.editor,
           em