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 }
  99
 100 /* Make sure the text is vertically centered in Inspector's
 101    search box. This can be removed when the search box is
 102    switched to HTML.
 103    See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1265759 */
 104 #inspector-searchbox {
 105   line-height: 19px;
 106 }
 107
 108 #inspector-search {
 109   flex: unset;
 110 }
 111
 112 /* Eyedropper toolbar button */
 113
 114 #inspector-eyedropper-toggle {
 115   /* Required to display tooltip when eyedropper is disabled in non-HTML documents */
 116   pointer-events: auto;
 117 }
 118
 119 #inspector-eyedropper-toggle::before {
 120   background-image: var(--eyedropper-image);
 121 }
 122
 123 #inspector-sidebar-toggle-box {
 124   line-height: initial;
 125 }
 126
 127 #inspector-breadcrumbs-toolbar {
 128   padding: 0px;
 129   border-bottom-width: 0px;
 130 /*  border-top-width: 1px;
 131   border-top-color: var(--breadcrumbs-border-color);*/
 132   /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't
 133      get mistaken as a splitter */
 134   background-color: var(--theme-alternate-toolbar-background);
 135   background-image: none;
 136   background-size: auto;
 137   display: block;
 138   position: relative;
 139 }
 140
 141 /* Remove LCARS startcap and endcap */
 142 div#inspector-breadcrumbs-toolbar::before,
 143 div#inspector-breadcrumbs-toolbar::after {
 144   display: none;
 145 }
 146
 147 #inspector-breadcrumbs-toolbar,
 148 #inspector-breadcrumbs-toolbar * {
 149   box-sizing: border-box;
 150 }
 151
 152 #inspector-breadcrumbs {
 153   display: flex;
 154
 155   /* Break out of the XUL flexbox, so the splitter can still shrink the
 156      markup view even if the contents of the breadcrumbs are wider than
 157      the new width. */
 158   position: absolute;
 159   top: 0;
 160   left: 0;
 161   bottom: 0;
 162   right: 0;
 163 }
 164
 165 #inspector-breadcrumbs .scrollbutton-up,
 166 #inspector-breadcrumbs .scrollbutton-down {
 167   flex: 0;
 168   display: flex;
 169   align-items: center;
 170 }
 171
 172 #inspector-breadcrumbs .html-arrowscrollbox-inner {
 173   flex: 1;
 174   display: flex;
 175   overflow: hidden;
 176 }
 177
 178 #inspector-breadcrumbs .breadcrumbs-widget-item {
 179   white-space: nowrap;
 180   flex-shrink: 0;
 181   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
 182 }
 183
 184 #inspector-sidebar-container {
 185   overflow: hidden;
 186   position: relative;
 187   height: 100%;
 188 }
 189
 190 #inspector-sidebar {
 191   position: absolute;
 192   top: 0;
 193   bottom: 0;
 194   left: 0;
 195   right: 0;
 196 }
 197
 198 /* Override `-moz-user-focus:ignore;` from toolkit/content/minimal-xul.css */
 199 .inspector-tabpanel > * {
 200   -moz-user-focus: normal;
 201 }
 202
 203 /* "no results" warning message displayed in the ruleview and in the computed view */
 204
 205 #ruleview-no-results,
 206 #computedview-no-results {
 207   color: var(--theme-body-color-inactive);
 208   text-align: center;
 209   margin: 5px;
 210 }
 211
 212 /* Markup Box */
 213
 214 iframe {
 215   border: 0;
 216 }
 217
 218 #markup-box {
 219   width: 100%;
 220   flex: 1;
 221   min-height: 0;
 222 }
 223
 224 #markup-box > iframe {
 225   height: 100%;
 226   width: 100%;
 227 }