Support adjusting dropdowndiv default colours through CSS (#3469)

* Support setting the dropdown theme default colours through CSS. Update dark theme.

core/css.js

@@ -176,6 +176,8 @@ Blockly.Css.CONTENT = [
     'z-index: 1000;',
     'display: none;',
     'border: 1px solid;',
+    'border-color: #dadce0;',
+    'background-color: #fff;',
     'border-radius: 2px;',
     'padding: 4px;',
     'box-shadow: 0px 0px 3px 1px rgba(0,0,0,.3);',

core/dropdowndiv.js

@@ -99,20 +99,6 @@ Blockly.DropDownDiv.PADDING_Y = 16;
  */
 Blockly.DropDownDiv.ANIMATION_TIME = 0.25;
 
-/**
- * The default dropdown div border colour.
- * @type {string}
- * @const
- */
-Blockly.DropDownDiv.DEFAULT_DROPDOWN_BORDER_COLOUR = '#dadce0';
-
-/**
- * The default dropdown div colour.
- * @type {string}
- * @const
- */
-Blockly.DropDownDiv.DEFAULT_DROPDOWN_COLOUR = '#fff';
-
 /**
  * Timer for animation out, to be cleared if we need to immediately hide
  * without disrupting new shows.
@@ -152,8 +138,6 @@ Blockly.DropDownDiv.createDom = function() {
   }
   var div = document.createElement('div');
   div.className = 'blocklyDropDownDiv';
-  div.style.backgroundColor = Blockly.DropDownDiv.DEFAULT_DROPDOWN_COLOUR;
-  div.style.borderColor = Blockly.DropDownDiv.DEFAULT_DROPDOWN_BORDER_COLOUR;
   document.body.appendChild(div);
   /**
    * The div element.
@@ -657,8 +641,8 @@ Blockly.DropDownDiv.hideWithoutAnimation = function() {
   div.style.top = '';
   div.style.opacity = 0;
   div.style.display = 'none';
-  div.style.backgroundColor = Blockly.DropDownDiv.DEFAULT_DROPDOWN_COLOUR;
-  div.style.borderColor = Blockly.DropDownDiv.DEFAULT_DROPDOWN_BORDER_COLOUR;
+  div.style.backgroundColor = '';
+  div.style.borderColor = '';
 
   if (Blockly.DropDownDiv.onHide_) {
     Blockly.DropDownDiv.onHide_();

core/theme/dark.js

@@ -130,11 +130,36 @@ Blockly.Themes.Dark.setComponentStyle('scrollbarOpacity', 0.4);
 
 /**
  * CSS for the dark theme.
+ * This registers CSS that is specific to this theme. It does so by prepending a
+ * ``.dark-theme`` selector before every CSS rule that we wish to override by
+ * this theme.
  */
-Blockly.Css.register([
-  /* eslint-disable indent */
-  '.dark-theme .blocklyTreeRow:not(.blocklyTreeSelected):hover {',
-    'background-color: #2a2d2e;',
-  '}',
-  /* eslint-enable indent */
-]);
+(function() {
+  var selector = '.dark-theme';
+  Blockly.Css.register([
+    /* eslint-disable indent */
+    // Toolbox hover
+    selector + ' .blocklyTreeRow:not(.blocklyTreeSelected):hover {',
+      'background-color: #2a2d2e;',
+    '}',
+    // Dropdown and Widget div.
+    selector + '.blocklyWidgetDiv .goog-menu, ',
+    selector + '.blocklyDropDownDiv {',
+      'background-color: #3c3c3c;',
+    '}',
+    selector + '.blocklyDropDownDiv {',
+      'border-color: #565656;',
+    '}',
+    selector + '.blocklyWidgetDiv .goog-menuitem-content, ',
+    selector + '.blocklyDropDownDiv .goog-menuitem-content {',
+      'color: #f0f0f0;',
+    '}',
+    selector + '.blocklyWidgetDiv .goog-menuitem-disabled',
+    ' .goog-menuitem-content,',
+    selector + '.blocklyDropDownDiv .goog-menuitem-disabled',
+    ' .goog-menuitem-content {',
+      'color: #8a8a8a !important;',
+    '}',
+    /* eslint-enable indent */
+  ]);
+})();

core/theme_manager.js

@@ -122,6 +122,8 @@ Blockly.ThemeManager.prototype.setTheme = function(theme) {
       element.style[propertyName] = style || '';
     }
   }
+
+  Blockly.hideChaff();
 };
 
 /**

tests/mocha/theme_test.js

@@ -136,6 +136,7 @@ suite('Theme', function() {
     blockA.styleName_ = 'styleOne';
 
     var stub = sinon.stub(Blockly, "getMainWorkspace").returns(workspace);
+    var hideStub = sinon.stub(Blockly, "hideChaff");
 
     workspace.setTheme(blockStyles);
 
@@ -153,6 +154,7 @@ suite('Theme', function() {
     undefineThemeTestBlocks();
 
     stub.restore();
+    hideStub.restore();
   });
 
   suite('Validate block styles', function() {