Bug 1332151 - Fix layout issues for network monitor sidebar panels r?honza
MozReview-Commit-ID: WT0CTbQ6Sj
--- a/devtools/client/netmonitor/shared/components/preview-panel.js
+++ b/devtools/client/netmonitor/shared/components/preview-panel.js
@@ -3,30 +3,33 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const { DOM, PropTypes } = require("devtools/client/shared/vendor/react");
const { connect } = require("devtools/client/shared/vendor/react-redux");
const { getSelectedRequest } = require("../../selectors/index");
-const { iframe } = DOM;
+const { div, iframe } = DOM;
/*
* Preview panel component
* Display HTML content within a sandbox enabled iframe
*/
function PreviewPanel({
srcDoc = "",
}) {
- return iframe({
- id: "response-preview",
- sandbox: "",
- srcDoc,
- });
+ return (
+ div({ className: "panel-container" },
+ iframe({
+ sandbox: "",
+ srcDoc,
+ })
+ )
+ );
}
PreviewPanel.displayName = "PreviewPanel";
PreviewPanel.propTypes = {
srcDoc: PropTypes.string,
};
--- a/devtools/client/netmonitor/shared/components/properties-view.js
+++ b/devtools/client/netmonitor/shared/components/properties-view.js
@@ -47,16 +47,17 @@ const PropertiesView = createClass({
},
getDefaultProps() {
return {
enableInput: true,
enableFilter: true,
expandableStrings: false,
filterPlaceHolder: "",
+ sectionNames: [],
};
},
getInitialState() {
return {
filterText: "",
};
},
--- a/devtools/client/netmonitor/shared/components/security-panel.js
+++ b/devtools/client/netmonitor/shared/components/security-panel.js
@@ -1,22 +1,22 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const { DOM, PropTypes, createFactory } = require("devtools/client/shared/vendor/react");
const { connect } = require("devtools/client/shared/vendor/react-redux");
-const TreeView = createFactory(require("devtools/client/shared/components/tree/tree-view"));
+const PropertiesView = createFactory(require("./properties-view"));
const { L10N } = require("../../l10n");
const { getUrlHost } = require("../../request-utils");
const { getSelectedRequest } = require("../../selectors/index");
-const { div, input } = DOM;
+const { div, input, span } = DOM;
/*
* Security panel component
* If the site is being served over HTTPS, you get an extra tab labeled "Security".
* This contains details about the secure connection used including the protocol,
* the cipher suite, and certificate details
*/
function SecurityPanel({
@@ -82,46 +82,42 @@ function SecurityPanel({
} else {
object = {
[L10N.getStr("netmonitor.security.error")]:
new DOMParser().parseFromString(securityInfo.errorMessage, "text/html")
.body.textContent || notAvailable
};
}
- return div({ id: "security-information" },
- TreeView({
+ return div({ className: "panel-container" },
+ PropertiesView({
object,
- columns: [{
- id: "value",
- width: "100%",
- }],
- renderValue: renderValue.bind(null, securityInfo.weaknessReasons),
+ renderValue: (props) => renderValue(props, securityInfo.weaknessReasons),
+ enableFilter: false,
expandedNodes: getExpandedNodes(object),
- expandableStrings: false,
})
);
}
SecurityPanel.displayName = "SecurityPanel";
SecurityPanel.propTypes = {
securityInfo: PropTypes.object,
url: PropTypes.string,
};
-function renderValue(weaknessReasons = [], props) {
+function renderValue(props, weaknessReasons = []) {
const { member, value } = props;
// Hide object summary
if (typeof member.value === "object") {
return null;
}
- return div({ className: "security-info-value" },
+ return span({ className: "security-info-value" },
member.name === L10N.getStr("netmonitor.security.error") ?
// Display multiline text for security error
value
:
// Display one line selectable text for security details
input({
className: "textbox-input",
readOnly: "true",
--- a/devtools/client/netmonitor/shared/components/timings-panel.js
+++ b/devtools/client/netmonitor/shared/components/timings-panel.js
@@ -53,17 +53,17 @@ function TimingsPanel({
}),
span({ className: "requests-menu-timings-total" },
L10N.getFormatStr("networkMenu.totalMS", timings[type])
)
),
);
});
- return div({}, timelines);
+ return div({ className: "panel-container" }, timelines);
}
TimingsPanel.displayName = "TimingsPanel";
TimingsPanel.propTypes = {
timings: PropTypes.object,
totalTime: PropTypes.number,
};
--- a/devtools/client/netmonitor/test/browser_net_html-preview.js
+++ b/devtools/client/netmonitor/test/browser_net_html-preview.js
@@ -6,58 +6,58 @@
/**
* Tests if html responses show and properly populate a "Preview" tab.
*/
add_task(function* () {
let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_URL);
info("Starting test... ");
- let { $, document, EVENTS, NetMonitorView } = monitor.panelWin;
+ let { document, NetMonitorView } = monitor.panelWin;
let { RequestsMenu } = NetMonitorView;
RequestsMenu.lazyUpdate = false;
let wait = waitForNetworkEvents(monitor, 6);
yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
content.wrappedJSObject.performRequests();
});
yield wait;
EventUtils.sendMouseEvent({ type: "mousedown" },
document.getElementById("details-pane-toggle"));
- is($("#event-details-pane").selectedIndex, 0,
+ is(document.querySelector("#event-details-pane").selectedIndex, 0,
"The first tab in the details pane should be selected.");
- is($("#preview-tab").hidden, true,
+ is(document.querySelector("#preview-tab").hidden, true,
"The preview tab should be hidden for non html responses.");
- is($("#preview-tabpanel").hidden, false,
+ is(document.querySelector("#preview-tabpanel").hidden, false,
"The preview tabpanel is not hidden for non html responses.");
RequestsMenu.selectedIndex = 4;
NetMonitorView.toggleDetailsPane({ visible: true, animated: false }, 6);
- is($("#event-details-pane").selectedIndex, 6,
+ is(document.querySelector("#event-details-pane").selectedIndex, 6,
"The sixth tab in the details pane should be selected.");
- is($("#preview-tab").hidden, false,
+ is(document.querySelector("#preview-tab").hidden, false,
"The preview tab should be visible now.");
- let iframe = $("#response-preview");
+ let iframe = document.querySelector("#preview-tabpanel iframe");
yield once(iframe, "DOMContentLoaded");
ok(iframe,
"There should be a response preview iframe available.");
ok(iframe.contentDocument,
"The iframe's content document should be available.");
is(iframe.contentDocument.querySelector("blink").textContent, "Not Found",
"The iframe's content document should be loaded and correct.");
RequestsMenu.selectedIndex = 5;
- is($("#event-details-pane").selectedIndex, 0,
+ is(document.querySelector("#event-details-pane").selectedIndex, 0,
"The first tab in the details pane should be selected again.");
- is($("#preview-tab").hidden, true,
+ is(document.querySelector("#preview-tab").hidden, true,
"The preview tab should be hidden again for non html responses.");
- is($("#preview-tabpanel").hidden, false,
+ is(document.querySelector("#preview-tabpanel").hidden, false,
"The preview tabpanel is not hidden again for non html responses.");
yield teardown(monitor);
});
--- a/devtools/client/netmonitor/test/browser_net_security-details.js
+++ b/devtools/client/netmonitor/test/browser_net_security-details.js
@@ -24,19 +24,16 @@ add_task(function* () {
wait = waitForDOM(document, "#security-tabpanel");
EventUtils.sendMouseEvent({ type: "mousedown" },
document.getElementById("details-pane-toggle"));
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll("#details-pane tab")[5]);
yield wait;
- is(document.querySelector("#security-error"), null, "Error box is hidden.");
- ok(document.querySelector("#security-information"), "Information box visible.");
-
let tabpanel = document.querySelector("#security-tabpanel");
let textboxes = tabpanel.querySelectorAll(".textbox-input");
// Connection
// The protocol will be TLS but the exact version depends on which protocol
// the test server example.com supports.
let protocol = textboxes[0].value;
ok(protocol.startsWith("TLS"), "The protocol " + protocol + " seems valid.");
--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -701,41 +701,26 @@
color: var(--theme-selection-color);
}
.response-image-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
- /* Minus 24px * 2 for toolbox height + tabpanel height + padding top + padding bottom */
- height: calc(100vh - 68px);
overflow-y: auto;
padding: 10px;
}
.response-image {
background: #fff;
border: 1px dashed GrayText;
margin-bottom: 10px;
- max-width: 100%;
- max-height: 100%;
-}
-
-/* Preview tabpanel */
-
-#preview-tabpanel {
- background: #fff;
-}
-
-#response-preview {
- border: none;
- display: -moz-box;
- -moz-box-orient: vertical;
- -moz-box-flex: 1;
+ max-width: 300px;
+ max-height: 100px;
}
/* Timings tabpanel */
#timings-tabpanel .tabpanel-summary-container {
display: flex;
}
@@ -759,27 +744,26 @@
transition: width 0.2s ease-out;
}
.theme-firebug #timings-tabpanel .requests-menu-timings-total {
color: var(--theme-body-color);
}
/* Security tabpanel */
-.security-info-section {
- padding-inline-start: 1em;
+
+/* Overwrite tree-view cell colon `:` for security panel and tree section */
+#security-tabpanel .treeTable .treeLabelCell::after,
+.treeTable .tree-section .treeLabelCell::after {
+ content: "";
}
-.theme-dark #security-error-message {
- color: var(--theme-selection-color);
-}
-
-#security-tabpanel {
- overflow: auto;
- -moz-user-select: text;
+/* Layout additional warning icon in tree value cell */
+.security-info-value {
+ display: flex;
}
.security-warning-icon {
background-image: url(images/alerticon-warning.png);
background-size: 13px 12px;
margin-inline-start: 5px;
vertical-align: top;
width: 13px;
@@ -1072,27 +1056,16 @@
/* Responsive sidebar */
@media (max-width: 700px) {
:root[platform="linux"] .requests-menu-header-button {
font-size: 85%;
}
}
-/* Overwrite tree-view cell colon `:` for security panel and tree section */
-#security-tabpanel .treeTable .treeLabelCell::after,
-.treeTable .tree-section .treeLabelCell::after {
- content: "";
-}
-
-/* Layout additional warning icon in tree value cell */
-.security-info-value {
- display: flex;
-}
-
.textbox-input {
text-overflow: ellipsis;
border: none;
background: none;
color: inherit;
width: 100%;
}
@@ -1140,17 +1113,17 @@
.tree-container .treeTable tbody {
display: flex;
flex-direction: column;
/* Apply flex to table will create an anonymous table element outside of tbody
* See also http://stackoverflow.com/a/30851678
* Therefore, we set height with this magic number in order to remove the
* redundant scrollbar when source editor appears.
*/
- height: calc(100% - 3px);
+ height: calc(100% - 4px);
}
.tree-container .treeTable tr {
display: block;
}
/* Make right td fill available horizontal space */
.tree-container .treeTable td:last-child {
@@ -1167,18 +1140,22 @@
}
.properties-view .devtools-searchbox,
.tree-container .treeTable .tree-section {
width: 100%;
background-color: var(--theme-toolbar-background);
}
+.tree-container .treeTable tr.tree-section:not(:first-child) td:not([class=""]) {
+ border-top: 1px solid var(--theme-splitter-color);
+}
+
.properties-view .devtools-searchbox,
-.tree-container .treeTable tr:not(:last-child) td:not([class=""]) {
+.tree-container .treeTable tr.tree-section:not(:last-child) td:not([class=""]) {
border-bottom: 1px solid var(--theme-splitter-color);
}
.tree-container .treeTable .tree-section > * {
vertical-align: middle;
}
.tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel,
@@ -1281,17 +1258,17 @@
}
.response-summary {
display: flex;
}
.editor-container,
.editor-mount,
-.editor-mount iframe {
+.panel-container iframe {
border: none;
width: 100%;
height: 100%;
}
/*
* FIXME: normal html block element cannot fill outer XUL element
* This workaround should be removed after netmonitor is migrated to react