LCARStrek/devtools/inspector.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 @import url(variables.css); /* No idea why this is needed but we get error messages without it */
   6
   7 :root {
   8   --eyedropper-image: url(images/command-eyedropper.svg);
   9 }
  10
  11 window {
  12   padding: 0;
  13 }
  14
  15 :root {
  16   --breadcrumbs-border-color: #9C9CFF;
  17 }
  18
  19 * {
  20   box-sizing: border-box;
  21 }
  22
  23 /* Make sure to hide scroll bars for the parent window */
  24 window {
  25   overflow: hidden;
  26 }
  27
  28 /* The main Inspector panel container. */
  29 .inspector-responsive-container {
  30   height: 100vh;
  31 }
  32
  33 /* The main panel layout. This area consists of a toolbar, markup view
  34   and breadcrumbs bar. */
  35 #inspector-main-content {
  36   /* Subtract 1 pixel from the panel height. It's puzzling why this
  37     is needed, but if not presented the entire Inspector panel
  38     content jumps 1 pixel up when the Toolbox is opened. */
  39   height: calc(100% - 1px);
  40   /* This min-width avoids a visual glitch when moving the splitter quickly to the left.
  41      See bug 1307408 comment #12. */
  42   min-width: 125px;
  43   display: flex;
  44   flex-direction: column;
  45   flex: 1 1 auto;
  46 }
  47
  48 /* Inspector Panel Splitter */
  49
  50 #inspector-splitter-box {
  51   height: 100vh;
  52   width: 100vw;
  53   position: fixed;
  54 }
  55
  56 /* Minimum dimensions for the Inspector splitter areas. */
  57 #inspector-splitter-box .uncontrolled,
  58 #inspector-splitter-box .controlled {
  59   min-height: 50px;
  60   min-width: 50px;
  61   overflow-x: hidden;
  62 }
  63
  64 /* Set a minimum width of 200px for tab content to avoid breaking the layout when resizing
  65    the sidebar tab to small width. If a specific panel supports smaller width, this should
  66    be overridden on a panel-by-panel basis */
  67 .inspector-tabpanel {
  68   min-width: 200px;
  69 }
  70
  71 #inspector-splitter-box .controlled.pane-collapsed {
  72   visibility: collapse;
  73 }
  74
  75 /* Use flex layout for the Inspector toolbar. For now, it's done
  76    specifically for the Inspector toolbar since general rule applied
  77    on .devtools-toolbar breaks breadcrumbs and also toolbars in other
  78    panels (e.g. webconsole, debugger), these are not ready for HTML
  79    layout yet. */
  80 #inspector-toolbar.devtools-toolbar {
  81   display: flex;
  82 }
  83
  84 #inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer {
  85   flex-grow: 1;
  86   display: inline-block;
  87 }
  88
  89 /* Add element toolbar button */
  90 #inspector-element-add-button::before {
  91   background-image: url("chrome://devtools/skin/images/add.svg");
  92   list-style-image: url("chrome://devtools/skin/images/add.svg");
  93   -moz-user-focus: normal;
  94 }
  95
  96 #inspector-searchlabel {
  97   overflow: hidden;
  98   margin-inline-end: 2px;
  99 }
 100
 101 #inspector-search {
 102   flex: unset;
 103 }
 104
 105 /* TODO: bug 1265759: should apply to .devtools-searchinput once all searchbox
 106    is converted to html*/
 107 #inspector-searchbox {
 108   width: 100%;
 109 }
 110
 111 /* Make sure the text is vertically centered in Inspector's
 112    search box. This can be removed when the search box is
 113    switched to HTML.
 114    See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1265759 */
 115 #inspector-searchbox {
 116   line-height: 19px;
 117 }
 118
 119 /* Eyedropper toolbar button */
 120
 121 #inspector-eyedropper-toggle {
 122   /* Required to display tooltip when eyedropper is disabled in non-HTML documents */
 123   pointer-events: auto;
 124 }
 125
 126 #inspector-eyedropper-toggle::before {
 127   background-image: var(--eyedropper-image);
 128 }
 129
 130 #inspector-sidebar-toggle-box {
 131   line-height: initial;
 132 }
 133
 134 #inspector-breadcrumbs-toolbar {
 135   padding: 0px;
 136   border-bottom-width: 0px;
 137 /*  border-top-width: 1px;
 138   border-top-color: var(--breadcrumbs-border-color);*/
 139   /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't
 140      get mistaken as a splitter */
 141   background-color: var(--theme-alternate-toolbar-background);
 142   background-image: none;
 143   background-size: auto;
 144   display: block;
 145   position: relative;
 146 }
 147
 148 /* Remove LCARS startcap and endcap */
 149 div#inspector-breadcrumbs-toolbar::before,
 150 div#inspector-breadcrumbs-toolbar::after {
 151   display: none;
 152 }
 153
 154 #inspector-breadcrumbs-toolbar,
 155 #inspector-breadcrumbs-toolbar * {
 156   box-sizing: border-box;
 157 }
 158
 159 #inspector-breadcrumbs {
 160   display: flex;
 161
 162   /* Break out of the XUL flexbox, so the splitter can still shrink the
 163      markup view even if the contents of the breadcrumbs are wider than
 164      the new width. */
 165   position: absolute;
 166   top: 0;
 167   left: 0;
 168   bottom: 0;
 169   right: 0;
 170 }
 171
 172 #inspector-breadcrumbs .scrollbutton-up,
 173 #inspector-breadcrumbs .scrollbutton-down {
 174   flex: 0;
 175   display: flex;
 176   align-items: center;
 177 }
 178
 179 #inspector-breadcrumbs .html-arrowscrollbox-inner {
 180   flex: 1;
 181   display: flex;
 182   overflow: hidden;
 183 }
 184
 185 #inspector-breadcrumbs .breadcrumbs-widget-item {
 186   white-space: nowrap;
 187   flex-shrink: 0;
 188   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
 189 }
 190
 191 #inspector-sidebar-container {
 192   overflow: hidden;
 193   position: relative;
 194   height: 100%;
 195 }
 196
 197 #inspector-sidebar {
 198   position: absolute;
 199   top: 0;
 200   bottom: 0;
 201   left: 0;
 202   right: 0;
 203 }
 204
 205 /* Override `-moz-user-focus:ignore;` from toolkit/content/minimal-xul.css */
 206 .inspector-tabpanel > * {
 207   -moz-user-focus: normal;
 208 }
 209
 210 /* "no results" warning message displayed in the ruleview and in the computed view */
 211
 212 #ruleview-no-results,
 213 #computedview-no-results {
 214   color: var(--theme-body-color-inactive);
 215   text-align: center;
 216   margin: 5px;
 217 }
 218
 219 /* Markup Box */
 220
 221 iframe {
 222   border: 0;
 223 }
 224
 225 #markup-box {
 226   width: 100%;
 227   flex: 1;
 228   min-height: 0;
 229 }
 230
 231 #markup-box > iframe {
 232   height: 100%;
 233   width: 100%;
 234 }