WebInspectorUI: Replace image-set() with simple url() as not supported by Chrome

asurdej-comcast · nmuthu973 · commit 09ec09c9b790 · 2025-08-04T04:32:57.000Z
Chromium browser doesn't support image-set(). It uses -webkit-image-set() instead.
Use simple url() to make sure RWI UI works with different browsers
diff --git a/Source/WebInspectorUI/UserInterface/Views/GradientSlider.css b/Source/WebInspectorUI/UserInterface/Views/GradientSlider.css
@@ -62,7 +62,7 @@
     width: 20px;
     height: 26px;
 
-    background-image: image-set(url(../Images/GradientStop.png) 1x, url(../Images/GradientStop@2x.png) 2x);
+    background-image: url(../Images/GradientStop.png);
 
     transition: opacity 350ms;
 }
@@ -73,7 +73,7 @@
 }
 
 .gradient-slider-knob.selected {
-    background-image: image-set(url(../Images/GradientStopSelected.png) 1x, url(../Images/GradientStopSelected@2x.png) 2x);
+    background-image: url(../Images/GradientStopSelected.png);
 }
 
 .gradient-slider-knob.detaching {
diff --git a/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css b/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css
@@ -58,7 +58,7 @@
     width: 15px;
     height: 13px;
 
-    content: image-set(url(../Images/HoverMenuButton.png) 1x, url(../Images/HoverMenuButton@2x.png) 2x);
+    content: url(../Images/HoverMenuButton.png);
     transform: translateY(-1px);
 }
 
diff --git a/Source/WebInspectorUI/UserInterface/Views/Slider.css b/Source/WebInspectorUI/UserInterface/Views/Slider.css
@@ -34,7 +34,7 @@
     top: -5px;
     width: 14px;
     height: 17px;
-    content: image-set(url(../Images/SliderThumb.png) 1x, url(../Images/SliderThumb@2x.png) 2x);
+    content: url(../Images/SliderThumb.png);
 }
 
 body[dir=ltr] .slider > img {
@@ -48,7 +48,7 @@ body[dir=rtl] .slider > img {
 }
 
 .slider > img.dragging {
-    content: image-set(url(../Images/SliderThumbPressed.png) 1x, url(../Images/SliderThumbPressed@2x.png) 2x);
+    content: url(../Images/SliderThumbPressed.png);
 }
 
 .slider:focus {
diff --git a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css
@@ -183,7 +183,7 @@
 .hover-menu.color > img {
     width: 16px;
     height: 16px;
-    content: image-set(url(../Images/ColorIcon.png) 1x, url(../Images/ColorIcon@2x.png) 2x);
+    content: url(../Images/ColorIcon.png);
     transform: translateY(0.5px);
 }
 
diff --git a/Source/WebInspectorUI/UserInterface/Views/TextEditor.css b/Source/WebInspectorUI/UserInterface/Views/TextEditor.css
@@ -104,7 +104,7 @@
 
     z-index: -1;
 
-    background-image: image-set(url(../Images/InstructionPointer.png) 1x, url(../Images/InstructionPointer@2x.png) 2x);
+    background-image: url(../Images/InstructionPointer.png);
     background-size: 9px 100%;
     background-repeat: no-repeat;
 }

Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,7 @@`
`62`	`62`	`width: 20px;`
`63`	`63`	`height: 26px;`
`64`	`64`
`65`		`- background-image: image-set(url(../Images/GradientStop.png) 1x, url(../Images/GradientStop@2x.png) 2x);`
	`65`	`+ background-image: url(../Images/GradientStop.png);`
`66`	`66`
`67`	`67`	`transition: opacity 350ms;`
`68`	`68`	`}`
`@@ -73,7 +73,7 @@`
`73`	`73`	`}`
`74`	`74`
`75`	`75`	`.gradient-slider-knob.selected {`
`76`		`- background-image: image-set(url(../Images/GradientStopSelected.png) 1x, url(../Images/GradientStopSelected@2x.png) 2x);`
	`76`	`+ background-image: url(../Images/GradientStopSelected.png);`
`77`	`77`	`}`
`78`	`78`
`79`	`79`	`.gradient-slider-knob.detaching {`
Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,7 @@`
`58`	`58`	`width: 15px;`
`59`	`59`	`height: 13px;`
`60`	`60`
`61`		`- content: image-set(url(../Images/HoverMenuButton.png) 1x, url(../Images/HoverMenuButton@2x.png) 2x);`
	`61`	`+ content: url(../Images/HoverMenuButton.png);`
`62`	`62`	`transform: translateY(-1px);`
`63`	`63`	`}`
`64`	`64`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@`
`34`	`34`	`top: -5px;`
`35`	`35`	`width: 14px;`
`36`	`36`	`height: 17px;`
`37`		`- content: image-set(url(../Images/SliderThumb.png) 1x, url(../Images/SliderThumb@2x.png) 2x);`
	`37`	`+ content: url(../Images/SliderThumb.png);`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`body[dir=ltr] .slider > img {`
`@@ -48,7 +48,7 @@ body[dir=rtl] .slider > img {`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`.slider > img.dragging {`
`51`		`- content: image-set(url(../Images/SliderThumbPressed.png) 1x, url(../Images/SliderThumbPressed@2x.png) 2x);`
	`51`	`+ content: url(../Images/SliderThumbPressed.png);`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`.slider:focus {`
Original file line number	Diff line number	Diff line change
`@@ -183,7 +183,7 @@`
`183`	`183`	`.hover-menu.color > img {`
`184`	`184`	`width: 16px;`
`185`	`185`	`height: 16px;`
`186`		`- content: image-set(url(../Images/ColorIcon.png) 1x, url(../Images/ColorIcon@2x.png) 2x);`
	`186`	`+ content: url(../Images/ColorIcon.png);`
`187`	`187`	`transform: translateY(0.5px);`
`188`	`188`	`}`
`189`	`189`
Original file line number	Diff line number	Diff line change
`@@ -104,7 +104,7 @@`
`104`	`104`
`105`	`105`	`z-index: -1;`
`106`	`106`
`107`		`- background-image: image-set(url(../Images/InstructionPointer.png) 1x, url(../Images/InstructionPointer@2x.png) 2x);`
	`107`	`+ background-image: url(../Images/InstructionPointer.png);`
`108`	`108`	`background-size: 9px 100%;`
`109`	`109`	`background-repeat: no-repeat;`
`110`	`110`	`}`