#260: Action/request menu in result browser shows no scrollbar, but o…

…verflows (#261)

* #260: Action/request menu in result browser shows no scrollbar, but overflows
- ensure content does not overflow (both in the left-side menu, but also in the content area)
- ensure the whole load error box is hidden, not just its content, if there was no load error
- ensure the splitter bar does not shrink when resizing the window
- make the splitter bar wider by 1 px so it is easier to grab
- ensure the View as HAR link is hidden also on network error/if not found on local disk

* applied workaround to get the behavior of 'flex: 1 1 0px' despite of browser/css minifier discrepancies

resultbrowser/src/css/default.css

@@ -298,6 +298,7 @@ body {
 #content {
     background-color: white;
     height: 100%;
+    overflow: auto;
 }
 
 #actioncontent {
@@ -534,8 +535,14 @@ table.key-value-table td.value .csep {
     flex-flow: column;
 }
 
+.flexItem-fill {
+    flex: 1 1;    /* grow/shrink as needed */
+    flex-basis: 0px !important;  /* HACK: Parcel's CSS optimizer replaces 'flex: 1 1 0px' with 'flex: 1' and browsers interpret 'flex: 1' as 'flex: 1 1 0%' which is not what we want. */
+}
+
 .gutter {
     background-color: rgb(169, 169, 169);
+    flex: 0 0 auto;    /* don't grow/shrink the splitter */
 }
 
 .gutter.gutter-horizontal {

resultbrowser/src/index.html

@@ -27,22 +27,22 @@
         <div id="wrapper" class="flexContainer flexFlowColumn">
             <div id="mainContent" class="flexContainer heightFull">
                 <!-- frame the whole left menu side for splitting with vertical split bar-->
-                <div id="leftSideMenu">
+                <div id="leftSideMenu" class="flexContainer flexFlowColumn">
                     <div id="header" class="flexContainer">
                         <div class="logo flexContainer">
                             <img alt="xlt logo" border="0" src="data-url:images/xlt-logo.svg" halign="left" width="85" height="20" />
                             <h1>Result Browser <span id="menu-icon">&#9776;</span></h1>
                         </div>
                     </div>
 
-                    <div id="navigation">
+                    <div id="navigation" class="flexContainer flexFlowColumn flexItem-fill">
                         <!-- transaction will come here dynamically -->
                         <div id="transaction" class="unselectable" unselectable="on">
                             <span class="name"></span>
                             <a class="har" href="harviewer.html" target="_blank">View as HAR</a>
                         </div>
                         <!-- actions and requests will come here dynamically -->
-                        <div id="actionlist" class="unselectable" unselectable="on">
+                        <div id="actionlist" class="unselectable flexItem-fill" unselectable="on">
                         </div>
                     </div>
                 </div>
@@ -159,7 +159,7 @@ <h2>Response Headers</h2>
                             </div>
                             <img id="requestimage" />
                             <pre><code id="requesttext"></code></pre>
-                            <div class="errorContent heightFull">
+                            <div id="loadErrorContent" class="errorContent heightFull">
                                 <div id="errorMessage" class="error">
                                     <p>Failed to load '<span class="filename"></span>'.</p>
                                     <p>You see this message for one of the following reasons:</p>

resultbrowser/src/js/resultbrowser.js

@@ -160,6 +160,8 @@
             if (!response.ok) {
                 forEachElement(transaction.querySelectorAll(".har"), hide);
             }
+        }).catch((error) => {
+            forEachElement(transaction.querySelectorAll(".har"), hide);
         });
 
         initEvents();
@@ -514,7 +516,7 @@
             forEachElement(actionlist.querySelectorAll(".active"), (el) => el.classList.remove("active"));
             element.classList.add("active");
 
-            hide(getElementById("errorMessage"));
+            hide(getElementById("loadErrorContent"));
 
             queryFirst("#jsonViewerActions .search").value = "";
 
@@ -579,7 +581,7 @@
 
                             errorMessageFileName.setAttribute('disabled', '');
                             setText(errorMessageFileName, requestData.fileName);
-                            show(getElementById("errorMessage"));
+                            show(getElementById("loadErrorContent"));
                         });
                 }
             }
@@ -1005,7 +1007,7 @@
             Split(['#leftSideMenu', '#content'], {
                 sizes: [15, 85],
                 minSize: [300, 600],
-                gutterSize: 2
+                gutterSize: 3
             })
 
             // activate first request-tab