From 20141b7bfa7f840bd21a597ad437b4d8d2278cfb Mon Sep 17 00:00:00 2001 From: tophf Date: Sat, 11 Jul 2015 17:35:04 +0300 Subject: [PATCH 1/4] Editor: add global-replace/replaceAll commands * Collateral fix: correctly restore openDialog() after Esc * refactor html templates --- _locales/en/messages.json | 24 +++++ edit.html | 9 ++ edit.js | 211 ++++++++++++++++++++++++++++++-------- 3 files changed, 201 insertions(+), 43 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index b594d71f..580ef244 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -100,6 +100,18 @@ "message": "Theme", "description": "Label for the style editor's CSS theme." }, + "confirmNo": { + "message": "No", + "description": "'No' button in a confirm dialog" + }, + "confirmStop": { + "message": "Stop", + "description": "'Stop' button in a confirm dialog" + }, + "confirmYes": { + "message": "Yes", + "description": "'Yes' button in a confirm dialog" + }, "dbError": { "message": "An error has occurred using the Stylish database. Would you like to visit a web page with possible solutions?", "description": "Prompt when a DB error is encountered" @@ -229,6 +241,18 @@ "message": "Show number of styles active for the current site on the toolbar button", "description": "Label for the checkbox controlling toolbar badge text." }, + "replace": { + "message": "Replace", + "description": "Label before the replace input field in the editor shown on Ctrl-H" + }, + "replaceAll": { + "message": "Replace all", + "description": "Label before the replace input field in the editor shown on 'replaceAll' hotkey" + }, + "replaceWith": { + "message": "Replace with", + "description": "Label before the replace-with input field in the editor shown on Ctrl-H etc." + }, "search": { "message": "Search", "description": "Label before the search input field in the editor shown on Ctrl-F" diff --git a/edit.html b/edit.html index 680fb56e..18d67a66 100644 --- a/edit.html +++ b/edit.html @@ -160,6 +160,15 @@ outline: -webkit-focus-ring-color auto 5px; outline-offset: -2px; } + .CodeMirror-search-field { + width: 10em; + } + .CodeMirror-jump-field { + width: 5em; + } + .CodeMirror-search-hint { + color: #888; + } @-webkit-keyframes highlight { from { background-color: #ff9; diff --git a/edit.js b/edit.js index d1cf8b61..7ad00314 100644 --- a/edit.js +++ b/edit.js @@ -10,8 +10,8 @@ var useHistoryBack; // use browser history back when "back to manage" is click var propertyToCss = {urls: "url", urlPrefixes: "url-prefix", domains: "domain", regexps: "regexp"}; var CssToProperty = {"url": "urls", "url-prefix": "urlPrefixes", "domain": "domains", "regexp": "regexps"}; -// templates -var appliesToTemplate = tHTML('\ +var template = { +appliesTo: '\
  • \ \ @@ -46,12 +44,44 @@ var sectionTemplate = tHTML('\ \ \ \ -'); - -var findTemplate = t("search") + ':  ' + - '(' + t("searchRegexp") + ')'; - -var jumpToLineTemplate = t('editGotoLine') + ': '; + ', +find: '\ + : \ +  \ + ()\ + \ + ', +replace: '\ + : \ +  \ + ()\ + \ + ', +replaceAll: '\ + : \ +  \ + ()\ + \ + ', +replaceWith: '\ + : \ + \ + \ + ', +replaceConfirm: '\ + ? \ +  \ +  \ + \ + \ + ', +jumpToLine: '\ + : \ + \ + \ + ' +} +Object.keys(template).forEach(function(name) { template[name] = tHTML(template[name]); }); // make querySelectorAll enumeration code readable ["forEach", "some", "indexOf"].forEach(function(method) { @@ -61,6 +91,12 @@ var jumpToLineTemplate = t('editGotoLine') + ': = 0) { + if (dlg) { + dlg.remove(); + } + doReplace(); + } + } + }); + originalOpenConfirm.call(cm, template.replaceConfirm.innerHTML, ovrCallbacks, opt); + }; + } + } + + function replaceAll(cm) { + replace(cm, true); + } + CodeMirror.commands.find = find; CodeMirror.commands.findNext = findNext; CodeMirror.commands.findPrev = findPrev; + CodeMirror.commands.replace = replace; + CodeMirror.commands.replaceAll = replaceAll; } function jumpToLine(cm) { var cur = cm.getCursor(); - cm.openDialog(jumpToLineTemplate, function(str) { + cm.openDialog(template.jumpToLine.innerHTML, function(str) { var m = str.match(/^\s*(\d+)(?:\s*:\s*(\d+))?\s*$/); if (m) { cm.setCursor(m[1] - 1, m[2] ? m[2] - 1 : cur.ch); @@ -1087,7 +1212,7 @@ function validate() { // validate the regexps if (document.querySelectorAll(".applies-to-list").some(function(list) { return list.childNodes.some(function(li) { - if (li.className == appliesToEverythingTemplate.className) { + if (li.className == template.appliesToEverything.className) { return false; } var valueElement = li.querySelector("[name=applies-value]"); @@ -1153,7 +1278,7 @@ function getSections() { function getMeta(e) { var meta = {}; e.querySelector(".applies-to-list").childNodes.forEach(function(li) { - if (li.className == appliesToEverythingTemplate.className) { + if (li.className == template.appliesToEverything.className) { return; } var type = li.querySelector("[name=applies-type]").value; From 2e7c35e8f08d9c4b8f9153e138f4a569eafc1241 Mon Sep 17 00:00:00 2001 From: tophf Date: Sat, 11 Jul 2015 19:57:22 +0300 Subject: [PATCH 2/4] Editor: highlight CodeMirror mini-dialogs entirely --- edit.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/edit.html b/edit.html index 18d67a66..54e07390 100644 --- a/edit.html +++ b/edit.html @@ -153,7 +153,7 @@ .CodeMirror-vscrollbar { margin-bottom: 8px; /* make space for resize-grip */ } - .CodeMirror-search-field, .CodeMirror-jump-field { + .CodeMirror-dialog { -webkit-animation: highlight 3s ease-out; } .CodeMirror-focused { @@ -174,7 +174,7 @@ background-color: #ff9; } to { - background-color: transparent; + background-color: none; } } .resize-grip { From 4f61494e0d925efe74c0be0d13a3bf0dc3c3275c Mon Sep 17 00:00:00 2001 From: tophf Date: Sun, 19 Jul 2015 18:27:19 +0300 Subject: [PATCH 3/4] Move html templates to html file --- edit.html | 67 ++++++++++++++++++++++++++++++++++++++++++++- edit.js | 73 ------------------------------------------------- localization.js | 6 ++++ manage.html | 20 ++++++++++++-- manage.js | 18 +----------- popup.html | 21 ++++++++++++-- popup.js | 19 +------------ 7 files changed, 110 insertions(+), 114 deletions(-) diff --git a/edit.html b/edit.html index 54e07390..8542773c 100644 --- a/edit.html +++ b/edit.html @@ -125,7 +125,7 @@ display: none; } #sections > div > button:not(:first-of-type) { - margin-left: 0.4rem; + margin-left: 0.2rem; } .dirty > label::before { content: "*"; @@ -443,6 +443,71 @@ } + + + + + + + + + + + diff --git a/edit.js b/edit.js index 7ad00314..4dd08fa9 100644 --- a/edit.js +++ b/edit.js @@ -10,79 +10,6 @@ var useHistoryBack; // use browser history back when "back to manage" is click var propertyToCss = {urls: "url", urlPrefixes: "url-prefix", domains: "domain", regexps: "regexp"}; var CssToProperty = {"url": "urls", "url-prefix": "urlPrefixes", "domain": "domains", "regexp": "regexps"}; -var template = { -appliesTo: '\ -
  • \ - \ - \ - \ - \ -
    • \ - ', -appliesToEverything: '\ -
  • \ - \ -
    • \ - ', -section: '\ -
    \ - \ - \ -
    \ -
    \ - \ -
      \ -
      \ - \ - \ - \ -
      \ - ', -find: '\ - : \ -  \ - ()\ - \ - ', -replace: '\ - : \ -  \ - ()\ - \ - ', -replaceAll: '\ - : \ -  \ - ()\ - \ - ', -replaceWith: '\ - : \ - \ - \ - ', -replaceConfirm: '\ - ? \ -  \ -  \ - \ - \ - ', -jumpToLine: '\ - : \ - \ - \ - ' -} -Object.keys(template).forEach(function(name) { template[name] = tHTML(template[name]); }); - // make querySelectorAll enumeration code readable ["forEach", "some", "indexOf"].forEach(function(method) { NodeList.prototype[method]= Array.prototype[method]; diff --git a/localization.js b/localization.js index e758fdc2..23871ab6 100644 --- a/localization.js +++ b/localization.js @@ -1,3 +1,4 @@ +var template = {}; tDocLoader(); function t(key, params) { @@ -35,6 +36,11 @@ function tNodeList(nodes) { if (node.nodeType != 1) { // not an ELEMENT_NODE continue; } + if (node.localName == "template") { + tNodeList(node.content.querySelectorAll("*")); + template[node.dataset.id] = node.content.firstElementChild; + continue; + } for (var a = node.attributes.length - 1; a >= 0; a--) { var attr = node.attributes[a]; var name = attr.nodeName; diff --git a/manage.html b/manage.html index 58da0dec..735b3056 100644 --- a/manage.html +++ b/manage.html @@ -46,9 +46,6 @@ .applies-to, .actions { padding-left: 15px; } - .actions > * { - margin-right: 5px; - } .applies-to-extra { font-weight: bold; } @@ -129,6 +126,23 @@ } + + + diff --git a/manage.js b/manage.js index 3e67b9d4..2814ba6e 100644 --- a/manage.js +++ b/manage.js @@ -1,19 +1,3 @@ -var styleTemplate = tHTML('\ -
      \ -

      \ -

      \ -

      \ - \ - \ - \ - \ - \ - \ - \ -

      \ -
      \ -'); - var lastUpdatedStyleId = null; var installed; @@ -44,7 +28,7 @@ function showStyles(styles) { } function createStyleElement(style) { - var e = styleTemplate.cloneNode(true); + var e = template.style.cloneNode(true); e.setAttribute("class", style.enabled == "true" ? "enabled" : "disabled"); e.setAttribute("style-id", style.id); if (style.updateUrl) { diff --git a/popup.html b/popup.html index 0c04796b..1ca5579d 100644 --- a/popup.html +++ b/popup.html @@ -61,7 +61,7 @@ text-decoration: line-through; } #installed .actions a { - margin-right: 0.5em; + margin-right: 0.2em; } body > .actions { margin-top: 0.5em; @@ -115,7 +115,7 @@ .breadcrumbs > .write-style-link:last-child::before {content: "\200b/"} .breadcrumbs > .write-style-link:last-child:first-child::before, .breadcrumbs > .write-style-link[subdomain=""] + .write-style-link::before {content: none} - + /* suppress TLD-only link */ .breadcrumbs > .write-style-link[subdomain=""] {display: none} @@ -130,6 +130,23 @@ } + + diff --git a/popup.js b/popup.js index 761b25ec..7b02eeda 100644 --- a/popup.js +++ b/popup.js @@ -1,20 +1,3 @@ -var styleTemplate = tHTML('\ -
      \ -
      \ - \ -
      \ -
      \ - \ -
      \ - \ - \ - \ - \ -
      \ -
      \ -
      \ -'); - var writeStyleTemplate = document.createElement("a"); writeStyleTemplate.className = "write-style-link"; @@ -102,7 +85,7 @@ function showStyles(styles) { } function createStyleElement(style) { - var e = styleTemplate.cloneNode(true); + var e = template.style.cloneNode(true); var checkbox = e.querySelector(".checker"); checkbox.id = "style-" + style.id; checkbox.checked = style.enabled == "true"; From ea18ae2c8987a02e6bb2ad18d3cfd74c4f3b64c2 Mon Sep 17 00:00:00 2001 From: tophf Date: Sun, 19 Jul 2015 19:49:17 +0300 Subject: [PATCH 4/4] Editor: avoid flicker of "Edit style" heading on load --- edit.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/edit.js b/edit.js index 4dd08fa9..894e463d 100644 --- a/edit.js +++ b/edit.js @@ -1013,6 +1013,7 @@ function init() { return; } // This is an edit + tE("heading", "editStyleHeading", null, false); requestStyle(); function requestStyle() { chrome.extension.sendMessage({method: "getStyles", id: params.id}, function callback(styles) { @@ -1031,7 +1032,6 @@ function initWithStyle(style) { document.getElementById("name").value = style.name; document.getElementById("enabled").checked = style.enabled == "true"; document.getElementById("url").href = style.url; - tE("heading", "editStyleHeading", null, false); // if this was done in response to an update, we need to clear existing sections document.querySelectorAll("#sections > div").forEach(function(div) { div.parentNode.removeChild(div); @@ -1225,6 +1225,7 @@ function saveComplete(style) { // Go from new style URL to edit style URL if (location.href.indexOf("id=") == -1) { history.replaceState({}, document.title, "edit.html?id=" + style.id); + tE("heading", "editStyleHeading", null, false); } updateTitle(); }