Show no themes support for respective extensions

app/assets/javascripts/app/directives/views/componentView.js

@@ -1,6 +1,6 @@
 class ComponentView {
 
-  constructor($rootScope, componentManager, desktopManager, $timeout) {
+  constructor($rootScope, componentManager, desktopManager, $timeout, themeManager) {
     this.restrict = "E";
     this.templateUrl = "directives/component-view.html";
     this.scope = {
@@ -8,10 +8,7 @@ class ComponentView {
       manualDealloc: "="
     };
 
-    this.$rootScope = $rootScope;
-    this.componentManager = componentManager;
     this.desktopManager = desktopManager;
-    this.timeout = $timeout;
   }
 
   link($scope, el, attrs, ctrl) {
@@ -30,9 +27,14 @@ class ComponentView {
     });
   }
 
-  controller($scope, $rootScope, $timeout, componentManager, desktopManager) {
+  controller($scope, $rootScope, $timeout, componentManager, desktopManager, themeManager) {
     'ngInject';
 
+    $scope.themeHandlerIdentifier = "component-view-" + Math.random();
+    componentManager.registerHandler({identifier: $scope.themeHandlerIdentifier, areas: ["themes"], activationHandler: (component) => {
+      $scope.reloadThemeStatus();
+    }});
+
     $scope.identifier = "component-view-" + Math.random();
 
     componentManager.registerHandler({
@@ -143,11 +145,36 @@ class ComponentView {
         $rootScope.$broadcast("reload-ext-data");
       }
 
+      $scope.reloadThemeStatus();
+
       $timeout(() => {
         $scope.reloading = false;
       }, 500)
     }
 
+    $scope.reloadThemeStatus = function() {
+      if(!$scope.component.acceptsThemes()) {
+        if(themeManager.hasActiveTheme()) {
+          if(!$scope.dismissedNoThemesMessage) {
+            $scope.showNoThemesMessage = true;
+          }
+        } else {
+          // Can be the case if we've just deactivated a theme
+          $scope.showNoThemesMessage = false;
+        }
+      }
+    }
+
+    $scope.noThemesMessageDismiss = function() {
+      $scope.showNoThemesMessage = false;
+      $scope.dismissedNoThemesMessage = true;
+    }
+
+    $scope.disableActiveTheme = function() {
+      themeManager.deactivateAllThemes();
+      $scope.noThemesMessageDismiss();
+    }
+
     $scope.getUrl = function() {
       var url = componentManager.urlForComponent($scope.component);
       $scope.component.runningLocally = (url == $scope.component.local_url);
@@ -155,6 +182,7 @@ class ComponentView {
     }
 
     $scope.destroy = function() {
+      componentManager.deregisterHandler($scope.themeHandlerIdentifier);
       componentManager.deregisterHandler($scope.identifier);
       if($scope.component && !$scope.manualDealloc) {
         componentManager.deactivateComponent($scope.component, true);

app/assets/javascripts/app/services/themeManager.js

@@ -22,6 +22,19 @@ class ThemeManager {
     }});
   }
 
+  hasActiveTheme() {
+    return this.componentManager.getActiveThemes().length > 0;
+  }
+
+  deactivateAllThemes() {
+    var activeThemes = this.componentManager.getActiveThemes();
+    for(var theme of activeThemes) {
+      if(theme) {
+        this.componentManager.deactivateComponent(theme);
+      }
+    }
+  }
+
   activateTheme(theme) {
     var url = this.componentManager.urlForComponent(theme);
     var link = document.createElement("link");