UI: CSS/Layout fixes on the recording page
1) Layout issues when ticking any chrome toggle:
The problem here is that when any Chrome option is
enabled, the corresponding config snippet contains a
very long line without any space, that causes the
instructions page to have a very large width. By doing
do it screws up the grid layout:
https://screenshot.googleplex.com/9xpAEKY1PrB
https://screenshot.googleplex.com/afsiC5k6V9c
Solution: use pre-wrap + break-word.
2) Layout issues in the select box:
A very subtle width:auto in the multi-select elements
was causing the whole record-container grid layout to
not respect its proportions.
Before: https://screenshot.googleplex.com/2CGTOZJSDHf
After: https://screenshot.googleplex.com/q4QvgxzRtj9
Test: manual
Change-Id: I18ab54e4b86940aca916a22fb169e051709355da
diff --git a/ui/src/assets/record.scss b/ui/src/assets/record.scss
index 7600ebd..62e88f4 100644
--- a/ui/src/assets/record.scss
+++ b/ui/src/assets/record.scss
@@ -693,7 +693,6 @@
&.two-columns {
height: 400px;
- width: auto;
margin: var(--record-section-padding);
optgroup {
display: grid;
@@ -719,10 +718,6 @@
height: 152px;
}
- .chrome-categories {
- height: 152px;
- }
-
textarea.extra-input {
width: 100%;
height: 60px;
@@ -774,6 +769,8 @@
font-size: 12px;
line-height: 20px;
overflow-y: auto;
+ white-space: pre-wrap;
+ word-wrap: break-word;
// 510px and not 500px, so the overflowing line gets truncated, giving
// a clear indication that the code box scrolls.
diff --git a/ui/src/frontend/record_page.ts b/ui/src/frontend/record_page.ts
index 65e0dcf..4053907 100644
--- a/ui/src/frontend/record_page.ts
+++ b/ui/src/frontend/record_page.ts
@@ -619,7 +619,7 @@
return m(Dropdown, {
title: 'Additional Chrome categories',
- cssClass: '.multicolumn.two-columns.chrome-categories',
+ cssClass: '.multicolumn.two-columns',
options: categoriesMap,
set: (cfg, val) => cfg.chromeCategoriesSelected = val,
get: (cfg) => cfg.chromeCategoriesSelected
@@ -854,7 +854,7 @@
'Start Recording'.`)) :
[];
}
- return m(CodeSnippet, {text: getRecordCommand(target), hardWhitespace: true});
+ return m(CodeSnippet, {text: getRecordCommand(target)});
}
function getRecordCommand(target: RecordingTarget) {
diff --git a/ui/src/frontend/record_widgets.ts b/ui/src/frontend/record_widgets.ts
index 3d683f7..ebc2267 100644
--- a/ui/src/frontend/record_widgets.ts
+++ b/ui/src/frontend/record_widgets.ts
@@ -258,12 +258,7 @@
onclick: () => copyToClipboard(attrs.text),
},
m('i.material-icons', 'assignment')),
- m('code',
- {
- style: {
- 'white-space': attrs.hardWhitespace ? 'pre' : null,
- },
- },
- attrs.text), );
+ m('code', attrs.text),
+ );
}
}