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.request-blocking-panel {
6  position: relative;
7  display: flex;
8  flex-direction: column;
9  height: 100%;
10  overflow: hidden;
11}
12
13/* Override the devtools-checkbox style to improve hit area and alignment */
14.request-blocking-panel .devtools-checkbox-label {
15  display: inline-flex;
16  align-items: center;
17  gap: 4px;
18  margin: 0;
19  padding: 2px 4px;
20  /* checkbox can be 13px, 14px or 16px depending on the platform */
21  line-height: 16px;
22  user-select: none;
23  cursor: default;
24}
25
26.request-blocking-panel .devtools-checkbox-label > input {
27  flex: none;
28  margin: 0;
29}
30
31.request-blocking-label {
32  flex: 1 1 auto;
33  display: block;
34  white-space: nowrap;
35  overflow: hidden;
36  text-overflow: ellipsis;
37}
38
39.request-blocking-editable-label {
40  cursor: text
41}
42
43/* The "Enable Blocking Requests" bar */
44.request-blocking-enable-bar {
45  flex: none;
46  background: var(--theme-tab-toolbar-background);
47  height: calc(var(--theme-toolbar-height) + 1px);
48  padding-block: 2px;
49  padding-inline: 16px 4px;
50  align-items: center;
51  overflow: hidden;
52  white-space: nowrap;
53  border-bottom: 1px solid var(--theme-splitter-color);
54}
55
56.request-blocking-enable-form {
57  flex-grow: 1;
58}
59
60.request-blocking-contents {
61  flex: 0 1 auto;
62  overflow-y: auto;
63  border-bottom: 1px solid var(--theme-splitter-color);
64}
65
66/* Blocked request list */
67.request-blocking-list {
68  margin: 0;
69  padding: 4px 0;
70}
71
72.request-blocking-list.disabled {
73  background-color: var(--theme-toolbar-hover);
74  opacity: 0.6;
75}
76
77.request-blocking-list li {
78  display: flex;
79  align-items: center;
80  min-height: 20px;
81  padding-inline: 16px 8px;
82}
83
84.request-blocking-list li.request-blocking-edit-item {
85  padding: 0;
86  /* Text input is 24px but we want it to occupy the same space as our 20px rows */
87  margin-block: -2px;
88}
89
90.request-blocking-list li.request-blocking-edit-item form {
91  width: 100%;
92}
93
94.request-blocking-list .devtools-checkbox-label {
95  flex: 1 1 auto;
96  /* Can't seem to make the flex-shrink reduce the element's width when the
97     content is a long URL, even if the URL container has text-overflow: ellipsis.
98     DevTools shows that "the item was clamped to its minimum size" and the shrink
99     part is thus ignored. So we're reserving 20px for the delete button. */
100  max-width: calc(100% - 20px);
101}
102
103.request-blocking-remove-button {
104  /* Visually hide but stay focusable in keyboard navigation */
105  opacity: 0;
106  flex: none;
107  width: 20px;
108  height: 20px;
109  margin: 0;
110  padding: 2px;
111  border: none;
112  outline: none;
113  background-color: transparent;
114}
115
116.request-blocking-remove-button::-moz-focus-inner {
117  border: none;
118}
119
120.request-blocking-list li:hover .request-blocking-remove-button {
121  opacity: 1;
122}
123
124.request-blocking-remove-button::before {
125  content: "";
126  display: block;
127  width: 16px;
128  height: 16px;
129  border-radius: 2px;
130  background: url("chrome://devtools/skin/images/close.svg") no-repeat center;
131  background-size: 12px;
132  -moz-context-properties: fill;
133  fill: var(--theme-icon-color);
134}
135
136.request-blocking-remove-button:hover::before {
137  fill: var(--theme-selection-color);
138  background-color: var(--theme-selection-background);
139}
140
141/* Footer content, progressively pushed by pattern rows in the main list and
142 * remaining "fixed" at the bottom when there is enough content to scroll,
143 * thanks to the magic of flexbox */
144.request-blocking-footer {
145  position: relative;
146  flex: none;
147}
148
149/* Draw a border 1px below the form, so that it disappears out of view when
150 * there are many pattern rows in the main container and the footer is pushed
151 * to the bottom */
152.request-blocking-footer::after {
153  content: "";
154  position: absolute;
155  left: 0;
156  right: 0;
157  top: 100%;
158  border-bottom: 1px solid var(--theme-splitter-color);
159}
160
161/* Text input for the addition and edition forms */
162.request-blocking-add-form input,
163.request-blocking-edit-item input {
164  width: calc(100% - 1px);
165  height: 24px;
166  padding-block: 4px;
167  padding-inline: 20px 8px;
168  background: none;
169}
170
171.request-blocking-list-empty-notice {
172  margin: 0;
173  flex: 1;
174  overflow-x: hidden;
175}
176
177.request-blocking-notice-element {
178  padding-top: 12px;
179  padding-inline: 12px;
180}
181
182.request-blocking-notice-element::before {
183  content:"• ";
184}
185