Bug 957634: Changed Tooltip's setTextContent function signature. Now Tooltip can contain a warning image 32x32 when isAlertTooltip passed = true; r=vp

browser/devtools/debugger/debugger-panes.js

@@ -1868,7 +1868,11 @@ VariableBubbleView.prototype = {
     if (VariablesView.isPrimitive({ value: objectActor })) {
       let className = VariablesView.getClass(objectActor);
       let textContent = VariablesView.getString(objectActor);
-      this._tooltip.setTextContent([textContent], className, "plain");
+      this._tooltip.setTextContent({
+        messages: [textContent],
+        messagesClass: className,
+        containerClass: "plain"
+      });
     } else {
       this._tooltip.setVariableContent(objectActor, {
         searchPlaceholder: L10N.getStr("emptyPropertiesFilterText"),

browser/devtools/debugger/debugger-toolbar.js

@@ -81,7 +81,8 @@ ToolbarView.prototype = {
    */
   showResumeWarning: function(aPausedUrl) {
     let label = L10N.getFormatStr("resumptionOrderPanelTitle", aPausedUrl);
-    this._resumeOrderTooltip.setTextContent([label]);
+    let defaultStyle = "default-tooltip-simple-text-colors";
+    this._resumeOrderTooltip.setTextContent({ messages: [label], isAlertTooltip: true });
     this._resumeOrderTooltip.show(this._resumeButton);
   },
 

browser/devtools/shadereditor/shadereditor.js

@@ -567,7 +567,7 @@ let ShadersEditorsView = {
 
     let tooltip = node._markerErrorsTooltip = new Tooltip(document);
     tooltip.defaultOffsetX = GUTTER_ERROR_PANEL_OFFSET_X;
-    tooltip.setTextContent(messages);
+    tooltip.setTextContent({ messages: messages });
     tooltip.startTogglingOnHover(node, () => true, GUTTER_ERROR_PANEL_DELAY);
   },
 

browser/devtools/shared/widgets/Tooltip.js

@@ -411,10 +411,12 @@ Tooltip.prototype = {
    *        A style class for the text messages.
    * @param {string} containerClass [optional]
    *        A style class for the text messages container.
+   * @param {boolean} isAlertTooltip [optional]
+   *        Pass true to add an alert image for your tooltip.
    */
-  setTextContent: function(messages,
-    messagesClass = "default-tooltip-simple-text-colors",
-    containerClass = "default-tooltip-simple-text-colors") {
+  setTextContent: function({ messages, messagesClass, containerClass, isAlertTooltip }) {
+    messagesClass = messagesClass || "default-tooltip-simple-text-colors";
+    containerClass = containerClass || "default-tooltip-simple-text-colors";
 
     let vbox = this.doc.createElement("vbox");
     vbox.className = "devtools-tooltip-simple-text-container " + containerClass;
@@ -428,7 +430,18 @@ Tooltip.prototype = {
       vbox.appendChild(description);
     }
 
-    this.content = vbox;
+    if (isAlertTooltip) {
+      let hbox = this.doc.createElement("hbox");
+      hbox.setAttribute("align", "start");
+
+      let alertImg = this.doc.createElement("image");
+      alertImg.className = "devtools-tooltip-alert-icon";
+      hbox.appendChild(alertImg);
+      hbox.appendChild(vbox);
+      this.content = hbox;
+    } else {
+      this.content = vbox;
+    }
   },
 
   /**
@@ -511,7 +524,7 @@ Tooltip.prototype = {
   setImageContent: function(imageUrl, options={}) {
     // Main container
     let vbox = this.doc.createElement("vbox");
-    vbox.setAttribute("align", "center")
+    vbox.setAttribute("align", "center");
 
     // Display the image
     let image = this.doc.createElement("image");

browser/themes/shared/devtools/common.css

@@ -202,6 +202,19 @@
   margin-bottom: -4px;
 }
 
+/* Tooltip: Alert Icon */
+
+.devtools-tooltip-alert-icon {
+  width: 32px;
+  height: 32px;
+  margin: 6px;
+  -moz-margin-end: 20px;
+}
+
+.devtools-tooltip-alert-icon {
+  list-style-image: url("chrome://global/skin/icons/warning-32.png");
+}
+
 /* Tooltip: Variables View */
 
 .devtools-tooltip-variables-view-box {