Commit 30eafbaf authored by Eugene Ostroukhov's avatar Eugene Ostroukhov Committed by Commit Bot

DevTools: Cleanup "help-" prefix

Removes "help-" prefix from the classnames as none of those styles are
used on an actual help screens. Also, disables Ctrl+A on settings
screens.

Bug: 778585
Change-Id: I28bcd05122c1e06952db4597db2038d73f15e089
Reviewed-on: https://chromium-review.googlesource.com/822924Reviewed-by: default avatarJoel Einbinder <einbinder@chromium.org>
Reviewed-by: default avatarDmitry Gozman <dgozman@chromium.org>
Commit-Queue: Eugene Ostroukhov <eostroukhov@chromium.org>
Cr-Commit-Position: refs/heads/master@{#524114}
parent a3833d66
...@@ -14,8 +14,8 @@ Emulation.DevicesSettingsTab = class extends UI.VBox { ...@@ -14,8 +14,8 @@ Emulation.DevicesSettingsTab = class extends UI.VBox {
var header = this.element.createChild('header'); var header = this.element.createChild('header');
header.createChild('h3').createTextChild(Common.UIString('Emulated Devices')); header.createChild('h3').createTextChild(Common.UIString('Emulated Devices'));
this.containerElement = this.element.createChild('div', 'help-container-wrapper') this.containerElement = this.element.createChild('div', 'settings-container-wrapper')
.createChild('div', 'settings-tab help-content help-container'); .createChild('div', 'settings-tab settings-content settings-container');
var buttonsRow = this.containerElement.createChild('div', 'devices-button-row'); var buttonsRow = this.containerElement.createChild('div', 'devices-button-row');
this._addCustomButton = this._addCustomButton =
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* found in the LICENSE file. * found in the LICENSE file.
*/ */
.devices-settings-tab .settings-tab.help-content { .devices-settings-tab .settings-tab.settings-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
......
...@@ -10,8 +10,8 @@ Persistence.WorkspaceSettingsTab = class extends UI.VBox { ...@@ -10,8 +10,8 @@ Persistence.WorkspaceSettingsTab = class extends UI.VBox {
var header = this.element.createChild('header'); var header = this.element.createChild('header');
header.createChild('h3').createTextChild(Common.UIString('Workspace')); header.createChild('h3').createTextChild(Common.UIString('Workspace'));
this.containerElement = this.element.createChild('div', 'help-container-wrapper') this.containerElement = this.element.createChild('div', 'settings-container-wrapper')
.createChild('div', 'settings-tab help-content help-container'); .createChild('div', 'settings-tab settings-content settings-container');
Persistence.isolatedFileSystemManager.addEventListener( Persistence.isolatedFileSystemManager.addEventListener(
Persistence.IsolatedFileSystemManager.Events.FileSystemAdded, Persistence.IsolatedFileSystemManager.Events.FileSystemAdded,
......
...@@ -16,7 +16,7 @@ header > h3 { ...@@ -16,7 +16,7 @@ header > h3 {
padding-bottom: 3px; padding-bottom: 3px;
} }
.help-content { .settings-content {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
margin: 8px 8px 8px 0; margin: 8px 8px 8px 0;
...@@ -24,14 +24,13 @@ header > h3 { ...@@ -24,14 +24,13 @@ header > h3 {
flex: auto; flex: auto;
} }
.help-container { .settings-container {
width: 100%; width: 100%;
-webkit-user-select: auto;
-webkit-column-width: 288px; -webkit-column-width: 288px;
} }
.settings-tab.help-container { .settings-tab.settings-container {
-webkit-column-width: 308px; -webkit-column-width: 308px;
} }
...@@ -40,7 +39,7 @@ header > h3 { ...@@ -40,7 +39,7 @@ header > h3 {
display: inline-flex; display: inline-flex;
} }
.help-container-wrapper { .settings-container-wrapper {
position: absolute; position: absolute;
top: 31px; top: 31px;
left: 0px; left: 0px;
...@@ -50,7 +49,7 @@ header > h3 { ...@@ -50,7 +49,7 @@ header > h3 {
padding-top: 9px; padding-top: 9px;
} }
.settings-tab.help-content { .settings-tab.settings-content {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
...@@ -103,7 +102,7 @@ p.folder-exclude-pattern > input { ...@@ -103,7 +102,7 @@ p.folder-exclude-pattern > input {
margin: 20px 0; margin: 20px 0;
} }
.settings-tab.help-content.help-container { .settings-tab.settings-content.settings-container {
-webkit-column-width: initial; -webkit-column-width: initial;
overflow: hidden; overflow: hidden;
padding-right: 10px; padding-right: 10px;
......
...@@ -37,7 +37,7 @@ Settings.SettingsScreen = class extends UI.VBox { ...@@ -37,7 +37,7 @@ Settings.SettingsScreen = class extends UI.VBox {
this.registerRequiredCSS('settings/settingsScreen.css'); this.registerRequiredCSS('settings/settingsScreen.css');
this.contentElement.tabIndex = 0; this.contentElement.tabIndex = 0;
this.contentElement.classList.add('help-window-main'); this.contentElement.classList.add('settings-window-main');
this.contentElement.classList.add('vbox'); this.contentElement.classList.add('vbox');
var settingsLabelElement = createElement('div'); var settingsLabelElement = createElement('div');
...@@ -118,8 +118,8 @@ Settings.SettingsTab = class extends UI.VBox { ...@@ -118,8 +118,8 @@ Settings.SettingsTab = class extends UI.VBox {
this.element.id = id; this.element.id = id;
var header = this.element.createChild('header'); var header = this.element.createChild('header');
header.createChild('h3').createTextChild(name); header.createChild('h3').createTextChild(name);
this.containerElement = this.element.createChild('div', 'help-container-wrapper') this.containerElement = this.element.createChild('div', 'settings-container-wrapper')
.createChild('div', 'settings-tab help-content help-container'); .createChild('div', 'settings-tab settings-content settings-container');
} }
/** /**
...@@ -127,9 +127,9 @@ Settings.SettingsTab = class extends UI.VBox { ...@@ -127,9 +127,9 @@ Settings.SettingsTab = class extends UI.VBox {
* @return {!Element} * @return {!Element}
*/ */
_appendSection(name) { _appendSection(name) {
var block = this.containerElement.createChild('div', 'help-block'); var block = this.containerElement.createChild('div', 'settings-block');
if (name) if (name)
block.createChild('div', 'help-section-title').textContent = name; block.createChild('div', 'settings-section-title').textContent = name;
return block; return block;
} }
}; };
......
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
* found in the LICENSE file. * found in the LICENSE file.
*/ */
.help-window-main { .settings-window-main {
color: rgb(48, 57, 66); color: rgb(48, 57, 66);
background-color: white; background-color: white;
padding: 11px 0 0 0; padding: 11px 0 0 0;
} }
.help-content { .settings-content {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
margin: 8px 8px 8px 0; margin: 8px 8px 8px 0;
...@@ -18,30 +18,29 @@ ...@@ -18,30 +18,29 @@
flex: auto; flex: auto;
} }
.help-footnote { .settings-footnote {
border-top: 1px solid #EEEEEE; border-top: 1px solid #EEEEEE;
margin: 0; margin: 0;
padding: 12px; padding: 12px;
} }
.help-container { .settings-container {
width: 100%; width: 100%;
-webkit-user-select: auto;
-webkit-column-width: 288px; -webkit-column-width: 288px;
} }
.help-block { .settings-block {
display: block; display: block;
padding-bottom: 9px; padding-bottom: 9px;
width: 288px; width: 288px;
-webkit-column-break-inside: avoid; -webkit-column-break-inside: avoid;
} }
.settings-tab.help-container { .settings-tab.settings-container {
-webkit-column-width: 308px; -webkit-column-width: 308px;
} }
.settings-tab .help-block { .settings-tab .settings-block {
margin-left: 20px; margin-left: 20px;
} }
...@@ -50,12 +49,12 @@ ...@@ -50,12 +49,12 @@
height: 0; /* Avoid changing element height when content is set. */ height: 0; /* Avoid changing element height when content is set. */
} }
.help-line { .settings-line {
padding-bottom: 5px; padding-bottom: 5px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.help-key-cell { .settings-key-cell {
display: inline-block; display: inline-block;
width: 153px; width: 153px;
white-space: nowrap; white-space: nowrap;
...@@ -64,18 +63,18 @@ ...@@ -64,18 +63,18 @@
padding-right: 6px; padding-right: 6px;
} }
.help-cell { .settings-cell {
display: inline-block; display: inline-block;
width: 135px; width: 135px;
vertical-align: middle; vertical-align: middle;
} }
.help-section-title { .settings-section-title {
font-size: 120%; font-size: 120%;
text-align: left; text-align: left;
} }
.help-key { .settings-key {
padding: 0.1em 0.6em; padding: 0.1em 0.6em;
border: 1px solid #ccc; border: 1px solid #ccc;
font-size: 11px; font-size: 11px;
...@@ -90,16 +89,16 @@ ...@@ -90,16 +89,16 @@
white-space: nowrap; white-space: nowrap;
} }
.help-combine-keys, .settings-combine-keys,
.help-key-delimiter { .settings-key-delimiter {
font-size: 9px; font-size: 9px;
} }
.help-combine-keys { .settings-combine-keys {
margin: 0 0.3em; margin: 0 0.3em;
} }
.help-key-delimiter { .settings-key-delimiter {
margin: 0 0.5em; margin: 0 0.5em;
display: none; display: none;
} }
...@@ -116,15 +115,15 @@ fieldset { ...@@ -116,15 +115,15 @@ fieldset {
flex-shrink: 0; flex-shrink: 0;
} }
#general-tab-content .help-block fieldset legend { #general-tab-content .settings-block fieldset legend {
font-size: 14px; font-size: 14px;
} }
.help-block p p { .settings-block p p {
padding-left: 30px; padding-left: 30px;
} }
.help-content p.help-section { .settings-content p.settings-section {
margin: 0 0 15px 0; margin: 0 0 15px 0;
} }
...@@ -136,7 +135,7 @@ fieldset { ...@@ -136,7 +135,7 @@ fieldset {
color: inherit; color: inherit;
} }
.help-content input[type=checkbox] { .settings-content input[type=checkbox] {
margin: 1px 7px 1px 2px; margin: 1px 7px 1px 2px;
} }
...@@ -146,7 +145,7 @@ fieldset { ...@@ -146,7 +145,7 @@ fieldset {
padding: 0 0 5px 13px; padding: 0 0 5px 13px;
} }
.help-container-wrapper { .settings-container-wrapper {
position: absolute; position: absolute;
top: 31px; top: 31px;
left: 0px; left: 0px;
...@@ -156,7 +155,7 @@ fieldset { ...@@ -156,7 +155,7 @@ fieldset {
padding-top: 9px; padding-top: 9px;
} }
.settings-tab.help-content { .settings-tab.settings-content {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
...@@ -175,11 +174,11 @@ fieldset { ...@@ -175,11 +174,11 @@ fieldset {
border-bottom: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE;
} }
#experiments-tab-content .help-container { #experiments-tab-content .settings-container {
-webkit-column-width: 470px; -webkit-column-width: 470px;
} }
#experiments-tab-content .help-block { #experiments-tab-content .settings-block {
width: 470px; width: 470px;
margin-left: 0; margin-left: 0;
} }
...@@ -191,16 +190,16 @@ fieldset { ...@@ -191,16 +190,16 @@ fieldset {
padding-bottom: 3px; padding-bottom: 3px;
} }
.settings-tab .help-section-title { .settings-tab .settings-section-title {
margin-left: -20px; margin-left: -20px;
color: #222; color: #222;
} }
.settings-tab .help-block fieldset:disabled label:hover { .settings-tab .settings-block fieldset:disabled label:hover {
color: inherit; color: inherit;
} }
.settings-tab .help-block label:hover { .settings-tab .settings-block label:hover {
color: #222; color: #222;
} }
...@@ -212,7 +211,7 @@ fieldset { ...@@ -212,7 +211,7 @@ fieldset {
margin-left: 10px; margin-left: 10px;
} }
.help-indent-labels label { .settings-indent-labels label {
padding-left: 10px; padding-left: 10px;
} }
......
...@@ -220,13 +220,13 @@ UI.ShortcutsScreen = class { ...@@ -220,13 +220,13 @@ UI.ShortcutsScreen = class {
widget.element.className = 'settings-tab-container'; // Override widget.element.className = 'settings-tab-container'; // Override
widget.element.createChild('header').createChild('h3').createTextChild(Common.UIString('Shortcuts')); widget.element.createChild('header').createChild('h3').createTextChild(Common.UIString('Shortcuts'));
var scrollPane = widget.element.createChild('div', 'help-container-wrapper'); var scrollPane = widget.element.createChild('div', 'settings-container-wrapper');
var container = scrollPane.createChild('div'); var container = scrollPane.createChild('div');
container.className = 'help-content help-container'; container.className = 'settings-content settings-container';
for (var i = 0; i < orderedSections.length; ++i) for (var i = 0; i < orderedSections.length; ++i)
orderedSections[i].renderSection(container); orderedSections[i].renderSection(container);
var note = scrollPane.createChild('p', 'help-footnote'); var note = scrollPane.createChild('p', 'settings-footnote');
note.appendChild(UI.createDocumentationLink( note.appendChild(UI.createDocumentationLink(
'iterate/inspect-styles/shortcuts', Common.UIString('Full list of DevTools keyboard shortcuts and gestures'))); 'iterate/inspect-styles/shortcuts', Common.UIString('Full list of DevTools keyboard shortcuts and gestures')));
...@@ -289,18 +289,18 @@ UI.ShortcutsSection = class { ...@@ -289,18 +289,18 @@ UI.ShortcutsSection = class {
* @param {!Element} container * @param {!Element} container
*/ */
renderSection(container) { renderSection(container) {
var parent = container.createChild('div', 'help-block'); var parent = container.createChild('div', 'settings-block');
var headLine = parent.createChild('div', 'help-line'); var headLine = parent.createChild('div', 'settings-line');
headLine.createChild('div', 'help-key-cell'); headLine.createChild('div', 'settings-key-cell');
headLine.createChild('div', 'help-section-title help-cell').textContent = this.name; headLine.createChild('div', 'settings-section-title settings-cell').textContent = this.name;
for (var i = 0; i < this._lines.length; ++i) { for (var i = 0; i < this._lines.length; ++i) {
var line = parent.createChild('div', 'help-line'); var line = parent.createChild('div', 'settings-line');
var keyCell = line.createChild('div', 'help-key-cell'); var keyCell = line.createChild('div', 'settings-key-cell');
keyCell.appendChild(this._lines[i].key); keyCell.appendChild(this._lines[i].key);
keyCell.appendChild(this._createSpan('help-key-delimiter', ':')); keyCell.appendChild(this._createSpan('settings-key-delimiter', ':'));
line.createChild('div', 'help-cell').textContent = this._lines[i].text; line.createChild('div', 'settings-cell').textContent = this._lines[i].text;
} }
} }
...@@ -310,7 +310,7 @@ UI.ShortcutsSection = class { ...@@ -310,7 +310,7 @@ UI.ShortcutsSection = class {
* @return {!Node} * @return {!Node}
*/ */
_renderSequence(sequence, delimiter) { _renderSequence(sequence, delimiter) {
var delimiterSpan = this._createSpan('help-key-delimiter', delimiter); var delimiterSpan = this._createSpan('settings-key-delimiter', delimiter);
return this._joinNodes(sequence.map(this._renderKey.bind(this)), delimiterSpan); return this._joinNodes(sequence.map(this._renderKey.bind(this)), delimiterSpan);
} }
...@@ -320,8 +320,8 @@ UI.ShortcutsSection = class { ...@@ -320,8 +320,8 @@ UI.ShortcutsSection = class {
*/ */
_renderKey(key) { _renderKey(key) {
var keyName = key.name; var keyName = key.name;
var plus = this._createSpan('help-combine-keys', '+'); var plus = this._createSpan('settings-combine-keys', '+');
return this._joinNodes(keyName.split(' + ').map(this._createSpan.bind(this, 'help-key')), plus); return this._joinNodes(keyName.split(' + ').map(this._createSpan.bind(this, 'settings-key')), plus);
} }
/** /**
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment