Bug 913722 - Last project remains displayed after deleting. r=ochameau

browser/devtools/app-manager/content/projects.js

@@ -171,8 +171,34 @@ let UI = {
          });
   },
 
-  remove: function(location) {
-    AppProjects.remove(location);
+  remove: function(location, event) {
+    if (event) {
+      // We don't want the "click" event to be propagated to the project item.
+      // That would trigger `selectProject()`.
+      event.stopPropagation();
+    }
+
+    let item = document.getElementById(location);
+
+    let toSelect = document.querySelector(".project-item.selected");
+    toSelect = toSelect ? toSelect.id : "";
+
+    if (toSelect == location) {
+      toSelect = null;
+      let sibling;
+      if (item.previousElementSibling) {
+        sibling = item.previousElementSibling;
+      } else {
+        sibling = item.nextElementSibling;
+      }
+      if (sibling && !!AppProjects.get(sibling.id)) {
+        toSelect = sibling.id;
+      }
+    }
+
+    AppProjects.remove(location).then(() => {
+      this.selectProject(toSelect);
+    });
   },
 
   _getProjectManifestURL: function (project) {
@@ -326,15 +352,20 @@ let UI = {
         break;
       }
     }
-    if (idx == projects.length) {
-      // Not found
-      return;
-    }
 
     let oldButton = document.querySelector(".project-item.selected");
     if (oldButton) {
       oldButton.classList.remove("selected");
     }
+
+    if (idx == projects.length) {
+      // Not found. Empty lense.
+      let lense = document.querySelector("#lense");
+      lense.setAttribute("template-for", '{"path":"","childSelector":""}');
+      this.template._processFor(lense);
+      return;
+    }
+
     let button = document.getElementById(location);
     button.classList.add("selected");
 

browser/devtools/app-manager/content/projects.xhtml

@@ -39,7 +39,7 @@
     <div class="project-item-status" template='{"type":"attribute","path":"validationStatus","name":"status"}'></div>
     <img class="project-item-icon" template='{"type":"attribute","path":"icon","name":"src"}' />
     <div class="project-item-meta">
-      <div class="button-remove" onclick="UI.remove(this.dataset.location)" template='{"type":"attribute","path":"location","name":"data-location"}' title="&projects.removeAppFromList;"></div>
+      <div class="button-remove" onclick="UI.remove(this.dataset.location, event)" template='{"type":"attribute","path":"location","name":"data-location"}' title="&projects.removeAppFromList;"></div>
       <strong template='{"type":"textContent","path":"name"}'></strong>
       <span class="project-item-type" template='{"type":"textContent","path":"type"}'></span>
       <p class="project-item-description" template='{"type":"textContent","path":"manifest.description"}'></p>

browser/devtools/app-manager/content/template.js

@@ -331,10 +331,18 @@ Template.prototype = {
           !("childSelector" in json)) {
         throw new Error("missing property");
       }
+
       if (rootPath) {
         json.path = rootPath + "." + json.path;
       }
 
+      if (!json.path) {
+        // Nothing to show.
+        this._unregisterNodes(e.querySelectorAll("[template]"));
+        e.innerHTML = "";
+        return;
+      }
+
       let templateParent = this._doc.querySelector(json.childSelector);
       if (!templateParent) {
         throw new Error("can't find child");

browser/devtools/app-manager/test/test_template.html

@@ -14,14 +14,16 @@
     <span template='{"type":"textContent","path":"title"}'></span>
     <span template='{"type":"attribute","name":"title","path":"title"}'></span>
     <span template='{"type":"localizedContent","paths":["foo2.foo_l10n","foo2.bar_l10n"],"property":"foo2"}'></span>
-    <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template"}'></div>
+    <div template-for='{"path":"mop","childSelector":"#template-for"}'></div>
+    <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template-loop"}'></div>
   </div>
 
   <div id="ref0">
     <span template='{"type":"textContent","path":"title"}'>ttt</span>
     <span title="ttt" template='{"type":"attribute","name":"title","path":"title"}'></span>
     <span template='{"type":"localizedContent","paths":["foo2.foo_l10n","foo2.bar_l10n"],"property":"foo2"}'>foo2:foo_l10n/bar_l10n</span>
-    <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template"}'>
+    <div template-for='{"path":"mop","childSelector":"#template-for"}'><span template='{"type":"textContent","path":"name","rootPath":"mop."}'>meh</span></div>
+    <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template-loop"}'>
       <div>
         <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.0."}'>xx0</span>
         <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.0."}'>a</span>
@@ -40,7 +42,8 @@
     <span template='{"type":"textContent","path":"title"}'>xxx</span>
     <span title="xxx" template='{"type":"attribute","name":"title","path":"title"}'></span>
     <span template='{"type":"localizedContent","paths":["foo2.foo_l10n","foo2.bar_l10n"],"property":"foo2"}'>foo2:foo2_l10n/bar_l10n</span>
-    <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template"}'>
+    <div template-for='{"path":"mop","childSelector":"#template-for"}'><span template='{"type":"textContent","path":"name","rootPath":"mop."}'>meh2</span></div>
+    <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template-loop"}'>
       <div>
         <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.0."}'>xx0</span>
         <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.0."}'>a</span>
@@ -58,7 +61,8 @@
     <span template='{"type":"textContent","path":"title"}'>xxx</span>
     <span title="xxx" template='{"type":"attribute","name":"title","path":"title"}'></span>
     <span template='{"type":"localizedContent","paths":["foo2.foo_l10n","foo2.bar_l10n"],"property":"foo2"}'>foo2:yyy/zzz</span>
-    <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template"}'>
+    <div template-for='{"path":"","childSelector":"#template-for"}'></div>
+    <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template-loop"}'>
       <div>
         <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.0."}'>xx0</span>
         <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.0."}'>a</span>
@@ -76,7 +80,8 @@
     <span template='{"type":"textContent","path":"title"}'>xxx</span>
     <span title="xxx" template='{"type":"attribute","name":"title","path":"title"}'></span>
     <span template='{"type":"localizedContent","paths":["foo2.foo_l10n","foo2.bar_l10n"],"property":"foo2"}'>foo2:yyy/zzz</span>
-    <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template"}'>
+    <div template-for='{"path":"","childSelector":"#template-for"}'></div>
+    <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template-loop"}'>
       <div>
         <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.0."}'>xx0</span>
         <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.0."}'>a</span>
@@ -109,7 +114,8 @@
     <span template='{"type":"textContent","path":"title"}'>xxx</span>
     <span title="xxx" template='{"type":"attribute","name":"title","path":"title"}'></span>
     <span template='{"type":"localizedContent","paths":["foo2.foo_l10n","foo2.bar_l10n"],"property":"foo2"}'>foo2:yyy/zzz</span>
-    <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template"}'>
+    <div template-for='{"path":"","childSelector":"#template-for"}'></div>
+    <div template-loop='{"arrayPath":"foo1.bar1","childSelector":"#template-loop"}'>
       <div>
         <span template='{"type":"textContent","path":"idx","rootPath":"foo1.bar1.0."}'>xx0</span>
         <span template='{"type":"textContent","path":"a","rootPath":"foo1.bar1.0."}'>a</span>
@@ -135,7 +141,7 @@
 
 
 
-  <template id="template">
+  <template id="template-loop">
     <div>
       <span template='{"type":"textContent","path":"idx"}'></span>
       <span template='{"type":"textContent","path":"a"}'></span>
@@ -143,6 +149,10 @@
     </div>
   </template>
 
+  <template id="template-for">
+  <span template='{"type":"textContent","path":"name"}'></span>
+  </template>
+
   <script type="application/javascript;version=1.8" src="chrome://browser/content/devtools/app-manager/template.js"></script>
   <script type="application/javascript;version=1.8">
     SimpleTest.waitForExplicitFinish();
@@ -155,6 +165,9 @@
 
     let data = {
       title: "ttt",
+      mop: {
+        name: "meh",
+      },
       foo1: {
         bar1: [
           {idx: "xx0", a: "a", b: "b"},
@@ -178,6 +191,7 @@
         exec: function() {
           store.object.title = "xxx";
           store.object.foo2.foo_l10n = "foo2_l10n";
+          store.object.mop.name = "meh2";
         },
         reference: document.querySelector("#ref1")
       },
@@ -187,6 +201,9 @@
             foo_l10n: "yyy",
             bar_l10n: "zzz",
           }
+          let forElt = document.querySelector("#root > [template-for]");
+          forElt.setAttribute("template-for", '{"path":"","childSelector":"#template-for"}');
+          t._processFor(forElt);
         },
         reference: document.querySelector("#ref2")
       },