display : flex;
flex-direction: column;
width: 100%;
- /* Bug 1243598 - Reduce the container height by the tab height to make room
- for the tabs above. */
- height: calc(100% - 24px);
- position: absolute;
+ height: 100%;
+}
+
+#computedview-container {
+ overflow: auto;
+ height: 100%;
}
-#sidebar-panel-computedview > .devtools-toolbar {
+/* This extra wrapper only serves as a way to get the content of the view focusable.
+ So that when the user reaches it either via keyboard or mouse, we know that the view
+ is focused and therefore can handle shortcuts.
+ However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
+ through it, and the outline is hidden. */
+#computedview-container-focusable {
+ height: 100%;
+ outline: none;
+}
+
+#computedview-toolbar {
display: flex;
}
#browser-style-checkbox {
/* Bug 1200073 - extra space before the browser styles checkbox so
- they aren't squished together in a small window. */
+ they aren't squished together in a small window. Put also
+ an extra space after. */
margin-inline-start: 5px;
+ margin-inline-end: 5px;
+}
+
+#browser-style-checkbox-label {
+ margin-right: 5px;
+
+ /* Vertically center the 'Browser styles' checkbox in the
+ Computed panel with its label. */
+ display: flex;
+ align-items: center;
}
#propertyContainer {
-moz-user-select: text;
- overflow: auto;
+ overflow-y: auto;
+ overflow-x: hidden;
flex: auto;
}
}
.property-value-container {
- width: 168px;
+ display: flex;
+ flex: 1 1 168px;
+ overflow: hidden;
}
.property-name-container > *,
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- outline: 0;
+ outline: 0 !important;
}
-.property-value, .other-property-value {
+.other-property-value {
background-image: url(images/arrow-e.png);
background-repeat: no-repeat;
background-size: 5px 8px;
}
@media (min-resolution: 1.1dppx) {
- .property-value, .other-property-value {
+ .other-property-value {
background-image: url(images/arrow-e@2x.png);
}
}
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- background-position: 2px center;
padding-left: 10px;
- outline: 0;
+ outline: 0 !important;
}
.other-property-value {
/* From skin */
.expander {
visibility: hidden;
- margin-left: -12px !important;
+ margin-inline-start: -12px !important;
}
.expandable {
opacity: 0.5;
}
-#noResults {
- font-size: 110%;
- margin: 5px;
- text-align: center;
+#computedview-no-results {
+ height: 100%;
}
.onlyuserstyles {