merge mozilla-inbound to mozilla-central. r=merge a=merge
authorSebastian Hengst <archaeopteryx@coole-files.de>
Sun, 03 Sep 2017 00:00:19 +0200
changeset 427954 f5d99e9f3d7bf19c8a222db97bedc924da27fd58
parent 427950 39e9a6b187a3f71f46d02af000ff8203abe4fe71 (current diff)
parent 427953 74b0ceebc6d142547b5c55c3d7b2550478c000c1 (diff)
child 427965 8040b9fc23d782ad2cf0ff3beda30d99faf75010
child 427968 367e87978050fe899cec312d700137f80baa074f
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmerge, merge
milestone57.0a1
first release with
nightly linux32
f5d99e9f3d7b / 57.0a1 / 20170902220453 / files
nightly linux64
f5d99e9f3d7b / 57.0a1 / 20170902220453 / files
nightly mac
f5d99e9f3d7b / 57.0a1 / 20170902220453 / files
nightly win32
f5d99e9f3d7b / 57.0a1 / 20170902220453 / files
nightly win64
f5d99e9f3d7b / 57.0a1 / 20170902220453 / files
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
releases
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
merge mozilla-inbound to mozilla-central. r=merge a=merge MozReview-Commit-ID: JSoz8HEv6SN
--- a/CLOBBER
+++ b/CLOBBER
@@ -17,9 +17,9 @@
 #
 # Modifying this file will now automatically clobber the buildbot machines \o/
 #
 
 # Are you updating CLOBBER because you think it's needed for your WebIDL
 # changes to stick? As of bug 928195, this shouldn't be necessary! Please
 # don't change CLOBBER for WebIDL changes any more.
 
