Skip to content

Commit

Permalink
Revert: changes to editor, editor.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@eight04
eight04 committed Aug 11, 2017
1 parent 685f360 commit b4b2f61
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 157 deletions.
22 changes: 2 additions & 20 deletions edit.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,11 +82,6 @@
<button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
</div>
</template>
<template data-id="sectionUserstyle">
<div>
<textarea class="code"></textarea>
</div>
</template>
<template data-id="find">
<span i18n-text="search">: <input type="text" class="CodeMirror-search-field" spellcheck="false">
<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
Expand Down Expand Up @@ -122,12 +117,6 @@
<template data-id="resizeGrip">
<div class="resize-grip" i18n-title="cm_resizeGripHint"></div>
</template>
<template data-id="sectionHeading">
<h2 id="sections-heading"><span i18n-text="styleSectionsTitle"></span><svg class="svg-icon info help-button"><use xlink:href="#svg-icon-help"/></svg></h2>
</template>
<template data-id="sectionHeadingUserstyle">
<h2 id="sections-heading"><span i18n-text="styleSectionsUserstyleTitle"></span><svg class="svg-icon info help-button"><use xlink:href="#svg-icon-help"/></svg></h2></h2>
</template>
</head>

<body id="stylus-edit">
Expand All @@ -136,9 +125,6 @@ <h1 id="heading">&nbsp;</h1> <!-- nbsp allocates the actual height which prevent
<section id="basic-info">
<div id="basic-info-name">
<input id="name" class="style-contributor" i18n-placeholder="styleMissingName" spellcheck="false">
<svg id="name-help" class="svg-icon info">
<use xlink:href="#svg-icon-help"/>
</svg>
<a id="url" target="_blank"><svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg></a>
</div>
<div id="basic-info-enabled">
Expand All @@ -148,18 +134,14 @@ <h1 id="heading">&nbsp;</h1> <!-- nbsp allocates the actual height which prevent
<use xlink:href="#svg-icon-help"/>
</svg>
</div>
<div id="basic-info-userstyle">
<input type="checkbox" id="is-userstyle" class="style-contributor">
<label for="is-userstyle" i18n-text="styleIsUserStyleLabel"></label>
</div>
</section>
<section id="actions">
<div>
<button id="save-button" title="Ctrl-S" i18n-text="styleSaveLabel"></button>
<button id="beautify" i18n-text="styleBeautify"></button>
<a href="manage.html"><button id="cancel-button" i18n-text="styleCancelEditLabel"></button></a>
</div>
<div id="mozilla-format">
<div>
<h2 id="mozilla-format-heading" i18n-text="styleMozillaFormatHeading"><svg id="to-mozilla-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2>
<button id="from-mozilla" i18n-text="importLabel"></button>
<button id="to-mozilla" i18n-text="exportLabel"></button>
Expand Down Expand Up @@ -208,7 +190,7 @@ <h2 id="options-heading" i18n-text="optionsHeading"></h2>
<section id="lint"><h2 i18n-text="issues">: <span id="issue-count"></span><svg id="lint-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2><div></div></section>
</div>
<section id="sections">

<h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span><svg id="sections-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2>
</section>
<div id="help-popup">
<div class="title"></div><svg id="sections-help" class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg></svg>
Expand Down
3 changes: 0 additions & 3 deletions edit/edit.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -572,6 +572,3 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
position: static;
}
}
.hidden {
display: none;
}
153 changes: 19 additions & 134 deletions edit/edit.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint brace-style: 0, operator-linebreak: 0 */
/* global CodeMirror exports parserlib CSSLint saveStyleSourceSafe */
/* global CodeMirror exports parserlib CSSLint */
'use strict';

let styleId = null;
Expand Down Expand Up @@ -1248,11 +1248,10 @@ function init() {
}
window.onload = () => {
window.onload = null;
redrawSections({sections: [section]});
addSection(null, section);
editors[0].setOption('lint', CodeMirror.defaults.lint);
// default to enabled
document.getElementById('enabled').checked = true;
document.getElementById('is-userstyle').checked = false;
initHooks();
};
return;
Expand Down Expand Up @@ -1282,14 +1281,6 @@ function setStyleMeta(style) {
document.getElementById('name').value = style.name;
document.getElementById('enabled').checked = style.enabled;
document.getElementById('url').href = style.url;
setIsUserstyle(style.isUserStyle);
}

function setIsUserstyle(isUserStyle) {
document.getElementById('name').disabled = isUserStyle;
document.getElementById('mozilla-format').classList.toggle('hidden', Boolean(isUserStyle));
document.getElementById('is-userstyle').checked = isUserStyle;
document.getElementById('is-userstyle').disabled = Boolean(styleId);
}

function initWithStyle({style, codeIsUpdated}) {
Expand All @@ -1301,20 +1292,8 @@ function initWithStyle({style, codeIsUpdated}) {
return;
}

redrawSections(style);

initHooks();
}

function redrawSections(style) {
redrawSectionsHeader(style);
// if this was done in response to an update, we need to clear existing sections
getSections().forEach(div => { div.remove(); });

if (document.getElementById('is-userstyle').checked) {
drawUserstyleEditor(style);
return;
}
const queue = style.sections.length ? style.sections.slice() : [{code: ''}];
const queueStart = new Date().getTime();
// after 100ms the sections will be added asynchronously
Expand All @@ -1327,6 +1306,7 @@ function redrawSections(style) {
setTimeout(processQueue, 0);
}
})();
initHooks();

function add() {
const sectionDiv = addSection(null, queue.shift());
Expand All @@ -1339,58 +1319,18 @@ function redrawSections(style) {
}
}

