Fossil

Check-in [e5c3ffeb]
Login

Check-in [e5c3ffeb]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Reverted [33610b04de8fdf56] because a subtle bug in Chrome and FF causes both browsers to break scrolling of elements if they are descendants, however deeply nested, of a fieldset element. The one known workaround for that is too fragile. This is not release-critical.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | post-2.12-fixes
Files: files | file ages | folders
SHA3-256: e5c3ffeb36dd2927fb2d808ae6ba780f14140d43314ce13519f664b9cb223fae
User & Date: stephan 2020-08-16 10:05:42
Context
2020-08-16
13:33
Fix scrolling bug in FF and Chrome. ... (check-in: 22f2d083 user: drh tags: trunk)
10:05
Reverted [33610b04de8fdf56] because a subtle bug in Chrome and FF causes both browsers to break scrolling of elements if they are descendants, however deeply nested, of a fieldset element. The one known workaround for that is too fragile. This is not release-critical. ... (Closed-Leaf check-in: e5c3ffeb user: stephan tags: post-2.12-fixes)
2020-08-14
18:54
Consolidated the common styles of the bottom- and right-side forum post expansion toggles and resolved a layout quirk which could cause the right-side expander to sit too far to the left. ... (check-in: db1afa75 user: stephan tags: trunk)
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/default.css.

︙︙
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016

  margin: 0;
  display: flex;
  flex-direction: column;
  border-width: 1px;
  border-style: outset;
  border-color: inherit;
}
.tab-container > .tabs > .tab-panel,
.tab-container > .tabs > fieldset.tab-wrapper {
  align-self: stretch;
  flex: 10 1 auto;
  display: flex;
  flex-direction: row;
  border: 0;
  padding: 0;
  margin: 0;
}
.tab-container > .tabs > fieldset.tab-wrapper > .tab-panel{
  align-self: stretch;
  flex: 10 1 auto;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
}








|
<
<
<
<
<
<
<
<
<
<








992
993
994
995
996
997
998
999










1000
1001
1002
1003
1004
1005
1006

  margin: 0;
  display: flex;
  flex-direction: column;
  border-width: 1px;
  border-style: outset;
  border-color: inherit;
}
.tab-container > .tabs > .tab-panel {










  align-self: stretch;
  flex: 10 1 auto;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
}
︙︙

Changes to src/fossil.tabs.js.

︙︙
28
29
30
31
32
33
34
35
36

