Web Inspector: change style of device settings override popover content
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 30 Jan 2019 23:54:04 +0000 (23:54 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 30 Jan 2019 23:54:04 +0000 (23:54 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@240737 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Base/Main.js
Source/WebInspectorUI/UserInterface/Views/Main.css

index 4e3feed..7081f5b 100644 (file)
@@ -1,5 +1,35 @@
 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 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  <drousso@apple.com>
+
         Web Inspector: Uncaught Exception: null is not an object (evaluating 'url.startsWith')
         https://bugs.webkit.org/show_bug.cgi?id=194029
 
index 59ef477..8656948 100644 (file)
@@ -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 userAgentTitle = userAgentRow.appendChild(document.createElement("td"));
+    userAgentTitle.textContent = WI.UIString("User Agent:");
 
-    let userAgentValueContainer = userAgentContainer.appendChild(document.createElement("span"));
-    userAgentValueContainer.classList.add("user-agent-value");
+    let userAgentValue = userAgentRow.appendChild(document.createElement("td"));
+    userAgentValue.classList.add("user-agent");
 
-    let userAgentSelect = userAgentValueContainer.appendChild(document.createElement("select"));
+    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 settingsGroupTitle = settingsGroupRow.appendChild(document.createElement("td"));
+        settingsGroupTitle.textContent = group.name;
+
+        let settingsGroupValue = settingsGroupRow.appendChild(document.createElement("td"));
 
-        let columnContainer = container.appendChild(document.createElement("div"));
-        columnContainer.classList.add("columns");
+        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)
index cfbaead..31a70cb 100644 (file)
@@ -388,66 +388,48 @@ body[dir=rtl] .go-to-arrow {
 }
 
 .device-settings-content {
-    padding: 8px;
-}
-
-.device-settings-content .container {
-    margin-top: 8px;
+    padding: 0 4px;
+    border-collapse: separate;
+    border-spacing: 4px 8px;
 }
 
-.device-settings-content .columns {
-    display: flex;
+.device-settings-content > tr > td:first-child {
+    text-align: end;
+    vertical-align: top;
 }
 
-.device-settings-content .columns > .column {
+.device-settings-content .container {
     display: flex;
-    flex-direction: column;
 }
 
-.device-settings-content .columns > .column + .column {
-    -webkit-margin-start: 20px;
+.device-settings-content .container > * + * {
+    -webkit-margin-start: 8px;
 }
 
-.device-settings-content .user-agent-value {
-    display: inline-block;
-    position: relative;
+.device-settings-content .column {
+    display: flex;
+    flex-direction: column;
 }
 
-.device-settings-content .user-agent-value > select {
-    -webkit-margin-start: 4px;
+.device-settings-content .user-agent select {
+    display: block;
+    margin: -2px 0 0;
 }
 
-.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;
+.device-settings-content .user-agent input {
+    display: block;
+    width: 100%;
+    margin: 6px 0 0;
 }
 
-body[dir=ltr] .device-settings-content .user-agent-value > input {
-    right: var(--offset-end);
+.device-settings-content label + label {
+    margin-top: 4px;
 }
 
-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;
 }