SourceIcon.css (5247B)
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 /** 6 * Variant of DebuggerImage used in sources list and tabs. 7 * Define the different source type / framework / library icons here. 8 */ 9 10 .source-icon { 11 margin-inline-end: 4px; 12 } 13 14 /* Icons for frameworks and libs */ 15 16 .dbg-img.dbg-img-aframe { 17 background-image: url(chrome://devtools/content/debugger/images/sources/aframe.svg); 18 background-color: transparent !important; 19 } 20 21 .dbg-img.dbg-img-angular { 22 background-image: url(chrome://devtools/content/debugger/images/sources/angular.svg); 23 background-color: transparent !important; 24 } 25 26 .dbg-img.dbg-img-babel { 27 mask-image: url(chrome://devtools/content/debugger/images/sources/babel.svg); 28 } 29 30 .dbg-img.dbg-img-backbone { 31 mask-image: url(chrome://devtools/content/debugger/images/sources/backbone.svg); 32 } 33 34 .dbg-img.dbg-img-coffeescript { 35 background-image: url(chrome://devtools/content/debugger/images/sources/coffeescript.svg); 36 background-color: transparent !important; 37 fill: var(--theme-icon-color); 38 -moz-context-properties: fill; 39 } 40 41 .dbg-img.dbg-img-dojo { 42 background-image: url(chrome://devtools/content/debugger/images/sources/dojo.svg); 43 background-color: transparent !important; 44 } 45 46 .dbg-img.dbg-img-ember { 47 background-image: url(chrome://devtools/content/debugger/images/sources/ember.svg); 48 background-color: transparent !important; 49 } 50 51 .dbg-img.dbg-img-express { 52 mask-image: url(chrome://devtools/content/debugger/images/sources/express.svg); 53 } 54 55 .dbg-img.dbg-img-extension { 56 mask-image: url(chrome://devtools/content/debugger/images/sources/extension.svg); 57 } 58 59 .dbg-img.dbg-img-immutable { 60 mask-image: url(chrome://devtools/content/debugger/images/sources/immutable.svg); 61 } 62 63 .dbg-img.dbg-img-javascript { 64 background-image: url(chrome://devtools/content/debugger/images/sources/javascript.svg); 65 background-size: 14px 14px; 66 background-color: transparent !important; 67 fill: var(--theme-icon-color); 68 -moz-context-properties: fill; 69 } 70 71 .dbg-img.dbg-img-has-network-override::after { 72 content: ""; 73 display: block; 74 height: 5px; 75 width: 5px; 76 background-color: var(--purple-30); 77 border-radius: 100%; 78 outline: 1px solid var(--theme-sidebar-background); 79 translate: 12px 10px; 80 } 81 82 .node.focused .dbg-img.dbg-img-has-network-override::after { 83 outline-color: var(--theme-selection-background); 84 } 85 86 .dbg-img.dbg-img-jquery { 87 mask-image: url(chrome://devtools/content/debugger/images/sources/jquery.svg); 88 } 89 90 .dbg-img.dbg-img-lodash { 91 mask-image: url(chrome://devtools/content/debugger/images/sources/lodash.svg); 92 } 93 94 .dbg-img.dbg-img-marko { 95 background-image: url(chrome://devtools/content/debugger/images/sources/marko.svg); 96 background-color: transparent !important; 97 } 98 99 .dbg-img.dbg-img-mobx { 100 background-image: url(chrome://devtools/content/debugger/images/sources/mobx.svg); 101 background-color: transparent !important; 102 } 103 104 .dbg-img.dbg-img-nextjs { 105 background-image: url(chrome://devtools/content/debugger/images/sources/nextjs.svg); 106 background-color: transparent !important; 107 } 108 109 .dbg-img.dbg-img-node { 110 background-image: url(chrome://devtools/content/debugger/images/sources/node.svg); 111 background-color: transparent !important; 112 } 113 114 .dbg-img.dbg-img-nuxtjs { 115 background-image: url(chrome://devtools/content/debugger/images/sources/nuxtjs.svg); 116 background-color: transparent !important; 117 } 118 119 .dbg-img.dbg-img-preact { 120 background-image: url(chrome://devtools/content/debugger/images/sources/preact.svg); 121 background-color: transparent !important; 122 } 123 124 .dbg-img.dbg-img-pug { 125 background-image: url(chrome://devtools/content/debugger/images/sources/pug.svg); 126 background-color: transparent !important; 127 } 128 129 .dbg-img.dbg-img-react { 130 background-image: url(chrome://devtools/content/debugger/images/sources/react.svg); 131 background-color: transparent !important; 132 fill: var(--theme-highlight-bluegrey); 133 -moz-context-properties: fill; 134 } 135 136 .dbg-img.dbg-img-redux { 137 mask-image: url(chrome://devtools/content/debugger/images/sources/redux.svg); 138 } 139 140 .dbg-img.dbg-img-rxjs { 141 background-image: url(chrome://devtools/content/debugger/images/sources/rxjs.svg); 142 background-color: transparent !important; 143 } 144 145 .dbg-img.dbg-img-sencha-extjs { 146 background-image: url(chrome://devtools/content/debugger/images/sources/sencha-extjs.svg); 147 background-color: transparent !important; 148 } 149 150 .dbg-img.dbg-img-typescript { 151 background-image: url(chrome://devtools/content/debugger/images/sources/typescript.svg); 152 background-color: transparent !important; 153 fill: var(--theme-icon-color); 154 -moz-context-properties: fill; 155 } 156 157 .dbg-img.dbg-img-underscore { 158 mask-image: url(chrome://devtools/content/debugger/images/sources/underscore.svg); 159 } 160 161 /* We use both 'Vue' and 'VueJS' when identifying frameworks */ 162 .dbg-img.dbg-img-vue, 163 .dbg-img.dbg-img-vuejs { 164 background-image: url(chrome://devtools/content/debugger/images/sources/vuejs.svg); 165 background-color: transparent !important; 166 } 167 168 .dbg-img.dbg-img-webpack { 169 background-image: url(chrome://devtools/content/debugger/images/sources/webpack.svg); 170 background-color: transparent !important; 171 }