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