X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Fcomputed.css;h=9d6680471eb23cfd29db91d522ea42e511f80af9;hp=444112cf944727c6f34df3efa5cd68ab433595fd;hb=d0a8de80597f65fb17a8508078deae45f0ae80d4;hpb=dadba0f24ba2459f70e098788b20b0e4ba96a7d2

diff --git a/LCARStrek/devtools/computed.css b/LCARStrek/devtools/computed.css
index 444112cf..9d668047 100644
--- a/LCARStrek/devtools/computed.css
+++ b/LCARStrek/devtools/computed.css
@@ -14,19 +14,47 @@
   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;
 }
 
@@ -40,7 +68,7 @@
 }
 
 .property-view {
-  padding: 2px 0 2px 17px;
+  padding: 2px 17px;
   display: flex;
   flex-wrap: wrap;
 }
@@ -50,7 +78,9 @@
 }
 
 .property-value-container {
-  width: 168px;
+  display: flex;
+  flex: 1 1 168px;
+  overflow: hidden;
 }
 
 .property-name-container > *,
@@ -63,7 +93,7 @@
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  outline: 0;
+  outline: 0 !important;
 }
 
 .property-value, .other-property-value {
@@ -82,9 +112,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 +137,7 @@
 /* From skin */
 .expander {
   visibility: hidden;
-  margin-left: -12px !important;
+  margin-inline-start: -12px !important;
 }
 
 .expandable {
@@ -141,6 +170,10 @@
   opacity: 0.5;
 }
 
+#computedview-no-results {
+  height: 100%;
+}
+
 #noResults {
   font-size: 110%;
   margin: 5px;