Bug 694954 - [highlighter] [infobar] If a node is not visible anymore, the infobar should point to the direction of the node; r=rcampbell
authorPaul Rouget <paul@mozilla.com>
Wed, 07 Dec 2011 17:22:12 +0100
changeset 84713 bb8833c7cbf9e0b35393154cce50dbfe702dbca4
parent 84712 594b1a6f6a978c15fc24794b89418c71c57c0de1
child 84714 4977e7769af83fdceaad9ccbf859392c4a1e80fd
push id805
push userakeybl@mozilla.com
push dateWed, 01 Feb 2012 18:17:35 +0000
treeherdermozilla-aurora@6fb3bf232436 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcampbell
bugs694954
milestone12.0a1
Bug 694954 - [highlighter] [infobar] If a node is not visible anymore, the infobar should point to the direction of the node; r=rcampbell
browser/devtools/highlighter/inspector.jsm
browser/devtools/highlighter/test/browser_inspector_infobar.js
--- a/browser/devtools/highlighter/inspector.jsm
+++ b/browser/devtools/highlighter/inspector.jsm
@@ -513,20 +513,33 @@ Highlighter.prototype = {
     }
   },
 
   /**
    * Move the Infobar to the right place in the highlighter.
    */
   moveInfobar: function Highlighter_moveInfobar()
   {
-    let rect = this._highlightRect;
-    if (rect && this._highlighting) {
+    if (this._highlightRect) {
       let winHeight = this.win.innerHeight * this.zoom;
       let winWidth = this.win.innerWidth * this.zoom;
+
+      let rect = {top: this._highlightRect.top,
+                  left: this._highlightRect.left,
+                  width: this._highlightRect.width,
+                  height: this._highlightRect.height};
+
+      rect.top = Math.max(rect.top, 0);
+      rect.left = Math.max(rect.left, 0);
+      rect.width = Math.max(rect.width, 0);
+      rect.height = Math.max(rect.height, 0);
+
+      rect.top = Math.min(rect.top, winHeight);
+      rect.left = Math.min(rect.left, winWidth);
+
       this.nodeInfo.container.removeAttribute("disabled");
       // Can the bar be above the node?
       if (rect.top < this.nodeInfo.barHeight) {
         // No. Can we move the toolbar under the node?
         if (rect.top + rect.height +
             this.nodeInfo.barHeight > winHeight) {
           // No. Let's move it inside.
           this.nodeInfo.container.style.top = rect.top + "px";
--- a/browser/devtools/highlighter/test/browser_inspector_infobar.js
+++ b/browser/devtools/highlighter/test/browser_inspector_infobar.js
@@ -12,28 +12,29 @@ function test()
 
   gBrowser.selectedTab = gBrowser.addTab();
   gBrowser.selectedBrowser.addEventListener("load", function onload() {
     gBrowser.selectedBrowser.removeEventListener("load", onload, true);
     doc = content.document;
     waitForFocus(setupInfobarTest, content);
   }, true);
 
-  let style = "body{width:100%;height: 100%} div {position: absolute;height: 100px;width: 500px}#bottom {bottom: 0px}#vertical {height: 100%}";
-  let html = "<style>" + style + "</style><div id=vertical></div><div id=top class='class1 class2'></div><div id=bottom></div>"
+  let style = "body{width:100%;height: 100%} div {position: absolute;height: 100px;width: 500px}#bottom {bottom: 0px}#vertical {height: 100%}#farbottom{bottom: -200px}";
+  let html = "<style>" + style + "</style><div id=vertical></div><div id=top class='class1 class2'></div><div id=bottom></div><div id=farbottom></div>"
 
   content.location = "data:text/html," + encodeURIComponent(html);
 
   function setupInfobarTest()
   {
     nodes = [
       {node: doc.querySelector("#top"), position: "bottom", tag: "DIV", id: "#top", classes: ".class1 .class2"},
       {node: doc.querySelector("#vertical"), position: "overlap", tag: "DIV", id: "#vertical", classes: ""},
       {node: doc.querySelector("#bottom"), position: "top", tag: "DIV", id: "#bottom", classes: ""},
       {node: doc.querySelector("body"), position: "overlap", tag: "BODY", id: "", classes: ""},
+      {node: doc.querySelector("#farbottom"), position: "top", tag: "DIV", id: "#farbottom", classes: ""},
     ]
 
     for (let i = 0; i < nodes.length; i++) {
       ok(nodes[i].node, "node " + i + " found");
     }
 
     Services.obs.addObserver(runTests,
       InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
@@ -42,41 +43,38 @@ function test()
 
   function runTests()
   {
     Services.obs.removeObserver(runTests,
       InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
 
     cursor = 0;
     executeSoon(function() {
-      Services.obs.addObserver(nodeSelected,
-        InspectorUI.INSPECTOR_NOTIFICATIONS.HIGHLIGHTING, false);
-
       InspectorUI.inspectNode(nodes[0].node);
+      nodeSelected();
     });
   }
 
   function nodeSelected()
   {
     executeSoon(function() {
       performTest();
       cursor++;
       if (cursor >= nodes.length) {
 
-        Services.obs.removeObserver(nodeSelected,
-          InspectorUI.INSPECTOR_NOTIFICATIONS.HIGHLIGHTING);
         Services.obs.addObserver(finishUp,
           InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
 
         executeSoon(function() {
           InspectorUI.closeInspectorUI();
         });
       } else {
         let node = nodes[cursor].node;
         InspectorUI.inspectNode(node);
+        nodeSelected();
       }
     });
   }
 
   function performTest()
   {
     let container = document.getElementById("highlighter-nodeinfobar-container");
     is(container.getAttribute("position"), nodes[cursor].position, "node " + cursor + ": position matches.");