+:root[platform="linux"] #toggle-raw-headers {
+ padding: 4px;
+}
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+ :root[platform="linux"] .requests-menu-header-button {
+ font-size: 85%;
+ }
+}
+
+.textbox-input {
+ text-overflow: ellipsis;
+ border: none;
+ background: none;
+ color: inherit;
+ width: 100%;
+}
+
+/* Overwrite tree-view cell colon and use l10n string instead */
+.treeTable .treeLabelCell::after {
+ content: "";
+}
+
+.treeTable .textbox-input:focus {
+/* outline: 0;
+ box-shadow: var(--theme-focus-box-shadow-textbox);*/
+}
+
+.panel-container,
+.properties-view {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ height: 100%;
+}
+
+/* Layout additional warning icon in tree value cell */
+.security-info-value {
+ display: flex;
+}
+
+.security-info-value .textbox-input {
+ text-overflow: ellipsis;
+ border: none;
+ background: none;
+ color: inherit;
+ width: 100%;
+ margin-inline-end: 2px;
+}
+
+.security-info-value .textbox-input:focus {
+ outline: 0;
+ box-shadow: var(--theme-focus-box-shadow-textbox);
+}
+
+.properties-view .searchbox-section {
+ flex: 0 1 auto;
+}
+
+.properties-view .devtools-searchbox {
+ padding: 0;
+}
+
+.properties-view .devtools-searchbox input {
+ margin: 1px 3px;
+}
+
+.tree-container {
+ position: relative;
+ height: 100%;
+}
+
+/* Make treeTable fill parent element and scrollable */
+.tree-container .treeTable {
+ position: absolute;
+ display: block;
+ overflow-y: auto;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+/* Apply flex to table tbody in order to fill available vertical space */
+.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% - 4px);
+}
+
+.tree-container .treeTable tr {
+ display: block;
+}
+/* Make right td fill available horizontal space */
+.tree-container .treeTable td:last-child {
+ width: 100%;
+}
+
+/* If there is a source editor shows up in the last row of TreeView,
+ * it should occupy the available vertical space.
+ */
+.tree-container .treeTable .editor-row-container,
+.tree-container .treeTable tr:last-child td[colspan="2"] {
+ display: block;
+ height: 100%;
+}
+
+.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.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,
+.tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel:hover {
+ color: var(--theme-body-color-alt);
+}
+
+.tree-container .treeTable .treeValueCell {
+ /* FIXME: Make value cell can be reduced to shorter width */
+ max-width: 0;
+ padding-inline-end: 5px;
+}
+
+.headers-summary input:not([type="button"]) {
+ width: 100%;
+ background: none;
+ border: none;
+ color: inherit;
+ margin-inline-end: 2px;
+}
+
+.headers-summary input:not([type="button"]):focus {
+/* outline: none;
+ box-shadow: var(--theme-focus-box-shadow-textbox);*/
+ transition: all 0.2s ease-in-out;
+}
+
+.headers-summary-label,
+.tree-container .objectBox {
+ white-space: nowrap;
+}
+
+.headers-summary,
+.response-summary {
+ display: flex;
+ align-items: center;
+}
+
+.headers-summary .tool-button {
+/* border: 1px solid transparent;
+ color: var(--theme-body-color);
+ transition: background 0.05s ease-in-out;*/
+ margin-inline-end: 6px;
+ padding: 0 5px;
+}
+
+.headers-summary .requests-menu-status-icon {
+ min-width: 10px;
+}
+
+.headers-summary .raw-headers-container {
+ display: flex;
+ width: 100%;
+}
+
+.headers-summary .raw-headers {
+ width: 50%;
+ padding: 0px 4px;
+}
+
+.headers-summary .raw-headers textarea {
+ width: 100%;
+ height: 50vh;
+ font: message-box;
+ resize: none;
+ box-sizing: border-box;
+}
+
+.headers-summary .raw-headers .tabpanel-summary-label {
+ padding: 0 0 4px 0;
+}
+
+.empty-notice {
+ color: var(--theme-body-color-alt);
+ padding: 3px 8px;
+}
+
+.response-summary {
+ display: flex;
+}
+
+.editor-container,
+.editor-mount,
+.panel-container iframe {
+ border: none;
+ width: 100%;
+ height: 100%;
+}
+
+.treeTable .treeLabel {
+ font-weight: 600;
+}
+
+/* Customize default tree table style to align with devtools theme */
+.treeTable .treeLabel,
+.treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
+ color: var(--theme-highlight-purple);
+}
+
+.treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
+ cursor: default;
+ text-decoration: none;
+}
+
+/*
+ * FIXME: normal html block element cannot fill outer XUL element
+ * This workaround should be removed after sidebar is migrated to react
+ */
+#react-security-tabpanel-hook,
+#react-timings-tabpanel-hook {
+ display: -moz-box;
+ -moz-box-orient: vertical;
+ -moz-box-flex: 1;
+}
+
+/*
+ * FIXME: normal html block element cannot fill outer XUL element
+ * This workaround should be removed after netmonitor is migrated to react
+ */
+#react-details-panel-hook {
+ display: flex;
+ flex-direction: column;
+}
+
+#network-statistics-charts,
+#primed-cache-chart,
+#empty-cache-chart {
+ display: -moz-box;
+ -moz-box-flex: 1;
+}
projects / themes.git / blobdiff