second and final part of syncing LCARStrek with Firefox 49/50 devtools theme changes

[themes.git] / LCARStrek / devtools / computed.css

diff --git a/LCARStrek/devtools/computed.css b/LCARStrek/devtools/computed.css
index 444112cf944727c6f34df3efa5cd68ab433595fd..02fb4f8dc9a1d3b97b4047ce4c6c6f1c3a57be9f 100644 (file)
--- a/LCARStrek/devtools/computed.css
+++ b/LCARStrek/devtools/computed.css
@@ -8,25 +8,49 @@
   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;
 }
 
@@ -50,7 +74,9 @@
 }
 
 .property-value-container {
-  width: 168px;
+  display: flex;
+  flex: 1 1 168px;
+  overflow: hidden;
 }
 
 .property-name-container > *,
@@ -63,17 +89,17 @@
   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);
   }
 }
@@ -82,9 +108,8 @@
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  background-position: 2px center;
   padding-left: 10px;
-  outline: 0;
+  outline: 0 !important;
 }
 
 .other-property-value {
@@ -108,7 +133,7 @@
 /* From skin */
 .expander {
   visibility: hidden;
-  margin-left: -12px !important;
+  margin-inline-start: -12px !important;
 }
 
 .expandable {
@@ -141,10 +166,8 @@
   opacity: 0.5;
 }
 
-#noResults {
-  font-size: 110%;
-  margin: 5px;
-  text-align: center;
+#computedview-no-results {
+  height: 100%;
 }
 
 .onlyuserstyles {