Merge pull request #565 from psiinon/feature/hidedrawer

Hide the bottom drawer
zaproxy · Jul 31, 2019 · 877eda0 · 877eda0
2 parents 37fdd3f + 1e24286
commit 877eda0
Show file tree

Hide file tree

Showing 10 changed files with 157 additions and 48 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+ - Hide drawer at the same time as the side panels [#552](https://github.com/zaproxy/zap-hud/issues/552)
 
 ## [0.5.0] - 2019-07-24
 

diff --git a/src/main/java/org/zaproxy/zap/extension/hud/HudParam.java b/src/main/java/org/zaproxy/zap/extension/hud/HudParam.java
@@ -31,6 +31,7 @@
 import org.zaproxy.zap.eventBus.Event;
 import org.zaproxy.zap.extension.api.ZapApiIgnore;
 import org.zaproxy.zap.extension.hud.tutorial.pages.AjaxSpiderPage;
+import org.zaproxy.zap.extension.hud.tutorial.pages.HistoryPage;
 import org.zaproxy.zap.extension.hud.tutorial.pages.HudConfigPage;
 
 public class HudParam extends VersionedAbstractParam {
@@ -74,7 +75,7 @@ public class HudParam extends VersionedAbstractParam {
      * However for the HUD we do use it to flag new features, so it will typically be updated for
      * each new version of the HUD.
      */
-    private static final int PARAM_CURRENT_VERSION = 2;
+    private static final int PARAM_CURRENT_VERSION = 3;
 
     private String baseDirectory;
 
@@ -293,6 +294,9 @@ protected void updateConfigsImpl(int fileVersion) {
             addTutorialUpdate(AjaxSpiderPage.NAME);
             addTutorialUpdate(HudConfigPage.NAME);
         }
+        if (fileVersion <= 2) {
+            addTutorialUpdate(HistoryPage.NAME);
+        }
         getConfig().setProperty(PARAM_TUTORIAL_UPDATES, tutorialUpdates);
 
         saveConfig();

diff --git a/src/main/zapHomeFiles/hud/drawer.html b/src/main/zapHomeFiles/hud/drawer.html
@@ -14,10 +14,10 @@
 <body>
     <div id="app">
         <tabs>
-            <tab :name="$t('message.history_tool')">
+            <tab :name="$t('message.history_tool')" :id="'tab.history'">
                 <history></history>
             </tab>
-            <tab :name="$t('message.websockets_tool')">
+            <tab :name="$t('message.websockets_tool')" :id="'tab.websockets'">
                 <websockets></websockets>
             </tab>
         </tabs>
@@ -127,19 +127,19 @@
         <div style="height: 100%;">
             <div class="tabs">
                 <ul class="tab">
-                    <li v-for="tab in tabs" :class="{ 'active': tab.isActive, 'tab-item': true }">
-                        <a :href="tab.href" @click="selectTab(tab)" :class="{ 'badge': tab.isBadgeData}" :data-badge="tab.badgeData">{{ tab.name }}</a>
+                    <li v-if="tabsVisible" v-for="tab in tabs" :class="{ 'active': tab.isActive, 'tab-item': true }">
+                        <a :id="tab.id" :href="tab.href" @click="selectTab(tab)" :class="{ 'badge': tab.isBadgeData}" :data-badge="tab.badgeData">{{ tab.name }}</a>
                     </li>
                     <!-- invisible tab-item to push tab-action buttons right -->
-                    <li class="tab-item tab-action-spacer">
+                    <li v-if="tabsVisible" class="tab-item tab-action-spacer">
                     </li>
                     <li class="tab-item tab-action">
                         <drawer-button-showhide></drawer-button-showhide>
                     </li>
-                    <li class="tab-item tab-action">
+                    <li v-if="tabsVisible" class="tab-item tab-action">
                         <drawer-button-settings></drawer-button-settings>
                     </li>
-                    <li class="tab-item tab-action">
+                    <li v-if="tabsVisible" class="tab-item tab-action">
                         <button class="btn btn-action btn-sm"  @click="toggleOpenClose">
                             <i :class="{ 'icon': true, 'icon-arrow-up': isArrowUp, 'icon-arrow-down': !isArrowUp }"></i>
                         </button>

diff --git a/src/main/zapHomeFiles/hud/drawer.js b/src/main/zapHomeFiles/hud/drawer.js
@@ -230,7 +230,8 @@ Vue.component('tabs', {
         return {
             tabs: [],
             isOpen: false,
-            isArrowUp: true
+            isArrowUp: true,
+            tabsVisible: true
 		};
     },
     methods: {
@@ -299,12 +300,27 @@ Vue.component('tabs', {
                 }
             })
             .catch(utils.errorHandler);
+
+        eventBus.$on('showTabs', data => {
+            this.tabsVisible = true;
+        })
+        eventBus.$on('hideTabs', data => {
+            this.tabsVisible = false;
+            if (this.isOpen) {
+                this.closeDrawer();
+            }
+        })
+    },
+    beforeDestroy () {
+        eventBus.$off('hideTabs')
+        eventBus.$off('showTabs')
     }
 });
 
 Vue.component('tab', {
     template: '#tab-template',
     props: {
+        id: { required: true },
         name: { required: true },
         selected: { default: false }
     },
@@ -400,17 +416,24 @@ Vue.component('drawer-button-showhide', {
     methods: {
         showHud() {
             this.isHudVisible = true;
-            this.icon = utils.getZapImagePath('radar.png');
             localforage.setItem('settings.isHudVisible', true)
+                .then(function(value){
+                    this.icon = utils.getZapImagePath('radar.png');
+                    parent.postMessage({tabId: tabId, frameId: frameId, action:'showHudPanels'}, document.referrer);
+                    eventBus.$emit('showTabs', {});
+                })
                 .catch(utils.errorHandler);
-			parent.postMessage({tabId: tabId, frameId: frameId, action:'showSidePanels'}, document.referrer);
+
         },
         hideHud() {
             this.isHudVisible = false;
-            this.icon = utils.getZapImagePath('radar-grey.png');
             localforage.setItem('settings.isHudVisible', false)
+                .then(function(value){
+                    this.icon = utils.getZapImagePath('radar-grey.png');
+                    parent.postMessage({tabId: tabId, frameId: frameId, action:'hideHudPanels'}, document.referrer);
+                    eventBus.$emit('hideTabs', {});
+                })
                 .catch(utils.errorHandler);
-			parent.postMessage({tabId: tabId, frameId: frameId, action:'hideSidePanels'}, document.referrer);
         },
 		toggleIsVisible() {
             this.isHudVisible ? this.hideHud() : this.showHud();
@@ -423,6 +446,7 @@ Vue.component('drawer-button-showhide', {
                 this.isHudVisible = isHudVisible;
                 if (!this.isHudVisible) {
                     this.icon = utils.getZapImagePath('radar-grey.png');
+                    eventBus.$emit('hideTabs', {});
                 }
             })
             .catch(utils.errorHandler);

diff --git a/src/main/zapHomeFiles/hud/panel.js b/src/main/zapHomeFiles/hud/panel.js
@@ -143,7 +143,7 @@ Vue.component('hud-buttons', {
 		localforage.getItem('settings.isHudVisible')
 			.then(isHudVisible => {
 				if (isHudVisible !== null && !isHudVisible) {
-					return parent.postMessage({action:'hideSidePanels'}, document.referrer);
+					return parent.postMessage({action:'hideHudPanels'}, document.referrer);
 				}
 			})
 			.then( () => {

diff --git a/src/main/zapHomeFiles/hud/target/inject.js b/src/main/zapHomeFiles/hud/target/inject.js
@@ -85,14 +85,22 @@
 		panel.style.height = (panel.offsetHeight - 33) + "px";
 	}
 
-	function showSidePanels() {
+	function showHudPanels() {
 		document.getElementById(LEFT_PANEL).style.display = "";
 		document.getElementById(RIGHT_PANEL).style.display = "";
+		var panel = document.getElementById(BOTTOM_DRAWER);
+		panel.style.width = "100%";
+		panel.style.left = "0px";
+		panel.style.right = "";
 	}
 
-	function hideSidePanels() {
+	function hideHudPanels() {
 		document.getElementById(LEFT_PANEL).style.display = "none";
 		document.getElementById(RIGHT_PANEL).style.display = "none";
+		var panel = document.getElementById(BOTTOM_DRAWER);
+		panel.style.width = "90px";
+		panel.style.left = "";
+		panel.style.right = "0px";
 	}
 
 	function hideAllDisplayFrames() {
@@ -319,12 +327,12 @@
 				showPanel(message.orientation);
 				break;
 
-			case "showSidePanels":
-				showSidePanels();
+			case "showHudPanels":
+				showHudPanels();
 				break;
 
-			case "hideSidePanels":
-				hideSidePanels();
+			case "hideHudPanels":
+				hideHudPanels();
 				break;
 
 			case "showMainDisplay":

diff --git a/src/main/zapHomeFiles/hudtutorial/en_GB/History.html b/src/main/zapHomeFiles/hudtutorial/en_GB/History.html
@@ -18,6 +18,9 @@ <h1>History</H1>
 	<p>
 	You can click on the tab or on the arrow button on the right hand side to show and hide the list of the requests,
 	and you can click on any of the requests to see full details of the requests and responses.
+	<p>
+	The green HUD icon will now also hide all of the tabs in this frame in case they are obscuring
+	content as well.
 
 	<!-- TASK -->
 	<!-- BUTTONS -->

diff --git a/src/test/java/org/zaproxy/zap/extension/hud/ui/firefox/badsite/BadSiteUnitTest.java b/src/test/java/org/zaproxy/zap/extension/hud/ui/firefox/badsite/BadSiteUnitTest.java
@@ -25,15 +25,13 @@
 import static org.junit.jupiter.api.Assertions.fail;
 
 import java.io.IOException;
-import java.io.InputStream;
 import java.net.MalformedURLException;
 import java.net.URL;
 import javax.net.ssl.HttpsURLConnection;
 import javax.net.ssl.SSLContext;
 import javax.net.ssl.TrustManager;
 import javax.net.ssl.X509TrustManager;
 import net.sf.json.JSONObject;
-import org.apache.commons.io.IOUtils;
 import org.junit.jupiter.api.BeforeAll;
 import org.junit.jupiter.api.Tag;
 import org.junit.jupiter.api.Test;
@@ -43,10 +41,8 @@
 import org.openqa.selenium.WebElement;
 import org.openqa.selenium.firefox.FirefoxDriver;
 import org.openqa.selenium.support.ui.WebDriverWait;
-import org.zaproxy.zap.extension.api.API;
 import org.zaproxy.zap.extension.hud.HudAPI;
 import org.zaproxy.zap.extension.hud.tutorial.pages.IntroPage;
-import org.zaproxy.zap.extension.hud.ui.Constants;
 import org.zaproxy.zap.extension.hud.ui.firefox.FirefoxUnitTest;
 import org.zaproxy.zap.extension.hud.ui.firefox.tutorial.TutorialStatics;
 import org.zaproxy.zap.extension.hud.ui.uimap.HUD;
@@ -126,7 +122,8 @@ public void cannotUseZapApiFromTarget(FirefoxDriver driver)
         hud.openUrlWaitForHud(TutorialStatics.getTutorialUrl(IntroPage.NAME));
 
         // Test the value is empty to start
-        JSONObject ret = callApi("/JSON/hud/view/getUiOption/?key=" + BAD_SITE_TEST_KEY + "&");
+        JSONObject ret =
+                HUD.callZapApi("/JSON/hud/view/getUiOption/?key=" + BAD_SITE_TEST_KEY + "&");
         assertEquals("", ret.get(BAD_SITE_TEST_KEY));
 
         String script =
@@ -146,25 +143,10 @@ public void cannotUseZapApiFromTarget(FirefoxDriver driver)
         Thread.sleep(5000); // Just to make sure
 
         // And check its still empty
-        ret = callApi("/JSON/hud/view/getUiOption/?key=" + BAD_SITE_TEST_KEY + "&");
+        ret = HUD.callZapApi("/JSON/hud/view/getUiOption/?key=" + BAD_SITE_TEST_KEY + "&");
         assertEquals("", ret.get(BAD_SITE_TEST_KEY));
     }
 
-    private static JSONObject callApi(String apiCall) throws MalformedURLException, IOException {
-        String apiUrl =
-                "http://"
-                        + Constants.ZAP_HOST_PORT
-                        + apiCall
-                        + API.API_KEY_PARAM
-                        + "="
-                        + Constants.ZAP_TEST_API_KEY;
-
-        try (InputStream in = new URL(apiUrl).openStream()) {
-            String str = IOUtils.toString(in, "UTF-8");
-            return JSONObject.fromObject(str);
-        }
-    }
-
     private static Object executeScriptWithRetry(WebDriver driver, String script) {
         return new WebDriverWait(driver, 10L)
                 .ignoring(JavascriptException.class)

diff --git a/src/test/java/org/zaproxy/zap/extension/hud/ui/firefox/tutorial/FramesPageUnitTest.java b/src/test/java/org/zaproxy/zap/extension/hud/ui/firefox/tutorial/FramesPageUnitTest.java
@@ -64,7 +64,8 @@ public void testPreviousButtonWorks(FirefoxDriver driver) {
     }
 
     @Test
-    public void testTaskAndNextButton(FirefoxDriver driver) {
+    public void testTaskAndNextButton(FirefoxDriver driver) throws Exception {
+        HUD.callZapApiResetTasks();
         HUD hud = new HUD(driver);
         hud.openUrlWaitForHud(TutorialStatics.getTutorialUrl(FramesPage.NAME));
 
@@ -98,15 +99,16 @@ public void testTaskAndNextButton(FirefoxDriver driver) {
     }
 
     @Test
-    public void testSidePanelsHiddenAndRevealed(FirefoxDriver driver) throws URISyntaxException {
+    public void testSidePanelsHiddenAndRevealed(FirefoxDriver driver) throws Exception {
+        HUD.callZapApiResetTasks();
         HUD hud = new HUD(driver);
         hud.openUrlWaitForHud(TutorialStatics.getTutorialUrl(FramesPage.NAME));
 
         // check they visible to start with
         testSidePanesVisible(hud);
 
         // Check they are hidden after button clicked
-        testClickHudButton(driver);
+        testClickHudButton(driver, false);
         testSidePanesHidden(hud);
 
         // Check they stay hidden when the page is refreshed
@@ -115,10 +117,33 @@ public void testSidePanelsHiddenAndRevealed(FirefoxDriver driver) throws URISynt
         testSidePanesHidden(hud);
 
         // Check they are revealed when the button is clicked again
-        testClickHudButton(driver);
+        testClickHudButton(driver, true);
         testSidePanesVisible(hud);
     }
 
+    @Test
+    public void testBottonDrawerTabsHiddenAndRevealed(FirefoxDriver driver)
+            throws URISyntaxException {
+        HUD hud = new HUD(driver);
+        hud.openUrlWaitForHud(TutorialStatics.getTutorialUrl(FramesPage.NAME));
+
+        // check they visible to start with
+        testDrawerTabsVisible(hud);
+
+        // Check they are hidden after button clicked
+        testClickHudButton(driver, false);
+        testDrawerTabsHidden(hud);
+
+        // Check they stay hidden when the page is refreshed
+        hud.openRelativePage(FramesPage.NAME);
+
+        testDrawerTabsHidden(hud);
+
+        // Check they are revealed when the button is clicked again
+        testClickHudButton(driver, true);
+        testDrawerTabsVisible(hud);
+    }
+
     private static void checkPanelVisible(WebDriver wd, WebElement panel) {
         checkWithRetry(wd, driver -> panel.isDisplayed());
         Assertions.assertEquals("block", panel.getCssValue("display"));
@@ -136,10 +161,11 @@ private static void testSidePanesVisible(HUD hud) {
         checkPanelVisible(wd, hud.waitForBottomPanel());
     }
 
-    private static void testClickHudButton(WebDriver wd) {
+    private static void testClickHudButton(WebDriver wd, boolean hidden) {
         HUD hud = new HUD(wd);
-        List<WebElement> buttons = hud.waitForHudButtons(HUD.BOTTOM_PANEL_BY_ID, 2);
-        Assertions.assertEquals(2, buttons.size());
+        int expectedButtons = hidden ? 1 : 2;
+        List<WebElement> buttons = hud.waitForHudButtons(HUD.BOTTOM_PANEL_BY_ID, expectedButtons);
+        Assertions.assertEquals(expectedButtons, buttons.size());
 
         buttons.get(0).click();
         wd.switchTo().defaultContent();
@@ -156,4 +182,30 @@ private static void testSidePanesHidden(HUD hud) {
         checkPanelHidden(wd, hud.waitForRightPanel());
         checkPanelVisible(wd, hud.waitForBottomPanel());
     }
+
+    private void testDrawerTabsVisible(HUD hud) {
+        WebDriver wd = hud.getWebDriver();
+        hud.waitForHudButtons(HUD.BOTTOM_PANEL_BY_ID, 2);
+        Assertions.assertNotNull(wd.findElement(By.id(HUD.BOTTOM_TAB_HISTORY_ID)));
+        Assertions.assertNotNull(wd.findElement(By.id(HUD.BOTTOM_TAB_WEBSOCKETS_ID)));
+        wd.switchTo().parentFrame();
+    }
+
+    private void testDrawerTabsHidden(HUD hud) {
+        WebDriver wd = hud.getWebDriver();
+        hud.waitForHudButtons(HUD.BOTTOM_PANEL_BY_ID, 1);
+        try {
+            wd.findElement(By.id(HUD.BOTTOM_TAB_HISTORY_ID));
+            fail("History tab should have been hidden");
+        } catch (NoSuchElementException e) {
+            // Expected
+        }
+        try {
+            wd.findElement(By.id(HUD.BOTTOM_TAB_WEBSOCKETS_ID));
+            fail("Websockets tab should have been hidden");
+        } catch (NoSuchElementException e) {
+            // Expected
+        }
+        wd.switchTo().parentFrame();
+    }
 }