diff --git a/browser/extensions/formautofill/skin/shared/editAddress.css b/browser/extensions/formautofill/skin/shared/editAddress.css
index 5db19b5eba97..f07694d3bcb7 100644
--- a/browser/extensions/formautofill/skin/shared/editAddress.css
+++ b/browser/extensions/formautofill/skin/shared/editAddress.css
@@ -8,6 +8,12 @@
margin: 0;
}
+#name-container,
+:root[subdialog] form label,
+:root[subdialog] form > p {
+ margin: 0 0 0.5em !important;
+}
+
#given-name-container,
#additional-name-container,
#address-level1-container,
@@ -22,14 +28,74 @@
flex: 0 1 50%;
}
+
+/* Begin name field rules */
+
+#name-container input {
+ /* Override the default @size="20" on
, which acts like a min-width, not
+ * allowing the fields to shrink with flexbox as small as they need to to match
+ * the other rows. This is noticeable on narrow viewports e.g. in the
+ * PaymentRequest dialog on Linux due to the larger font-size. */
+ width: 0;
+}
+
+/* When there is focus within any of the name fields, the border of the inputs
+ * should be the focused color, except for inner ones which get overriden below. */
+#name-container:focus-within input {
+ border-color: var(--in-content-border-focus);
+}
+
+/* Invalid name fields should show the error outline instead of the focus border */
+#name-container:focus-within input:-moz-ui-invalid {
+ border-color: transparent;
+}
+
#given-name-container,
#additional-name-container,
#family-name-container {
display: flex;
+ /* Remove the bottom margin from the name containers so that the outer
+ #name-container provides the margin on the outside */
+ margin-bottom: 0 !important;
margin-left: 0;
margin-right: 0;
}
+/* The name fields are placed adjacent to each other.
+ Remove the border-radius on adjacent fields. */
+#given-name:dir(ltr),
+#family-name:dir(rtl) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right-width: 0;
+}
+
+#given-name:dir(rtl),
+#family-name:dir(ltr) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ border-left-width: 0;
+}
+
+#additional-name {
+ border-radius: 0;
+ /* This provides the inner separators between the fields and should never
+ * change to the focused color. */
+ border-left-color: var(--in-content-box-border-color) !important;
+ border-right-color: var(--in-content-box-border-color) !important;
+}
+
+/* Since the name fields are adjacent, there isn't room for the -moz-ui-invalid
+ box-shadow so raise invalid name fields and their labels above the siblings
+ so the shadow is shown around all 4 sides. */
+#name-container input:-moz-ui-invalid,
+#name-container input:-moz-ui-invalid ~ .label-text {
+ z-index: 1;
+}
+
+/* End name field rules */
+
+
#name-container,
#street-address-container,
#country-container,
diff --git a/browser/extensions/formautofill/skin/shared/editDialog-shared.css b/browser/extensions/formautofill/skin/shared/editDialog-shared.css
index 41d5f19f1670..52f1bb35db31 100644
--- a/browser/extensions/formautofill/skin/shared/editDialog-shared.css
+++ b/browser/extensions/formautofill/skin/shared/editDialog-shared.css
@@ -13,11 +13,6 @@
padding: 2px;
}
-:root[subdialog] form label,
-:root[subdialog] form > p {
- margin: 0 0 0.5em !important;
-}
-
form input[type="email"],
form input[type="tel"],
form input[type="text"],
@@ -55,10 +50,16 @@ form :-moz-any(label, div) > .label-text[field-populated] {
font-size: var(--in-field-label-size);
}
-form :-moz-any(label, div):focus-within > .label-text {
+form :-moz-any(input, select, textarea):focus ~ .label-text {
color: var(--in-content-item-selected);
}
+/* Focused error fields should get a darker text but not the blue one since it
+ * doesn't look good with the red error outline. */
+form :-moz-any(input, select, textarea):focus:-moz-ui-invalid ~ .label-text {
+ color: var(--in-content-text-color);
+}
+
form div[required] > label > .label-text::after,
form :-moz-any(label, div)[required] > .label-text::after {
content: attr(fieldRequiredSymbol);
diff --git a/browser/extensions/formautofill/test/browser/browser_editAddressDialog.js b/browser/extensions/formautofill/test/browser/browser_editAddressDialog.js
index 7db21816e955..a3de9d128df7 100644
--- a/browser/extensions/formautofill/test/browser/browser_editAddressDialog.js
+++ b/browser/extensions/formautofill/test/browser/browser_editAddressDialog.js
@@ -208,3 +208,89 @@ add_task(async function test_saveAddressDE() {
}
await removeAllRecords();
});
+
+add_task(async function test_combined_name_fields() {
+ await testDialog(EDIT_ADDRESS_DIALOG_URL, async win => {
+ let doc = win.document;
+ let givenNameField = doc.querySelector("#given-name");
+ let addtlNameField = doc.querySelector("#additional-name");
+ let familyNameField = doc.querySelector("#family-name");
+
+ function getComputedPropertyValue(field, property) {
+ return win.getComputedStyle(field).getPropertyValue(property);
+ }
+ function checkNameComputedPropertiesMatch(field, property, value, checkFn = is) {
+ checkFn(getComputedPropertyValue(field, property), value,
+ `Check ${field.id}'s ${property} is ${value}`);
+ }
+ function checkNameFieldBorders(borderColorUnfocused, borderColorFocused) {
+ info("checking the perimeter colors");
+ checkNameComputedPropertiesMatch(givenNameField, "border-top-color", borderColorFocused);
+ checkNameComputedPropertiesMatch(addtlNameField, "border-top-color", borderColorFocused);
+ checkNameComputedPropertiesMatch(familyNameField, "border-top-color", borderColorFocused);
+ checkNameComputedPropertiesMatch(familyNameField, "border-right-color", borderColorFocused);
+ checkNameComputedPropertiesMatch(givenNameField, "border-bottom-color", borderColorFocused);
+ checkNameComputedPropertiesMatch(addtlNameField, "border-bottom-color", borderColorFocused);
+ checkNameComputedPropertiesMatch(familyNameField, "border-bottom-color", borderColorFocused);
+ checkNameComputedPropertiesMatch(givenNameField, "border-left-color", borderColorFocused);
+
+ info("checking the internal borders");
+ checkNameComputedPropertiesMatch(givenNameField, "border-right-width", "0px");
+ checkNameComputedPropertiesMatch(addtlNameField, "border-left-width", "2px");
+ checkNameComputedPropertiesMatch(addtlNameField, "border-left-color", borderColorFocused, isnot);
+ checkNameComputedPropertiesMatch(addtlNameField, "border-right-width", "2px");
+ checkNameComputedPropertiesMatch(addtlNameField, "border-right-color", borderColorFocused, isnot);
+ checkNameComputedPropertiesMatch(familyNameField, "border-left-width", "0px");
+ }
+
+ // Set these variables since the test doesn't run from a subdialog and
+ // therefore doesn't get the additional common CSS files injected.
+ let borderColor = "rgb(0, 255, 0)";
+ let borderColorFocused = "rgb(0, 0, 255)";
+ doc.body.style.setProperty("--in-content-box-border-color", borderColor);
+ doc.body.style.setProperty("--in-content-border-focus", borderColorFocused);
+
+ givenNameField.focus();
+ checkNameFieldBorders(borderColor, borderColorFocused);
+
+ addtlNameField.focus();
+ checkNameFieldBorders(borderColor, borderColorFocused);
+
+ familyNameField.focus();
+ checkNameFieldBorders(borderColor, borderColorFocused);
+
+ info("unfocusing the name fields");
+ let cancelButton = doc.querySelector("#cancel");
+ cancelButton.focus();
+ borderColor = getComputedPropertyValue(givenNameField, "border-top-color");
+ isnot(borderColor, borderColorFocused, "Check that the border color is different");
+ checkNameFieldBorders(borderColor, borderColor);
+
+ cancelButton.click();
+ });
+});
+
+add_task(async function test_combined_name_fields_error() {
+ await testDialog(EDIT_ADDRESS_DIALOG_URL, async win => {
+ let doc = win.document;
+ let givenNameField = doc.querySelector("#given-name");
+ info("mark the given name field as invalid");
+ givenNameField.value = "";
+ givenNameField.focus();
+ ok(givenNameField.matches(":-moz-ui-invalid"), "Check field is visually invalid");
+
+ let givenNameLabel = doc.querySelector("#given-name-container .label-text");
+ // Override pointer-events so that we can use elementFromPoint to know if
+ // the label text is visible.
+ givenNameLabel.style.pointerEvents = "auto";
+ let givenNameLabelRect = givenNameLabel.getBoundingClientRect();
+ // Get the center of the label
+ let el = doc.elementFromPoint(givenNameLabelRect.left + givenNameLabelRect.width / 2,
+ givenNameLabelRect.top + givenNameLabelRect.height / 2);
+
+ is(el, givenNameLabel, "Check that the label text is visible in the error state");
+ is(win.getComputedStyle(givenNameField).getPropertyValue("border-top-color"),
+ "rgba(0, 0, 0, 0)", "Border should be transparent so that only the error outline shows");
+ doc.querySelector("#cancel").click();
+ });
+});
diff --git a/browser/extensions/pocket/content/main.js b/browser/extensions/pocket/content/main.js
index 040c823066e7..d780f66c6d8a 100644
--- a/browser/extensions/pocket/content/main.js
+++ b/browser/extensions/pocket/content/main.js
@@ -150,7 +150,7 @@ var pktUI = (function() {
if (pktApi.getSignupPanelTabTestVariant() == "v2") {
let site = Services.prefs.getCharPref("extensions.pocket.site");
openTabWithUrl("https://" + site + "/firefox_learnmore?s=ffi&t=autoredirect&tv=page_learnmore&src=ff_ext",
- Services.scriptSecurityManager.getSystemPrincipal());
+ Services.scriptSecurityManager.createNullPrincipal({}));
// force the panel closed before it opens
getPanel().hidePopup();
diff --git a/browser/modules/ProcessHangMonitor.jsm b/browser/modules/ProcessHangMonitor.jsm
index 12599f95fc75..57e2fe89f29c 100644
--- a/browser/modules/ProcessHangMonitor.jsm
+++ b/browser/modules/ProcessHangMonitor.jsm
@@ -458,7 +458,7 @@ var ProcessHangMonitor = {
let linkText = bundle.getString("processHang.add-on.learn-more.text");
let linkURL = "https://support.mozilla.org/kb/warning-unresponsive-script#w_other-causes";
- let link = doc.createElement("label");
+ let link = doc.createXULElement("label");
link.setAttribute("class", "text-link");
link.setAttribute("role", "link");
link.setAttribute("onclick", `openTrustedLinkIn(${JSON.stringify(linkURL)}, "tab")`);
diff --git a/browser/modules/webrtcUI.jsm b/browser/modules/webrtcUI.jsm
index 2959ffdd1b23..ccf70bbc4a31 100644
--- a/browser/modules/webrtcUI.jsm
+++ b/browser/modules/webrtcUI.jsm
@@ -569,7 +569,7 @@ function prompt(aBrowser, aRequest) {
addDeviceToList(menupopup,
stringBundle.getString("getUserMedia.pick" + typeName + ".label"),
"-1");
- menupopup.appendChild(doc.createElement("menuseparator"));
+ menupopup.appendChild(doc.createXULElement("menuseparator"));
// Build the list of 'devices'.
let monitorIndex = 1;
@@ -638,7 +638,7 @@ function prompt(aBrowser, aRequest) {
let baseURL =
Services.urlFormatter.formatURLPref("app.support.baseURL");
- let learnMore = chromeWin.document.createElement("label");
+ let learnMore = chromeWin.document.createXULElement("label");
learnMore.className = "text-link";
learnMore.setAttribute("href", baseURL + "screenshare-safety");
learnMore.textContent = learnMoreText;
@@ -685,7 +685,7 @@ function prompt(aBrowser, aRequest) {
}
function addDeviceToList(menupopup, deviceName, deviceIndex, type) {
- let menuitem = doc.createElement("menuitem");
+ let menuitem = doc.createXULElement("menuitem");
menuitem.setAttribute("value", deviceIndex);
menuitem.setAttribute("label", deviceName);
menuitem.setAttribute("tooltiptext", deviceName);
@@ -910,14 +910,14 @@ function getGlobalIndicator() {
if (activeStreams.length == 1) {
let stream = activeStreams[0];
- let menuitem = this.ownerDocument.createElement("menuitem");
+ let menuitem = this.ownerDocument.createXULElement("menuitem");
let labelId = "webrtcIndicator.sharing" + type + "With.menuitem";
let label = stream.browser.contentTitle || stream.uri;
menuitem.setAttribute("label", bundle.formatStringFromName(labelId, [label], 1));
menuitem.setAttribute("disabled", "true");
this.appendChild(menuitem);
- menuitem = this.ownerDocument.createElement("menuitem");
+ menuitem = this.ownerDocument.createXULElement("menuitem");
menuitem.setAttribute("label",
bundle.GetStringFromName("webrtcIndicator.controlSharing.menuitem"));
menuitem.stream = stream;
@@ -928,7 +928,7 @@ function getGlobalIndicator() {
}
// We show a different menu when there are several active streams.
- let menuitem = this.ownerDocument.createElement("menuitem");
+ let menuitem = this.ownerDocument.createXULElement("menuitem");
let labelId = "webrtcIndicator.sharing" + type + "WithNTabs.menuitem";
let count = activeStreams.length;
let label = PluralForm.get(count, bundle.GetStringFromName(labelId)).replace("#1", count);
@@ -937,7 +937,7 @@ function getGlobalIndicator() {
this.appendChild(menuitem);
for (let stream of activeStreams) {
- let item = this.ownerDocument.createElement("menuitem");
+ let item = this.ownerDocument.createXULElement("menuitem");
labelId = "webrtcIndicator.controlSharingOn.menuitem";
label = stream.browser.contentTitle || stream.uri;
item.setAttribute("label", bundle.formatStringFromName(labelId, [label], 1));
@@ -957,7 +957,7 @@ function getGlobalIndicator() {
_setIndicatorState(aName, aState) {
let field = "_" + aName.toLowerCase();
if (aState && !this[field]) {
- let menu = this._hiddenDoc.createElement("menu");
+ let menu = this._hiddenDoc.createXULElement("menu");
menu.setAttribute("id", "webRTC-sharing" + aName + "-menu");
// The CSS will only be applied if the menu is actually inserted in the DOM.
@@ -965,7 +965,7 @@ function getGlobalIndicator() {
this._statusBar.addItem(menu);
- let menupopup = this._hiddenDoc.createElement("menupopup");
+ let menupopup = this._hiddenDoc.createXULElement("menupopup");
menupopup.setAttribute("type", aName);
menupopup.addEventListener("popupshowing", this._popupShowing);
menupopup.addEventListener("popuphiding", this._popupHiding);
@@ -1011,7 +1011,7 @@ function onTabSharingMenuPopupShowing(e) {
let bundle = doc.defaultView.gNavigatorBundle;
let origin = getHostOrExtensionName(null, streamInfo.uri);
- let menuitem = doc.createElement("menuitem");
+ let menuitem = doc.createXULElement("menuitem");
menuitem.setAttribute("label", bundle.getFormattedString(stringName, [origin]));
menuitem.stream = streamInfo;
menuitem.addEventListener("command", onTabSharingMenuPopupCommand);
@@ -1033,7 +1033,7 @@ function showOrCreateMenuForWindow(aWindow) {
let menu = document.getElementById("tabSharingMenu");
if (!menu) {
let stringBundle = aWindow.gNavigatorBundle;
- menu = document.createElement("menu");
+ menu = document.createXULElement("menu");
menu.id = "tabSharingMenu";
let labelStringId = "getUserMedia.sharingMenu.label";
menu.setAttribute("label", stringBundle.getString(labelStringId));
@@ -1042,7 +1042,7 @@ function showOrCreateMenuForWindow(aWindow) {
if (AppConstants.platform == "macosx") {
container = document.getElementById("windowPopup");
insertionPoint = document.getElementById("sep-window-list");
- let separator = document.createElement("menuseparator");
+ let separator = document.createXULElement("menuseparator");
separator.id = "tabSharingSeparator";
container.insertBefore(separator, insertionPoint);
} else {
@@ -1051,7 +1051,7 @@ function showOrCreateMenuForWindow(aWindow) {
container = document.getElementById("main-menubar");
insertionPoint = document.getElementById("helpMenu");
}
- let popup = document.createElement("menupopup");
+ let popup = document.createXULElement("menupopup");
popup.id = "tabSharingMenuPopup";
popup.addEventListener("popupshowing", onTabSharingMenuPopupShowing);
popup.addEventListener("popuphiding", onTabSharingMenuPopupHiding);
diff --git a/browser/themes/shared/urlbar-searchbar.inc.css b/browser/themes/shared/urlbar-searchbar.inc.css
index 8d9fa55f9f06..faaef327a308 100644
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -378,6 +378,117 @@
animation-name: bookmark-animation-rtl;
}
+/**
+ * Contextual Feature Recommendation
+ *
+ * Animate the recommendation icon to expand outwards and display a text label.
+ * Fake the effect of a smoothly expanding width without animating any widths
+ * by (continuously) animating only `mask-position-x` and `transform`.
+ *
+ * In a few places, transition a property using the timing-function `step-start`
+ * while collapsed and `step-end` while expanded in order to (discretely) modify
+ * the value while expanded and while transitioning in either direction.
+ *
+ * This UI is part of an experiment launching in LTR locales only. Fixing the
+ * RTL issues is tracked by Bug 1485725.
+ */
+
+:root {
+ --cfr-animation-duration: 0.35s;
+ --cfr-button-icon: url(resource://activity-stream/data/content/assets/glyph-webextension-16.svg);
+ --cfr-active-color: #0060df;
+}
+
+#contextual-feature-recommendation {
+ width: 28px;
+ margin-left: 0;
+ transition: margin-left step-end var(--cfr-animation-duration);
+}
+#urlbar[cfr-recommendation-state="expanded"] #contextual-feature-recommendation {
+ margin-left: calc(var(--cfr-label-width) * -1);
+ transition: margin-left step-start var(--cfr-animation-duration);
+}
+
+#cfr-button {
+ list-style-image: var(--cfr-button-icon);
+ margin: -2px 0;
+ transition-property: fill, fill-opacity, transform;
+ transition-timing-function: ease-in-out;
+ transition-duration: var(--cfr-animation-duration);
+}
+#urlbar[cfr-recommendation-state="expanded"] #cfr-button {
+ fill: white;
+ fill-opacity: 1;
+ background-color: transparent; /* Override hover background-color */
+ transform: translateX(calc(var(--cfr-label-width) * -1));
+}
+@keyframes cfr-button-fade-through-active-color {
+ 33% {
+ fill-opacity: 1;
+ fill: var(--cfr-active-color);
+ }
+ 67% {
+ fill-opacity: 1;
+ fill: var(--cfr-active-color);
+ }
+}
+#urlbar[cfr-recommendation-state="collapsed"] #cfr-button {
+ animation: cfr-button-fade-through-active-color calc(3 * var(--cfr-animation-duration));
+}
+
+#cfr-label-container {
+ width: 0;
+ overflow: hidden;
+ border-radius: 5px;
+ padding-left: 28px;
+ mask-image: linear-gradient(to right, transparent 0, black 0);
+ mask-position-x: var(--cfr-label-width);
+ mask-repeat: no-repeat;
+ transition-property: background-color, mask-position-x, width, margin-right;
+ transition-timing-function: ease-in-out, ease-in-out, step-end, step-end;
+ transition-duration: var(--cfr-animation-duration);
+}
+#urlbar[cfr-recommendation-state="expanded"] #cfr-label-container {
+ width: calc(var(--cfr-label-width) + 28px);
+ background-color: var(--cfr-active-color);
+ margin-right: -28px;
+ mask-position-x: 0;
+ transition-timing-function: ease-in-out, ease-in-out, step-start, step-start;
+}
+
+#cfr-label {
+ margin: 0;
+ padding: 3px 5px 3px 0;
+ color: white;
+ mask-image: linear-gradient(to right, transparent 0, black 0);
+ mask-position-x: var(--cfr-label-width);
+ mask-repeat: no-repeat;
+ transition: mask-position-x ease-in-out var(--cfr-animation-duration);
+}
+#urlbar[cfr-recommendation-state="expanded"] #cfr-label {
+ mask-position-x: 0;
+}
+
+/* Translate the dropmarker to give illusion of increasing width of the recommendation */
+#urlbar[cfr-recommendation-state] .urlbar-history-dropmarker {
+ transition: transform ease-in-out var(--cfr-animation-duration);
+}
+#urlbar[cfr-recommendation-state="expanded"] .urlbar-history-dropmarker {
+ transform: translateX(calc(var(--cfr-label-width) * -1));
+}
+
+/* Shift the url-bar text fading to stop the recommendation overlapping */
+#urlbar[cfr-recommendation-state] html|input.urlbar-input {
+ transition: mask-position-x ease-in-out var(--cfr-animation-duration);
+}
+#urlbar[cfr-recommendation-state="expanded"] html|input.urlbar-input {
+ /* A mask-image is only defined for the url bar when text overflows. When
+ expanded, the right end of the url bar may be obscured without overflow so
+ we need to redefine the mask-image here, as well as the mask-position-x. */
+ mask-image: linear-gradient(to left, transparent, black 3ch);
+ mask-position-x: calc(var(--cfr-label-width) * -1);
+}
+
/* Reader mode icon */
#reader-mode-button {
diff --git a/devtools/client/framework/browser-menus.js b/devtools/client/framework/browser-menus.js
index 16c3c3a13da1..e125e15cb375 100644
--- a/devtools/client/framework/browser-menus.js
+++ b/devtools/client/framework/browser-menus.js
@@ -48,7 +48,7 @@ function l10n(key) {
* @return XULMenuItemElement
*/
function createMenuItem({ doc, id, label, accesskey, isCheckbox }) {
- const menuitem = doc.createElement("menuitem");
+ const menuitem = doc.createXULElement("menuitem");
menuitem.id = id;
menuitem.setAttribute("label", label);
if (accesskey) {
@@ -214,7 +214,7 @@ function addTopLevelItems(doc) {
const { menuitems } = require("../menus");
for (const item of menuitems) {
if (item.separator) {
- const separator = doc.createElement("menuseparator");
+ const separator = doc.createXULElement("menuseparator");
separator.id = item.id;
menuItems.appendChild(separator);
} else {
diff --git a/devtools/client/framework/toolbox-hosts.js b/devtools/client/framework/toolbox-hosts.js
index b6f0e0ce1c81..c7fec8cfaf61 100644
--- a/devtools/client/framework/toolbox-hosts.js
+++ b/devtools/client/framework/toolbox-hosts.js
@@ -53,12 +53,12 @@ BottomHost.prototype = {
const ownerDocument = gBrowser.ownerDocument;
this._nbox = gBrowser.getNotificationBox(this.hostTab.linkedBrowser);
- this._splitter = ownerDocument.createElement("splitter");
+ this._splitter = ownerDocument.createXULElement("splitter");
this._splitter.setAttribute("class", "devtools-horizontal-splitter");
// Avoid resizing notification containers
this._splitter.setAttribute("resizebefore", "flex");
- this.frame = ownerDocument.createElement("iframe");
+ this.frame = ownerDocument.createXULElement("iframe");
this.frame.flex = 1; // Required to be able to shrink when the window shrinks
this.frame.className = "devtools-toolbox-bottom-iframe";
this.frame.height = Math.min(
@@ -141,10 +141,10 @@ class SidebarHost {
this._browser = gBrowser.getBrowserContainer(this.hostTab.linkedBrowser);
this._sidebar = gBrowser.getSidebarContainer(this.hostTab.linkedBrowser);
- this._splitter = ownerDocument.createElement("splitter");
+ this._splitter = ownerDocument.createXULElement("splitter");
this._splitter.setAttribute("class", "devtools-side-splitter");
- this.frame = ownerDocument.createElement("iframe");
+ this.frame = ownerDocument.createXULElement("iframe");
this.frame.flex = 1; // Required to be able to shrink when the window shrinks
this.frame.className = "devtools-toolbox-side-iframe";
diff --git a/devtools/client/framework/toolbox.js b/devtools/client/framework/toolbox.js
index 472d133c9884..63a92312c836 100644
--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -999,7 +999,7 @@ Toolbox.prototype = {
}
const { toolId, shortcut, modifiers } = item;
- const key = doc.createElement("key");
+ const key = doc.createXULElement("key");
key.id = "key_" + toolId;
@@ -1020,7 +1020,7 @@ Toolbox.prototype = {
// Add key for toggling the browser console from the detached window
if (!doc.getElementById("key_browserconsole")) {
- const key = doc.createElement("key");
+ const key = doc.createXULElement("key");
key.id = "key_browserconsole";
key.setAttribute("key", L10N.getStr("browserConsoleCmd.commandkey"));
@@ -1440,7 +1440,7 @@ Toolbox.prototype = {
if (!toolDefinition.bgTheme) {
toolDefinition.bgTheme = "theme-toolbar";
}
- const panel = this.doc.createElement("vbox");
+ const panel = this.doc.createXULElement("vbox");
panel.className = "toolbox-panel " + toolDefinition.bgTheme;
// There is already a container for the webconsole frame.
@@ -1650,7 +1650,7 @@ Toolbox.prototype = {
return;
}
- iframe = this.doc.createElement("iframe");
+ iframe = this.doc.createXULElement("iframe");
iframe.className = "toolbox-panel-iframe";
iframe.id = "toolbox-panel-iframe-" + id;
iframe.setAttribute("flex", 1);
diff --git a/dom/html/HTMLMediaElement.cpp b/dom/html/HTMLMediaElement.cpp
index 428e548f9b25..9ff994fbbc44 100644
--- a/dom/html/HTMLMediaElement.cpp
+++ b/dom/html/HTMLMediaElement.cpp
@@ -1377,7 +1377,6 @@ class HTMLMediaElement::ErrorSink
public:
explicit ErrorSink(HTMLMediaElement* aOwner)
: mOwner(aOwner)
- , mSrcIsUnsupportedTypeMedia(false)
{
MOZ_ASSERT(mOwner);
}
@@ -1396,59 +1395,29 @@ public:
return;
}
- // TODO : remove unsupported type related codes after finishing native
- // support for HLS, see bug 1350842.
- if (CanOwnerPlayUnsupportedTypeMedia() &&
- aErrorCode == MEDIA_ERR_SRC_NOT_SUPPORTED) {
- // On Fennec, we do some hack for unsupported type media, we don't set
- // its error state in order to open it with external app.
- mSrcIsUnsupportedTypeMedia = true;
- mOwner->ChangeNetworkState(NETWORK_NO_SOURCE);
- MaybeOpenUnsupportedMediaForOwner();
- } else {
- mError = new MediaError(mOwner, aErrorCode, aErrorDetails);
- mOwner->DispatchAsyncEvent(NS_LITERAL_STRING("error"));
- if (mOwner->ReadyState() == HAVE_NOTHING &&
- aErrorCode == MEDIA_ERR_ABORTED) {
- // https://html.spec.whatwg.org/multipage/embedded-content.html#media-data-processing-steps-list
- // "If the media data fetching process is aborted by the user"
- mOwner->DispatchAsyncEvent(NS_LITERAL_STRING("abort"));
- mOwner->ChangeNetworkState(NETWORK_EMPTY);
- mOwner->DispatchAsyncEvent(NS_LITERAL_STRING("emptied"));
- if (mOwner->mDecoder) {
- mOwner->ShutdownDecoder();
- }
- } else if (aErrorCode == MEDIA_ERR_SRC_NOT_SUPPORTED) {
- mOwner->ChangeNetworkState(NETWORK_NO_SOURCE);
- } else {
- mOwner->ChangeNetworkState(NETWORK_IDLE);
+
+ mError = new MediaError(mOwner, aErrorCode, aErrorDetails);
+ mOwner->DispatchAsyncEvent(NS_LITERAL_STRING("error"));
+ if (mOwner->ReadyState() == HAVE_NOTHING &&
+ aErrorCode == MEDIA_ERR_ABORTED) {
+ // https://html.spec.whatwg.org/multipage/embedded-content.html#media-data-processing-steps-list
+ // "If the media data fetching process is aborted by the user"
+ mOwner->DispatchAsyncEvent(NS_LITERAL_STRING("abort"));
+ mOwner->ChangeNetworkState(NETWORK_EMPTY);
+ mOwner->DispatchAsyncEvent(NS_LITERAL_STRING("emptied"));
+ if (mOwner->mDecoder) {
+ mOwner->ShutdownDecoder();
}
+ } else if (aErrorCode == MEDIA_ERR_SRC_NOT_SUPPORTED) {
+ mOwner->ChangeNetworkState(NETWORK_NO_SOURCE);
+ } else {
+ mOwner->ChangeNetworkState(NETWORK_IDLE);
}
}
void ResetError()
{
mError = nullptr;
- mSrcIsUnsupportedTypeMedia = false;
- }
-
- void MaybeOpenUnsupportedMediaForOwner() const
- {
- // Src is supported type or we don't open the pref for external app.
- if (!mSrcIsUnsupportedTypeMedia || !CanOwnerPlayUnsupportedTypeMedia()) {
- return;
- }
-
- // If media doesn't start playing, we don't need to open it.
- if (mOwner->Paused()) {
- return;
- }
-
- nsContentUtils::DispatchTrustedEvent(
- mOwner->OwnerDoc(),
- static_cast
(mOwner),
- NS_LITERAL_STRING("OpenMediaWithExternalApp"),
- CanBubble::eYes, Cancelable::eYes);
}
RefPtr mError;
@@ -1461,19 +1430,9 @@ private:
aErrorCode == MEDIA_ERR_SRC_NOT_SUPPORTED);
}
- bool CanOwnerPlayUnsupportedTypeMedia() const
- {
-#if defined(MOZ_WIDGET_ANDROID)
- // On Fennec, we will use an external app to open unsupported media types.
- return Preferences::GetBool("media.openUnsupportedTypeWithExternalApp");
-#endif
- return false;
- }
-
// Media elememt's life cycle would be longer than error sink, so we use the
// raw pointer and this class would only be referenced by media element.
HTMLMediaElement* mOwner;
- bool mSrcIsUnsupportedTypeMedia;
};
NS_IMPL_CYCLE_COLLECTION_CLASS(HTMLMediaElement)
@@ -7017,12 +6976,6 @@ HTMLMediaElement::GetError() const
return mErrorSink->mError;
}
-void
-HTMLMediaElement::OpenUnsupportedMediaWithExternalAppIfNeeded() const
-{
- mErrorSink->MaybeOpenUnsupportedMediaForOwner();
-}
-
void
HTMLMediaElement::GetCurrentSpec(nsCString& aString)
{
@@ -7967,7 +7920,6 @@ HTMLMediaElement::MarkAsContentSource(CallerAPI aAPI)
void
HTMLMediaElement::UpdateCustomPolicyAfterPlayed()
{
- OpenUnsupportedMediaWithExternalAppIfNeeded();
if (mAudioChannelWrapper) {
mAudioChannelWrapper->NotifyPlayStateChanged();
}
diff --git a/dom/html/HTMLMediaElement.h b/dom/html/HTMLMediaElement.h
index d197f5739991..4174554568da 100644
--- a/dom/html/HTMLMediaElement.h
+++ b/dom/html/HTMLMediaElement.h
@@ -1310,10 +1310,6 @@ protected:
// For nsAsyncEventRunner.
nsresult DispatchEvent(const nsAString& aName);
- // Open unsupported types media with the external app when the media element
- // triggers play() after loaded fail. eg. preload the data before start play.
- void OpenUnsupportedMediaWithExternalAppIfNeeded() const;
-
// This method moves the mPendingPlayPromises into a temperate object. So the
// mPendingPlayPromises is cleared after this method call.
nsTArray> TakePendingPlayPromises();
diff --git a/dom/html/test/browser_bug1081537.js b/dom/html/test/browser_bug1081537.js
index 8ae53e4ffffd..798a87f50139 100644
--- a/dom/html/test/browser_bug1081537.js
+++ b/dom/html/test/browser_bug1081537.js
@@ -2,7 +2,7 @@
// addon-scope paths here.
var ifr;
function test() {
- ifr = document.createElement('iframe');
+ ifr = document.createXULElement('iframe');
document.getElementById('main-window').appendChild(ifr);
is(ifr.contentDocument.nodePrincipal.origin, "[System Principal]");
ifr.contentDocument.open();
diff --git a/dom/media/test/can_play_type_webm.js b/dom/media/test/can_play_type_webm.js
index 7c8b42f10729..75b6c1e7c2c1 100644
--- a/dom/media/test/can_play_type_webm.js
+++ b/dom/media/test/can_play_type_webm.js
@@ -35,15 +35,6 @@ async function check_webm(v, enabled) {
return pref;
}
- function isWindows32() {
- return navigator.userAgent.includes("Windows") &&
- !navigator.userAgent.includes("Win64");
- }
-
- function isAndroid() {
- return navigator.userAgent.includes("Android");
- }
-
await SpecialPowers.pushPrefEnv({"set": [["media.av1.enabled", true]]});
// AV1 is disabled on Windows 32 bits (bug 1475564) and Android (bug 1368843)
check("video/webm; codecs=\"av1\"", (isWindows32() || isAndroid()) ? "" : "probably");
diff --git a/dom/media/test/manifest.js b/dom/media/test/manifest.js
index 88b5a4d0feec..8a9d9d5b8494 100644
--- a/dom/media/test/manifest.js
+++ b/dom/media/test/manifest.js
@@ -633,6 +633,15 @@ var gUnseekableTests = [
{ name:"bogus.duh", type:"bogus/duh"}
];
+function isWindows32() {
+ return navigator.userAgent.includes("Windows") &&
+ !navigator.userAgent.includes("Win64");
+}
+
+function isAndroid() {
+ return navigator.userAgent.includes("Android");
+}
+
var androidVersion = -1; // non-Android platforms
if (manifestNavigator().userAgent.includes("Mobile") ||
manifestNavigator().userAgent.includes("Tablet")) {
diff --git a/dom/media/test/test_can_play_type_mpeg.html b/dom/media/test/test_can_play_type_mpeg.html
index 37a9526566be..1a5d4f2551ce 100644
--- a/dom/media/test/test_can_play_type_mpeg.html
+++ b/dom/media/test/test_can_play_type_mpeg.html
@@ -98,8 +98,7 @@ function check_mp4(v, enabled) {
});
// AV1 is temporarily disabled on Win32 due to linker issues
// https://bugzilla.mozilla.org/show_bug.cgi?id=1475564
- if (!(manifestNavigator().userAgent.includes("Windows") &&
- !manifestNavigator().userAgent.includes("x64"))) {
+ if (!isWindows32() && !isAndroid()) {
check("video/mp4; codecs=\"av1\"", "probably");
} else {
check("video/mp4; codecs=\"av1\"", "");
diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js
index 5d48a338b4ac..8b111721c9d3 100644
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -7949,34 +7949,6 @@ if (IsCSSPropertyPrefEnabled("layout.css.text-align-unsafe-value.enabled")) {
gCSSProperties["display"].other_values.push("flow-root");
-// Copy aliased properties' fields from their alias targets.
-for (var prop in gCSSProperties) {
- var entry = gCSSProperties[prop];
- if (entry.alias_for) {
- var aliasTargetEntry = gCSSProperties[entry.alias_for];
- if (!aliasTargetEntry) {
- ok(false,
- "Alias '" + prop + "' alias_for field, '" + entry.alias_for + "', " +
- "must be set to a recognized CSS property in gCSSProperties");
- } else {
- // Copy 'values' fields & 'prerequisites' field from aliasTargetEntry:
- var fieldsToCopy =
- ["initial_values", "other_values", "invalid_values",
- "quirks_values", "unbalanced_values",
- "prerequisites"];
-
- fieldsToCopy.forEach(function(fieldName) {
- // (Don't copy the field if the alias already has something there,
- // or if the aliased property doesn't have anything to copy.)
- if (!(fieldName in entry) &&
- fieldName in aliasTargetEntry) {
- entry[fieldName] = aliasTargetEntry[fieldName]
- }
- });
- }
- }
-}
-
if (IsCSSPropertyPrefEnabled("layout.css.column-span.enabled")) {
gCSSProperties["column-span"] = {
domProp: "columnSpan",
@@ -8218,3 +8190,34 @@ if (IsCSSPropertyPrefEnabled("layout.css.overflow.moz-scrollbars.enabled")) {
} else {
gCSSProperties["overflow"].invalid_values.push(...OVERFLOW_MOZKWS);
}
+
+// Copy aliased properties' fields from their alias targets. Keep this logic
+// at the bottom of this file to ensure all the aliased properties are
+// processed.
+for (var prop in gCSSProperties) {
+ var entry = gCSSProperties[prop];
+ if (entry.alias_for) {
+ var aliasTargetEntry = gCSSProperties[entry.alias_for];
+ if (!aliasTargetEntry) {
+ ok(false,
+ "Alias '" + prop + "' alias_for field, '" + entry.alias_for + "', " +
+ "must be set to a recognized CSS property in gCSSProperties");
+ } else {
+ // Copy 'values' fields & 'prerequisites' field from aliasTargetEntry:
+ var fieldsToCopy =
+ ["initial_values", "other_values", "invalid_values",
+ "quirks_values", "unbalanced_values",
+ "prerequisites"];
+
+ fieldsToCopy.forEach(function(fieldName) {
+ // (Don't copy the field if the alias already has something there,
+ // or if the aliased property doesn't have anything to copy.)
+ if (!(fieldName in entry) &&
+ fieldName in aliasTargetEntry) {
+ entry[fieldName] = aliasTargetEntry[fieldName]
+ }
+ });
+ }
+ }
+}
+
diff --git a/layout/xul/nsBox.cpp b/layout/xul/nsBox.cpp
index c2abe2ab6176..15d1b07c4cf8 100644
--- a/layout/xul/nsBox.cpp
+++ b/layout/xul/nsBox.cpp
@@ -532,9 +532,9 @@ GetScrollbarWidthNoTheme(nsIFrame* aBox)
switch (scrollbarStyle->StyleUIReset()->mScrollbarWidth) {
default:
case StyleScrollbarWidth::Auto:
- return 16 * AppUnitsPerCSSPixel();
+ return 12 * AppUnitsPerCSSPixel();
case StyleScrollbarWidth::Thin:
- return 8 * AppUnitsPerCSSPixel();
+ return 6 * AppUnitsPerCSSPixel();
case StyleScrollbarWidth::None:
return 0;
}
diff --git a/mobile/android/app/src/main/res/drawable-xxhdpi/exit_fullscreen.png b/mobile/android/app/src/main/res/drawable-xxhdpi/exit_fullscreen.png
deleted file mode 100644
index 593609038b96..000000000000
Binary files a/mobile/android/app/src/main/res/drawable-xxhdpi/exit_fullscreen.png and /dev/null differ
diff --git a/mobile/android/app/src/main/res/drawable-xxhdpi/fullscreen.png b/mobile/android/app/src/main/res/drawable-xxhdpi/fullscreen.png
deleted file mode 100644
index baa187662a11..000000000000
Binary files a/mobile/android/app/src/main/res/drawable-xxhdpi/fullscreen.png and /dev/null differ
diff --git a/mobile/android/app/src/main/res/layout/gecko_app.xml b/mobile/android/app/src/main/res/layout/gecko_app.xml
index ca25841695a7..f48e7fc9f3be 100644
--- a/mobile/android/app/src/main/res/layout/gecko_app.xml
+++ b/mobile/android/app/src/main/res/layout/gecko_app.xml
@@ -37,11 +37,6 @@
android:layout_height="match_parent"
android:visibility="gone"/>
-
-
-
{
@@ -4866,16 +4865,6 @@ var BrowserEventHandler = {
case 'MozMouseHittest':
this._handleRetargetedTouchStart(aEvent);
break;
- case 'OpenMediaWithExternalApp': {
- let mediaSrc = aEvent.target.currentSrc || aEvent.target.src;
- let uuid = uuidgen.generateUUID().toString();
- GlobalEventDispatcher.sendRequest({
- type: "Video:Play",
- uri: mediaSrc,
- uuid: uuid
- });
- break;
- }
}
},
diff --git a/mobile/android/geckoview/build.gradle b/mobile/android/geckoview/build.gradle
index 08965e054299..fd4fb2f05af2 100644
--- a/mobile/android/geckoview/build.gradle
+++ b/mobile/android/geckoview/build.gradle
@@ -200,9 +200,9 @@ dependencies {
testImplementation 'org.mockito:mockito-core:1.10.19'
androidTestImplementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
- androidTestImplementation 'com.android.support.test:runner:1.0.2'
- androidTestImplementation 'com.android.support.test:rules:1.0.2'
- androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
+ androidTestImplementation 'com.android.support.test:runner:1.0.1'
+ androidTestImplementation 'com.android.support.test:rules:1.0.1'
+ androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
androidTestImplementation "com.android.support:support-annotations:$support_library_version"
}
diff --git a/python/mozbuild/mozbuild/controller/building.py b/python/mozbuild/mozbuild/controller/building.py
index b192546980d4..3b98f56f0a41 100644
--- a/python/mozbuild/mozbuild/controller/building.py
+++ b/python/mozbuild/mozbuild/controller/building.py
@@ -6,6 +6,7 @@ from __future__ import absolute_import, unicode_literals
import errno
import getpass
+import glob
import io
import json
import logging
@@ -1047,6 +1048,16 @@ class BuildDriver(MozbuildObject):
status = None
active_backend = config.substs.get('BUILD_BACKENDS', [None])[0]
if active_backend and 'Make' not in active_backend:
+ for backend_file in glob.iglob(mozpath.join(self.topobjdir,
+ 'backend.*Backend')):
+ if 'Make' in backend_file:
+ self.log(logging.ERROR, 'backend',
+ {'objdir': self.topobjdir},
+ "The active objdir, {objdir}, was previously "
+ "used to build with a Make-based backend. "
+ "Change objdirs (by setting MOZ_OBJDIR in "
+ "your mozconfig) to continue.\n")
+ return 1
# Record whether a clobber was requested so we can print
# a special message later if the build fails.
clobber_requested = False
diff --git a/security/manager/pki/resources/content/certViewer.js b/security/manager/pki/resources/content/certViewer.js
index 10a12f433289..172a2586871d 100644
--- a/security/manager/pki/resources/content/certViewer.js
+++ b/security/manager/pki/resources/content/certViewer.js
@@ -59,7 +59,7 @@ function AddCertChain(node, chain) {
*/
function AddUsage(usage) {
let verifyInfoBox = document.getElementById("verify_info_box");
- let text = document.createElement("textbox");
+ let text = document.createXULElement("textbox");
text.setAttribute("value", usage);
text.setAttribute("style", "margin: 2px 5px");
text.setAttribute("readonly", "true");
@@ -177,7 +177,7 @@ function displayUsages(results) {
}
function addChildrenToTree(parentTree, label, value, addTwistie) {
- let treeChild1 = document.createElement("treechildren");
+ let treeChild1 = document.createXULElement("treechildren");
let treeElement = addTreeItemToTreeChild(treeChild1, label, value,
addTwistie);
parentTree.appendChild(treeChild1);
@@ -185,13 +185,13 @@ function addChildrenToTree(parentTree, label, value, addTwistie) {
}
function addTreeItemToTreeChild(treeChild, label, value, addTwistie) {
- let treeElem1 = document.createElement("treeitem");
+ let treeElem1 = document.createXULElement("treeitem");
if (addTwistie) {
treeElem1.setAttribute("container", "true");
treeElem1.setAttribute("open", "true");
}
- let treeRow = document.createElement("treerow");
- let treeCell = document.createElement("treecell");
+ let treeRow = document.createXULElement("treerow");
+ let treeCell = document.createXULElement("treecell");
treeCell.setAttribute("label", label);
if (value) {
treeCell.setAttribute("display", value);
diff --git a/security/manager/pki/resources/content/clientauthask.js b/security/manager/pki/resources/content/clientauthask.js
index 3807e2d96998..e7ab9194615d 100644
--- a/security/manager/pki/resources/content/clientauthask.js
+++ b/security/manager/pki/resources/content/clientauthask.js
@@ -81,7 +81,7 @@ function onLoad() {
let selectElement = document.getElementById("nicknames");
certArray = window.arguments[4].QueryInterface(Ci.nsIArray);
for (let i = 0; i < certArray.length; i++) {
- let menuItemNode = document.createElement("menuitem");
+ let menuItemNode = document.createXULElement("menuitem");
let cert = certArray.queryElementAt(i, Ci.nsIX509Cert);
let nickAndSerial =
bundle.getFormattedString("clientAuthNickAndSerial",
diff --git a/security/manager/pki/resources/content/deletecert.js b/security/manager/pki/resources/content/deletecert.js
index eebfb688f956..a2fe53d04b20 100644
--- a/security/manager/pki/resources/content/deletecert.js
+++ b/security/manager/pki/resources/content/deletecert.js
@@ -94,8 +94,8 @@ function onLoad() {
let box = document.getElementById("certlist");
let certTreeItems = window.arguments[1];
for (let certTreeItem of certTreeItems) {
- let listItem = document.createElement("richlistitem");
- let label = document.createElement("label");
+ let listItem = document.createXULElement("richlistitem");
+ let label = document.createXULElement("label");
label.setAttribute("value", certTreeItemToString(certTreeItem));
listItem.appendChild(label);
box.appendChild(listItem);
diff --git a/security/manager/pki/resources/content/device_manager.js b/security/manager/pki/resources/content/device_manager.js
index 7873971048aa..6784b6436fb4 100644
--- a/security/manager/pki/resources/content/device_manager.js
+++ b/security/manager/pki/resources/content/device_manager.js
@@ -72,17 +72,17 @@ function SetFIPSButton() {
*/
function AddModule(module, slots) {
var tree = document.getElementById("device_list");
- var item = document.createElement("treeitem");
- var row = document.createElement("treerow");
- var cell = document.createElement("treecell");
+ var item = document.createXULElement("treeitem");
+ var row = document.createXULElement("treerow");
+ var cell = document.createXULElement("treecell");
cell.setAttribute("label", module.name);
row.appendChild(cell);
item.appendChild(row);
- var parent = document.createElement("treechildren");
+ var parent = document.createXULElement("treechildren");
for (let slot of slots) {
- var child_item = document.createElement("treeitem");
- var child_row = document.createElement("treerow");
- var child_cell = document.createElement("treecell");
+ var child_item = document.createXULElement("treeitem");
+ var child_row = document.createXULElement("treerow");
+ var child_cell = document.createXULElement("treecell");
child_cell.setAttribute("label", slot.name);
child_row.appendChild(child_cell);
child_item.appendChild(child_row);
@@ -257,13 +257,13 @@ function showModuleInfo() {
// add a row to the info list, as [col1 col2] (ex.: ["status" "logged in"])
function AddInfoRow(col1, col2, cell_id) {
var tree = document.getElementById("info_list");
- var item = document.createElement("treeitem");
- var row = document.createElement("treerow");
- var cell1 = document.createElement("treecell");
+ var item = document.createXULElement("treeitem");
+ var row = document.createXULElement("treerow");
+ var cell1 = document.createXULElement("treecell");
cell1.setAttribute("label", col1);
cell1.setAttribute("crop", "never");
row.appendChild(cell1);
- var cell2 = document.createElement("treecell");
+ var cell2 = document.createXULElement("treecell");
cell2.setAttribute("label", col2);
cell2.setAttribute("crop", "never");
cell2.setAttribute("id", cell_id);
diff --git a/toolkit/components/apppicker/content/appPicker.js b/toolkit/components/apppicker/content/appPicker.js
index 72c5001cd062..a9a516562825 100644
--- a/toolkit/components/apppicker/content/appPicker.js
+++ b/toolkit/components/apppicker/content/appPicker.js
@@ -77,15 +77,15 @@ AppPicker.prototype =
continue;
}
- var item = document.createElement("richlistitem");
+ var item = document.createXULElement("richlistitem");
item.handlerApp = file;
list.appendChild(item);
- var image = document.createElement("image");
+ var image = document.createXULElement("image");
image.setAttribute("src", this.getFileIconURL(file.executable));
item.appendChild(image);
- var label = document.createElement("label");
+ var label = document.createXULElement("label");
label.setAttribute("value", this.getFileDisplayName(file.executable));
item.appendChild(label);
diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js b/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
index 6797d5dd1f8a..839de84cf2ab 100644
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
@@ -239,7 +239,7 @@ add_task(async function test_popup_url() {
"darktext should not be set!");
// Calculate what GrayText should be. May differ between platforms.
- let span = document.createElement("span");
+ let span = document.createXULElement("span");
span.style.color = "GrayText";
let GRAY_TEXT = window.getComputedStyle(span).color;
diff --git a/toolkit/components/normandy/lib/Heartbeat.jsm b/toolkit/components/normandy/lib/Heartbeat.jsm
index eaa0b685b6b1..b03ffd4e0ca4 100644
--- a/toolkit/components/normandy/lib/Heartbeat.jsm
+++ b/toolkit/components/normandy/lib/Heartbeat.jsm
@@ -173,12 +173,12 @@ var Heartbeat = class {
// Build the heartbeat stars
if (!this.options.engagementButtonLabel) {
const numStars = this.options.engagementButtonLabel ? 0 : 5;
- const ratingContainer = this.chromeWindow.document.createElement("hbox");
+ const ratingContainer = this.chromeWindow.document.createXULElement("hbox");
ratingContainer.id = "star-rating-container";
for (let i = 0; i < numStars; i++) {
// create a star rating element
- const ratingElement = this.chromeWindow.document.createElement("toolbarbutton");
+ const ratingElement = this.chromeWindow.document.createXULElement("toolbarbutton");
// style it
const starIndex = numStars - i;
@@ -209,7 +209,7 @@ var Heartbeat = class {
this.messageText.classList.add("heartbeat");
// Make sure the stars are not pushed to the right by the spacer.
- const rightSpacer = this.chromeWindow.document.createElement("spacer");
+ const rightSpacer = this.chromeWindow.document.createXULElement("spacer");
rightSpacer.flex = 20;
frag.appendChild(rightSpacer);
@@ -220,7 +220,7 @@ var Heartbeat = class {
// Add Learn More Link
if (this.options.learnMoreMessage && this.options.learnMoreUrl) {
- const learnMore = this.chromeWindow.document.createElement("label");
+ const learnMore = this.chromeWindow.document.createXULElement("label");
learnMore.className = "text-link";
learnMore.href = this.options.learnMoreUrl.toString();
learnMore.setAttribute("value", this.options.learnMoreMessage);
diff --git a/toolkit/components/passwordmgr/LoginManagerContextMenu.jsm b/toolkit/components/passwordmgr/LoginManagerContextMenu.jsm
index 826c358c46d7..91e4c3bffc17 100644
--- a/toolkit/components/passwordmgr/LoginManagerContextMenu.jsm
+++ b/toolkit/components/passwordmgr/LoginManagerContextMenu.jsm
@@ -41,7 +41,7 @@ var LoginManagerContextMenu = {
let fragment = browser.ownerDocument.createDocumentFragment();
let duplicateUsernames = this._findDuplicates(foundLogins);
for (let login of foundLogins) {
- let item = fragment.ownerDocument.createElement("menuitem");
+ let item = fragment.ownerDocument.createXULElement("menuitem");
let username = login.username;
// If login is empty or duplicated we want to append a modification date to it.
diff --git a/toolkit/components/passwordmgr/test/unit/test_context_menu.js b/toolkit/components/passwordmgr/test/unit/test_context_menu.js
index ea46672d139e..9d6a065e75b5 100644
--- a/toolkit/components/passwordmgr/test/unit/test_context_menu.js
+++ b/toolkit/components/passwordmgr/test/unit/test_context_menu.js
@@ -73,6 +73,7 @@ function createLoginsFragment(url, content, elementQuery) {
MockDocument.mockOwnerDocumentProperty(inputElement, document, url);
// We also need a simple mock Browser object for this test.
+ document.createXULElement = document.createElement.bind(document);
let browser = {
ownerDocument: document
};
diff --git a/toolkit/content/widgets/autocomplete.xml b/toolkit/content/widgets/autocomplete.xml
index 6c8d9c0fb5d3..d85b15e35ed1 100644
--- a/toolkit/content/widgets/autocomplete.xml
+++ b/toolkit/content/widgets/autocomplete.xml
@@ -71,7 +71,7 @@
popup = document.getElementById(popupId);
}
if (!popup) {
- popup = document.createElement("panel");
+ popup = document.createXULElement("panel");
popup.setAttribute("type", "autocomplete-richlistbox");
popup.setAttribute("noautofocus", "true");
diff --git a/toolkit/content/widgets/datetimepopup.xml b/toolkit/content/widgets/datetimepopup.xml
index ec1e52ced13f..b8607276e50d 100644
--- a/toolkit/content/widgets/datetimepopup.xml
+++ b/toolkit/content/widgets/datetimepopup.xml
@@ -19,7 +19,7 @@
let frame = this.querySelector("#dateTimePopupFrame");
if (!frame) {
- frame = this.ownerDocument.createElement("iframe");
+ frame = this.ownerDocument.createXULElement("iframe");
frame.id = "dateTimePopupFrame";
this.appendChild(frame);
}
diff --git a/toolkit/content/widgets/videocontrols.xml b/toolkit/content/widgets/videocontrols.xml
index 27bf979bf363..86ea3a059824 100644
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -1618,7 +1618,7 @@
const label = tt.label || "";
const ttText = document.createTextNode(label);
- const ttBtn = document.createElement("button");
+ const ttBtn = document.createXULElement("button");
ttBtn.classList.add("textTrackItem");
ttBtn.setAttribute("index", tt.index);
diff --git a/toolkit/modules/InlineSpellChecker.jsm b/toolkit/modules/InlineSpellChecker.jsm
index f58bc1506b5a..9bfdc96cd958 100644
--- a/toolkit/modules/InlineSpellChecker.jsm
+++ b/toolkit/modules/InlineSpellChecker.jsm
@@ -143,7 +143,7 @@ InlineSpellChecker.prototype = {
break;
this.mSpellSuggestions.push(suggestion);
- var item = menu.ownerDocument.createElement("menuitem");
+ var item = menu.ownerDocument.createXULElement("menuitem");
this.mSuggestionItems.push(item);
item.setAttribute("label", suggestion);
item.setAttribute("value", suggestion);
@@ -213,7 +213,7 @@ InlineSpellChecker.prototype = {
for (var i = 0; i < sortedList.length; i++) {
this.mDictionaryNames.push(sortedList[i].id);
- var item = menu.ownerDocument.createElement("menuitem");
+ var item = menu.ownerDocument.createXULElement("menuitem");
item.setAttribute("id", "spell-check-dictionary-" + sortedList[i].id);
item.setAttribute("label", sortedList[i].label);
item.setAttribute("type", "radio");
diff --git a/toolkit/modules/PageMenu.jsm b/toolkit/modules/PageMenu.jsm
index 7ad9dace1176..0b3e0e105e83 100644
--- a/toolkit/modules/PageMenu.jsm
+++ b/toolkit/modules/PageMenu.jsm
@@ -105,7 +105,7 @@ PageMenu.prototype = {
continue; // Ignore children without ids
}
- menuitem = document.createElement("menuitem");
+ menuitem = document.createXULElement("menuitem");
if (child.checkbox) {
menuitem.setAttribute("type", "checkbox");
if (child.checked) {
@@ -127,16 +127,16 @@ PageMenu.prototype = {
break;
case "separator":
- menuitem = document.createElement("menuseparator");
+ menuitem = document.createXULElement("menuseparator");
break;
case "menu":
- menuitem = document.createElement("menu");
+ menuitem = document.createXULElement("menu");
if (child.label) {
menuitem.setAttribute("label", child.label);
}
- let menupopup = document.createElement("menupopup");
+ let menupopup = document.createXULElement("menupopup");
menuitem.appendChild(menupopup);
this.buildXULMenu(child, menupopup);
diff --git a/toolkit/modules/SelectParentHelper.jsm b/toolkit/modules/SelectParentHelper.jsm
index 9a2d58cadf56..e69e5cd7d934 100644
--- a/toolkit/modules/SelectParentHelper.jsm
+++ b/toolkit/modules/SelectParentHelper.jsm
@@ -342,7 +342,7 @@ function populateChildren(menulist, options, selectedIndex, zoom,
for (let option of options) {
let isOptGroup = (option.tagName == "OPTGROUP");
- let item = element.ownerDocument.createElement(isOptGroup ? "menucaption" : "menuitem");
+ let item = element.ownerDocument.createXULElement(isOptGroup ? "menucaption" : "menuitem");
item.setAttribute("label", option.textContent);
item.style.direction = option.textDirection;
@@ -449,7 +449,7 @@ function populateChildren(menulist, options, selectedIndex, zoom,
&& element.childElementCount > SEARCH_MINIMUM_ELEMENTS) {
// Add a search text field as the first element of the dropdown
- let searchbox = element.ownerDocument.createElement("textbox");
+ let searchbox = element.ownerDocument.createXULElement("textbox");
searchbox.setAttribute("type", "search");
searchbox.addEventListener("input", onSearchInput);
searchbox.addEventListener("focus", onSearchFocus);
diff --git a/toolkit/mozapps/extensions/content/blocklist.js b/toolkit/mozapps/extensions/content/blocklist.js
index a5a3041ccfaa..77689ab53e00 100644
--- a/toolkit/mozapps/extensions/content/blocklist.js
+++ b/toolkit/mozapps/extensions/content/blocklist.js
@@ -30,7 +30,7 @@ function init() {
var list = gArgs.list;
list.sort((a, b) => String(a.name).localeCompare(b.name));
for (let listItem of list) {
- let item = document.createElement("richlistitem");
+ let item = document.createXULElement("richlistitem");
item.setAttribute("name", listItem.name);
item.setAttribute("version", listItem.version);
item.setAttribute("icon", listItem.icon);
diff --git a/toolkit/mozapps/extensions/content/extensions.js b/toolkit/mozapps/extensions/content/extensions.js
index 5e0558eb0580..983f0c45f27a 100644
--- a/toolkit/mozapps/extensions/content/extensions.js
+++ b/toolkit/mozapps/extensions/content/extensions.js
@@ -1446,7 +1446,7 @@ function shouldShowVersionNumber(aAddon) {
}
function createItem(aObj, aIsInstall) {
- let item = document.createElement("richlistitem");
+ let item = document.createXULElement("richlistitem");
item.setAttribute("class", "addon addon-view");
item.setAttribute("name", aObj.name);
@@ -1704,7 +1704,7 @@ var gCategories = {
if (document.getElementById("category-" + aId))
return;
- var category = document.createElement("richlistitem");
+ var category = document.createXULElement("richlistitem");
category.setAttribute("id", "category-" + aId);
category.setAttribute("value", aView);
category.setAttribute("class", "category");
@@ -3019,10 +3019,10 @@ var gDetailView = {
stack.remove();
}
- stack = document.createElement("stack");
+ stack = document.createXULElement("stack");
stack.setAttribute("id", containerId);
- let browser = document.createElement("browser");
+ let browser = document.createXULElement("browser");
browser.setAttribute("type", "content");
browser.setAttribute("disableglobalhistory", "true");
browser.setAttribute("id", "addon-options");
diff --git a/toolkit/mozapps/preferences/fontbuilder.js b/toolkit/mozapps/preferences/fontbuilder.js
index 97e7ab6f56b3..e5689d32b002 100644
--- a/toolkit/mozapps/preferences/fontbuilder.js
+++ b/toolkit/mozapps/preferences/fontbuilder.js
@@ -38,10 +38,10 @@ var FontBuilder = {
this._allFonts = await this.enumerator.EnumerateAllFontsAsync({});
// Build the UI for the Default Font and Fonts for this CSS type.
- const popup = document.createElement("menupopup");
+ const popup = document.createXULElement("menupopup");
let separator;
if (fonts.length > 0) {
- let menuitem = document.createElement("menuitem");
+ let menuitem = document.createXULElement("menuitem");
if (defaultFont) {
document.l10n.setAttributes(menuitem, "fonts-label-default", {
name: defaultFont
@@ -52,11 +52,11 @@ var FontBuilder = {
menuitem.setAttribute("value", ""); // Default Font has a blank value
popup.appendChild(menuitem);
- separator = document.createElement("menuseparator");
+ separator = document.createXULElement("menuseparator");
popup.appendChild(separator);
for (let font of fonts) {
- menuitem = document.createElement("menuitem");
+ menuitem = document.createXULElement("menuitem");
menuitem.setAttribute("value", font);
menuitem.setAttribute("label", font);
popup.appendChild(menuitem);
@@ -72,12 +72,12 @@ var FontBuilder = {
let builtItem = separator ? separator.nextSibling : popup.firstChild;
let builtItemValue = builtItem ? builtItem.getAttribute("value") : null;
- separator = document.createElement("menuseparator");
+ separator = document.createXULElement("menuseparator");
popup.appendChild(separator);
for (let font of this._allFonts) {
if (font != builtItemValue) {
- const menuitem = document.createElement("menuitem");
+ const menuitem = document.createXULElement("menuitem");
menuitem.setAttribute("value", font);
menuitem.setAttribute("label", font);
popup.appendChild(menuitem);
diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css
index 2a0066815b91..7fe51e157b4e 100644
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -506,6 +506,15 @@ xul|textbox[focused] {
border-color: var(--in-content-border-focus);
}
+/* Don't show the field error outlines and focus borders at the same time */
+html|input[type="email"]:-moz-ui-invalid:focus,
+html|input[type="tel"]:-moz-ui-invalid:focus,
+html|input[type="text"]:-moz-ui-invalid:focus,
+html|textarea:-moz-ui-invalid:focus,
+xul|textbox[focused] {
+ border-color: transparent;
+}
+
html|input[type="email"]:disabled,
html|input[type="tel"]:disabled,
html|input[type="text"]:disabled,
diff --git a/toolkit/themes/windows/global/xulscrollbars.css b/toolkit/themes/windows/global/xulscrollbars.css
index 318fadc9c8ed..dad8234be280 100644
--- a/toolkit/themes/windows/global/xulscrollbars.css
+++ b/toolkit/themes/windows/global/xulscrollbars.css
@@ -14,6 +14,7 @@
scrollbar {
-moz-appearance: scrollbar-horizontal;
cursor: default;
+ background-color: #f0f0f0;
}
@media all and (-moz-overlay-scrollbars) {
@@ -43,6 +44,10 @@ slider[orient="vertical"] {
/* ::::: thumb (horizontal) ::::: */
+thumb {
+ background-color: #cdcdcd;
+}
+
thumb[orient="vertical"] {
-moz-appearance: scrollbarthumb-vertical;
min-height: 8px;
diff --git a/widget/gtk/nsNativeThemeGTK.cpp b/widget/gtk/nsNativeThemeGTK.cpp
index 9d304db4b3b7..e0ce4f2b6fa8 100644
--- a/widget/gtk/nsNativeThemeGTK.cpp
+++ b/widget/gtk/nsNativeThemeGTK.cpp
@@ -1866,6 +1866,15 @@ nsNativeThemeGTK::ThemeSupportsWidget(nsPresContext* aPresContext,
if (IsWidgetTypeDisabled(mDisabledWidgetTypes, aWidgetType))
return false;
+ if (IsWidgetScrollbarPart(aWidgetType)) {
+ ComputedStyle* cs = nsLayoutUtils::StyleForScrollbar(aFrame);
+ if (cs->StyleUI()->HasCustomScrollbars() ||
+ // We cannot handle thin scrollbar on GTK+ widget directly as well.
+ cs->StyleUIReset()->mScrollbarWidth == StyleScrollbarWidth::Thin) {
+ return false;
+ }
+ }
+
if (aWidgetType == StyleAppearance::MenulistButton &&
StaticPrefs::layout_css_webkit_appearance_enabled()) {
aWidgetType = StyleAppearance::Menulist;