position: absolute;
}
+#computedview-container {
+ overflow: auto;
+ height: 100%;
+}
+
+/* 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,
#sidebar-panel-computedview > .devtools-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-view {
- padding: 2px 0 2px 17px;
+ padding: 2px 17px;
display: flex;
flex-wrap: wrap;
}
}
.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 {
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;
}
+#computedview-no-results {
+ height: 100%;
+}
+
#noResults {
font-size: 110%;
margin: 5px;