37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

  */
  TabManager.defaultOptions = {
    tabAccessKeys: true
  };

  /**
     Internal helper to normalize a method argument to a tab
     element. arg may be a tab DOM element or an index into
     tabMgr.e.tabs.childNodes. Returns the corresponding tab element.

  */
  const tabArg = function(arg,tabMgr){
    if('string'===typeof arg) arg = E(arg);
    else if(tabMgr && 'number'===typeof arg && arg>=0){
      arg = tabMgr.e.tabs.childNodes[arg];
    }
    if(arg){
      if('FIELDSET'===arg.tagName && arg.classList.contains('tab-wrapper')){
        arg = arg.firstElementChild;
      }
    }
    return arg;
  };

  /**
    Sets sets the visibility of tab element e to on or off. e MUST be
    a TabManager tab element which has been wrapped in a
    FIELDSET.tab-wrapper parent element. We disable the hidden
    FIELDSET.tab-wrapper elements so that any access keys assigned
    to their children cannot be inadvertently triggered
  */
  const setVisible = function(e,yes){
    const fsWrapper = e.parentElement/*FIELDSET wrapper*/;
    if(yes){
      D.removeClass(e, 'hidden');
      D.enable(fsWrapper);
    }else{
      D.addClass(e, 'hidden');
      D.disable(fsWrapper);
    }
  };

  TabManager.prototype = {
    /**
       Initializes the tabs associated with the given tab container
       (DOM element or selector for a single element). This must be
       called once before using any other member functions of a given








|
|
>






<
<
<
<
<





|
<
<
<


<
<
<
<
<
|
<
<








28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43





44
45
46
47
48
49



50
51





52


53
54
55
56
57
58
59

  */
  TabManager.defaultOptions = {
    tabAccessKeys: true
  };

  /**
     Internal helper to normalize a method argument to a tab
     element. arg may be a tab DOM element, a selector string, or an
     index into tabMgr.e.tabs.childNodes. Returns the corresponding
     tab element.
  */
  const tabArg = function(arg,tabMgr){
    if('string'===typeof arg) arg = E(arg);
    else if(tabMgr && 'number'===typeof arg && arg>=0){
      arg = tabMgr.e.tabs.childNodes[arg];
    }





    return arg;
  };

  /**
    Sets sets the visibility of tab element e to on or off. e MUST be
    a TabManager tab element.



  */
  const setVisible = function(e,yes){





    D[yes ? 'removeClass' : 'addClass'](e, 'hidden');


  };

  TabManager.prototype = {
    /**
       Initializes the tabs associated with the given tab container
       (DOM element or selector for a single element). This must be
       called once before using any other member functions of a given
︙︙
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178

      if(!f.click){
        f.click = function(e){
         e.target.$manager.switchToTab(e.target.$tab);
        };
      }
      tab = tabArg(tab);
      tab.remove();
      const eFs = D.addClass(D.fieldset(), 'tab-wrapper');
      D.append(eFs, D.addClass(tab,'tab-panel'));
      D.append(this.e.tabs, eFs);
      const tabCount = this.e.tabBar.childNodes.length+1;
      const lbl = tab.dataset.tabLabel || 'Tab #'+tabCount;
      const btn = D.addClass(D.append(D.span(), lbl), 'tab-button');
      D.append(this.e.tabBar,btn);
      btn.$manager = this;
      btn.$tab = tab;
      if(this.options.tabAccessKeys){








<
<
|








148
149
150
151
152
153
154


155
156
157
158
159
160
161
162

      if(!f.click){
        f.click = function(e){
         e.target.$manager.switchToTab(e.target.$tab);
        };
      }
      tab = tabArg(tab);
      tab.remove();


      D.append(this.e.tabs, D.addClass(tab,'tab-panel'));
      const tabCount = this.e.tabBar.childNodes.length+1;
      const lbl = tab.dataset.tabLabel || 'Tab #'+tabCount;
      const btn = D.addClass(D.append(D.span(), lbl), 'tab-button');
      D.append(this.e.tabBar,btn);
      btn.$manager = this;
      btn.$tab = tab;
      if(this.options.tabAccessKeys){
︙︙
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250

      if(tab===this._currentTab) return this;
      else if(this._currentTab){
        this._dispatchEvent('before-switch-from', this._currentTab);
      }
      delete this._currentTab;
      this.e.tabs.childNodes.forEach((e,ndx)=>{
        const btn = this.e.tabBar.childNodes[ndx];
        e = e.firstElementChild /* b/c arguments[0] is a FIELDSET wrapper */;
        if(e===tab){
          if(D.hasClass(e,'selected')){
            return;
          }
          self._dispatchEvent('before-switch-to',tab);
          setVisible(e, true);
          this._currentTab = e;








<








220
221
222
223
224
225
226

227
228
229
230
231
232
233

      if(tab===this._currentTab) return this;
      else if(this._currentTab){
        this._dispatchEvent('before-switch-from', this._currentTab);
      }
      delete this._currentTab;
      this.e.tabs.childNodes.forEach((e,ndx)=>{
        const btn = this.e.tabBar.childNodes[ndx];

        if(e===tab){
          if(D.hasClass(e,'selected')){
            return;
          }
          self._dispatchEvent('before-switch-to',tab);
          setVisible(e, true);
          this._currentTab = e;
︙︙