Skip to content

Commit db6e248

Browse files
mstangemstange
authored
Switch CSS back to using relative paths inside url(...) (#5594)
This is basically picking the opposite direction of #5581. With esbuild you can configure aliases, but it only respects them for imports into JS. It doesn't respect the aliases for url() references in CSS files. We could add a plugin which implements this mapping but it seems easier (and maybe more idiomatic) to just change our CSS to use relative URLs.
2 parents 6b91dd5 + 9556dde commit db6e248

20 files changed

+65
-69
lines changed

‎src/components/app/BottomBox.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,11 @@
7272
}
7373

7474
.bottom-close-button {
75-
background-image: url(firefox-profiler-res/img/svg/close-dark.svg);
75+
background-image: url(../../../res/img/svg/close-dark.svg);
7676
}
7777

7878
.bottom-assembly-button {
79-
background-image: url(firefox-profiler-res/img/svg/asm-icon.svg);
79+
background-image: url(../../../res/img/svg/asm-icon.svg);
8080
}
8181

8282
.codeLoadingOverlay,
@@ -111,8 +111,8 @@
111111
width: 32px;
112112
height: 32px;
113113
flex-shrink: 0;
114-
background: url(firefox-profiler-res/img/spinner.png) center center / 32px
115-
32px no-repeat;
114+
background: url(../../../res/img/spinner.png) center center / 32px 32px
115+
no-repeat;
116116
content: '';
117117
}
118118

@@ -123,8 +123,8 @@
123123
width: 50px;
124124
height: 50px;
125125
flex-shrink: 0;
126-
background: url(firefox-profiler-res/img/svg/error.svg) center center / 32px
127-
32px no-repeat;
126+
background: url(../../../res/img/svg/error.svg) center center / 32px 32px
127+
no-repeat;
128128
content: '';
129129
filter: brightness(70%) drop-shadow(0 1px rgb(255 255 255 / 0.5));
130130
}

‎src/components/app/Details.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@
2626
}
2727

2828
.sidebar-open-close-button-isopen {
29-
background-image: url(firefox-profiler-res/img/svg/pane-collapse.svg);
29+
background-image: url(../../../res/img/svg/pane-collapse.svg);
3030
}
3131

3232
.sidebar-open-close-button-isclosed {
33-
background-image: url(firefox-profiler-res/img/svg/pane-expand.svg);
33+
background-image: url(../../../res/img/svg/pane-expand.svg);
3434
}

‎src/components/app/Home.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@
145145
width: 20px;
146146
height: 20px;
147147
margin: 0 10px -4px 3px;
148-
background: url(firefox-profiler-res/img/svg/help-blue.svg);
148+
background: url(../../../res/img/svg/help-blue.svg);
149149
background-size: 100% 100%;
150150
}
151151

‎src/components/app/KeyboardShortcut.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,8 @@
9595

9696
/* Allow for the photon focus ring to fit in the space by using a 4px margin. */
9797
margin: 4px;
98-
background: url(firefox-profiler-res/img/svg/searchfield-cancel.svg) 10px
99-
center no-repeat;
98+
background: url(../../../res/img/svg/searchfield-cancel.svg) 10px center
99+
no-repeat;
100100
cursor: pointer;
101101
font-size: inherit;
102102
}

‎src/components/app/MenuButtons/Permalink.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
/* This background image builds on the generic styles defined in
66
* MenuButtons/index.css when using an icon. */
77
.menuButtonsPermalinkButtonButton::before {
8-
background-image: url(firefox-profiler-res/img/svg/link-dark-12.svg);
8+
background-image: url(../../../../res/img/svg/link-dark-12.svg);
99
}
1010

