[refactor] improve link add and edit form help text

Author: zombieFox

src/css/form.css

@@ -1032,7 +1032,7 @@ input[type="range"][disabled]::-moz-range-progress{
 
 .form-group{
 margin:001em0;
-display:inline-flex;
+display: flex;
 justify-content: flex-start;
 align-items: stretch;
 width:100%;

src/js/link.js

@@ -476,15 +476,15 @@ var link = (function(){
 form.querySelector(".link-form-input-icon").setAttribute("disabled","");
 form.querySelector(".form-group-text").setAttribute("disabled","");
 form.querySelector(".link-form-input-icon").setAttribute("disabled","");
-form.querySelector(".link-form-input-helper-icon").setAttribute("disabled","");
+helper.addClass(form.querySelector(".link-form-input-icon-helper"),"disabled");
 form.querySelector(".link-form-icon-clear").setAttribute("disabled","");
 form.querySelector(".link-form-text-icon").tabIndex=-1;
 }elseif(stagedLink.data.display=="icon"){
 form.querySelector(".link-form-input-letter").setAttribute("disabled","");
 form.querySelector(".link-form-input-icon").removeAttribute("disabled");
 form.querySelector(".form-group-text").removeAttribute("disabled");
 form.querySelector(".link-form-input-icon").removeAttribute("disabled");
-form.querySelector(".link-form-input-helper-icon").removeAttribute("disabled");
+helper.removeClass(form.querySelector(".link-form-input-icon-helper"),"disabled");
 form.querySelector(".link-form-icon-clear").removeAttribute("disabled");
 form.querySelector(".link-form-input-display-icon").checked=true;
 form.querySelector(".link-form-text-icon").tabIndex=1;
@@ -593,20 +593,20 @@ var link = (function(){
 variconFormGroupText=helper.node("div|class:form-group-text link-form-text-icon,tabindex:-1,disabled");
 variconFormGroupClear=helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");
 variconFormGroupClearIcon=helper.node("span|class:icon-close");
-variconPara=helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-helper-icon input-helper small muted,disabled");
+variconPara=helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-icon-helper form-helper small muteddisabled");
 varnameInputWrap=helper.node("div|class:input-wrap");
 varnameLabel=helper.node("label:Name|for:link-form-input-name");
 varnameInput=helper.node("input|type:text,class:link-form-input-name mb-0,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
 varurlInputWrap=helper.node("div|class:input-wrap");
 varurlLabel=helper.node("label:URL|for:link-form-input-url");
 varurlInput=helper.node("input|type:text,class:link-form-input-url mb-0,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
 varcolorWrap=helper.node("div|class:input-wrap");
-varcolorFormGroup=helper.node("div|class:form-group");
+varcolorFormGroup=helper.node("div|class:form-group mb-0");
 varcolorLabel=helper.node("label:Accent override|for:link-form-input-color");
 varcolorInput=helper.node("input|id:link-form-input-color,class:link-form-input-color mb-0,type:color,value:"+helper.rgbToHex(state.get().theme.accent.current)+",tabindex:1");
 varcolorButtonRefresh=helper.node("button|class:button mb-0,type:button,tabindex:1");
 varcolorButtonRefreshIcon=helper.node("span|class:icon-refresh");
-varcolorPara=helper.node("p:Use this colour to override the global Accent colour.|class:input-helper small muted");
+varcolorInputHelper=helper.node("p:Use this colour to override the global Accent colour.|class:form-helper small muted");
 varletterRadioInputWrap=helper.node("div|class:input-wrap");
 varletterRadioInput=helper.node("input|class:link-form-input-display-letter,id:link-form-input-display-letter,type:radio,name:link-form-input-display,tabindex:1,checked,value:letter");
 varletterRadioLable=helper.node("label:Letters|for:link-form-input-display-letter");
@@ -644,8 +644,8 @@ var link = (function(){
 colorFormGroup.appendChild(colorButtonRefresh);
 colorWrap.appendChild(colorLabel);
 colorWrap.appendChild(colorFormGroup);
-colorWrap.appendChild(colorPara);
 fieldset.appendChild(colorWrap);
+fieldset.appendChild(colorInputHelper);
 form.appendChild(fieldset);
 
 letterRadioInput.addEventListener("change",function(event){
@@ -690,15 +690,15 @@ var link = (function(){
 letterInput.removeAttribute("disabled");
 iconInput.setAttribute("disabled","");
 iconFormGroupText.setAttribute("disabled","");
-iconPara.setAttribute("disabled","");
+helper.addClass(form.querySelector(".link-form-input-icon-helper"),"disabled");
 iconFormGroupClear.setAttribute("disabled","");
 iconFormGroupText.tabIndex=-1;
 },false);
 iconRadioInput.addEventListener("change",function(event){
 letterInput.setAttribute("disabled","");
 iconInput.removeAttribute("disabled");
 iconFormGroupText.removeAttribute("disabled");
-iconPara.removeAttribute("disabled");
+helper.removeClass(form.querySelector(".link-form-input-icon-helper"),"disabled");
 iconFormGroupClear.removeAttribute("disabled");
 iconFormGroupText.tabIndex=1;
 },false);

src/js/version.js

@@ -1,6 +1,6 @@
 varversion=(function(){
 
-varcurrent="3.64.0";
+varcurrent="3.65.0";
 
 varcompare=function(a,b){
 varpa=a.split(".");

src/manifest.json

@@ -2,7 +2,7 @@
 "name": "nightTab",
 "short_name": "nightTab",
 "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-"version": "3.64.0",
+"version": "3.65.0",
 "manifest_version": 2,
 "chrome_url_overrides":{
 "newtab": "index.html"