Switch CSS back to using relative paths inside url(...)

src/components/app/BottomBox.css

@@ -72,11 +72,11 @@
 }
 
 .bottom-close-button {
-  background-image: url(firefox-profiler-res/img/svg/close-dark.svg);
+  background-image: url(../../../res/img/svg/close-dark.svg);
 }
 
 .bottom-assembly-button {
-  background-image: url(firefox-profiler-res/img/svg/asm-icon.svg);
+  background-image: url(../../../res/img/svg/asm-icon.svg);
 }
 
 .codeLoadingOverlay,
@@ -111,8 +111,8 @@
   width: 32px;
   height: 32px;
   flex-shrink: 0;
-  background: url(firefox-profiler-res/img/spinner.png) center center / 32px
-    32px no-repeat;
+  background: url(../../../res/img/spinner.png) center center / 32px 32px
+    no-repeat;
   content: '';
 }
 
@@ -123,8 +123,8 @@
   width: 50px;
   height: 50px;
   flex-shrink: 0;
-  background: url(firefox-profiler-res/img/svg/error.svg) center center / 32px
-    32px no-repeat;
+  background: url(../../../res/img/svg/error.svg) center center / 32px 32px
+    no-repeat;
   content: '';
   filter: brightness(70%) drop-shadow(0 1px rgb(255 255 255 / 0.5));
 }

src/components/app/Details.css

@@ -26,9 +26,9 @@
 }
 
 .sidebar-open-close-button-isopen {
-  background-image: url(firefox-profiler-res/img/svg/pane-collapse.svg);
+  background-image: url(../../../res/img/svg/pane-collapse.svg);
 }
 
 .sidebar-open-close-button-isclosed {
-  background-image: url(firefox-profiler-res/img/svg/pane-expand.svg);
+  background-image: url(../../../res/img/svg/pane-expand.svg);
 }

src/components/app/Home.css

@@ -145,7 +145,7 @@
   width: 20px;
   height: 20px;
   margin: 0 10px -4px 3px;
-  background: url(firefox-profiler-res/img/svg/help-blue.svg);
+  background: url(../../../res/img/svg/help-blue.svg);
   background-size: 100% 100%;
 }
 

src/components/app/KeyboardShortcut.css

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

src/components/app/MenuButtons/Permalink.css

