AppErrorBoundary.css (2368B)
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 /* Base styles (common to most error boundaries) */ 6 7 /* Container */ 8 .app-error-panel { 9 color: var(--theme-text-color-strong); 10 display: flex; 11 flex-direction: column; 12 font-family: inherit; 13 font-size: 16px; 14 margin: 0 0 2rem; 15 overflow-y: scroll; 16 padding: 1rem 3rem; 17 width: 100%; 18 box-sizing: border-box; 19 height: 100%; 20 max-height: 100vh; 21 user-select: text; 22 } 23 24 /* "Has crashed" header */ 25 .app-error-panel .error-panel-header { 26 align-self: center; 27 font-size: 1.5em; 28 font-weight: 300; 29 } 30 31 /* "File a Bug" button */ 32 .app-error-panel .error-panel-file-button { 33 align-self: center; 34 background-color: var(--blue-60); 35 outline: none; 36 color: white; 37 font-size: 1em; 38 font-weight: 400; 39 margin-bottom: 14.74px; 40 padding: 0.75rem; 41 text-align: center; 42 inline-size: 200px; 43 text-decoration: none; 44 } 45 46 /* Close button, when the error is for an early exception during toolbox opening */ 47 .app-error-panel .error-panel-close { 48 position: absolute; 49 top: 10px; 50 right: 20px; 51 52 &::before { 53 background-image: url("chrome://devtools/skin/images/close.svg"); 54 } 55 } 56 57 .app-error-panel .error-panel-file-button:hover { 58 background-color: var(--blue-70); 59 } 60 61 .app-error-panel .error-panel-file-button:hover:active { 62 background-color: var(--blue-80); 63 } 64 65 /* Text of the error itself, not the stack trace */ 66 .app-error-panel .error-panel-error { 67 background-color: var(--theme-body-emphasized-background); 68 border: 1px solid var(--theme-toolbar-separator); 69 border-block-end: 0; 70 font-size: 1.2em; 71 font-weight: 500; 72 margin: 0; 73 padding: 2rem; 74 } 75 76 /* Stack trace; composed of <p> elements */ 77 .app-error-panel .stack-trace-section { 78 background-color: var(--theme-body-emphasized-background); 79 border: 1px solid var(--theme-toolbar-separator); 80 padding: 2rem; 81 margin-bottom: 1rem; 82 } 83 84 .app-error-panel .stack-trace-section p { 85 color: var(--theme-stack-trace-text); 86 margin: 0; 87 margin-inline-start: 1rem; 88 } 89 90 .app-error-panel .stack-trace-section p:first-child { 91 margin: 0; 92 } 93 94 /* Instructions to reopen the toolbox */ 95 .app-error-panel .error-panel-reload-info { 96 font-size: 1em; 97 font-weight: 400; 98 margin: 2rem 0 1rem; 99 }