Modified: trunk/Source/WebInspectorUI/ChangeLog (240736 => 240737)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-01-30 23:40:03 UTC (rev 240736)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-01-30 23:54:04 UTC (rev 240737)
@@ -1,5 +1,35 @@
2019-01-30 Devin Rousso <[email protected]>
+ Web Inspector: change style of device settings override popover content
+ https://bugs.webkit.org/show_bug.cgi?id=194049
+
+ Reviewed by Joseph Pecoraro.
+
+ * UserInterface/Base/Main.js:
+ (WI._handleDeviceSettingsToolbarButtonClicked):
+ (WI._handleDeviceSettingsToolbarButtonClicked.showUserAgentInput):
+ (WI._handleDeviceSettingsToolbarButtonClicked.createContainer): Deleted.
+ * UserInterface/Views/Main.css:
+ (.device-settings-content):
+ (.device-settings-content > tr > td:first-child): Added.
+ (.device-settings-content .container):
+ (.device-settings-content .container > * + *): Added.
+ (.device-settings-content .column): Added.
+ (.device-settings-content .user-agent select): Added.
+ (.device-settings-content .user-agent input): Added.
+ (.device-settings-content label + label): Added.
+ (.device-settings-content label > input): Added.
+ (.device-settings-content .columns): Deleted.
+ (.device-settings-content .columns > .column): Deleted.
+ (.device-settings-content .columns > .column + .column): Deleted.
+ (.device-settings-content .user-agent-value): Deleted.
+ (.device-settings-content .user-agent-value > select): Deleted.
+ (.device-settings-content .user-agent-value > input): Deleted.
+ (body[dir=ltr] .device-settings-content .user-agent-value > input): Deleted.
+ (body[dir=rtl] .device-settings-content .user-agent-value > input): Deleted.
+
+2019-01-30 Devin Rousso <[email protected]>
+
Web Inspector: Uncaught Exception: null is not an object (evaluating 'url.startsWith')
https://bugs.webkit.org/show_bug.cgi?id=194029
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (240736 => 240737)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2019-01-30 23:40:03 UTC (rev 240736)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2019-01-30 23:54:04 UTC (rev 240737)
@@ -2017,18 +2017,6 @@
}
}
- function createContainer(parent, title) {
- let container = parent.appendChild(document.createElement("div"));
- container.classList.add("container");
-
- if (title) {
- let titleElement = container.appendChild(document.createElement("div"));
- titleElement.textContent = title;
- }
-
- return container;
- }
-
function createCheckbox(container, label, setting, value) {
if (!setting)
return;
@@ -2058,17 +2046,21 @@
WI._deviceSettingsPopover.present(calculateTargetFrame(), preferredEdges);
};
- let contentElement = document.createElement("div");
+ let contentElement = document.createElement("table");
contentElement.classList.add("device-settings-content");
- let userAgentContainer = contentElement.appendChild(document.createElement("label"));
- userAgentContainer.textContent = WI.UIString("User Agent:");
+ let userAgentRow = contentElement.appendChild(document.createElement("tr"));
- let userAgentValueContainer = userAgentContainer.appendChild(document.createElement("span"));
- userAgentValueContainer.classList.add("user-agent-value");
+ let userAgentTitle = userAgentRow.appendChild(document.createElement("td"));
+ userAgentTitle.textContent = WI.UIString("User Agent:");
- let userAgentSelect = userAgentValueContainer.appendChild(document.createElement("select"));
+ let userAgentValue = userAgentRow.appendChild(document.createElement("td"));
+ userAgentValue.classList.add("user-agent");
+ let userAgentValueSelect = userAgentValue.appendChild(document.createElement("select"));
+
+ let userAgentValueInput = null;
+
const userAgents = [
[
{ name: WI.UIString("Default"), value: "default" },
@@ -2105,7 +2097,7 @@
for (let group of userAgents) {
for (let {name, value} of group) {
- let optionElement = userAgentSelect.appendChild(document.createElement("option"));
+ let optionElement = userAgentValueSelect.appendChild(document.createElement("option"));
optionElement.value = value;
optionElement.textContent = name;
@@ -2114,42 +2106,43 @@
}
if (group !== userAgents.lastValue)
- userAgentSelect.appendChild(document.createElement("hr"));
+ userAgentValueSelect.appendChild(document.createElement("hr"));
}
- let userAgentInput = null;
-
function showUserAgentInput() {
- if (userAgentInput)
+ if (userAgentValueInput)
return;
- userAgentInput = userAgentValueContainer.appendChild(document.createElement("input"));
- userAgentInput.value = userAgentInput.placeholder = WI._overridenDeviceUserAgent || navigator.userAgent;
- userAgentInput.addEventListener("click", (clickEvent) => {
+ userAgentValueInput = userAgentValue.appendChild(document.createElement("input"));
+ userAgentValueInput.value = userAgentValueInput.placeholder = WI._overridenDeviceUserAgent || navigator.userAgent;
+ userAgentValueInput.addEventListener("click", (clickEvent) => {
clickEvent.preventDefault();
});
- userAgentInput.addEventListener("change", (inputEvent) => {
- applyOverriddenUserAgent(userAgentInput.value, true);
+ userAgentValueInput.addEventListener("change", (inputEvent) => {
+ applyOverriddenUserAgent(userAgentValueInput.value, true);
});
+
+ WI._deviceSettingsPopover.update();
}
if (selectedOptionElement)
- userAgentSelect.value = selectedOptionElement.value;
+ userAgentValueSelect.value = selectedOptionElement.value;
else if (WI._overridenDeviceUserAgent) {
- userAgentSelect.value = "other";
+ userAgentValueSelect.value = "other";
showUserAgentInput();
}
- userAgentSelect.addEventListener("change", () => {
- let value = userAgentSelect.value;
+ userAgentValueSelect.addEventListener("change", () => {
+ let value = userAgentValueSelect.value;
if (value === "other") {
showUserAgentInput();
- userAgentInput.selectionStart = userAgentInput.selectionEnd = 0;
- userAgentInput.focus();
+ userAgentValueInput.select();
} else {
- if (userAgentInput) {
- userAgentInput.remove();
- userAgentInput = null;
+ if (userAgentValueInput) {
+ userAgentValueInput.remove();
+ userAgentValueInput = null;
+
+ WI._deviceSettingsPopover.update();
}
applyOverriddenUserAgent(value);
@@ -2187,13 +2180,18 @@
if (!group.columns.some((column) => column.some((item) => item.setting)))
continue;
- let container = createContainer(contentElement, group.name);
+ let settingsGroupRow = contentElement.appendChild(document.createElement("tr"));
- let columnContainer = container.appendChild(document.createElement("div"));
- columnContainer.classList.add("columns");
+ let settingsGroupTitle = settingsGroupRow.appendChild(document.createElement("td"));
+ settingsGroupTitle.textContent = group.name;
+ let settingsGroupValue = settingsGroupRow.appendChild(document.createElement("td"));
+
+ let settingsGroupItemContainer = settingsGroupValue.appendChild(document.createElement("div"));
+ settingsGroupItemContainer.classList.add("container");
+
for (let column of group.columns) {
- let columnElement = columnContainer.appendChild(document.createElement("div"));
+ let columnElement = settingsGroupItemContainer.appendChild(document.createElement("div"));
columnElement.classList.add("column");
for (let item of column)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (240736 => 240737)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2019-01-30 23:40:03 UTC (rev 240736)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2019-01-30 23:54:04 UTC (rev 240737)
@@ -388,66 +388,48 @@
}
.device-settings-content {
- padding: 8px;
+ padding: 0 4px;
+ border-collapse: separate;
+ border-spacing: 4px 8px;
}
-.device-settings-content .container {
- margin-top: 8px;
+.device-settings-content > tr > td:first-child {
+ text-align: end;
+ vertical-align: top;
}
-.device-settings-content .columns {
+.device-settings-content .container {
display: flex;
}
-.device-settings-content .columns > .column {
+.device-settings-content .container > * + * {
+ -webkit-margin-start: 8px;
+}
+
+.device-settings-content .column {
display: flex;
flex-direction: column;
}
-.device-settings-content .columns > .column + .column {
- -webkit-margin-start: 20px;
+.device-settings-content .user-agent select {
+ display: block;
+ margin: -2px 0 0;
}
-.device-settings-content .user-agent-value {
- display: inline-block;
- position: relative;
+.device-settings-content .user-agent input {
+ display: block;
+ width: 100%;
+ margin: 6px 0 0;
}
-.device-settings-content .user-agent-value > select {
- -webkit-margin-start: 4px;
+.device-settings-content label + label {
+ margin-top: 4px;
}
-.device-settings-content .user-agent-value > input {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- z-index: 1;
- margin: 0;
- -webkit-margin-start: 5px;
- -webkit-margin-before: 3px;
- -webkit-margin-after: 3px;
- -webkit-padding-start: 7px;
- -webkit-padding-end: 9px;
- background-color: white;
- border: none;
- -webkit-border-top-left-radius: 3px;
- -webkit-border-bottom-left-radius: 3px;
- outline: none;
- pointer-events: all;
- --offset-end: 17px;
-}
-
-body[dir=ltr] .device-settings-content .user-agent-value > input {
- right: var(--offset-end);
-}
-
-body[dir=rtl] .device-settings-content .user-agent-value > input {
- left: var(--offset-end);
-}
-
.device-settings-content label > input {
+ margin: 0;
+ -webkit-margin-start: 0.5px;
-webkit-margin-end: 4px;
}