@@ -5,7 +5,7 @@
 /* This background image builds on the generic styles defined in
  * MenuButtons/index.css when using an icon. */
 .menuButtonsPermalinkButtonButton::before {
-  background-image: url(firefox-profiler-res/img/svg/link-dark-12.svg);
+  background-image: url(../../../../res/img/svg/link-dark-12.svg);
 }
 
 .menuButtonsPermalinkPanel .arrowPanelContent {

src/components/app/MenuButtons/Publish.css

@@ -5,11 +5,11 @@
 /* These two background images build on the generic styles defined in
  * MenuButtons/index.css when using an icon. */
 .menuButtonsShareButtonButton::before {
-  background-image: url(firefox-profiler-res/img/svg/share-dark-12.svg);
+  background-image: url(../../../../res/img/svg/share-dark-12.svg);
 }
 
 .menuButtonsShareButtonButton-uploading::before {
-  background-image: url(firefox-profiler-res/img/svg/sharing-animated-dark-12.svg);
+  background-image: url(../../../../res/img/svg/sharing-animated-dark-12.svg);
 }
 
 .menuButtonsShareButtonError {
@@ -27,7 +27,7 @@
 }
 
 .menuButtonsShareButtonError::before {
-  background-image: url(firefox-profiler-res/img/svg/error.svg);
+  background-image: url(../../../../res/img/svg/error.svg);
 }
 
 .menuButtonsPublishPanel {
@@ -46,7 +46,7 @@
    * This background image is 44x44, so this puts it 16px left of the text. */
   padding-left: 60px;
   margin: 0 0 0 -60px;
-  background: url(firefox-profiler-res/img/svg/info.svg) left center no-repeat;
+  background: url(../../../../res/img/svg/info.svg) left center no-repeat;
   line-height: 44px; /* This is the height of the background image */
 }
 
@@ -107,15 +107,13 @@
 .menuButtonsPublishButtonsSvgUpload {
   width: 20px;
   height: 20px;
-  background: url(firefox-profiler-res/img/svg/upload.svg) center center
-    no-repeat;
+  background: url(../../../../res/img/svg/upload.svg) center center no-repeat;
 }
 
 .menuButtonsPublishButtonsSvgDownload {
   width: 20px;
   height: 20px;
-  background: url(firefox-profiler-res/img/svg/download.svg) center center
-    no-repeat;
+  background: url(../../../../res/img/svg/download.svg) center center no-repeat;
 }
 
 .menuButtonsDownloadSize {

src/components/app/MenuButtons/index.css

@@ -92,23 +92,23 @@
   width: 12px;
   height: 12px;
   padding-left: 4px;
-  background: url(firefox-profiler-res/img/svg/open-in-new-12.svg) no-repeat
-    right / 12px;
+  background: url(../../../../res/img/svg/open-in-new-12.svg) no-repeat right /
+    12px;
 }
 
 /* These classes define respective states for the metainfo button. They change
  * the icon whose generic styles are defined above. */
 .menuButtonsMetaInfoButtonButton::before {
-  background-image: url(firefox-profiler-res/img/svg/info-12.svg);
+  background-image: url(../../../../res/img/svg/info-12.svg);
 }
 
 /* This is the revert button, appearing after publishing a profile. */
 .menuButtonsRevertButton::before {
-  background-image: url(firefox-profiler-res/img/svg/undo-dark-12.svg);
+  background-image: url(../../../../res/img/svg/undo-dark-12.svg);
 }
 
 .menuButtonsRevertToFullView::before {
-  background-image: url(firefox-profiler-res/img/svg/maximize-dark-12.svg);
+  background-image: url(../../../../res/img/svg/maximize-dark-12.svg);
 }
 
 .profileInfoUploadedActions {
@@ -135,8 +135,8 @@
   display: block;
   width: 32px;
   height: 32px;
-  background: url(firefox-profiler-res/img/svg/cloud-dark-12.svg) no-repeat
-    left / 32px;
+  background: url(../../../../res/img/svg/cloud-dark-12.svg) no-repeat left /
+    32px;
   content: '';
   opacity: 0.5;
 }

src/components/app/ProfileDeleteButton.css

@@ -6,8 +6,8 @@
   /* Note: 20px is: 16px (icon width) + 4px (distance from the text) */
   padding-left: 20px;
   margin: 0;
-  background: url(firefox-profiler-res/img/svg/check-dark.svg) no-repeat left /
-    16px 16px;
+  background: url(../../../res/img/svg/check-dark.svg) no-repeat left / 16px
+    16px;
   white-space: nowrap;
 }
 
@@ -16,8 +16,8 @@
   padding-left: 24px;
 
   /* The icon is 4px below the top */
-  background: url(firefox-profiler-res/img/svg/error-red.svg) no-repeat 0 4px /
-    16px 16px;
+  background: url(../../../res/img/svg/error-red.svg) no-repeat 0 4px / 16px
+    16px;
   color: var(--red-60);
   overflow-wrap: break-word;
 }

src/components/app/ProfileName.css

@@ -26,7 +26,7 @@
 
 .profileNameButton::before {
   flex-shrink: 0;
-  background-image: url(firefox-profiler-res/img/svg/edit-name-profiler.svg);
+  background-image: url(../../../res/img/svg/edit-name-profiler.svg);
 }
 
 /* Using the style for links rather than for normal inputs, because we don't

src/components/app/ProfileViewer.css

@@ -80,8 +80,8 @@
   margin: 3px 0 3px 3px;
 
   /* Other */
-  background: var(--green-50) url(firefox-profiler-res/img/svg/back-arrow.svg)
-    center center no-repeat;
+  background: var(--green-50) url(../../../res/img/svg/back-arrow.svg) center
+    center no-repeat;
   color: #000;
 }
 

src/components/calltree/CallTree.css

@@ -32,5 +32,5 @@
 
 .treeBadge.inlined,
 .treeBadge.divergent-inlining {
-  background: url(firefox-profiler-res/img/svg/inlined-icon.svg);
+  background: url(../../../res/img/svg/inlined-icon.svg);
 }

