Attachment 360622 Details for Bug 194049 – [Image] After Patch is applied

[patch] [Image] After Patch is applied

194049.diff (text/plain), 10.50 KB, created by Devin Rousso on 2019-01-30 14:38:48 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2019-01-30 14:38:48 PST

Size: 10.50 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 1acf60b9568..5d11c3c74f4 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,33 @@
>+2019-01-30  Devin Rousso  <drousso@apple.com>
>+
>+        Web Inspector: change style of device settings override popover content
>+        https://bugs.webkit.org/show_bug.cgi?id=194049
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * 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-28  Joseph Pecoraro  <pecoraro@apple.com>
> 
>         Web Inspector: Remove unnecessary promise rejection handlers now that we use the global onunhandledrejection handler
>diff --git a/Source/WebInspectorUI/UserInterface/Base/Main.js b/Source/WebInspectorUI/UserInterface/Base/Main.js
>index 59ef477b5a7..8656948e313 100644
>--- a/Source/WebInspectorUI/UserInterface/Base/Main.js
>+++ b/Source/WebInspectorUI/UserInterface/Base/Main.js
>@@ -2017,18 +2017,6 @@ WI._handleDeviceSettingsToolbarButtonClicked = function(event)
>         }
>     }
> 
>-    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,16 +2046,20 @@ WI._handleDeviceSettingsToolbarButtonClicked = function(event)
>         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 = [
>         [
>@@ -2105,7 +2097,7 @@ WI._handleDeviceSettingsToolbarButtonClicked = function(event)
> 
>     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 @@ WI._handleDeviceSettingsToolbarButtonClicked = function(event)
>         }
> 
>         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 @@ WI._handleDeviceSettingsToolbarButtonClicked = function(event)
>         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)
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Main.css b/Source/WebInspectorUI/UserInterface/Views/Main.css
>index cfbaead215f..090881e1941 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Main.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Main.css
>@@ -388,66 +388,47 @@ body[dir=rtl] .go-to-arrow {
> }
> 
> .device-settings-content {
>-    padding: 8px;
>+    padding: 0 4px;
>+    border-collapse: separate;
>+    border-spacing: 4px 8px;
>+}
>+
>+.device-settings-content > tr > td:first-child {
>+    text-align: end;
>+    vertical-align: top;
> }
> 
> .device-settings-content .container {
>-    margin-top: 8px;
>-}
>-
>-.device-settings-content .columns {
>     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-end: 4px;
> }
>

Actions: View | Formatted Diff | Diff

Attachments on bug 194049: 360621 | 360622 | 360623 | 360625