1111
.menuButtonsPermalinkPanel .arrowPanelContent {

‎src/components/app/MenuButtons/Publish.css‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
/* These two background images build on the generic styles defined in
66
* MenuButtons/index.css when using an icon. */
77
.menuButtonsShareButtonButton::before {
8-
background-image: url(firefox-profiler-res/img/svg/share-dark-12.svg);
8+
background-image: url(../../../../res/img/svg/share-dark-12.svg);
99
}
1010

1111
.menuButtonsShareButtonButton-uploading::before {
12-
background-image: url(firefox-profiler-res/img/svg/sharing-animated-dark-12.svg);
12+
background-image: url(../../../../res/img/svg/sharing-animated-dark-12.svg);
1313
}
1414

1515
.menuButtonsShareButtonError {
@@ -27,7 +27,7 @@
2727
}
2828

2929
.menuButtonsShareButtonError::before {
30-
background-image: url(firefox-profiler-res/img/svg/error.svg);
30+
background-image: url(../../../../res/img/svg/error.svg);
3131
}
3232

3333
.menuButtonsPublishPanel {
@@ -46,7 +46,7 @@
4646
* This background image is 44x44, so this puts it 16px left of the text. */
4747
padding-left: 60px;
4848
margin: 0 0 0 -60px;
49-
background: url(firefox-profiler-res/img/svg/info.svg) left center no-repeat;
49+
background: url(../../../../res/img/svg/info.svg) left center no-repeat;
5050
line-height: 44px; /* This is the height of the background image */
5151
}
5252

@@ -107,15 +107,13 @@
107107
.menuButtonsPublishButtonsSvgUpload {
108108
width: 20px;
109109
height: 20px;
110-
background: url(firefox-profiler-res/img/svg/upload.svg) center center
111-
no-repeat;
110+
background: url(../../../../res/img/svg/upload.svg) center center no-repeat;
112111
}
113112

114113
.menuButtonsPublishButtonsSvgDownload {
115114
width: 20px;
116115
height: 20px;
117-
background: url(firefox-profiler-res/img/svg/download.svg) center center
118-
no-repeat;
116+
background: url(../../../../res/img/svg/download.svg) center center no-repeat;
119117
}
120118

121119
.menuButtonsDownloadSize {

‎src/components/app/MenuButtons/index.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -92,23 +92,23 @@
9292
width: 12px;
9393
height: 12px;
9494
padding-left: 4px;
95-
background: url(firefox-profiler-res/img/svg/open-in-new-12.svg) no-repeat
96-
right / 12px;
95+
background: url(../../../../res/img/svg/open-in-new-12.svg) no-repeat right /
96+
12px;
9797
}
9898

9999
/* These classes define respective states for the metainfo button. They change
100100
* the icon whose generic styles are defined above. */
101101
.menuButtonsMetaInfoButtonButton::before {
102-
background-image: url(firefox-profiler-res/img/svg/info-12.svg);
102+
background-image: url(../../../../res/img/svg/info-12.svg);
103103
}
104104

105105
/* This is the revert button, appearing after publishing a profile. */
106106
.menuButtonsRevertButton::before {
107-
background-image: url(firefox-profiler-res/img/svg/undo-dark-12.svg);
107+
background-image: url(../../../../res/img/svg/undo-dark-12.svg);
108108
}
109109

110110
.menuButtonsRevertToFullView::before {
111-
background-image: url(firefox-profiler-res/img/svg/maximize-dark-12.svg);
111+
background-image: url(../../../../res/img/svg/maximize-dark-12.svg);
112112
}
113113

114114
.profileInfoUploadedActions {
@@ -135,8 +135,8 @@
135135
display: block;
136136
width: 32px;
137137
height: 32px;
138-
background: url(firefox-profiler-res/img/svg/cloud-dark-12.svg) no-repeat
139-
left / 32px;
138+
background: url(../../../../res/img/svg/cloud-dark-12.svg) no-repeat left /
139+
32px;
140140
content: '';
141141
opacity: 0.5;
142142
}

‎src/components/app/ProfileDeleteButton.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
/* Note: 20px is: 16px (icon width) + 4px (distance from the text) */
77
padding-left: 20px;
88
margin: 0;
9-
background: url(firefox-profiler-res/img/svg/check-dark.svg) no-repeat left /
10-
16px 16px;
9+
background: url(../../../res/img/svg/check-dark.svg) no-repeat left / 16px
10+
16px;
1111
white-space: nowrap;
1212
}
1313

@@ -16,8 +16,8 @@
1616
padding-left: 24px;
1717

1818
/* The icon is 4px below the top */
19-
background: url(firefox-profiler-res/img/svg/error-red.svg) no-repeat 0 4px /
20-
16px 16px;
19+
background: url(../../../res/img/svg/error-red.svg) no-repeat 0 4px / 16px
20+
16px;
2121
color: var(--red-60);
2222
overflow-wrap: break-word;
2323
}

‎src/components/app/ProfileName.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626

2727
.profileNameButton::before {
2828
flex-shrink: 0;
29-
background-image: url(firefox-profiler-res/img/svg/edit-name-profiler.svg);
29+
background-image: url(../../../res/img/svg/edit-name-profiler.svg);
3030
}
3131

3232
/* Using the style for links rather than for normal inputs, because we don't

‎src/components/app/ProfileViewer.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,8 @@
8080
margin: 3px 0 3px 3px;
8181

8282
/* Other */
83-
background: var(--green-50) url(firefox-profiler-res/img/svg/back-arrow.svg)
84-
center center no-repeat;
83+
background: var(--green-50) url(../../../res/img/svg/back-arrow.svg) center
84+
center no-repeat;
8585
color: #000;
8686
}
8787

0 commit comments

Comments
 (0)