-Bug 1395286 - Fix packaging error for Android builds, presumably due to bug 1255404 and/or bug 863246.
+Bug 1395486 - Moving files to content-accessible requires a clobber so as not to break Android packaging.
--- a/devtools/client/debugger/new/debugger.css
+++ b/devtools/client/debugger/new/debugger.css
@@ -824,17 +824,17 @@ html .arrow.expanded svg {
 
 .managed-tree .tree .node.focused {
   color: white;
   background-color: var(--theme-selection-background);
   padding-bottom: 2px;
 }
 
 .theme-dark .managed-tree .tree .node.focused {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
   padding-bottom: 2px;
 }
 
 html:not([dir="rtl"]) .managed-tree .tree .node > div {
   margin-left: 10px;
 }
 
 html[dir="rtl"] .managed-tree .tree .node > div {
@@ -2194,17 +2194,17 @@ html[dir="rtl"] .editor-mount {
   height: auto;
 }
 
 .editor.hit-marker {
   height: 14px;
 }
 
 .editor-wrapper .highlight-lines {
-  background: var(--theme-selection-background-semitransparent);
+  background: var(--theme-selection-background-hover);
 }
 
 .coverage-on .CodeMirror-code :not(.hit-marker) .CodeMirror-line,
 .coverage-on .CodeMirror-code :not(.hit-marker) .CodeMirror-gutter-wrapper {
   opacity: 0.5;
 }
 
 .editor.new-breakpoint svg {
--- a/devtools/client/inspector/markup/views/markup-container.js
+++ b/devtools/client/inspector/markup/views/markup-container.js
@@ -619,27 +619,25 @@ MarkupContainer.prototype = {
    * Highlight the currently hovered tag + its closing tag if necessary
    * (that is if the tag is expanded)
    */
   set hovered(value) {
     this.tagState.classList.remove("flash-out");
     this._hovered = value;
     if (value) {
       if (!this.selected) {
-        this.tagState.classList.add("theme-bg-darker");
+        this.tagState.classList.add("tag-hover");
       }
       if (this.closeTagLine) {
-        this.closeTagLine.querySelector(".tag-state").classList.add(
-          "theme-bg-darker");
+        this.closeTagLine.querySelector(".tag-state").classList.add("tag-hover");
       }
     } else {
-      this.tagState.classList.remove("theme-bg-darker");
+      this.tagState.classList.remove("tag-hover");
       if (this.closeTagLine) {
-        this.closeTagLine.querySelector(".tag-state").classList.remove(
-          "theme-bg-darker");
+        this.closeTagLine.querySelector(".tag-state").classList.remove("tag-hover");
       }
     }
   },
 
   /**
    * True if the container is visible in the markup tree.
    */
   get visible() {
--- a/devtools/client/jsonview/css/toolbar.css
+++ b/devtools/client/jsonview/css/toolbar.css
@@ -33,11 +33,11 @@
 }
 
 .toolbar .btn:hover {
   background: var(--toolbarbutton-hover-background);
   border: var(--toolbarbutton-hover-border);
 }
 
 .toolbar .btn:not([disabled]):hover:active {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
 }
 
--- a/devtools/client/netmonitor/src/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -737,17 +737,17 @@ body,
   color: var(--theme-selection-color);
 }
 
 .request-list-item:not(.selected).odd {
   background-color: var(--table-zebra-background);
 }
 
 .request-list-item:not(.selected):hover {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
 }
 
 .request-list-item.fromCache > .requests-list-column:not(.requests-list-waterfall) {
   opacity: 0.6;
 }
 
 .theme-firebug .request-list-item:not(.selected):hover {
   background: #EFEFEF;
--- a/devtools/client/shared/components/tree/tree-view.css
+++ b/devtools/client/shared/components/tree/tree-view.css
@@ -177,17 +177,17 @@
           transparent 80%);
 }
 
 /******************************************************************************/
 /* Themes */
 
 .theme-light .treeTable .treeRow:hover,
 .theme-dark .treeTable .treeRow:hover {
-  background-color: var(--theme-selection-background-semitransparent) !important;
+  background-color: var(--theme-selection-background-hover) !important;
 }
 
 .theme-firebug .treeTable .treeRow:hover {
   background-color: var(--theme-body-background);
 }
 
 .theme-light .treeTable .treeLabel,
 .theme-dark .treeTable .treeLabel {
--- a/devtools/client/shared/test/browser_theme.js
+++ b/devtools/client/shared/test/browser_theme.js
@@ -87,17 +87,17 @@ function testGetColor() {
 
   setTheme(originalTheme);
 }
 
 function testColorExistence() {
   const vars = [
     "body-background", "sidebar-background", "contrast-background",
     "tab-toolbar-background", "toolbar-background", "selection-background",
-    "selection-color", "selection-background-semitransparent", "splitter-color",
+    "selection-color", "selection-background-hover", "splitter-color",
     "comment", "body-color", "body-color-alt", "content-color1", "content-color2",
     "content-color3", "highlight-green", "highlight-blue", "highlight-bluegrey",
     "highlight-purple", "highlight-lightorange", "highlight-orange", "highlight-red",
     "highlight-pink"
   ];
 
   for (let type of vars) {
     ok(getColor(type, "light"), `${type} is a valid color in light theme`);
--- a/devtools/client/shared/theme.js
+++ b/devtools/client/shared/theme.js
@@ -11,17 +11,18 @@
 
 const Services = require("Services");
 
 const variableFileContents = require("raw!devtools/client/themes/variables.css");
 
 const THEME_SELECTOR_STRINGS = {
   light: ":root.theme-light {",
   dark: ":root.theme-dark {",
-  firebug: ":root.theme-firebug {"
+  firebug: ":root.theme-firebug {",
+  root: ":root {",
 };
 const THEME_PREF = "devtools.theme";
 
 /**
  * Takes a theme name and returns the contents of its variable rule block.
  * The first time this runs fetches the variables CSS file and caches it.
  */
 function getThemeFile(name) {
@@ -56,16 +57,24 @@ const getTheme = exports.getTheme = () =
  * current theme is if left unset. If theme not found, falls back to "light"
  * theme. Returns null if the type cannot be found for the theme given.
  */
 /* eslint-disable no-unused-vars */
 const getColor = exports.getColor = (type, theme) => {
   let themeName = theme || getTheme();
   let themeFile = getThemeFile(themeName);
   let match = themeFile.match(new RegExp("--theme-" + type + ": (.*);"));
+  let variableMatch = match ? match[1].match(/var\((.*)\)/) : null;
+
+  // Check if the match is a color variable and retrieve the value of the color variable
+  // if needed
+  if (variableMatch) {
+    themeFile = getThemeFile("root");
+    match = themeFile.match(new RegExp(`${variableMatch[1]}: (.*);`));
+  }
 
   // Return the appropriate variable in the theme, or otherwise, null.
   return match ? match[1] : null;
 };
 
 /**
  * Set the theme preference.
  */
--- a/devtools/client/shared/widgets/cubic-bezier.css
+++ b/devtools/client/shared/widgets/cubic-bezier.css
@@ -207,11 +207,11 @@
 }
 
 .cubic-bezier-container .preset:hover canvas {
   border-color: var(--theme-selection-background);
 }
 
 .cubic-bezier-container .active-preset canvas,
 .cubic-bezier-container .active-preset:hover canvas {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
   border-color: var(--theme-selection-background);
 }
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -332,16 +332,17 @@ body {
   z-index: 3;
   height: var(--toolbar-height);
   width: 100%;
   overflow: hidden;
 }
 
 .animation-timeline .time-body {
   top: var(--toolbar-height);
+  z-index: 3;
 }
 
 .progress-tick-container .progress-tick,
 .animation-timeline .time-body .time-tick {
   -moz-user-select: none;
   position: absolute;
   height: 100%;
 }
@@ -372,17 +373,17 @@ body {
 }
 
 /* Display animations' background colors to alternate. */
 .animation-timeline .animation:nth-child(2n+1) {
   background-color: var(--even-animation-timeline-background-color);
 }
 
 .animation-timeline .animation.selected {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
 }
 
 .animation-timeline .animation:last-child {
   margin-bottom: calc(var(--timeline-animation-height) / 2);
 }
 
 .animation-timeline .animation .target {
   width: var(--timeline-sidebar-width);
--- a/devtools/client/themes/commandline-browser.css
+++ b/devtools/client/themes/commandline-browser.css
@@ -9,29 +9,29 @@
 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
    We are copy/pasting variables from light-theme and dark-theme,
    since they aren't loaded in this context (within browser.css). */
 #browser-bottombox[devtoolstheme="light"] #developer-toolbar {
   --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */
   --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */
   --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */
   --gcli-input-color: #393f4c; /* --theme-body-color */
-  --gcli-border-color: #dde1e4; /* --theme-splitter-color */
+  --gcli-border-color: #e0e0e1; /* --theme-splitter-color */
   --selection-background: #4c9ed9; /* --theme-selection-background */
   --selection-color: #f5f7fa; /* --theme-selection-color */
   --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
   --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
 }
 
 #browser-bottombox[devtoolstheme="dark"] #developer-toolbar {
   --gcli-background-color: #272b35; /* --theme-toolbar-background */
   --gcli-input-background: #272b35; /* --theme-tab-toolbar-background */
   --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */
   --gcli-input-color: #b6babf; /* --theme-body-color-alt */
-  --gcli-border-color: #454d5d; /* --theme-splitter-color */
+  --gcli-border-color: #3c3c3d; /* --theme-splitter-color */
   --selection-background: #5675b9; /* --theme-selection-background */
   --selection-color: #f5f7fa; /* --theme-selection-color */
   --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme); /* --theme-command-line-image */
   --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus); /* --theme-command-line-image-focus */
 }
 
 #developer-toolbar {
   -moz-appearance: none;
--- a/devtools/client/themes/commandline.css
+++ b/devtools/client/themes/commandline.css
@@ -9,24 +9,24 @@
 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
    We are copy/pasting variables from light-theme and dark-theme,
    since they aren't loaded in this context (within commandlineoutput.xhtml
    and commandlinetooltip.xhtml). */
 :root[devtoolstheme="light"] {
   --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */
   --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */
   --gcli-input-color: #393f4c; /* --theme-body-color */
-  --gcli-border-color: #dde1e4; /* --theme-splitter-color */
+  --gcli-border-color: #e0e0e1; /* --theme-splitter-color */
 }
 
 :root[devtoolstheme="dark"] {
   --gcli-background-color: #272b35; /* --theme-toolbar-background */
   --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */
   --gcli-input-color: #b6babf; /* --theme-body-color-alt */
-  --gcli-border-color: #454d5d; /* --theme-splitter-color */
+  --gcli-border-color: #3c3c3d; /* --theme-splitter-color */
 }
 
 .gcli-body {
   margin: 0;
   font: message-box;
   color: var(--gcli-input-color);
 }
 
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -337,17 +337,17 @@ checkbox:-moz-focusring {
 .devtools-button:empty:not(:disabled):-moz-any(:hover:active,.checked),
 .devtools-toolbarbutton:not([label]):-moz-any([checked],[open],:hover:active) {
   background: var(--toolbarbutton-hover-background);
   border-color: var(--toolbarbutton-hover-border-color);
 }
 
 .devtools-button:not(:empty):not(.checked):not(:disabled):hover:active,
 .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:hover:active {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
 }
 
 .devtools-toolbarbutton:not([disabled])[label][checked=true],
 .devtools-toolbarbutton:not([disabled])[label][open],
 .devtools-button:not(:empty).checked,
 .theme-firebug .devtools-toolbarbutton[checked],
 .theme-firebug .devtools-toolbarbutton[open],
 .theme-firebug .devtools-button.checked:empty {
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -22,20 +22,16 @@ body {
   color: var(--theme-content-color1);
 }
 
 ::-moz-selection {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
-.theme-bg-darker {
-  background-color: var(--theme-selection-background-semitransparent);
-}
-
 .theme-selected,
 .CodeMirror-hint-active {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
 .theme-bg-contrast,
 .variable-or-property:not([overridden])[changed] {
@@ -53,17 +49,16 @@ body {
  * failures in debug builds.
  */
 .theme-link:visited,
 .cm-s-mozilla .cm-link:visited,
 .CodeMirror-Tern-type {
   color: var(--theme-highlight-blue);
 }
 
-
 .theme-comment,
 .cm-s-mozilla .cm-meta,
 .cm-s-mozilla .cm-hr,
 .cm-s-mozilla .cm-comment,
 .variable-or-property .token-undefined,
 .variable-or-property .token-null,
 .CodeMirror-Tern-completion-unknown:before {
   color: var(--theme-comment);
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -22,20 +22,16 @@ body {
   color: var(--theme-body-color);
 }
 
 ::-moz-selection {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
-.theme-bg-darker {
-  background: var(--theme-selection-background-semitransparent);
-}
-
 .theme-selected,
 .CodeMirror-hint-active {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
 .theme-bg-contrast,
 .variable-or-property:not([overridden])[changed] {
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -170,16 +170,21 @@ ul.children + .tag-line::before {
 .tag-line .tag-state {
   position: absolute;
   left: -1000em;
   right: 0;
   height: 100%;
   z-index: 0;
 }
 
+.tag-line .tag-hover:not(.theme-selected) {
+  background: var(--theme-selection-background-hover);
+  z-index: -1;
+}
+
 .expander {
   display: inline-block;
   margin-left: -14px;
   vertical-align: middle;
   /* Make sure the expander still appears above the tag-state */
   position: relative;
   z-index: 1;
 }
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -391,17 +391,17 @@
 
 .stack-frame-call {
   color: var(--theme-body-color-alt);
   cursor: pointer;
   display: flex;
 }
 
 .stack-frame-call:hover {
-  background-color: var(--theme-selection-background-semitransparent);
+  background-color: var(--theme-selection-background-hover);
 }
 
 .stack-frame-async {
   color: var(--theme-body-color-inactive);
 }
 
 .stack-frame-function-name {
   color: var(--theme-highlight-blue);
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -1,39 +1,45 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Variable declarations for light and dark devtools themes.
  * Colors are taken from:
  * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors.
- * Changes should be kept in sync with commandline.css and commandline.inc.css.
  */
 
-/* IMPORTANT NOTE:
- * This file is parsed in js (see client/shared/theme.js)
+/*
+ * IMPORTANT NOTE
+ * 1. Changes should be kept in sync with commandline.css and commandline-browser.css.
+ *
+ * 2. This file is parsed in js (see client/shared/theme.js)
  * so the formatting should be consistent (i.e. no '}' inside a rule).
  */
 
 :root.theme-light {
   --theme-body-background: white;
   --theme-sidebar-background: white;
   --theme-contrast-background: #e6b064;
 
   --theme-tab-toolbar-background: #fcfcfc;
   --theme-toolbar-background: #fcfcfc;
   --theme-toolbar-background-hover: rgba(221, 225, 228, 0.66);
   --theme-toolbar-background-alt: #f5f5f5;
   --theme-toolbar-hover: rgba(170, 170, 170, .2);
   --theme-toolbar-hover-active: rgba(170, 170, 170, .4);
-  --theme-selection-background: #4c9ed9;
-  --theme-selection-background-semitransparent: rgba(76, 158, 217, 0.15);
+  --theme-selection-background: var(--blue-55);
+  --theme-selection-background-hover: #F0F9FE;
   --theme-selection-color: #f5f7fa;
-  --theme-splitter-color: #dde1e4;
+
+  /* Border color that splits the toolbars/panels/headers.
+   * This needs to be sync with commandline.css and commandline-browser.css. */
+  --theme-splitter-color: #e0e0e1;
+
   --theme-comment: #696969;
   --theme-comment-alt: #ccd1d5;
 
   --theme-body-color: #393f4c;
   --theme-body-color-alt: #585959;
   --theme-body-color-inactive: #999797;
   --theme-content-color1: #292e33;
   --theme-content-color2: #8fa1b2;
@@ -88,20 +94,24 @@
   --theme-contrast-background: #ffb35b;
 
   --theme-tab-toolbar-background: #272b35;
   --theme-toolbar-background: #272b35;
   --theme-toolbar-background-hover: #20232B;
   --theme-toolbar-background-alt: #2F343E;
   --theme-toolbar-hover: rgba(110, 120, 130, 0.1);
   --theme-toolbar-hover-active: rgba(110, 120, 130, 0.2);
-  --theme-selection-background: #5675B9;
-  --theme-selection-background-semitransparent: rgba(86, 117, 185, 0.5);
+  --theme-selection-background: #204E8A;
+  --theme-selection-background-hover: #353B48;
   --theme-selection-color: #f5f7fa;
-  --theme-splitter-color: #454d5d;
+
+  /* Border color that splits the toolbars/panels/headers.
+   * This needs to be sync with commandline.css and commandline-browser.css. */
+  --theme-splitter-color: #3c3c3d;
+
   --theme-comment: #757873;
   --theme-comment-alt: #5a6375;
 
   --theme-body-color: #8fa1b2;
   --theme-body-color-alt: #b6babf;
   --theme-body-color-inactive: #8fa1b2;
   --theme-content-color1: #a9bacb;
   --theme-content-color2: #8fa1b2;
@@ -154,17 +164,17 @@
   --theme-body-background: #fff;
   --theme-sidebar-background: #fcfcfc;
   --theme-contrast-background: #e6b064;
 
   --theme-tab-toolbar-background: rgb(240, 240, 240) linear-gradient(rgba(255, 255, 255, 0.8), transparent);
   --theme-toolbar-background: rgb(240, 240, 240) linear-gradient(rgba(255, 255, 255, 0.8), transparent);
   --theme-toolbar-tab-selected-background: rgb(253, 253, 253);
   --theme-selection-background: #3399ff;
-  --theme-selection-background-semitransparent: rgba(128,128,128,0.2);
+  --theme-selection-background-hover: rgba(128,128,128,0.2);
   --theme-selection-color: white;
   --theme-splitter-color: #bfbfbf;
   --theme-comment: darkgreen;
 
   --theme-body-color: #252525;
   --theme-body-color-alt: #585959;
   --theme-content-color1: #292e33;
   --theme-content-color2: #8fa1b2;
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -625,17 +625,17 @@ a.learn-more-link.webconsole-learn-more-
   -moz-box-orient: horizontal;
   padding: 0;
 }
 
 .devtools-toolbarbutton[type=menu-button] {
   padding: 0 1px;
   -moz-box-align: stretch;
   --toolbarbutton-checked-color: var(--theme-body-color);
-  --toolbarbutton-checked-background: var(--theme-selection-background-semitransparent);
+  --toolbarbutton-checked-background: var(--theme-selection-background-hover);
 }
 
 .devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
   margin-inline-end: 4px;
 }
 
 .devtools-menulist > .menulist-dropmarker {
   -moz-appearance: none;