src/components/shared/CallNodeContextMenu.css

@@ -16,19 +16,19 @@
 }
 
 .callNodeContextMenuIconMerge {
-  background-image: url(firefox-profiler-res/img/svg/merge-icon.svg);
+  background-image: url(../../../res/img/svg/merge-icon.svg);
 }
 
 .callNodeContextMenuIconCollapse {
-  background-image: url(firefox-profiler-res/img/svg/collapse-icon.svg);
+  background-image: url(../../../res/img/svg/collapse-icon.svg);
 }
 
 .callNodeContextMenuIconFocus {
-  background-image: url(firefox-profiler-res/img/svg/focus-icon.svg);
+  background-image: url(../../../res/img/svg/focus-icon.svg);
 }
 
 .callNodeContextMenuIconDrop {
-  background-image: url(firefox-profiler-res/img/svg/drop-icon.svg);
+  background-image: url(../../../res/img/svg/drop-icon.svg);
 }
 
 .callNodeContextMenuShortcut {

src/components/shared/FilterNavigatorBar.css

@@ -9,7 +9,7 @@
   --internal-active-background-color: rgb(0 0 0 / 0.2);
   --internal-selected-background-color: transparent;
   --internal-selected-color: var(--selected-color, var(--blue-60));
-  --internal-separator-img: url(firefox-profiler-res/img/svg/scope-bar-separator.svg);
+  --internal-separator-img: url(../../../res/img/svg/scope-bar-separator.svg);
 
   display: flex;
   height: 24px;
@@ -159,7 +159,7 @@
     --internal-active-background-color: SelectedItemText;
     --internal-selected-background-color: SelectedItem;
     --internal-selected-color: SelectedItemText;
-    --internal-separator-img: url(firefox-profiler-res/img/svg/scope-bar-separator-hcm-light.svg);
+    --internal-separator-img: url(../../../res/img/svg/scope-bar-separator-hcm-light.svg);
   }
 
   .filterNavigatorBarItem {
@@ -183,7 +183,7 @@
 
   @media (prefers-color-scheme: dark) {
     .filterNavigatorBar {
-      --internal-separator-img: url(firefox-profiler-res/img/svg/scope-bar-separator-hcm-dark.svg);
+      --internal-separator-img: url(../../../res/img/svg/scope-bar-separator-hcm-dark.svg);
     }
   }
 }

src/components/shared/IdleSearchField.css

@@ -21,7 +21,7 @@
   position: relative;
   flex: 1;
   margin: 0;
-  background: url(firefox-profiler-res/img/svg/searchfield-icon.svg) 3px center
+  background: url(../../../res/img/svg/searchfield-icon.svg) 3px center
     no-repeat white;
   background-size: 11px 11px;
 }
@@ -34,7 +34,7 @@
   height: 11px;
   padding: 0;
   border: 0;
-  background: url(firefox-profiler-res/img/svg/searchfield-cancel.svg) top left
+  background: url(../../../res/img/svg/searchfield-cancel.svg) top left
     no-repeat;
   background-size: contain;
   color: transparent;

src/components/shared/MarkerContextMenu.css

