fix!: Redundant blockly non selectable #8328 (#8433)

* Remove redundant blocklyNonSelectable class and integrate non-selectability into existing classes

* Removed .gitpod file

* fix: remove redundant blocklyNonSelectable class and integrate non-selectability into existing classes https://github.com/google/blockly/issues/8328

* fix: remove redundant blocklyNonSelectable class and integrate non-selectability into existing classes #8328

* fix: remove redundant blocklyNonSelectable class and integrate non-selectability into existing classes #8328

* fix: remove redundant blocklyNonSelectable class and integrate non-selectability into existing classes #8328

* fix: remove redundant blocklyNonSelectable class and integrate non-selectability into existing classes #8328

* fix: remove redundant blocklyNonSelectable class and integrate non-selectability into existing classes

core/css.ts

@@ -80,12 +80,6 @@ let content = `
   touch-action: none;
 }
 
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
 .blocklyBlockCanvas.blocklyCanvasTransitioning,
 .blocklyBubbleCanvas.blocklyCanvasTransitioning {
   transition: transform .5s;
@@ -430,6 +424,9 @@ input[type=number] {
 }
 
 .blocklyWidgetDiv .blocklyMenu {
+  user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
   background: #fff;
   border: 1px solid transparent;
   box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
@@ -449,6 +446,9 @@ input[type=number] {
 }
 
 .blocklyDropDownDiv .blocklyMenu {
+  user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
   background: inherit;  /* Compatibility with gapi, reset from goog-menu */
   border: inherit;  /* Compatibility with gapi, reset from goog-menu */
   font: normal 13px "Helvetica Neue", Helvetica, sans-serif;

core/menu.ts

@@ -82,9 +82,10 @@ export class Menu {
    * @param container Element upon which to append this menu.
    * @returns The menu's root DOM element.
    */
+
   render(container: Element): HTMLDivElement {
     const element = document.createElement('div');
-    element.className = 'blocklyMenu blocklyNonSelectable';
+    element.className = 'blocklyMenu';
     element.tabIndex = 0;
     if (this.roleName) {
       aria.setRole(element, this.roleName);

core/toolbox/toolbox.ts

@@ -199,7 +199,6 @@ export class Toolbox
     const toolboxContainer = document.createElement('div');
     toolboxContainer.setAttribute('layout', this.isHorizontal() ? 'h' : 'v');
     dom.addClass(toolboxContainer, 'blocklyToolboxDiv');
-    dom.addClass(toolboxContainer, 'blocklyNonSelectable');
     toolboxContainer.setAttribute('dir', this.RTL ? 'RTL' : 'LTR');
     return toolboxContainer;
   }
@@ -1104,6 +1103,9 @@ Css.register(`
 
 /* Category tree in Toolbox. */
 .blocklyToolboxDiv {
+  user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
   background-color: #ddd;
   overflow-x: visible;
   overflow-y: auto;

tests/mocha/toolbox_test.js

@@ -47,10 +47,7 @@ suite('Toolbox', function () {
     test('Init called -> HtmlDiv is inserted before parent node', function () {
       const toolboxDiv = Blockly.common.getMainWorkspace().getInjectionDiv()
         .childNodes[0];
-      assert.equal(
-        toolboxDiv.className,
-        'blocklyToolboxDiv blocklyNonSelectable',
-      );
+      assert.equal(toolboxDiv.className, 'blocklyToolboxDiv');
     });
     test('Init called -> Toolbox is subscribed to background and foreground colour', function () {
       const themeManager = this.toolbox.workspace_.getThemeManager();