17 files changed, 361 insertions, 675 deletions

diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css
index 7ee1251529..bc3d63e6b9 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -158,7 +158,7 @@ select { width: auto; }
 .project-name .label > a { color: #fff; font-weight: normal; }
 
 /* Remove bottom margin for forms inside modal dialogs */
-#dependencies_modal_form { margin-bottom: 0px; }
+#dependencies-modal-form { margin-bottom: 0px; }
 
 /* Configuration styles */
 .icon-trash { color: #B94A48; font-size: 16px; padding-left: 5px; }
diff --git a/bitbake/lib/toaster/toastergui/static/html/layer_deps_modal.html b/bitbake/lib/toaster/toastergui/static/html/layer_deps_modal.html
new file mode 100644
index 0000000000..e1dba4358d
--- /dev/null
+++ b/bitbake/lib/toaster/toastergui/static/html/layer_deps_modal.html
@@ -0,0 +1,17 @@
+<div id="dependencies-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="false">
+  <form id="dependencies-modal-form">
+    <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
+      <h3><span id="title"></span> dependencies</h3>
+    </div>
+    <div class="modal-body">
+      <p id="body-text"> <strong id="layer-name"></strong> depends on some layers that are not added to your project. Select the ones you want to add:</p>
+      <ul class="unstyled" id="dependencies-list">
+      </ul>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-primary" type="submit">Add layers</button>
+      <button class="btn" type="reset" data-dismiss="modal">Cancel</button>
+    </div>
+  </form>
+</div>
diff --git a/bitbake/lib/toaster/toastergui/static/js/importlayer.js b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
index ec1cc19e90..875cc342b8 100644
--- a/bitbake/lib/toaster/toastergui/static/js/importlayer.js
+++ b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
@@ -117,10 +117,10 @@ function importLayerPageInit (ctx) {
       var body = "<strong>"+layer.name+"</strong>'s dependencies ("+
         depNames.join(", ")+"</span>) require some layers that are not added to your project. Select the ones you want to add:</p>";
 
-      show_layer_deps_modal(ctx.projectId, layer, depDepsArray, title, body, false, function(selected){
-        /* Add the accepted dependencies to the allDeps array */
-        if (selected.length > 0){
-          allDeps = allDeps.concat (selected);
+      showLayerDepsModal(layer, depDepsArray, title, body, false, function(layerObsList){
+        /* Add the accepted layer dependencies' ids to the allDeps array */
+        for (var key in layerObsList){
+          allDeps.push(layerObsList[key].id);
         }
         import_and_add ();
       });
diff --git a/bitbake/lib/toaster/toastergui/static/js/layerBtn.js b/bitbake/lib/toaster/toastergui/static/js/layerBtn.js
new file mode 100644
index 0000000000..6a1d4b1606
--- /dev/null
+++ b/bitbake/lib/toaster/toastergui/static/js/layerBtn.js
@@ -0,0 +1,63 @@
+"use strict";
+
+function layerBtnsInit(ctx) {
+
+    $(".layerbtn").click(function (){
+    var layerObj = $(this).data("layer");
+    var add = ($(this).data('directive') === "add");
+    var thisBtn = $(this);
+
+    libtoaster.addRmLayer(layerObj, add, function (layerDepsList){
+      var alertMsg = $("#alert-msg");
+      alertMsg.html(libtoaster.makeLayerAddRmAlertMsg(layerObj, layerDepsList, add));
+
+      /* In-cell notification */
+      var notification = $('<div id="temp-inline-notify" style="display: none; font-size: 11px; line-height: 1.3;" class="tooltip-inner"></div>');
+      thisBtn.parent().append(notification);
+
+      if (add){
+        if (layerDepsList.length > 0)
+          notification.text(String(layerDepsList.length + 1) + " layers added");
+        else
+          notification.text("1 layer added");
+
+        var layerBtnsFadeOut = $();
+        var layerExistsBtnFadeIn = $();
+
+        layerBtnsFadeOut = layerBtnsFadeOut.add(".layer-add-" + layerObj.id);
+        layerExistsBtnFadeIn = layerExistsBtnFadeIn.add(".layer-exists-" + layerObj.id);
+
+        for (var i in layerDepsList){
+          layerBtnsFadeOut = layerBtnsFadeOut.add(".layer-add-" + layerDepsList[i].id);
+          layerExistsBtnFadeIn = layerExistsBtnFadeIn.add(".layer-exists-" + layerDepsList[i].id);
+        }
+
+        layerBtnsFadeOut.fadeOut().promise().done(function(){
+          notification.fadeIn().delay(500).fadeOut(function(){
+            /* Fade in the buttons */
+            layerExistsBtnFadeIn.fadeIn();
+            notification.remove();
+          });
+        });
+      } else {
+        notification.text("1 layer deleted");
+        /* Deleting a layer we only hanlde the one button */
+        thisBtn.fadeOut(function(){
+          notification.fadeIn().delay(500).fadeOut(function(){
+            $(".layer-add-" + layerObj.id).fadeIn();
+            notification.remove();
+          });
+        });
+      }
+
+      $("#zone1alerts, #zone1alerts *").fadeIn();
+    });
+  });
+
+  /* Setup the initial state of the buttons */
+
+  for (var i in ctx.projectLayers){
+      $(".layer-exists-" + ctx.projectLayers[i]).show();
+      $(".layer-add-" + ctx.projectLayers[i]).hide();
+  }
+}
diff --git a/bitbake/lib/toaster/toastergui/static/js/layerDepsModal.js b/bitbake/lib/toaster/toastergui/static/js/layerDepsModal.js
new file mode 100644
index 0000000000..825f9dccd5
--- /dev/null
+++ b/bitbake/lib/toaster/toastergui/static/js/layerDepsModal.js
@@ -0,0 +1,90 @@
+/*
+ * layer: Object representing the parent layer { id: .. name: ... url }
+ * dependencies: array of dependency layer objects { id: .. name: ..}
+ * title: optional override for title
+ * body: optional override for body
+ * addToProject: Whether to add layers to project on accept
+ * successAdd: function to run on success
+ */
+function showLayerDepsModal(layer, dependencies, title, body, addToProject, successAdd) {
+
+  if ($("#dependencies-modal").length === 0) {
+    $.get(libtoaster.ctx.htmlUrl + "/layer_deps_modal.html", function(html){
+      $("body").append(html);
+      setupModal();
+    });
+  } else {
+    setupModal();
+  }
+
+  function setupModal(){
+
+    if (title) {
+      $('#dependencies-modal #title').text(title);
+    } else {
+      $('#dependencies-modal #title').text(layer.name);
+    }
+
+    if (body) {
+      $("#dependencies-modal #body-text").html(body);
+    } else {
+      $("#dependencies-modal #layer-name").text(layer.name);
+    }
+
+    var deplistHtml = "";
+    for (var i = 0; i < dependencies.length; i++) {
+      deplistHtml += "<li><label class=\"checkbox\"><input name=\"dependencies\" value=\"";
+      deplistHtml += dependencies[i].id;
+      deplistHtml +="\" type=\"checkbox\" checked=\"checked\"/>";
+      deplistHtml += dependencies[i].name;
+      deplistHtml += "</label></li>";
+    }
+    $('#dependencies-list').html(deplistHtml);
+
+    $("#dependencies-modal").data("deps", dependencies);
+
+    $('#dependencies-modal').modal('show');
+
+    /* Discard the old submission function */
+    $("#dependencies-modal-form").unbind('submit');
+
+    $("#dependencies-modal-form").submit(function (e) {
+      e.preventDefault();
+      var selectedLayerIds = [];
+      var selectedLayers = [];
+
+      $("input[name='dependencies']:checked").each(function () {
+        selectedLayerIds.push(parseInt($(this).val()));
+      });
+
+      /* -1 is a special dummy Id which we use when the layer isn't yet in the
+       * system, normally we would add the current layer to the selection.
+       */
+      if (layer.id != -1)
+        selectedLayerIds.push(layer.id);
+
+      /* Find the selected layer objects from our original list */
+      for (var i = 0; i < selectedLayerIds.length; i++) {
+        for (var j = 0; j < dependencies.length; j++) {
+          if (dependencies[j].id == selectedLayerIds[i]) {
+            selectedLayers.push(dependencies[j]);
+          }
+        }
+      }
+
+      if (addToProject) {
+        libtoaster.editCurrentProject({ 'layerAdd': selectedLayerIds.join(",") }, function () {
+          if (successAdd) {
+            successAdd(selectedLayers);
+          }
+        }, function () {
+          console.warn("Adding layers to project failed");
+        });
+      } else {
+        successAdd(selectedLayers);
+      }
+
+      $('#dependencies-modal').modal('hide');
+    });
+  }
+}
diff --git a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
index 3b6423f7f4..3c4d632563 100644
--- a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
+++ b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
@@ -41,7 +41,7 @@ function layerDetailsPageInit (ctx) {
     });
   }
 
-  function layerRemoveClick() {
+  function layerDepRemoveClick() {
     var toRemove = $(this).parent().data('layer-id');
     var layerDepItem = $(this);
 
@@ -71,7 +71,7 @@ function layerDetailsPageInit (ctx) {
 
       /* Connect up the tash icon */
       var trashItem = newLayerDep.children("span");
-      trashItem.click(layerRemoveClick);
+      trashItem.click(layerDepRemoveClick);
 
       layerDepsList.append(newLayerDep);
       /* Clear the current selection */
@@ -129,13 +129,6 @@ function layerDetailsPageInit (ctx) {
     window.location.replace(libtoaster.ctx.projectPageUrl);
   });
 
-  $(".select-machine-btn").click(function(){
-    var data =  { machineName : $(this).data('machine-name') };
-    libtoaster.editCurrentProject(data, function (){
-        window.location.replace(libtoaster.ctx.projectPageUrl+"#/machineselected");
-    }, null);
-  });
-
   function defaultAddBtnText(){
       var text = " Add the "+ctx.layerVersion.name+" layer to your project";
       addRmLayerBtn.text(text);
@@ -196,9 +189,6 @@ function layerDetailsPageInit (ctx) {
    */
   function setLayerInCurrentPrj(added, depsList) {
     ctx.layerVersion.inCurrentPrj = added;
-    var alertMsg = $("#alert-msg");
-    /* Reset alert message */
-    alertMsg.text("");
 
     if (added){
       /* enable and switch all the button states */
@@ -209,25 +199,6 @@ function layerDetailsPageInit (ctx) {
       addRmLayerBtn.text(" Delete the "+ctx.layerVersion.name+" layer from your project");
       addRmLayerBtn.prepend("<span class=\"icon-trash\"></span>");
 
-      if (depsList) {
-        alertMsg.append("You have added <strong>"+(depsList.length+1)+"</strong> layers to <a id=\"project-affected-name\"></a>: <span id=\"layer-affected-name\"></span> and its dependencies ");
-
-        /* Build the layer deps list */
-        depsList.map(function(layer, i){
-          var link = $("<a></a>");
-
-          link.attr("href", layer.layerdetailurl);
-          link.text(layer.name);
-          link.tooltip({title: layer.tooltip});
-
-          if (i != 0)
-            alertMsg.append(", ");
-
-          alertMsg.append(link);
-        });
-      } else {
-        alertMsg.append("You have added <strong>1</strong> layer to <a id=\"project-affected-name\"></a>: <span id=\"layer-affected-name\"></span>");
-      }
     } else {
       /* disable and switch all the button states */
       $(".build-target-btn").attr("disabled","disabled");
@@ -250,53 +221,24 @@ function layerDetailsPageInit (ctx) {
           defaultAddBtnText();
           break;
       }
-
-      alertMsg.append("You have deleted <strong>1</strong> layer from <a id=\"project-affected-name\"></a>: <strong id=\"layer-affected-name\"></strong>");
     }
-
-    alertMsg.children("#layer-affected-name").text(ctx.layerVersion.name);
-    alertMsg.children("#project-affected-name").text(libtoaster.ctx.projectName);
-    alertMsg.children("#project-affected-name").attr("href", libtoaster.ctx.projectPageUrl);
-    $("#alert-area").show();
   }
 
   $("#dismiss-alert").click(function(){ $(this).parent().hide() });
 
   /* Add or remove this layer from the project */
   addRmLayerBtn.click(function() {
-    var directive = $(this).data('directive');
-
-    if (directive == 'add') {
-      /* If adding get the deps for this layer */
-      libtoaster.getLayerDepsForProject(libtoaster.ctx.projectId, ctx.layerVersion.id, function (data) {
-        /* got result for dependencies */
-        if (data.list.length == 0){
-          var editData = { layerAdd : ctx.layerVersion.id };
-          libtoaster.editCurrentProject(editData, function() {
-              setLayerInCurrentPrj(true);
-          });
-          return;
-        } else {
-          /* The add deps will include this layer so no need to add it
-           * separately.
-           */
-          show_layer_deps_modal(ctx.projectId, ctx.layerVersion, data.list, null, null, true, function () {
-            /* Success add deps and layer */
-            setLayerInCurrentPrj(true, data.list);
-          });
-        }
-      }, null);
-    } else if (directive == 'remove') {
-      var editData = { layerDel : ctx.layerVersion.id };
-
-      libtoaster.editCurrentProject(editData, function () {
-          /* Success removed layer */
-           //window.location.reload();
-           setLayerInCurrentPrj(false);
-        }, function () {
-          console.warn ("Removing layer from project failed");
-      });
-    }
+
+    var add = ($(this).data('directive') === "add")
+
+    libtoaster.addRmLayer(ctx.layerVersion, add, function (layersList){
+      var alertMsg = $("#alert-msg");
+      alertMsg.html(libtoaster.makeLayerAddRmAlertMsg(ctx.layerVersion, layersList, add));
+
+      setLayerInCurrentPrj(add, layersList);
+
+      $("#alert-area").show();
+    });
   });
 
   /* Handler for all of the Change buttons */
@@ -395,8 +337,12 @@ function layerDetailsPageInit (ctx) {
     $(this).parents("form").submit();
   });
 
+  $(".select-machine-btn").click(function(e){
+    if ($(this).attr("disabled") === "disabled")
+      e.preventDefault();
+  });
 
-  layerDepsList.find(".icon-trash").click(layerRemoveClick);
+  layerDepsList.find(".icon-trash").click(layerDepRemoveClick);
   layerDepsList.find("a").tooltip();
   $(".icon-trash").tooltip();
   $(".commit").tooltip();
diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
index 9257f735db..1cf1693dde 100644
--- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
+++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
@@ -114,7 +114,7 @@ var libtoaster = (function (){
         error: function (_data) {
           console.warn("Call failed");
           console.warn(_data);
-          if (onfail) onfail(data);
+          if (onfail) onfail(_data);
         }
     });
   }
@@ -219,6 +219,76 @@ var libtoaster = (function (){
     return str;
   }
 
+  function _addRmLayer(layerObj, add, doneCb){
+    if (add === true) {
+      /* If adding get the deps for this layer */
+      libtoaster.getLayerDepsForProject(libtoaster.ctx.projectId,
+        layerObj.id,
+        function (layers) {
+
+        /* got result for dependencies */
+        if (layers.list.length === 0){
+          var editData = { layerAdd : layerObj.id };
+          libtoaster.editCurrentProject(editData, function() {
+            doneCb([]);
+          });
+          return;
+        } else {
+          try {
+            showLayerDepsModal(layerObj, layers.list, null, null,  true, doneCb);
+          }  catch (e) {
+            $.getScript(libtoaster.ctx.jsUrl + "layerDepsModal.js", function(){
+              showLayerDepsModal(layerObj, layers.list, null, null,  true, doneCb);
+            }, function(){
+              console.warn("Failed to load layerDepsModal");
+            });
+          }
+        }
+      }, null);
+    } else if (add === false) {
+      var editData = { layerDel : layerObj.id };
+
+      libtoaster.editCurrentProject(editData, function () {
+        doneCb([]);
+      }, function () {
+        console.warn ("Removing layer from project failed");
+        doneCb(null);
+      });
+    }
+  }
+
+  function _makeLayerAddRmAlertMsg(layer, layerDepsList, add) {
+    var alertMsg;
+
+    if (layerDepsList.length > 0 && add === true) {
+      alertMsg = $("<span>You have added <strong>"+(layerDepsList.length+1)+"</strong> layers to <a id=\"project-affected-name\"></a>: <span id=\"layer-affected-name\"></span> and its dependencies </span>");
+
+      /* Build the layer deps list */
+      layerDepsList.map(function(layer, i){
+        var link = $("<a></a>");
+
+        link.attr("href", layer.layerdetailurl);
+        link.text(layer.name);
+        link.tooltip({title: layer.tooltip});
+
+        if (i !== 0)
+          alertMsg.append(", ");
+
+        alertMsg.append(link);
+      });
+    } else if (layerDepsList.length === 0 && add === true) {
+      alertMsg = $("<span>You have added <strong>1</strong> layer to <a id=\"project-affected-name\"></a>: <span id=\"layer-affected-name\"></span></span>");
+    } else if (add === false) {
+      alertMsg = $("<span>You have deleted <strong>1</strong> layer from <a id=\"project-affected-name\"></a>: <strong id=\"layer-affected-name\"></strong></span>");
+    }
+
+    alertMsg.children("#layer-affected-name").text(layer.name);
+    alertMsg.children("#project-affected-name").text(libtoaster.ctx.projectName);
+    alertMsg.children("#project-affected-name").attr("href", libtoaster.ctx.projectPageUrl);
+
+    return alertMsg.html();
+  }
+
 
   return {
     reload_params : reload_params,
@@ -231,6 +301,8 @@ var libtoaster = (function (){
     debug: false,
     parseUrlParams : _parseUrlParams,
     dumpsUrlParams : _dumpsUrlParams,
+    addRmLayer : _addRmLayer,
+    makeLayerAddRmAlertMsg : _makeLayerAddRmAlertMsg,
   };
 })();
 
@@ -394,6 +466,11 @@ $(document).ready(function() {
         $('#collapse-exceptions').toggleClass('in');
     });
 
+
+    $("#hide-alert").click(function(){
+      $(this).parent().fadeOut();
+    });
+
     //show warnings section when requested from the previous page
     if (location.href.search('#warnings') > -1) {
         $('#collapse-warnings').addClass('in');
diff --git a/bitbake/lib/toaster/toastergui/static/js/machines.js b/bitbake/lib/toaster/toastergui/static/js/machines.js
deleted file mode 100644
index fbcafc26b5..0000000000
--- a/bitbake/lib/toaster/toastergui/static/js/machines.js
+++ /dev/null
@@ -1,95 +0,0 @@
-"use strict"
-
-function machinesPageInit (ctx) {
-
-
-  function setLayerInCurrentPrj(addLayerBtn, depsList){
-    var alertMsg = $("#alert-msg");
-
-    $(".select-or-add").each(function(){
-      /* If we have added a layer it may also enable other machines so search
-       * for other machines that have that layer and enable them */
-      var selectMachineBtn = $(this).children(".select-machine-btn");
-      var otherAddLayerBtns = $(this).children(".add-layer");
-
-      if (addLayerBtn.data('layer-version-id') ==  selectMachineBtn.data('layer-version-id')) {
-        otherAddLayerBtns.fadeOut(function(){
-          selectMachineBtn.fadeIn();
-        });
-      }
-    });
-
-    /* Reset alert message */
-    alertMsg.text("");
-
-    /* If we have added layer dependencies */
-    if (depsList) {
-      alertMsg.append("You have added <strong>"+(depsList.length+1)+"</strong> layers to <a id=\"project-affected-name\"></a>: <span id=\"layer-affected-name\"></span> and its dependencies ");
-
-        /* Build the layer deps list */
-        depsList.map(function(layer, i){
-          var link = $("<a></a>");
-
-          link.attr("href", layer.layerdetailurl);
-          link.text(layer.name);
-          link.tooltip({title: layer.tooltip});
-
-          if (i != 0)
-            alertMsg.append(", ");
-
-          alertMsg.append(link);
-        });
-    } else {
-      alertMsg.append("You have added <strong>1</strong> layer to <a id=\"project-affected-name\"></a>: <strong id=\"layer-affected-name\"></strong>");
-    }
-
-    var layerName = addLayerBtn.data('layer-name');
-    alertMsg.children("#layer-affected-name").text(layerName);
-    alertMsg.children("#project-affected-name").text(libtoaster.ctx.projectName).attr('href', libtoaster.ctx.projectPageUrl);
-
-    $("#alert-area").show();
-  }
-
-  $("#dismiss-alert").click(function(){ $(this).parent().hide() });
-
-  /* Add or remove this layer from the project */
-  $(".add-layer").click(function() {
-      var btn = $(this);
-      /* If adding get the deps for this layer */
-      var layer = {
-        id : $(this).data('layer-version-id'),
-        name : $(this).data('layer-name'),
-      };
-
-      libtoaster.getLayerDepsForProject(libtoaster.ctx.projectId, layer.id, function (data) {
-        /* got result for dependencies */
-        if (data.list.length == 0){
-          var editData = { layerAdd : layer.id };
-          libtoaster.editCurrentProject(editData, function() {
-              setLayerInCurrentPrj(btn);
-          });
-          return;
-        } else {
-          /* The add deps will include this layer so no need to add it
-           * separately.
-           */
-          show_layer_deps_modal(ctx.projectId, layer, data.list, null, null, true, function () {
-            /* Success add deps and layer */
-            setLayerInCurrentPrj(btn, data.list);
-          });
-        }
-      }, null);
-  });
-
-  $(".select-machine-btn").click(function(){
-    var data =  { machineName : $(this).data('machine-name') };
-    libtoaster.editCurrentProject(data, function (){
-        window.location.replace(libtoaster.ctx.projectPageUrl+"#/machineselected");
-    }, null);
-  });
-
-  $("#show-all-btn").click(function(){
-    $("#search").val("")
-    $("#searchform").submit();
-  });
-}
diff --git a/bitbake/lib/toaster/toastergui/static/js/projectapp.js b/bitbake/lib/toaster/toastergui/static/js/projectapp.js
index 1fd4a54f57..43436c5e69 100644
--- a/bitbake/lib/toaster/toastergui/static/js/projectapp.js
+++ b/bitbake/lib/toaster/toastergui/static/js/projectapp.js
@@ -713,15 +713,6 @@ projectApp.controller('prjCtrl', function($scope, $modal, $http, $interval, $loc
                     "\">select recipes</a> you want to build.", "alert-success");
         });
 
-        _cmdExecuteWithParam("/machineselected", function () {
-            $scope.displayAlert($scope.zone2alerts, "You have changed the machine to: <strong>" + $scope.machine.name + "</strong>", "alert-info");
-            var machineDistro = angular.element("#machine-distro");
-
-            angular.element("html, body").animate({ scrollTop: machineDistro.position().top }, 700).promise().done(function() {
-              $animate.addClass(machineDistro, "machines-highlight");
-            });
-        });
-
         _cmdExecuteWithParam("/layerimported", function () {
           var imported = $cookieStore.get("layer-imported-alert");
           var text;
diff --git a/bitbake/lib/toaster/toastergui/templates/base.html b/bitbake/lib/toaster/toastergui/templates/base.html
index 25933a1e90..47bbbbda14 100644
--- a/bitbake/lib/toaster/toastergui/templates/base.html
+++ b/bitbake/lib/toaster/toastergui/templates/base.html
@@ -30,6 +30,8 @@
   libtoaster.ctx = {
     projectId : {{project.id|default:'undefined'}},
     xhrDataTypeaheadUrl : "{% url 'xhr_datatypeahead' %}",
+    jsUrl : "{% static 'js/' %}",
+    htmlUrl : "{% static 'html/' %}",
     {% if project.id %}
     xhrProjectEditUrl : "{% url 'xhr_projectedit' project.id %}",
     projectPageUrl : "{% url 'project' project.id %}",
diff --git a/bitbake/lib/toaster/toastergui/templates/importlayer.html b/bitbake/lib/toaster/toastergui/templates/importlayer.html
index c92b5d8b24..ed03b2eea7 100644
--- a/bitbake/lib/toaster/toastergui/templates/importlayer.html
+++ b/bitbake/lib/toaster/toastergui/templates/importlayer.html
@@ -9,6 +9,7 @@
 
 {% block projectinfomain %}
 
+                  <script src="{% static 'js/layerDepsModal.js' %}"></script>
                   <script src="{% static 'js/importlayer.js' %}"></script>
                   <script>
                     $(document).ready(function (){
@@ -30,7 +31,6 @@
                     <h1>Import layer</h1>
                 </div>
 
-                {% include "layers_dep_modal.html" %}
                 <form>
         {% if project %}
                     <span class="help-block" style="padding-left:19px;">The layer you are importing must be compatible with <strong>{{project.release.description}}</strong>, which is the release you are using in this project.</span>
diff --git a/bitbake/lib/toaster/toastergui/templates/layerdetails.html b/bitbake/lib/toaster/toastergui/templates/layerdetails.html
index 435bf04e42..4b27d052d0 100644
--- a/bitbake/lib/toaster/toastergui/templates/layerdetails.html
+++ b/bitbake/lib/toaster/toastergui/templates/layerdetails.html
@@ -58,7 +58,6 @@
 </style>
 {% endif %}
 
-{% include "layers_dep_modal.html" %}
   <div class="row-fluid span11">
       <div class="page-header">
         <h1>{{layerversion.layer.name}} <small class="commit"
@@ -404,7 +403,8 @@
                           {% endif %}
                         </td>
                         <td>{{machine.description}}</td>
-                        <td><button class="btn btn-block select-machine-btn" data-machine-name="{{machine.name}}" {% if layer_in_project == 0 %}disabled="disabled"{% endif %}}>Select machine</button></td>
+                        <td>
+                          <a href="{% url 'project' project.id %}#/machineselect={{machine.name}}" class="btn btn-block select-machine-btn" {% if layer_in_project == 0 %}disabled="disabled"{% endif %}>Select machine</a>
                       </tr>
                       {% endfor %}
                     </tbody>
diff --git a/bitbake/lib/toaster/toastergui/templates/layers.html b/bitbake/lib/toaster/toastergui/templates/layers.html
index 24d31c770e..2367e7c33a 100644
--- a/bitbake/lib/toaster/toastergui/templates/layers.html
+++ b/bitbake/lib/toaster/toastergui/templates/layers.html
@@ -1,12 +1,32 @@
 {% extends "baseprojectpage.html" %}
 {% load projecttags %}
 {% load humanize %}
+{% load static %}
 
 {% block localbreadcrumb %}
 <li>All compatible layers</li>
 {% endblock %}
 
+
 {% block projectinfomain %}
+
+<script src="{% static 'js/layerBtn.js' %}"></script>
+<script>
+
+  $(document).ready(function (){
+    var ctx = {
+      projectLayers : {{projectlayerset}},
+    };
+
+    try {
+      layerBtnsInit(ctx);
+    } catch (e) {
+      document.write("Sorry, An error has occurred loading this page");
+      console.warn(e);
+    }
+  });
+</script>
+
                 <div class="page-header">
                     <h1>
   {% if request.GET.filter and objects.paginator.count >  0 or request.GET.search and objects.paginator.count >  0 %}
@@ -20,7 +40,11 @@
                      </h1>
                 </div>
 
-  <div id="zone1alerts">
+  <div id="zone1alerts" style="display:none">
+    <div class="alert alert-info lead">
+      <button type="button" class="close" id="hide-alert">&times;</button>
+      <span id="alert-msg"></span>
+    </div>
   </div>
 
 {% if objects.paginator.count == 0 %}
@@ -89,12 +113,11 @@
             </td>
             {% if project %}
             <td class="add-del-layers" value="{{o.pk}}">
-                <div id="layer-tooltip-{{o.pk}}" style="display: none; font-size: 11px; line-height: 1.3;" class="tooltip-inner">layer was modified</div>
-                <button id="layer-del-{{o.pk}}" class="btn btn-danger btn-block remove-layer layerbtn" style="display:none;" onclick="layerDel({{o.pk}}, '{{o.layer.name}}', '{%url 'layerdetails' o.pk%}')" >
+                <button class="btn btn-danger btn-block layer-exists-{{o.pk}} layerbtn" style="display:none;" data-layer='{ "id": {{o.pk}}, "name":  "{{o.layer.name}}", "url": "{%url 'layerdetails' o.pk%}"}' data-directive="remove" >
                     <i class="icon-trash"></i>
                     Delete layer
                 </button>
-                <button id="layer-add-{{o.pk}}" class="btn btn-block layerbtn" style="display:none;" onclick="layerAdd({{o.pk}}, '{{o.layer.name}}', '{%url 'layerdetails' o.pk%}')" title="layer added">
+                <button class="btn btn-block layer-add-{{o.pk}} layerbtn" data-layer='{ "id": {{o.pk}}, "name":  "{{o.layer.name}}", "url": "{%url 'layerdetails' o.pk%}"}' data-directive="add">
                     <i class="icon-plus"></i>
                     Add layer
                 </button>
@@ -104,198 +127,6 @@
     {% endfor %}
 {% include "basetable_bottom.html" %}
 
-    <!-- Modals -->
-
-    <!-- 'Layer dependencies modal' -->
-    <div id="dependencies_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
-        <form id="dependencies_modal_form">
-        <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
-            <h3><span class="layer-name"></span> dependencies</h3>
-        </div>
-        <div class="modal-body">
-            <p><strong class="layer-name"></strong> depends on some layers that are not added to your project. Select the ones you want to add:</p>
-            <ul class="unstyled" id="dependencies_list">
-            </ul>
-        </div>
-        <div class="modal-footer">
-            <button class="btn btn-primary" type="submit">Add layers</button>
-            <button class="btn" type="reset" data-dismiss="modal">Cancel</button>
-        </div>
-        </form>
-    </div>
-
-{% if project %}
-<script>
-
-var tooltipUpdateText;
-
-/* ensure csrf cookie exists {% csrf_token %} */
-function _makeXHREditCall(data, onsuccess, onfail) {
-    $.ajax( {
-        type: "POST",
-        url: "{% url 'xhr_projectedit' project.id %}",
-        data: data,
-        headers: { 'X-CSRFToken' : $.cookie('csrftoken')},
-        success: function (_data) {
-            if (_data.error != "ok") {
-                console.warn(_data.error);
-            } else {
-                updateButtons(_data.layers.map(function (e) {return e.id}));
-                if (onsuccess != undefined) onsuccess(_data);
-            }
-        },
-        error: function (_data) {
-            console.warn("Call failed");
-            console.warn(_data);
-        }
-    });
-}
-
-function updateLayerCountLabels (amount) {
-    /* Update the filter labels */
-    var countLabel = $("#projectlayer__project\\:{{project.id}}_count");
-    countLabel.text(Number(countLabel.text())+amount);
-
-    var countLabelRemaining = $("#projectlayer__project\\:NOT{{project.id}}_count");
-    countLabelRemaining.text(Number(countLabelRemaining.text())-amount);
-}
-
-
-function layerDel(layerId, layerName, layerURL) {
-    tooltipUpdateText = "1 layer deleted";
-    _makeXHREditCall({ 'layerDel': layerId }, function () {
-        updateLayerCountLabels(-1);
-
-        show_alert("You have deleted <strong>1</strong> layer from <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: <a href=\""+layerURL+"\">" + layerName +"</a>");
-    });
-}
-
-function show_alert(text, cls) {
-    $("#zone1alerts").html("<div class=\"alert alert-info lead\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>" + text + "</div>");
-}
-
-function show_dependencies_modal(layerId, layerName, layerURL, dependencies) {
-    // update layer name
-    $('.layer-name').text(layerName);
-    var deplistHtml = "";
-    for (var i = 0; i < dependencies.length; i++) {
-        deplistHtml += "<li><label class=\"checkbox\"><input name=\"dependencies\" value=\""
-        deplistHtml += dependencies[i].id;
-        deplistHtml +="\" type=\"checkbox\" checked=\"checked\"/>";
-        deplistHtml += dependencies[i].name;
-        deplistHtml += "</label></li>";
-    }
-    $('#dependencies_list').html(deplistHtml);
-
-    var selected = [layerId];
-    var layer_link_list = "<a href='"+layerURL+"'>"+layerName+"</a>";
-
-    $("#dependencies_modal_form").submit(function (e) {
-        e.preventDefault();
-        $("input[name='dependencies']:checked").map(function () { selected.push(parseInt($(this).val()))});
-        if (selected.length > 1) {
-            tooltipUpdateText = "" + selected.length + " layers added";
-        } else {
-            tooltipUpdateText = "1 layer added";
-        }
-
-        for (var i = 0; i < selected.length; i++) {
-            for (var j = 0; j < dependencies.length; j++) {
-                if (dependencies[j].id == selected[i]) {
-                    layer_link_list+= ", <a href='"+dependencies[j].layerdetailurl+"'>"+dependencies[j].name+"</a>"
-                    break;
-                }
-            }
-        }
-
-        $('#dependencies_modal').modal('hide');
-
-    {% if project %}
-        _makeXHREditCall({ 'layerAdd': selected.join(",") }, function () {
-            show_alert("You have added <strong>"+selected.length+"</strong> layers to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: " + layer_link_list);
-        });
-    {% endif %}
-
-    });
-    $('#dependencies_modal').modal('show');
-}
-
-
-function layerAdd(layerId, layerName, layerURL) {
-    $.ajax({
-        url: '{% url "xhr_datatypeahead" %}',
-        data: {'type': 'layerdeps','value':layerId},
-        success: function(_data) {
-                if (_data.error != "ok") {
-                    console.warn(_data.error);
-                } else {
-                    updateLayerCountLabels(_data.list.length+1);
-
-                    if (_data.list.length > 0) {
-                        show_dependencies_modal(layerId, layerName, layerURL, _data.list);
-                    }
-                    else {
-                        tooltipUpdateText = "1 layer added";
-                        _makeXHREditCall({ 'layerAdd': layerId }, function () {
-        show_alert("You have added <strong>1</strong> layer to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: <a href=\""+layerURL+"\">" + layerName +"</a>");
-                        });
-                    }
-                }
-            }
-    })
-}
-
-function button_set(id, state) {
-    var tohide, toshow;
-    if (state == "add")
-    {
-        tohide = "#layer-del-";
-        toshow = "#layer-add-";
-    }
-    else if (state == "del")
-    {
-        tohide = "#layer-add-";
-        toshow = "#layer-del-";
-    }
-
-
-    var previouslyvisible = $(tohide + id).is(":visible");
-    if (previouslyvisible) {
-        $(tohide + id).fadeOut( function() {
-            $("#layer-tooltip-" + id).text(tooltipUpdateText);
-            $("#layer-tooltip-" + id).fadeIn().delay(2000).fadeOut(function(){
-                $(toshow + id).delay(300).fadeIn();
-            });
-        });
-    } else {
-        $(tohide + id).hide();
-        $("#layer-tooltip-" + id).hide();
-        $(toshow + id).show();
-    }
-};
-
-function updateButtons(projectLayers) {
-    var displayedLayers = [];
-    $(".add-del-layers").map(function () { displayedLayers.push(parseInt($(this).attr('value')))});
-    for (var i=0; i < displayedLayers.length; i++) {
-        if (projectLayers.indexOf(displayedLayers[i]) > -1) {
-            button_set(displayedLayers[i], "del");
-        }
-        else {
-            button_set(displayedLayers[i], "add");
-        }
-    }
-}
-
-$(document).ready(function (){
-    $('.layerbtn').tooltip({ trigger: 'manual' });
-    updateButtons({{projectlayerset}});
-});
-
-</script>
-{%endif%}
-
 {%endif%}
 
 {% endblock %}
diff --git a/bitbake/lib/toaster/toastergui/templates/layers_dep_modal.html b/bitbake/lib/toaster/toastergui/templates/layers_dep_modal.html
deleted file mode 100644
index ea49af50d8..0000000000
--- a/bitbake/lib/toaster/toastergui/templates/layers_dep_modal.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<!-- 'Layer dependencies modal' -->
-    <div id="dependencies_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
-        <form id="dependencies_modal_form">
-        <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
-            <h3><span id="title"></span> dependencies</h3>
-        </div>
-        <div class="modal-body">
-            <p id="body-text"> <strong id="layer-name"></strong> depends on some layers that are not added to your project. Select the ones you want to add:</p>
-            <ul class="unstyled" id="dependencies_list">
-            </ul>
-        </div>
-        <div class="modal-footer">
-            <button class="btn btn-primary" type="submit">Add layers</button>
-            <button class="btn" type="reset" data-dismiss="modal">Cancel</button>
-        </div>
-        </form>
-    </div>
-
-<script>
-  /*
-   * layer: Object representing the parent layer { id: .. name: ... url }
-   * dependencies: array of dependency layer objects { id: .. name: ..}
-   * title: optional override for title
-   * body: optional override for body
-   * addToProject: Whether to add layers to project on accept
-   * successAdd: function to run on success
-   */
-function show_layer_deps_modal(projectId, layer, dependencies, title, body, addToProject, successAdd) {
-
-    // update layer name
-    if (title) {
-      $('#dependencies_modal #title').text(title);
-    } else {
-      $('#dependencies_modal #title').text(layer.name);
-    }
-
-    if (body) {
-      $("#dependencies_modal #body-text").html(body);
-    } else {
-      $("#dependencies_modal #layer-name").text(layer.name);
-    }
-
-    var deplistHtml = "";
-    for (var i = 0; i < dependencies.length; i++) {
-      deplistHtml += "<li><label class=\"checkbox\"><input name=\"dependencies\" value=\"";
-        deplistHtml += dependencies[i].id;
-        deplistHtml +="\" type=\"checkbox\" checked=\"checked\"/>";
-        deplistHtml += dependencies[i].name;
-        deplistHtml += "</label></li>";
-    }
-    $('#dependencies_list').html(deplistHtml);
-
-    var selected = [];
-    /* -1 is a special dummy Id which we use when the layer isn't yet in the
-     * system, normally we would add the current layer to the selection.
-     */
-    if (layer.id != -1)
-      selected.push(layer.id);
-
-    var layer_link_list = "<a href='"+layer.url+"'>"+layer.name+"</a>";
-
-    $("#dependencies_modal_form").submit(function (e) {
-        e.preventDefault();
-        $("input[name='dependencies']:checked").map(function () { selected.push(parseInt($(this).val()))});
-        if (selected.length > 1) {
-            tooltipUpdateText = "" + selected.length + " layers added";
-        } else {
-            tooltipUpdateText = "1 layer added";
-        }
-
-        for (var i = 0; i < selected.length; i++) {
-            for (var j = 0; j < dependencies.length; j++) {
-                if (dependencies[j].id == selected[i]) {
-                    layer_link_list+= ", <a href='"+dependencies[j].layerdetailurl+"'>"+dependencies[j].name+"</a>"
-                    break;
-                }
-            }
-        }
-
-        $('#dependencies_modal').modal('hide');
-
-        if (addToProject) {
-          var editProjectUrl  = "{% url 'xhr_projectedit' project.id %}";
-          libtoaster.editProject(editProjectUrl, projectId, { 'layerAdd': selected.join(",") }, function () {
-            if (successAdd) {
-              successAdd(selected);
-            }
-          }, function () {
-            console.log ("Adding layers to project failed");
-          });
-        } else {
-          successAdd(selected);
-        }
-    });
-
-    $('#dependencies_modal').modal('show');
-}
-</script>
diff --git a/bitbake/lib/toaster/toastergui/templates/machines.html b/bitbake/lib/toaster/toastergui/templates/machines.html
index 64db0f9ca7..d116a45f3b 100644
--- a/bitbake/lib/toaster/toastergui/templates/machines.html
+++ b/bitbake/lib/toaster/toastergui/templates/machines.html
@@ -7,22 +7,23 @@
 {% endblock %}
 
 {% block projectinfomain %}
-<script src="{% static 'js/machines.js' %}"></script>
+
+<script src="{% static 'js/layerBtn.js' %}"></script>
 <script>
 
   $(document).ready(function (){
     var ctx = {
+      projectLayers : {{projectlayerset}},
     };
 
     try {
-      machinesPageInit(ctx);
+      layerBtnsInit(ctx);
     } catch (e) {
       document.write("Sorry, An error has occurred loading this page");
       console.warn(e);
     }
   });
 </script>
-{% include "layers_dep_modal.html" %}
 <div class="page-header">
   <h1>
     {% if request.GET.search or request.GET.filter %}
@@ -33,14 +34,17 @@
        {% endif %}
     {% else %}
 
-    All machines
+    All compatible machines
     <i class="icon-question-sign get-help heading-help" title="This page lists all the machines compatible with the current project that Toaster knows about. They include community-created targets suitable for use on top of OpenEmbedded Core and any targets you have imported"></i>
     {% endif %}
   </h1>
 </div>
-<div class="alert alert-info lead" id="alert-area" style="display:none">
-  <button type="button" class="close" id="dismiss-alert">&times;</button>
-  <span id="alert-msg"></span>
+
+<div id="zone1alerts" style="display:none">
+  <div class="alert alert-info lead">
+    <button type="button" class="close" id="hide-alert">&times;</button>
+    <span id="alert-msg"></span>
+  </div>
 </div>
 {% if objects.paginator.count == 0 %}
     {% if request.GET.search %}
@@ -68,19 +72,16 @@
     <td class="layer"><a href="{%url "layerdetails" o.layer_version.id %}">{{o.layer_version.layer.name}}</a></td>
     <td class="branch">{{o.layer_version.get_vcs_reference}}</td>
     <td class="machinefile"><code>/machine/conf/{{o.name}}.conf</code><a href="{{o.get_vcs_machine_file_link_url}}" target="_blank"><i class="icon-share get-info"></i></a></td>
-    <td class="select-or-add">
-      <a href="#" class="btn btn-block select-machine-btn" data-machine-name="{{o.name}}" data-layer-version-id="{{o.layer_version.id}}"
-          {%if o.layer_version.id not in project_layers %}style="display:none" {%endif%}  >Select machine</a>
-      <a  href="#" class="btn btn-block nopop add-layer" data-layer-version-id="{{o.layer_version.id}}" data-layer-name="{{o.layer_version.layer.name}}" {%if o.layer_version.id in project_layers %}style="display:none" {%endif%}
-          >
+    <td class="select-or-add" style="height: 32px;">
+      <a href="{% url 'project' project.id %}#/machineselect={{o.name}}" class="btn btn-block layer-exists-{{o.layer_version.id}}" style="margin-top: 5px; display:none">Select machine</a>
+      <button class="btn btn-block layerbtn layer-add-{{o.layer_version.id}}" data-layer='{ "id": {{o.layer_version.id}}, "name":  "{{o.layer_version.layer.name}}", "url": "{%url 'layerdetails' o.layer_version.id %}"}' data-directive="add">
         <i class="icon-plus"></i>
         Add layer
-        <i class="icon-question-sign get-help" title="To build this machine, you must first add the {{o.layer_version.layer.name}} layer to your project"></i>
-      </a>
+        <i title="" class="icon-question-sign get-help" data-original-title="To enable this machine, you must first add the {{o.layer_version.layer.name}} layer to your project"></i></i>
+     </button>
     </td>
   </tr>
   {% endfor %}
-
   {% include "basetable_bottom.html" %}
 {% endif %}
 
diff --git a/bitbake/lib/toaster/toastergui/templates/targets.html b/bitbake/lib/toaster/toastergui/templates/targets.html
index c27292095d..903e841ae5 100644
--- a/bitbake/lib/toaster/toastergui/templates/targets.html
+++ b/bitbake/lib/toaster/toastergui/templates/targets.html
@@ -1,14 +1,34 @@
 {% extends "baseprojectpage.html" %}
 {% load projecttags %}
 {% load humanize %}
+{% load static %}
 
 {% block localbreadcrumb %}
 <li>All compatible recipes</li>
 {% endblock %}
 
 {% block projectinfomain %}
-                <div class="page-header">
-                    <h1>
+
+<script src="{% static 'js/layerBtn.js' %}"></script>
+<script>
+
+  $(document).ready(function (){
+    var ctx = {
+      projectLayers : {{projectlayerset}},
+    };
+
+    try {
+      layerBtnsInit(ctx);
+    } catch (e) {
+      document.write("Sorry, An error has occurred loading this page");
+      console.warn(e);
+    }
+  });
+</script>
+
+
+<div class="page-header">
+  <h1>
   {% if request.GET.filter and objects.paginator.count >  0 or request.GET.search and objects.paginator.count >  0 %}
       {{objects.paginator.count}} recipe{{objects.paginator.count|pluralize}} found
   {% elif request.GET.filter and objects.paginator.count ==  0 or request.GET.search and objects.paginator.count == 0 %}
@@ -16,14 +36,16 @@
   {%else%}
       All compatible recipes
   {%endif%}
-                        <i class="icon-question-sign get-help heading-help" title="This page lists all the recipes compatible with the release selected for this project, which is {{project.release.description}}"></i>
-                     </h1>
-                </div>
-
-  <div id="zone1alerts">
-
+  <i class="icon-question-sign get-help heading-help" title="This page lists all the recipes compatible with the release selected for this project, which is {{project.release.description}}"></i>
+  </h1>
+</div>
+
+<div id="zone1alerts" style="display:none">
+  <div class="alert alert-info lead">
+    <button type="button" class="close" id="hide-alert">&times;</button>
+    <span id="alert-msg"></span>
   </div>
-
+</div>
 {% if objects.paginator.count == 0 %}
   {% if request.GET.filter or request.GET.search %}
   <div class="row-fluid">
@@ -75,17 +97,16 @@
             </a>
             {% endif %}
         </td>
-        <td class="add-layer" value="{{o.pk}}" layerversion_id="{{o.preffered_layerversion.pk}}">
-            <div id="layer-tooltip-{{o.pk}}" style="display: none; font-size: 11px; line-height: 1.3;" class="tooltip-inner">layer was modified</div>
-            <a href="{% url 'project' project.id %}#/targetbuild={{o.name}}" id="target-build-{{o.pk}}" class="btn btn-block remove-layer" style="display:none;" >
-                Build recipe
-            </a>
-            <a id="layer-add-{{o.pk}}" class="btn btn-block" style="display:none;" href="javascript:layerAdd({{o.preffered_layerversion.pk}}, '{{o.preffered_layerversion.layer.name}}', '{%url 'layerdetails' o.preffered_layerversion.pk%}', {{o.pk}})" >
-                <i class="icon-plus"></i>
-                Add layer
-                <i title="" class="icon-question-sign get-help" data-original-title="To build this target, you must first add the {{o.preffered_layerversion.layer.name}} layer to your project"></i>
-            </a>
-        </td>
+        <td class="add-layer" value="{{o.pk}}">
+          <a href="{% url 'project' project.id %}#/targetbuild={{o.name}}" class="btn btn-block layer-exists-{{o.preffered_layerversion.pk}}" style="display:none; margin-top: 5px;" >
+            Build recipe
+          </a>
+          <button class="btn btn-block layerbtn layer-add-{{o.preffered_layerversion.pk}}" data-layer='{ "id": {{o.preffered_layerversion.pk}}, "name":  "{{o.preffered_layerversion.layer.name}}", "url": "{%url 'layerdetails' o.preffered_layerversion.pk%}"}' data-directive="add">
+            <i class="icon-plus"></i>
+            Add layer
+            <i title="" class="icon-question-sign get-help" data-original-title="To build this target, you must first add the {{o.preffered_layerversion.layer.name}} layer to your project"></i></i>
+        </button>
+      </td>
     </tr>
     {% endfor %}
 {% include "basetable_bottom.html" %}
@@ -115,165 +136,6 @@
 
 {% if project %}
 <script>
-
-var tooltipUpdateText;
-
-/* ensure csrf cookie exists {% csrf_token %} */
-function _makeXHREditCall(data, onsuccess, onfail) {
-    $.ajax( {
-        type: "POST",
-        url: "{% url 'xhr_projectedit' project.id %}",
-        data: data,
-        headers: { 'X-CSRFToken' : $.cookie('csrftoken')},
-        success: function (_data) {
-            if (_data.error != "ok") {
-                console.warn(_data.error);
-            } else {
-                updateButtons(_data.layers.map(function (e) {return e.id}));
-                if (onsuccess != undefined) onsuccess(_data);
-            }
-        },
-        error: function (_data) {
-            console.warn("Call failed");
-            console.warn(_data);
-        }
-    });
-}
-
-function show_alert(text, cls) {
-    $("#zone1alerts").html("<div class=\"alert alert-info lead\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>" + text + "</div>");
-}
-
-
-function show_dependencies_modal(layerId, layerName, layerURL, dependencies) {
-    // update layer name
-    $('.layer-name').text(layerName);
-    var deplistHtml = "";
-    for (var i = 0; i < dependencies.length; i++) {
-        deplistHtml += "<li><label class=\"checkbox\"><input name=\"dependencies\" value=\""
-        deplistHtml += dependencies[i].id;
-        deplistHtml +="\" type=\"checkbox\" checked=\"checked\"/>";
-        deplistHtml += dependencies[i].name;
-        deplistHtml += "</label></li>";
-    }
-    $('#dependencies_list').html(deplistHtml);
-
-    var selected = [layerId];
-    var layer_link_list = undefined;
-
-    $("#dependencies_modal_form").submit(function (e) {
-        e.preventDefault();
-        $("input[name='dependencies']:checked").map(function () { selected.push(parseInt($(this).val()))});
-        layer_link_list = "<a href='"+layerURL+"'>"+layerName+"</a>";
-        if (selected.length > 1) {
-            tooltipUpdateText = "" + selected.length + " layers added";
-        } else {
-            tooltipUpdateText = "1 layer added";
-        }
-
-        for (var i = 0; i < selected.length; i++) {
-            for (var j = 0; j < dependencies.length; j++) {
-                if (dependencies[j].id == selected[i]) {
-                    layer_link_list+= ", <a href='"+dependencies[j].layerdetailurl+"'>"+dependencies[j].name+"</a>"
-                    break;
-                }
-            }
-        }
-
-        $('#dependencies_modal').modal('hide');
-
-    {% if project %}
-        _makeXHREditCall({ 'layerAdd': selected.join(",") }, function onXHRSuccess() {
-            show_alert("You have added <strong>"+selected.length+"</strong> layer(s) to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: " + layer_link_list);
-        });
-    {% endif %}
-
-    });
-    $('#dependencies_modal').modal('show');
-}
-
-function updateLayerCountLabels (amount) {
-    /* Update the filter labels */
-    var countLabel = $("#layer_version__projectlayer__project\\:{{project.id}}_count");
-    countLabel.text(Number(countLabel.text())+amount);
-
-    var countLabelRemaining = $("#layer_version__projectlayer__project\\:NOT{{project.id}}_count");
-    countLabelRemaining.text(Number(countLabelRemaining.text())-amount);
-}
-
-var pressedButton = undefined;
-
-function layerAdd(layerId, layerName, layerURL, pressedButtonId) {
-    pressedButton = pressedButtonId;
-    $.ajax({
-        url: '{% url "xhr_datatypeahead" %}',
-        data: {'type': 'layerdeps','value':layerId},
-        success: function(_data) {
-                if (_data.error != "ok") {
-                    console.warn(_data.error);
-                } else {
-                    updateLayerCountLabels(_data.list.length+1);
-
-                    if (_data.list.length > 0) {
-                        show_dependencies_modal(layerId, layerName, layerURL, _data.list);
-                    }
-                    else {
-                        tooltipUpdateText = "1 layer added";
-                        _makeXHREditCall({ 'layerAdd': layerId }, function () {
-        show_alert("You have added <strong>1</strong> layer to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: <a href=\""+layerURL+"\">" + layerName +"</a>");
-                        });
-                    }
-                }
-            }
-    })
-}
-
-function buttonSet(id, state) {
-    var tohide, toshow;
-    if (state == "add")
-    {
-        toshow = "#layer-add-";
-        tohide = "#target-build-";
-    }
-    else if (state == "build")
-    {
-        tohide = "#layer-add-";
-        toshow = "#target-build-";
-    }
-
-    var previouslyvisible = $(tohide + id).is(":visible");
-    if (previouslyvisible && id == pressedButton) {
-        $(tohide + id).fadeOut( function() {
-            $("#layer-tooltip-" + id).text(tooltipUpdateText);
-            $("#layer-tooltip-" + id).fadeIn().delay(2000).fadeOut(function(){
-                $(toshow + id).delay(300).fadeIn();
-            });
-        });
-    } else {
-        $(tohide + id).hide();
-        $("#layer-tooltip-" + id).hide();
-        $(toshow + id).show();
-    }
-};
-
-
-function updateButtons(projectLayers) {
-    var displayedLayers = [];
-    $(".add-layer").map(function () { displayedLayers.push( { "l": parseInt($(this).attr('layerversion_id')), "i": parseInt($(this).attr('value'))})});
-    for (var i=0; i < displayedLayers.length; i++) {
-        if (projectLayers.indexOf(displayedLayers[i].l) > -1) {
-            buttonSet(displayedLayers[i].i, "build");
-        }
-        else {
-            buttonSet(displayedLayers[i].i, "add");
-        }
-    }
-}
-
-$(document).ready(function (){
-    updateButtons({{projectlayerset}});
-});
-
 </script>
 {%endif%}
 
diff --git a/bitbake/lib/toaster/toastergui/views.py b/bitbake/lib/toaster/toastergui/views.py
index b5c4d87c56..7e90926559 100755
--- a/bitbake/lib/toaster/toastergui/views.py
+++ b/bitbake/lib/toaster/toastergui/views.py
@@ -2987,7 +2987,7 @@ if toastermain.settings.MANAGED:
 
         context = {
             'objects' : machine_info,
-            'project_layers' : project_layers,
+            'projectlayerset' : jsonfilter(map(lambda x: x.layercommit.id, prj.projectlayer_set.all())),
             'objectname' : "machines",
             'default_orderby' : 'name:+',