@@ -10,45 +10,45 @@
 
 /* Here are all icons for the marker context menu. */
 .markerContextMenuIconSetSelectionFromMarker {
-  background-image: url(firefox-profiler-res/img/svg/set-selection-from-marker.svg);
+  background-image: url(../../../res/img/svg/set-selection-from-marker.svg);
 }
 
 .markerContextMenuIconStartSelectionHere, /* <- for dot markers */
 .markerContextMenuIconStartSelectionAtMarkerStart /* <- for interval markers */ {
-  background-image: url(firefox-profiler-res/img/svg/start-selection-at-marker-start.svg);
+  background-image: url(../../../res/img/svg/start-selection-at-marker-start.svg);
 }
 
 .markerContextMenuIconStartSelectionAtMarkerEnd {
-  background-image: url(firefox-profiler-res/img/svg/start-selection-at-marker-end.svg);
+  background-image: url(../../../res/img/svg/start-selection-at-marker-end.svg);
 }
 
 .markerContextMenuIconEndSelectionAtMarkerStart {
-  background-image: url(firefox-profiler-res/img/svg/end-selection-at-marker-start.svg);
+  background-image: url(../../../res/img/svg/end-selection-at-marker-start.svg);
 }
 
 .markerContextMenuIconEndSelectionHere, /* <- for dot markers */
 .markerContextMenuIconEndSelectionAtMarkerEnd /* <- for interval markers */ {
-  background-image: url(firefox-profiler-res/img/svg/end-selection-at-marker-end.svg);
+  background-image: url(../../../res/img/svg/end-selection-at-marker-end.svg);
 }
 
 .markerContextMenuIconCopyDescription {
-  background-image: url(firefox-profiler-res/img/svg/copy-dark.svg);
+  background-image: url(../../../res/img/svg/copy-dark.svg);
 }
 
 .markerContextMenuIconCopyStack {
-  background-image: url(firefox-profiler-res/img/svg/copy-marker-stack.svg);
+  background-image: url(../../../res/img/svg/copy-marker-stack.svg);
 }
 
 .markerContextMenuIconCopyUrl {
-  background-image: url(firefox-profiler-res/img/svg/globe-dark.svg);
+  background-image: url(../../../res/img/svg/globe-dark.svg);
 }
 
 .markerContextMenuIconCopyPayload {
-  background-image: url(firefox-profiler-res/img/svg/copy-marker-payload.svg);
+  background-image: url(../../../res/img/svg/copy-marker-payload.svg);
 }
 
 .markerContextMenuSelectThread {
-  background-image: url(firefox-profiler-res/img/svg/select-thread.svg);
+  background-image: url(../../../res/img/svg/select-thread.svg);
 }
 
 /* These icons don't look nice when selected, unless if we invert them. However

src/components/shared/MarkerSettings.css

@@ -20,7 +20,7 @@
   flex: none;
   padding-right: 30px;
   margin: 0 4px;
-  background-image: url(firefox-profiler-res/img/svg/filter.svg);
+  background-image: url(../../../res/img/svg/filter.svg);
   background-position: 4px center;
   background-repeat: no-repeat;
 }

src/components/shared/ProfileMetaInfoSummary.css

@@ -20,34 +20,32 @@
 
 .profileMetaInfoSummaryProductAndVersion {
   padding-left: 1.4em; /* 1 (for the background image) + 0.4 */
-  background: url(firefox-profiler-res/img/svg/info.svg) left center / 1em
-    no-repeat;
+  background: url(../../../res/img/svg/info.svg) left center / 1em no-repeat;
 }
 
 .profileMetaInfoSummaryProductAndVersion[data-product^='Firefox'],
 .profileMetaInfoSummaryProductAndVersion[data-product='Fennec'] {
-  background-image: url(firefox-profiler-res/img/svg/brands/firefoxbrowser.svg);
+  background-image: url(../../../res/img/svg/brands/firefoxbrowser.svg);
 }
 
 .profileMetaInfoSummaryPlatform {
   padding-left: 1.4em; /* 1 (for the background image) + 0.4 */
   margin-left: 1em;
-  background: url(firefox-profiler-res/img/svg/info.svg) left center / 1em
-    no-repeat;
+  background: url(../../../res/img/svg/info.svg) left center / 1em no-repeat;
 }
 
 .profileMetaInfoSummaryPlatform[data-toolkit^='macOS'] {
-  background-image: url(firefox-profiler-res/img/svg/brands/apple.svg);
+  background-image: url(../../../res/img/svg/brands/apple.svg);
 }
 
 .profileMetaInfoSummaryPlatform[data-toolkit^='Windows'] {
-  background-image: url(firefox-profiler-res/img/svg/brands/windows.svg);
+  background-image: url(../../../res/img/svg/brands/windows.svg);
 }
 
 .profileMetaInfoSummaryPlatform[data-toolkit^='Linux'] {
-  background-image: url(firefox-profiler-res/img/svg/brands/linux.svg);
+  background-image: url(../../../res/img/svg/brands/linux.svg);
 }
 
 .profileMetaInfoSummaryPlatform[data-toolkit^='Android'] {
-  background-image: url(firefox-profiler-res/img/svg/brands/android.svg);
+  background-image: url(../../../res/img/svg/brands/android.svg);
 }