Bug 1255630 - add experimental badge to wasm sources r=bgrins

devtools/client/debugger/content/views/sources-view.js

@@ -241,6 +241,18 @@ SourcesView.prototype = Heritage.extend(WidgetMethods, {
     contents.setAttribute("flex", "1");
     contents.setAttribute("tooltiptext", unicodeUrl);
 
+    if (aSource.introductionType === "wasm") {
+      const wasm = document.createElement("box");
+      wasm.className = "dbg-wasm-item";
+      const icon = document.createElement("box");
+      icon.setAttribute("tooltiptext", L10N.getStr("experimental"));
+      icon.className = "icon";
+      wasm.appendChild(icon);
+      wasm.appendChild(contents);
+
+      contents = wasm;
+    }
+
     // If the source is blackboxed, apply the appropriate style.
     if (gThreadClient.source(aSource).isBlackBoxed) {
       contents.classList.add("black-boxed");

devtools/client/locales/en-US/debugger.properties

@@ -330,3 +330,5 @@ variablesViewUninitialized=(uninitialized)
 variablesViewMissingArgs=(unavailable)
 
 anonymousSourcesLabel=Anonymous Sources
+
+experimental=This is an experimental feature

devtools/client/themes/debugger.css

@@ -29,6 +29,20 @@
   padding: 2px 0px;
 }
 
+.dbg-wasm-item .icon {
+  display: block;
+  background-image: url(chrome://devtools/skin/images/webconsole.svg);
+  background-repeat: no-repeat;
+  background-size: 72px 60px;
+  /* show warning icon */
+  background-position: -24px -24px;
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  margin-inline-start: -15px;
+  margin-top: 3px;
+}
+
 .dbg-breakpoint-line {
   font-weight: 600;
 }