build: Downgrade less (#3982)

Downgrade less to v3.  v4 is failing on macOS for some reason.  See
less/less.js#3693

This also makes some less/CSS changes that are useful for future
upgrades:

 - wrap all calculations in calc(), which is required in less v4
 - remove unneeded @transparent variable

Finally, this fixes an erroneous error message that said "extern
generation failed" instead of "CSS compilation failed".

Closes #3981

Author: joeyparrish

build/compiler.py

@@ -287,7 +287,7 @@ def compile(self, force=False):
     cmd_line = lessc + less_options + [self.main_source_file, self.output]
 
     if shakaBuildHelpers.execute_get_code(cmd_line) != 0:
-      logging.error('Externs generation failed')
+      logging.error('CSS compilation failed')
       return False
 
     # We need to prepend the license header to the compiled CSS.

package-lock.json

@@ -43,7 +43,7 @@
     "karma-sourcemap-loader": "^0.3.8",
     "karma-spec-reporter": "^0.0.33",
     "karma-webdriver-launcher": "^1.0.8",
-    "less": "^4.1.2",
+    "less": "^3.13.1",
     "less-plugin-clean-css": "^1.5.1",
     "material-design-lite": "^1.3.0",
     "mux.js": "^5.14.1",

package.json

@@ -82,7 +82,7 @@
    * That divided by 2 is margin on one side, so we take that, and move the
    * button from its normal position to the right by that percentage.
    */
-  right: (100 - @bottom-controls-width) / 2 * -1;
+  right: calc((100 - @bottom-controls-width) / 2 * -1);
   display: flex;
   flex-direction: row;
   margin: 0;

ui/less/ad_controls.less

@@ -26,7 +26,7 @@
    *
    * Based on tips from https://stackoverflow.com/a/12925343 */
   box-sizing: border-box;
-  padding: @play-button-size-percentage / 2;
+  padding: calc(@play-button-size-percentage / 2);
   width: 0;
   height: 0;
 

ui/less/buttons.less

@@ -6,8 +6,6 @@
 
 /* All of the top-level containers into which various visible features go. */
 
-@transparent: rgba(0, 0, 0, 0);
-
 /* A container for the entire video + controls combo.  This is the auto-setup
  * div which we populate. */
 .shaka-video-container {
@@ -277,7 +275,7 @@
   .show-when-controls-shown();
 
   /* A black gradient at the bottom, behind the controls, but only so high. */
-  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0, @transparent 15%);
+  background: linear-gradient(to top, black 0, transparent 15%);
 }
 
 .shaka-text-container {
@@ -348,7 +346,7 @@
 
   margin: 0;
   box-sizing: border-box;
-  padding: @spinner-size-percentage / 2;
+  padding: calc(@spinner-size-percentage / 2);
   width: 0;
   height: 0;
 

ui/less/containers.less

@@ -39,7 +39,7 @@
   .overlay-parent();
 
   /* Vertical margins to occupy the same space as the thumb. */
-  margin: (@thumb-size - @track-height)/2 6px;
+  margin: calc((@thumb-size - @track-height) / 2) 6px;
 
   /* Smaller height to contain the background for the virtual track. */
   height: @track-height;
@@ -104,7 +104,7 @@
 
   /* Position the top of the range element so that it is centered on the
    * container. Note that the container is actually smaller than the thumb. */
-  top: (@track-height - @thumb-size) / 2;
+  top: calc((@track-height - @thumb-size) / 2);
 
   /* Make sure clicking at the very top of the bar still takes effect and is not
    * confused with clicking the video to play/pause it. */

ui/less/range_elements.less

@@ -48,7 +48,7 @@
 
       /* Override .material-icons-round text styling */
       font-family: Roboto-Regular, Roboto, sans-serif;
-      line-height: @material-icons-width / 2;
+      line-height: calc(@material-icons-width / 2);
       white-space: nowrap;
       font-size: 13px;
 
@@ -60,10 +60,10 @@
 
       /* Positioning */
       position: absolute;
-      bottom: @material-icons-width + 5px;
+      bottom: calc(@material-icons-width + 5px);
 
       /* Left attribute is set to half of the width of the parent button */
-      left: @material-icons-width / 2;
+      left: calc(@material-icons-width / 2);
 
       /* The tooltip is also translated 50% to appear centered */
       .translateX(-0.5);