function redrawSectionsHeader(style) {
let templateName, popupHelp;
if (document.getElementById('is-userstyle').checked) {
templateName = 'sectionHeadingUserstyle';
popupHelp = showUserstyleHelp;
} else {
templateName = 'sectionHeading';
popupHelp = showSectionHelp;
}
const heading = template[templateName].cloneNode(true);
const help = heading.querySelector('.help-button');
if (help && popupHelp) {
help.addEventListener('click', popupHelp, false);
}
const oldHeading = document.getElementById('sections-heading');
if (oldHeading) {
oldHeading.parentNode.replaceChild(heading, oldHeading);
} else {
const parent = document.getElementById('sections');
parent.insertBefore(heading, parent.childNodes[0]);
}
}

function drawUserstyleEditor(style) {
const div = template.sectionUserstyle.cloneNode(true);
const codeElement = div.querySelector('.code');

if (style) {
codeElement.value = style.source;
}

const sections = document.getElementById('sections');

sections.appendChild(div);
div.CodeMirror = setupCodeMirror(codeElement);
setCleanSection(div);
return div;
}

function initHooks() {
document.querySelectorAll('#header .style-contributor').forEach(node => {
node.addEventListener('change', onChange);
node.addEventListener('input', onChange);
});
document.getElementById('name-help').addEventListener('click', showNameHelp);
document.getElementById('is-userstyle').addEventListener('change', toggleEditorMode);
document.getElementById('toggle-style-help').addEventListener('click', showToggleStyleHelp);
document.getElementById('to-mozilla').addEventListener('click', showMozillaFormat, false);
document.getElementById('to-mozilla-help').addEventListener('click', showToMozillaHelp, false);
document.getElementById('from-mozilla').addEventListener('click', fromMozillaFormat);
document.getElementById('beautify').addEventListener('click', beautify);
document.getElementById('save-button').addEventListener('click', save, false);
document.getElementById('sections-help').addEventListener('click', showSectionHelp, false);
document.getElementById('keyMap-help').addEventListener('click', showKeyMapHelp, false);
document.getElementById('cancel-button').addEventListener('click', goBackToManage);
document.getElementById('lint-help').addEventListener('click', showLintHelp);
Expand Down Expand Up @@ -1418,24 +1358,6 @@ function initHooks() {
}


function toggleEditorMode(event) {
const USERSTYLE_TEMPLATE = `/* ==UserStyle==
@name My Style
@namespace example.com
@version 0.1.0
@include http://www.example.com/
==/UserStyle== */
body {
background: skyblue;
}
`;

setIsUserstyle(event.target.checked);
redrawSections({sections: [], source: USERSTYLE_TEMPLATE});
}


function toggleContextMenuDelete(event) {
if (event.button === 2 && prefs.get('editor.contextDelete')) {
chrome.contextMenus.update('editor.contextDelete', {
Expand Down Expand Up @@ -1492,12 +1414,9 @@ function maximizeCodeHeight(sectionDiv, isLast) {
});
}

function updateTitle(style) {
function updateTitle() {
const DIRTY_TITLE = '* $';

if (style && style.name) {
document.getElementById('name').savedValue = style.name;
}
const name = document.getElementById('name').savedValue;
const clean = isCleanGlobal();
const title = styleId === null ? t('addStyleTitle') : t('editStyleTitle', [name]);
Expand Down Expand Up @@ -1544,37 +1463,21 @@ function save() {
editors[i].save();
}

const error = validate();
if (error) {
alert(error);
return;
}
const name = document.getElementById('name').value;
const enabled = document.getElementById('enabled').checked;
const isUserStyle = document.getElementById('is-userstyle').checked;

if (!isUserStyle) {
const error = validate();
if (error) {
alert(error);
return;
}
}

let pending;
if (isUserStyle) {
pending = saveStyleSourceSafe({
id: styleId,
enabled: enabled,
reason: 'editSave',
source: getSource()
});
} else {
pending = saveStyleSafe({
id: styleId,
name: name,
enabled: enabled,
reason: 'editSave',
sections: getSectionsHashes()
});
}

pending.then(saveComplete, saveFailed);
saveStyleSafe({
id: styleId,
name: name,
enabled: enabled,
reason: 'editSave',
sections: getSectionsHashes()
})
.then(saveComplete);
}

function getSectionsHashes() {
Expand All @@ -1591,10 +1494,6 @@ function getSectionsHashes() {
return sections;
}

function getSource() {
return getSections()[0].CodeMirror.getValue();
}

function getMeta(e) {
const meta = {urls: [], urlPrefixes: [], domains: [], regexps: []};
e.querySelector('.applies-to-list').childNodes.forEach(li => {
Expand All @@ -1621,13 +1520,7 @@ function saveComplete(style) {
history.replaceState({}, document.title, 'edit.html?id=' + style.id);
$('#heading').textContent = t('editStyleHeading');
}
updateTitle(style);
setStyleMeta(style);
}

function saveFailed(error) {
console.log(error);
alert(error);
updateTitle();
}

function showMozillaFormat() {
Expand Down Expand Up @@ -1812,18 +1705,10 @@ function fromMozillaFormat() {
}
}

function showNameHelp() {
showHelp(t('helpAlt'), t('styleNameHelp'));
}

function showSectionHelp() {
showHelp(t('styleSectionsTitle'), t('sectionHelp'));
}

function showUserstyleHelp() {
showHelp(t('styleSectionsUserstyleTitle'), t('userstyleHelp'));
}

function showAppliesToHelp() {
showHelp(t('appliesLabel'), t('appliesHelp'));
}
Expand Down

0 comments on commit b4b2f61

Please sign in to comment.